HTML标签总结

目录

一、基本骨架

二、标签 

基础标签

1、标题标签：h1 ~ h6（双标签）

2、段落标签：p（双标签）

 3、换行与水平线标签

 4、文本格式化标签

5、图像标签

6、 超链接

 7、音频标签

8、视频标签 

进阶标签

9、列表标签

10、表格

11、表单

（1）input

（2）单选框

（3）上传文件

（4）多选框

（5）下拉菜单

（6）文本域

12、label 标签

13、按钮

布局标签

1、无语义的布局标签

2、有语义的布局标签

3、字符实体

---

一、基本骨架

1、head：网页头部，用来存放给浏览器看的信息，例如CSS

2、title：网页标题

3、body：网页主体，用来存放给用户看的信息，例如图片、文字

二、标签 

基础标签

1、标题标签：h1 ~ h6（双标签）

• 文字加粗
• 字号逐渐减小
• 独占一行（换行）

2、段落标签：p（双标签）

• 独占一行
• 段落之间存在间隙

 3、换行与水平线标签

换行：<br>（单标签）

水平线：<hr>（单标签）

 4、文本格式化标签

5、图像标签

 <img src="图像地址" alt="替换文本" title="提示文本">

6、 超链接

<a href="链接">跳转到xxx</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

 7、音频标签

<audio src="音频的 URL"></audio>

8、视频标签 

<video src="视频的 URL"></video>

进阶标签

9、列表标签

（1）无序列表

作用：布局排列整齐的 不需要规定顺序 的区域。

标签： ul 嵌套 li ， ul 是无序列表， li 是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

注意事项：

ul 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

（2）有序列表

作用：布局排列整齐的 需要规定顺序 的区域。

标签： ol 嵌套 li ， ol 是有序列表， li 是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

注意事项：

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

（3）定义列表

标签： dl 嵌套 dt 和 dd ， dl 是定义列表， dt 是定义列表的标题， dd 是定义列表的描述 / 详情。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
  <dd>列表描述 / 详情</dd>
</dl>

dl 里面只能包含 dt 和 dd

dt 和 dd 里面可以包含任何内容

10、表格

标签： table 嵌套 tr ， tr 嵌套 td / th 。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>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>

跨行合并 ，保留最上单元格，添加属性 rowspan

跨列合并 ，保留最左单元格，添加属性 colspan

#合并列
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->

注意：不能跨表格结构标签合并单元格（thead、 tbody 、 tfoot ）

11、表单

（1）input

<input type="...">
<input type="..." placeholder="提示信息">

 

（2）单选框

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

（3）上传文件

<input type="file" multiple>

（4）多选框

<input type="checkbox" checked> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打游戏

 

（5）下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

<select>
  <option selected>南京</option>
  <option>上海</option>
  <option>广州</option>
  <option>海南</option>
  <option>湖南</option>
</select>

（6）文本域

<textarea>默认提示文字</textarea>

12、label 标签

作用：网页中，某个标签的说明文本

（1）写法一

label 标签只包裹内容，不包裹表单控件

设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

（2）写法二：使用 label 标签包裹文字和表单控件，不需要属性

<label><input type="radio"> 女</label>

13、按钮

<button type="">按钮</button>

布局标签

1、无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div ：独占一行

span ：不换行

2、有语义的布局标签

3、字符实体