HTML常用标签
<strong>需要加粗的文字<strong>
<br>换行
<hr>分割线
<!-- 我是 HTML 注释 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签</p>
<em>倾斜标签</em>
<ins>下划线</ins>
<del>删除线</del>
<!-- <img src="图片的 URL" alt="图片无法加载的描述" title="图片的描述" width="宽度" height="高度"> -->
<img src="图片的 URL" alt="图片无法加载的描述" title="图片的描述" width="100" height="100" />
<!--<a href="https://www.baidu.com" target="属性设置为_blank新窗口打开">跳转到百度</a> -->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<!-- src= 音频的url，controls="控制台" loop="循环播放" autoplay = 自动播放 -->
<audio src="音频的 URL" controls="controls" loop="loop" autoplay></audio>
<!-- src= 视频的 URL，controls="控制台" loop="循环播放" autoplay = 自动播放 muted=静音播放 -->
<video src="视频的 URL" muted></video>
<ul>
<li>无序列表</li>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
<li>有序列表</li>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
</dl>
<!-- 跨行合并，保留最上单元格，添加属性 rowspan
跨列合并保留最左单元格，添加属性 colspan -->
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
<form action="提交地址" method="post">
<!-- 经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。 -->
<label for="用户名">用户名:</label>
<!-- placeholder="提示信息" checked="默认选中" disabled="禁用" readonly="只读" -->
<input type="text" id="用户名" name="用户名" placeholder="请输入用户名" /><br>
<label for="密码">密码:</label>
<input type="password" id="密码" name="密码" placeholder="请输入密码" /><br>
<label for="用户名">邮箱:</label>
<input type="email" id="邮箱" name="邮箱" placeholder="请输入邮箱" /><br>
<input type="radio" name="性别" id="1" checked="checked">男
<input type="radio" name="性别" id="0">女<br>
<input type="checkbox" name="爱好" id="1">篮球
<input type="checkbox" name="爱好" id="2">足球
<input type="checkbox" name="爱好" id="3">羽毛球<br>
<input type="file" name="文件" id=""><br>
<!-- 实际开发中，使用 CSS 设置 文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能 -->
<textarea>默认提示文字</textarea>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<!-- 默认显示第一项，selected 属性实现默认选中功能。 -->
<option selected>武汉</option>
</select><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>
<!-- 布局标签 -->
<nav>导航标签</nav>
<footer>底部导航栏</footer>
<aside>侧边栏</aside>
<section>网页区块/内容</section>
<article>网页文章</article>
</form>
CSS
外部引入CSS文件/内部使用
<link rel="stylesheet" href="./my.css">
<style> </style>
css选择器
<style>
/* 标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。*/
p {
color: red;
}
/* 定义类选择器 */
/* <div class="red">这是 div 标签</div> */
.red {
color: red;
}
/* 定义 id 选择器 */
/* <div id="red">这是 div 标签</div> */
#red {
color: red;
}
/* 查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式 */
* {
/* 通配符选择器可以用于**清除标签的默认样式**，例如：标签默认的外边距、内边距。 */
margin: 0;
padding: 0;
background-color: #3a3434;
width: 100%;
height: 100%;
}
/* 超链接伪类 */
/*
a标签在选中时生效
*/
a:hover {
color: green;
}
</style>
css文字可用属性格式
| 文字尺寸 | font-size: 30px; | PC 端网页最常用的单位 px |
| 文字默认的效果 | font-style:normal; | normal无效果italic倾斜 |
| 文字行高 | line-height: 30px; | PC 端网页最常用的单位 px |
| 背景色 | background-color: skyblue; | #3a3434 |
| 文本缩进 | text-indent: 2em; | 1em = 当前标签的字号大小 |
| 控制内容水平对齐方式 | text-align: center; | center居中对齐，left左对齐，right右对齐 |
| 文本修饰线 | text-decoration：none; | none无修饰线，underline下划线，line-through删除线 |
| 宽度 | width: 100%; | px或者百分号 |
| 高度 | height: 100%; | px或者百分号 |
css背景可用格式
| 背景图 | background-image: url(./images/1.png); | 路径 |
| 背景色 | background-color: #3a3434; | #3a3434 |
| 背景图片的重复方式 | background-repeat: no-repeat; | repeat=不重复，repeat-x 水平方向不重复，repeat-y 垂直方向不重复，repeat 重复 |
| 背景图位置 | background-position: center bottom; | 单词，px |
| 背景图缩放 | background-size: cover; | cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见，contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白 |
| 背景图固定 | background-attachment: fixed; |
设置浮动
| 设置浮动 | display:block | block块级沾满一行，inline-block行内块模式 |
块级元素
特点：
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素
特点：
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素
特点：
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
盒子模型
盒子模型-组成
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
边框线
四个方向
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
单方向边框线
属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
内边距
作用：设置 内容 与 盒子边缘 之间的距离。
- 属性名：padding / padding-方位名词
div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
提示：添加 padding 会撑大盒子。
- padding 多值写法
标签：padding,color,标签,前端,学习,background,相关,border,选择器 From： https://www.cnblogs.com/shmilyqaq/p/18086249技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。