Language - HTML - 标签

文章摘要： 本文章只整理常用的标签和属性。

提示：建议通过浏览器中自带的的网页关键词搜索来快速定位。

文本标签

提示

标签可以嵌套叠加来实现多种不同效果。

`<h1> ~ <h6>`

<h1> </h1> ~ <h6> </h6>定义网页标题。

表单标签

`<form>`

<form> </form>
定义一个 HTML 表单，用于接收用户输入。

属性

action
功能：数据提交的URL地址。
参数：
method
功能：提交方式。
参数：get、post

案例

`<input>`

<input/>
定义一个输入控件。
需要写在<form> </form>表单标签中。

属性

type
功能：选择类型。
参数：text文本框、password密码框、radio单选框、checkbox多选框、button按钮、file 选择文件按钮、submit提交按钮、reset重置按钮
name
功能：取一个变量名。
参数：字符串。
value
功能：显示文字。
参数：数字、字符串、布尔。
placeholder
功能：提示文字，用户不可修改，且在输入值时会消失。
参数：字符串
checked
功能：是否被选中。
参数：
maxlength
功能：设定最大长度。
参数：

案例

<form>
 <!--文本框-->
 <input type="text" />
 <!--密码框-->
 <input type="password" />
 <!--单选框 设置相同`name`属性的参数-->
 <input type="radio" name="int" checked/>一年级
 <input type="radio" name="int"/>二年级
 <input type="radio" name="int"/>三年级
 <!--多选框-->
 <input type="checkbox" name="task"/>吃饭
 <input type="checkbox" name="task"/>睡觉
 <input type="checkbox" name="task"/>打游戏
 <!--按钮-->
 <input type="button" value="按钮" />
 <!--提交按钮-->
 <input type="submit" value="提交按钮" />
 <!--清空按钮-->
 <input type="reset" value="清空按钮" />
 <!--选择文件按钮-->
 <input type="file" />
</form>

`<textarea>`

<textarea> </textarea>
定义多行的文本输入控件。

`<button>`

<button> </button>定义按钮。

`<select>`

<select> </select>
定义选择列表（下拉列表）。

属性

selected
功能：
参数：selected默认。

案例

<select>
    <option>困难</option>
    <option selected="selected">正常</option>
    <option>简单</option>
</select>

`<optgroup>`

<optgroup> </optgroup>定义选择列表中相关选项的组合。

`<option>`

<option> </option>定义选择列表中的选项。

`<label>`

<label> </label>定义 input 元素的标注。
作用：<label>标签用于与表单控件（如输入字段、复选框、单选按钮等）相关联。当用户点击<label>标签时，浏览器会自动将焦点转移到与之关联的表单控件上。这对于提高表单的可访问性和用户体验非常有用。
提示：为了确保<label>与表单控件正确关联，请确保for属性的值与相关表单控件的id属性值完全匹配。

案例

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

`<fieldset>`

<fieldset> </fieldset>区域块，围绕<form>表单中元素的边框。

`<legend>`

<legend> </legend>定义 <fieldset>区域块标签的标题。

`<datalist>`

<datalist> </datalist>规定了 input 元素可能的选项列表。

`<keygen>`

<keygen />规定用于表单的密钥对生成器字段。

`<output>`

<output> </output>定义一个计算的结果

框架标签

`<html>`

<html> </html>：定义一个 HTML 文档。

`<body>`

<body> </body>：定义文档的主体。

`<div>`

<div> </div>
定义文档中的节。
块级元素，常用于组合其他 HTML 元素的容器。

`<br>`

<br />
换行。

属性

``
功能：
参数：

案例

<br />

`<hr>`

分割的作用。
创建一条分割线。
提示：若不指定width长度属性，则默认是父级的画面宽度。

属性

width
功能：线条长度。
参数：数值。
size
功能：线条宽度。
参数：数值。

案例

<hr width="50px" size="2px"/>

`<iframe>`

<iframe> </iframe>
定义内联框架。
在当前网页中显示另一个网页的内容。

属性

src
功能：指向显示的位置。
参数：字符串类型的网址。
width
功能：设置宽度。
参数：数值。
height
功能：设置高度。
参数：数值。
frameborder
功能：边框宽度
参数：数值。

案例

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

图像标签

`<img>`

<img />
定义图像。
提示：当只指定“宽度”或“高度”时，图像将自动等比缩放。

属性

src
功能：添加图片资源。
参数：字符串类型的“本地文件路径”或“网络URL地址”。
alt
功能：若图片未加载时，显示文本。
参数：字符串。
width
功能：设置图片宽度。
参数：数值。
height
功能：设置图片高度。
参数：数值。

案例

<img src="./头像.jpg" alt="头像" width="100px" height="100px" />

音视频标签

`<audio>`

<audio> </audio>
定义声音，比如音乐或其他音频流。

属性

src
功能：指定资源路径。
参数：字符串类型的文件路径。
controls
功能：为资源添加控制器。
参数：false不启用、true启用。（若不启用视频将无法播放）

案例

<audio src="./音频.mp3" controls="true"> </audio>

`<video>`

<video> </video>
定义一个音频或者视频。

属性

src
功能：指定资源路径。
参数：字符串类型的文件路径。
controls
功能：为添加控制器。
参数：false不启用、true启用。（若不启用视频将无法播放）

案例

<video src="./视频.mp4" controls="true"> </video>

`<source>`

<source />定义media元素<video>和<audio>的媒体资源。

`<track>`

<track />为媒体<video和audio>元素定义外部文本轨道。

链接标签

`<a>`

<a> </a>
定义一个超链接。

属性

href
功能：要链接的网址。
参数：字符串类型的网址。
target
功能：要如何打开链接的页面。
参数：_blank新页面打开、_parent当前页面跳出父框架打开、_self当前页面打开、_top当前页面最外层框架打开。

案例

<a href="https://www.baidu.com/">百度搜索</a>

`<link>`

<link />定义文档与外部资源的关系，导入CSS样式文件。

列表标签

`<ul>`

<ul> </ul>
定义一个无序列表

属性

功能：
参数：

案例

<ul>
 <li>无序列表元素01</li>
 <li>无序列表元素02</li>
 <li>无序列表元素03</li>
</ul>

`<ol>`

<ol> </ol>
定义一个有序列表

属性

``
功能：
参数：

案例

<ol>
 <li>有序列表元素01</li>
 <li>有序列表元素02</li>
 <li>有序列表元素03</li>
</ol>

`<li>`

<li> </li>
定义一个列表项/列表元素。
<li>需要写在<ul>无序列表/<ol>有序列表中。

属性

``
功能：
参数：

案例

<ul>
 <li>有序列表元素01</li>
 <li>有序列表元素02</li>
</ul>
<ol>
 <li>有序列表元素01</li>
 <li>有序列表元素02</li>
</ol>

`<dl>`

<dl> </dl>定义一个定义列表

`<dt>`

<dt> </dt>定义一个定义定义列表中的项目，标题部分。

`<dd>`

<dd> </dd>定义定义列表中项目的描述，内容部分。

<menu> </menu>定义菜单列表。

表格标签

提示：按需使用。

<table> </table>定义一个表格
<caption> </caption>定义表格标题。
<th> </th>定义表格中的列/表头单元格。（居中+加粗）
<tr> </tr>定义表格中的行。
<td> </td>定义表格中的列/单元格。
<thead> </thead>定义表格中的表头内容。
<tbody> </tbody>定义表格中的主体内容。
<tfoot> </tfoot>定义表格中的表注内容（脚注）。
<col />定义表格中一个或多个列的属性值。
<colgroup> </colgroup>定义表格中供格式化的列组。

属性

border
功能：表格的外部线框宽度。
参数：数值。
cellpadding
功能：单元格的内边距。
参数：数值。
cellspacing
功能：单元格的外边距。
参数：数值。
align
功能：表格中的内容对齐方式。
参数：left左对齐、right右对齐、center居中对齐
colspan
功能：向右合并，跨列合并。
参数：正整数。
rowspan
功能：向下合并，跨行合并。
参数：正整数。

案例

<!-- 表格 -->
<table>
 <!-- 表格标题 -->
 <caption> 表格标题 </caption>
 <!-- 表头 -->
 <thead>
  <!--表格的行-->
  <tr>
   <!-- 列/表头单元格 -->
   <th>标头01</th>
   <th>标头02</th>
   <th>标头03</th>
  </tr>
 </thead>

 <!-- 主体 -->
 <tbody>
  <!--表格的行-->
  <tr>
   <!-- 列/单元格 -->
   <td>1行1列</td>
   <td>1行2列</td>
   <td>1行3列</td>
  </tr>
  <!--表格的行-->
  <tr>
   <!-- 列/单元格 -->
   <td>2行1列</td>
   <td>2行2列</td>
   <td>2行3列</td>
  </tr>
 </tbody>

 <!-- 表注/脚注 -->
 <tfoot>
  <!--向右合并3个单元格-->
  <td colspan="3">总计：</td>
 </tfoot>

</table>