标签

相关信息

标签是 HTML 中用于描述构建网页结构的元素。

显示模式

HTML 标签根据显示模式可以分为块级元素、行内元素、行内块元素。

块级元素显示时独占一行，可以设置宽高，宽度默认是父元素的宽度，高度默认由内容撑开。代表标签有：div、p、h、ul、li、form.

行内元素一行可以显示多个，不可以设置宽高，宽度和高度默认由内容撑开。代表标签有：a、span、strong、ins、em、del.

行内块元素一行可以显示多个，可以设置宽高。代表标签有：input、textarea、button、select.

元素显示模式转换使用 display 属性设置，取值为关键字：block（块级元素）、inline-block（行内块元素）、inline（行内元素）。

标签嵌套规范指定块级元素作为大容器，可以嵌套块级元素、行内元素、行内块元素、文本，但 p 标签中不能嵌套块级元素，a 标签中不能嵌套 a 标签。

注意

浏览器在解析行内标签和行内块元素时，如果标签换行书写则会产生一个空格的距离。

行内元素换行问题

<!-- 12紧挨着 -->
<span>1</span><span>2</span>
<br/>
<!-- 12之间存在空格 -->
<span>1</span>
<span>2</span>

标签属性

在标签内部设置标签属性。标签同时可以存在多个属性，属性之间、标签名与属性之间空格隔开，没有顺序之分。部分属性不需要值直接生效。

<标签名 属性A="属性值" 属性B="属性值" >

排版标签

标题

标题标签又称 h 标签，是一个双标签，使包裹的内容文本加粗、字体变大、独占一行。标题等级越大字体越小。

标题演示

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落

段落标签又称 p 标签，是一个双标签，用于分段显示，段落之间有间隙。

段落演示

<p>唧唧复唧唧，木兰当户织。</p>
<p>不闻机杼声，唯闻女叹息。</p>

换行

单标签（自闭合），用于行内元素之间的强制换行。

换行演示

<p>不闻机杼声，<br/>唯闻女叹息。</p>

水平线

单标签，展示一条分割不同内容的水平线，块级元素，独占一行。

水平线演示

<h2>木兰诗</h2>
<hr>
<p>唧唧复唧唧，木兰当户织。</p>

div

双标签，标记一块区域，块级元素，独占一行。

div演示

<div>唧唧复唧唧，木兰当户织。</div>
<div>不闻机杼声，唯闻女叹息。</div>

div语义化

在 HTML5 中推出的有语义的布局标签，功能与 div 一致。

• header 标识网页头部。
• nav 标识网页导航。
• footer 标识网页底部。
• aside 标识网页侧边栏。
• section 标识网页区块。
• article 标识网页文章。

span

双标签，行内元素。

span演示

<span>唧唧复唧唧，木兰当户织。</span>
<span>不闻机杼声，唯闻女叹息。</span>

无序列表

ul 双标签搭配 li 双标签，表示一组无顺序之分的列表，每一项前默认显示圆点标识。

无序列表演示

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

有序列表

ol 双标签搭配 li 双标签，表示一组有顺序之分的列表，每一项前默认显示序号标识。

有序列表演示

<ol>
    <li>MySQL</li>
    <li>SQLServer</li>
    <li>PostgreSQL</li>
</ol>

自定义列表

dl 双标签（表示自定义列表的整体）搭配 dt 双标签（表示列表的主题） 和 dd 双标签（表示每一项内容），自定义列表格式。

自定义列表演示

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

文本格式化标签

加粗

b 双标签，使文本字体加粗。strong 双标签是其语义化标签。

加粗演示

<b>木兰诗</b>
<strong>木兰诗</strong>

下划线

u 双标签，在文本下添加下划线。ins 双标签是其语义化标签。

下划线演示

<u>木兰诗</u>
<ins>木兰诗</ins>

倾斜

i 双标签，使文字倾斜。em 双标签是其语义化标签。

倾斜演示

<i>木兰诗</i>
<em>木兰诗</em>

删除线

s 双标签，在文本中间添加删除线。del 双标签是其语义化标签。

删除线演示

<s>木兰诗</s>
<del>木兰诗</del>

表格标签

table 双标签表示表格整体，包裹多个 tr 行标签。tr 双标签表示表格的一行，包裹多个 td 列标签，td 双标签表示一个单元格，包裹内容。

展示表格的标题：在 table 标签下使用 caption 双标签表示表格整体标题，默认在表格整体顶部居中显示。或在 tr 标签下使用 th 双标签表示一列的小标题，通常用于表格第一行，内容加粗并居中显示。

表格结构语义化：在 table 标签下使用 thead/tbody/tfoot 双标签标识表格的头部/主体/底部。

合并单元格：给单元格设置 rowspan/colspan 属性将水平/垂直的多个单元格合并成一个。

• rowspan="" 设置要合并单元格的个数，跨行合并，垂直合并。
• colspan="" 设置合并单元格的个数，跨列合并，水平合并。

相关信息

合并单元格遵循左上原则，即优先保留最上或者最左，其他删除。

订单列表案例

订单列表案例演示

<table border="2px" width="450px" height="50px">
  <caption><h2>订单列表</h2></caption>
    <thead>
        <tr>
            <th>订单ID</th>
            <th>商品</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Order001</td>
            <td rowspan="2">PP</td>
            <td><a href="#订单列表案例">发货</a></td>
        </tr>
        <tr>
            <td>Order002</td>

            <td><a href="#订单列表案例">收货</a></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3"><a href="#订单列表案例">帮助支持</a></th>
        </tr>
    </tfoot>
</table>

学生信息案例

学生信息案例演示

<table border="1" width="400" height="250">
    <caption><h2>学生信息</h2></caption>
    <thead>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>001</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>002</td>
            <td>三年三班</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>评语</td>
            <td colspan="3">优秀</td>
        </tr>
    </tfoot>
</table>

媒体标签

图片

img 单标签，显示图片。

属性：

• src=""：文件地址（source）。
• alt=""：图片加载失败时的提示信息。
• title=""：鼠标悬停在图片上显示。
• width=""：宽度。
• height=""：高度。

注意

宽高只设置一个时，另一个自动等比例缩放，图片不会变形。

宽高都设置时，设置不当图片将变形。

图片演示

<img src="https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800" alt="图片加载失败" title="图片标题">

音频

audio 双标签，在页面中插入音频文件。

属性：

• src=""：文件地址。
• controls：显示播放控件。
• autoplay：自动播放（部分浏览器禁止）。
• loop：循环播放。

音频演示

<audio src="http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3" controls loop></audio>

视频

video 双标签，在页面中插入视频。

属性：

• src=""：文件地址。
• controls：显示播放控件。
• autoplay：自动播放（部分浏览器禁止），谷歌浏览器搭配静音播放可不被禁止。
• muted：静音播放。
• loop：循环播放。

视频演示

<video src="./video.mp4" controls muted loop></video>

超链接

a 双标签，跳转到链接页面，标签内包裹要展示的文本内容。

属性：

• href=""：(hyperlink reference)，链接地址。 暂不确定路径时使用占位符#。
• target=""：链接打开的方式。
  • _self：默认属性值, 在当前网页跳转。
  • _blank：在新窗口中打开。

超链接演示

<a href="https://www.baidu.com" target="_blank">百度一下</a>
<br/>
<a href="http://lingyuan.tech" target="_blank">主页</a>

内联框架

引入外部的视频、音频、网页、图片等。

内联框架演示

<!--内联框架 src:地址 w-h:宽高度-->
<iframe src="https://www.bilibili.com" width="1000px" height="400px"></iframe>

表单标签

form 双标签表示表单主体，包裹其他表单标签。

属性：

• action 为必选属性，表示表单提交的地址。
• method 为提交方式，get、post等。

相关信息

get & post 是接口的两种请求方式。

get 通过在 url 中拼接表单参数，在 url 中看到提交的信息，不安全，高效。

post 比较安全，可以传输大文件。

<form action="#" method="get"></form>

input

显示收集用户信息的表单效果。

属性：

• type=""：必选属性，属性值不同展示效果不同。
• id=""：唯一标识符。
• value=""：表单元素对应的值。
• readonly：只读，不可改。
• hidden：隐藏，不可见。
• disabled：禁用，不可选。
• placeholder=""：输入框提示信息。
• required：非空判断。
• pattern=""：正则表达式判断。

文本框

展示一个文本输入框。

文本框的特有属性：

• placeholder=""：属性，占位符，提示用户输入信息。

文本输入框演示

<!-- 展示一个标准的文本输入框 -->
<input type="text" placeholder="请输入文本">
<br/>
<!-- 展示密码框，输入的文字变为 * 号 -->
<input type="password" placeholder="请输入密码">

选择框

展示单选和多选框。

选择框特有属性：

• name=""：分组，有相同name属性值的单选框为一组，一组中同时只能选中一个。
• checked：默认选中。

选择框演示

<div>
    <!-- radio：展示单选按钮 -->
    <input type="radio" name="sex" checked>man
    <input type="radio" name="sex">woman
</div>

<div>
<!-- checkbox：展示多选按钮 -->
    <input type="checkbox" name="hobby" checked>旅游
    <input type="checkbox" name="hobby" >骑行
    <input type="checkbox" name="hobby" >摄影
</div>

文件框

用于上传文件。

文件框特有属性：

• multiple：允许选择多个文件。

文件框演示

<input type="file" multiple>

更多其他类型

更多其他类型演示

<input type="date">日期
<br/>
<input type="hidden" value="隐藏域">
<br/>
<input type="email">邮箱
<br/>
<input type="url">链接
<br/>
<input type="number">数字
<br/>
<input type="range">滑块
<br/>
<input type="search">搜索框

按钮

button 双标签，显示用户点击的按钮。根据 type 属性拥有不同的功能。

• submit：提交按钮，提交表单，需要配合 form 标签使用。。
• reset：重置按钮，恢复表单默认值，需要配合 form 标签使用。
• button：普通按钮，无功能，通过 js 添加功能。

按钮演示

<form action="#">
    <input type="text" placeholder="请输入文本">
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</form>

下拉菜单

select 双标签，显示提供多个选择项的下拉菜单表单控件。

下拉菜单演示

<select name="city" id="">
    <option value="BeiJing">北京</option>
    <option value="ShangHai">上海</option>
    <option value="Guangzhou">广州</option>
    <!-- selected：属性默认选中 -->
    <option value="ShenZhen" selected>深圳</option>
</select>

文本域

textarea 双标签，提供可输入多行文本的表单控件。

文本域演示

<!-- cols 文本域可见宽度，rows 文本域可见行数，同样的数值下高度是宽度的两倍。 -->
<textarea name="text" id="text" cols="30" rows="15"></textarea>

label

绑定内容与表单标签。

label演示

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

使用方法：

1. 使用 label 标签包裹内容；为表单标签添加 id 属性，在 label 标签的 for 属性设置和表单标签对应的 id.
2. 使用 label 标签包裹内容；删除 label 标签的 for 属性。

注册表单案例

注册表单案例演示

<form action="#">
    <p></p>
    <label for="username">昵称：
        <input type="text" id="username">
    </label>
    <p></p>
    <label>性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </label>
    <p></p>
    <label for="city">所在城市：
        <select name="city" id="city">
            <option value="BeiJing">北京</option>
            <option value="ShangHai" selected>上海</option>
            <option value="ShenZhen">深圳</option>
        </select>
    </label>
    <p></p>
    <label>婚姻状况：
        <input type="radio" name="marital">未婚
        <input type="radio" name="marital">已婚
        <input type="radio" name="marital">保密
    </label>
    <p></p>
    <label>喜欢的类型：
        <input type="checkbox" name="hobby">可爱
        <input type="checkbox" name="hobby">性感
        <input type="checkbox" name="hobby">御姐
        <input type="checkbox" name="hobby">萝莉
        <input type="checkbox" name="hobby">小鲜肉
        <input type="checkbox" name="hobby">大叔
    </label>
    <p></p>
    <label for="self">个人介绍：<p></p>
        <textarea name="self" id="self" cols="30" rows="10"></textarea>
    </label>
    <h3>我承诺</h3>
    <ul>
        <li>年满18岁</li>
    </ul>
    <label>
        <input type="checkbox" name="articles">
        我同意所有条款
    </label>
    <p></p>
    <button type="submit">免费注册</button>
    <button type="reset">重置</button>
</form>

特殊符号

通过字符实体在网页中显示特殊符号，在 HTML 中，多个空格将合并为一个，想要显示空格和标签关键字，就需要使用字符实体。

符号	字符实体
空格
大于号	>
小于号	<
版权符号	©
&符号	&
引号	"

SEO

SEO（Search Engine Optimization）搜索引擎优化：让网站在搜索引擎上的排名靠前。

提升SEO的方法：

1. 竞价排名。
2. 将网页保持 HTML 后缀。
3. 标签语义化（在合适的地方使用合适的标签）。
4. 优化 title、description、keywords 描述性标签。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="..........描述">
    <meta name="keywords" content=".......关键词">
    <title>Document</title>
</head>
<body>
  
</body>
</html>