HTML标签：标题、p、a、iframe、img、ol/ul、table、audio、vido、form、input、label、select、textarea、name属性以及css样式中的:nth

目录

• 一、标题标签
• 二、p段落标签
• 三、a超链接标签
• 四、iframe窗口标签
• 五、a锚点标签
• 六、img图片标签
• 七、ol/ul列表标签
• 八、table表格标签
• 九、audio音频标签
• 十、vido视频标签
• 十一、form表单标签
• 十二、input标签
• 十三、label标签
• 十四、css样式中的:nth-
• 十五、select下拉框标签
• 十六、textarea标签
• 十七、name属性

一、标题标签

• h1~h6，标题加粗放大的效果逐级减弱；
• 块级元素：标题独占一行，标签与标签之间会换行。

二、p段落标签

• 是段落标签。
• 标签之间间隔会大些。

三、a超链接标签

基本格式

<a href=""></a>

• a标签自带字体变蓝和下划线；
• 属性之间用空格隔开；
• 在当前页面跳转到新页面。

a标签的属性

• href：链接的目标地址
• target：指定打开链接方式
  • _self：当前页面打开（默认）
  • _blank：新窗口打开
  • _parent：父框架中打开
  • _top：顶层框架中打开
  • 自定义名字：可使用在iframe窗口标签中name的名字

四、iframe窗口标签

• 也叫框架标签；
• 作用：在本页面下，引用其他的资源；
• 不独占一行；
• 属性之间用空格隔开；
• 有些页面可进行嵌套，也写页面不行。

基本格式

<iframe src="" frameborder="0"></iframe>

示例：

<iframe src="https://www.baidu.com/" frameborder="0"></iframe>

效果图：

iframe窗口标签的属性

• width/height：设置宽高
• frameborder="0"：设置边界线显示，0=没有边界线
• name：给窗口起名字，可与a超链接中的target结合使用

示例

<a href="https://leetcode.cn/" target="demo">跳转到力扣</a>
<br>
<iframe src="https://www.baidu.com/" frameborder="0" name="demo" width="800px" height="600px">百度</iframe>

效果图：

五、a锚点标签

锚点标签的属性

• name：在顶部埋一个锚点
• href：除了可以放资源链接，还可以写锚点，描点前要加**#**
• 固定位置：页面内容过多，进行滚动，锚点可固定在某个位置，不跟随滚动条而滚动

示例

<!-- 埋锚点 -->
<a name="aa"></a>
……
……
……
其他标签内容
<!-- 使用锚点 固定位置-->
<div style="position: fixed;right: 100px;bottom: 30px;">
  <a href="#aa">跳转到顶部</a>
</div>

使用场景

• 书签
• 淘宝等购物软件，一键返回到顶部

六、img图片标签

基本格式

<img src="" alt="">

img标签的属性

• src：图片资源的地址
  • 绝对路径：地址在磁盘中
  • 相对路径：在同一文件夹下进行访问（通常使用的是相对路径，与项目一起打包）
• alt：给图片起名字，图片加载不出来时，才显示该图片的名字
• width/heigth：一般情况调一个属性，另一个会根据比例自动调整
• object-fit：图片进行缩放裁剪，防止图片变形
  • 属性值：
  • fill：内容拉伸完全填充容器，不保持原始比例，可能会变形
  • contain：内容会缩放适应容器，保持原始比例
  • cover：内容会缩放完全覆盖容器，保持原始比例，可能会被裁减
  • none：不进行任何缩放，保持原始比例
  • scale-down：内容会像none或contain一样缩放，选择两者中较小的尺寸

示例

<img src="../img/下载.png" alt="AI" style="width: 10px;object-fit: cover;">

七、ol/ul列表标签

ol：有序列表

ol标签的属性

• type：指定列表标记类型
  • 数字，默认值
  • 大/小写字母
  • 大/小写罗马数字
• start：指定列表的起始编号
• reversed：编号降序排列

ul：无序列表

可查看学习标签、属性、选择器和外部加样式这篇学习文章中的ul和li标签的内容。

八、table表格标签

与table标签一起使用的子标签

• tr：指定行数
• td：指定单元格
• th：指定表头单元格，有加粗居中的效果
• thead：指定表头，只要被它包起来了，统统在上面
• tfoot：指定表格页脚，只要被它包起来了，统统在最下面
• tbody：指定表格内容

table标签的属性

• border：设置单元格的边框，属性值是数字
• cellspacing：设置单元格之间的距离，属性值是数字
• cellpadding：设置单元格的填充度，属性值是数字
• width/height：设置整个单元格的宽高
• rowspan：设置行合并，属性值是数字
• colspan：设置列合并，属性值是数字

示例

<table border="1" cellspacing="0" cellpadding="10">
  <thead>
    <th>id</th>
    <th>name</th>
    <th>age</th>
    <th>sex</th>
    <th>class</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td rowspan="2">1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>21</td>
      <td>女</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">统计：三人信息</td>
    </tr>
  </tfoot>
</table>

效果图：

九、audio音频标签

基本格式

<audio src=""></audio>

audio标签的属性

• src：放置音频资源的地址
• controls：设置音频手动播放，写了controls默认属性值是true，因此不用再写属性值
• autoplay：设置音频自动播放
• loop：设置音频循环播放

示例

<audio src="音频资源地址" autoplay loop></audio>

十、vido视频标签

基本格式

<video src=""></video>

video标签的属性

• src：放置视频资源的地址
• controls：设置视频手动播放
• with/height：设置播放器窗口的宽高
• autoplay：设置视频自动播放
• loop：设置视频循环播放

十一、form表单标签

基本格式

<form action=""></form>

form标签的属性

• action：触发事件

十二、input标签

基本格式

<input type="">

input标签的属性

• type：控制输入类型
• name：与radio一起使用，name值一样，为一组，一组里有单选效果
• id：与下面的lable标签的for的属性值绑定
• max：range滑块/number数字的最大值
• min：range滑块/number数字的最小值
• value：range滑块/number数字自定义设置数值，进来时显示的当前值
• step：调整number数字加减的步长

input标签是type的属性值不同，它的输入类型不同。

type属性的属性值

• text：单行文本框
• password：密码框
• radio：单选框，样式有限，可以调节宽高，如果相加样式，可在label标签中加样式，在与其使用id属性绑定
• checkbox：多选框，同样可以lable标签联动
• file：文件选择器
• coler：颜色拾取器
• date：日期
• datetime-local：日期时间
• range：滑块
• number：数字
• button：普通按钮，可结合value属性
• reset：提交按钮，可结合value属性
• submit：重置按钮，可结合value属性

可以使用第三方组件库Layui选择各种按钮组件。
提交按钮和重置按钮只有在form标签中才能有效果。

示例

<form action=""></form>
  <input type="text">单行文本框<br>
  <input type="password" name="" id="">密码框<br>
  <p>单选框</p>
  <input type="radio" name="sex" id="man">男
  <input type="radio" name="sex" id="woman">女<br>
  <label for="man">男</label>
  <label for="woman">女</label><br>
  <p>多选框</p>
  <input type="checkbox">1
  <input type="checkbox">2
  <input type="checkbox">3<br>
  <input type="file">文件选择器<br>
  <input type="color">颜色拾取器<br>
  <input type="date">日期<br>
  <input type="datetime-local"><br>
  <input type="range" min="0" max="100" value="20">滑块<br>
  <input type="number" min="0" max="150" value="20" step="5">数字<br>
  <input type="button" value="普通按钮"><br><br>
  <input type="reset" value="提交按钮"><br><br>
  <input type="submit" value="重置按钮"><br><br>
</form>

效果图：

十三、label标签

扩大按钮的选择范围

基本格式

<label for=""></label>

label标签的属性

• for：与上面的input标签的id的属性值绑定

十四、css样式中的:nth-

:nth-child()：只认数字，不认类型。
:nth-of-type()：认数字，也认类型

十五、select下拉框标签

select是单选的下拉框。
select里对应的选项使用option标签。

基本格式

<select>
  <option></option>
</select>

示例

<select>
  <option>语文</option>
  <option>数学</option>
  <option>英语</option>
  <option>物理</option>
  <option>化学</option>
</select>

效果图：

十六、textarea标签

textarea是单行文本框多行文本域的标签。

textarea标签的属性

• rows：存的行数
• cols：一行存的字符数

示例

<textarea cols="50" rows="10"></textarea>

效果图：

十七、name属性

name属性作用：提交数据时，只有挂了name属性才能识别到。