HTML

排版标签

基本标签

标签名	语义和功能
h1 ~ h6	一级标题~六级标题
p	段落
hr（单标签）	分隔线
br（单标签）	换行
pre	原格式显示
div	无语义，用于页面布局

Html5新标签

不存在语义，用于提高HTML文档的语义化，无障碍，同时也有助于搜索引擎优化（SEO）。

注意：
① W3C 标准中没有 hgroup 标签。
② WHATWG 标准中没有 main 标签，所有版本 IE 均不支持 main 标签。

标签名	语义和功能	单标签还是双标签
header	页头	双标签
footer	页脚	双标签
nav	导航	双标签
section	页面中的独立区域或文章中的一节	双标签
aside	侧边栏	双标签
article	文章、博客、评论、帖子等	双标签
main	主要内容部分	双标签
figure	表示一段独立的流内容，比如文章中的插图	双标签
figcaption	表示 figure 中的标题	双标签
hgroup	标题组（很少使用）	双标签

文本标签

基本标签

标签名	语义和功能
em	强调，默认表现斜体字
strong	强调，默认表现粗体字
ins	表示增加的内容，默认添加下划线
del	表示删除的内容，默认添加删除线
sub	下标字
sup	上标字
span	无语义，配合CSS给文字设置样式

Html5新标签

状态标签

标签名	语义和功能	属性	适用于
meter	静态度量	max、min：值最小和最大值、<br>high、low ：值的低和高范围<br>value：值、optimum：最优的值	如电池电量、磁盘用量、温度、湿度等
progress	动态进度	max、value	如进度条

详情标签

标签名	语义和功能	单标签还是双标签
details	表示一个可以展开或收起的细节或内容	双标签
summary	表示 details 中的标题	双标签

html

<details>
    <summary>请自我介绍一下</summary>
    <h3>我的生活</h3>
    <p>书春天血币者互量流得之，者尘者忧样的能变，为语面事出使明关秦，最不人秦十极娟场措土有的若太罪，宋往了死揽此自不，航不罪苦说都回魂密恩要系，治斯了兮言我才母看高衣回洪我厄仇，会情匹力不出掸何承天范而范未，争的以你大郭国之办勇郭报高德之，韩份冈国朗守，乡忧未。</p>
</details>

<!--修改为鼠标移动到summary时展开，移开summary时关闭-->
<script>
    var details = document.getElementById('details');
    var summary = details.querySelector('summary');

    summary.addEventListener('mouseover', function() {
        details.open = true;
    });

    summary.addEventListener('mouseout', function() {
        details.open = false;
    });
</script>

<style>
    summary::-webkit-details-marker {
        display: none;
    }
    summary {
        list-style-type: none;
    }
</style>

注音标签

标签名	语义和功能	单标签还是双标签
ruby	包裹要注音的文字	双标签
rt	写具体的注音	双标签

html

<ruby>
    饕餮
    <rt>taotie</rt>
</ruby>

文本标签

标签名	语义和功能	单标签还是双标签
mark	用于对某个词语进行标记	双标签

多媒体标签

路径

绝对路径

网络绝对路径： 目标文字在万维网上的绝对地址，如：http://szt603.com/
本地绝对路径： 目标文字在本地计算上的绝对地址, 如 D:\Library\SH230320

相对路径

./：当前文件所在的目录， ./可以省略
../：当前文件的上级目录
../../：上上级

图片

标签名	语义和功能	属性
img	引入图片	src：设置图片地址（可为本地地址、网络URL、base64编码等）<br>alt：设置图片无法加载时的替代文字。<br>width：设置宽度（宽高设置一个值，另一方向会自动计算）<br>height：设置高度

音视频标签

标签属性

标签名	功能和语义	属性	单标签还是双标签
video	视频	src：视频地址。<br>width：设置宽度。<br>height：设置高度。<br>controls：显示控制条，不需要值。<br>muted：默认静音，不需要值。<br>autoplay：自动播放，不需要值。<br>loop：循环播放，不需要值。<br>preload：预先加载，不需要值。<br>poster：设置视频封面图地址。	双标签
audio	音频	src：音频地址。<br/>controls：显示控制条，不需要值。<br/>muted：默认静音，不需要值。<br/>autoplay：自动播放，不需要值。<br/>loop：循环播放，不需要值。<br/>preload：预先加载，不需要值。	双标签
source	视频或音频	src：视频或音频的地址。<br>type：视频或音频的类型	单标签

浏览器支持格式

视频格式

mp4
webm
ogg

音频格式

超链接和锚点

超链接

标签名	语义和功能	属性	单标签还是双标签
a	超链接	href：设置目标文件地址。<br>target：__self，表示本窗口打开； __blank, 表示新窗口打开	双标签

href目标是html网页：根据target配置进行跳转
href目标是html外其他类型：若浏览器支持，将会直接打开，如图片、视频、pdf等，否则直接下载
href目标是空值：将刷新页面

href目标可以是指令

html

<a href="tel:10086">打电话</a> <br>
<a href="sms:10010">发短信</a> <br>
<a href="mailto:fuming@atguigu.cn">发邮件</a>

锚点

给标签设置一个ID属性，该标签就成为一个锚点，ID的属性值就是锚点的名字

html

<div id="锚点名"></div>
<p id="锚点名"></p>
<hr id="锚点名">

通过超链接可以跳转到锚点

html

<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"></a>

<!-- 跳转到其他页面的锚点 -->
<a href="页面地址#锚点名"></a>

<!-- 跳转到页面顶部 -->
<a href="#"></a>

列表

无序列表

html

<ul>
    <li>
        <a href="#">首页</a>
    </li>

    <!--嵌套无序列表-->
    <li>
        <a href="#">关于我们</a>
        <ul>
            <li>
                <a href="#">联系我们</a>
            </li>
            <li>
                <a href="#">加入我们</a>
            </li>
            <li>
                <a href="#">举报我们</a>
            </li>
        </ul>
    </li>
</ul>

有序列表

html

<ol>
    <li>高小乐</li>
    <li>比尔盖茨</li>
    <li>巴菲特</li>
    <li>索罗斯</li>
    <li>马云</li>
</ol>

定义列表

html

<!-- 
	一个dt对应一个dd
-->
<dl>
    <!--定义列表项标题-->
    <dt>HTML</dt>
    <!--定义列表项描述-->
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>浏览器端脚本语言</dd>
</dl>

<!-- 
	一个dt对应多个dd 
-->
<dl>
    <dt>如何掌握一个HTML标签？</dt>
    <dd>该标签的语义功能</dd>
    <dd>该标签的属性以及属性值如何设置</dd>
    <dd>该标签是单标签还是双标签</dd>
</dl>

表格标签

表格的结构

标签名	功能和语义	属性	单标签还是双标签
table	表格包裹元素	width<br>height<br>cellspacing<br>cellpadding<br>border	双标签
caption	表格标题		双标签
thead	表格头	align<br>valign	双标签
tbody	表格体	align<br/>valign	双标签
tfoot	表格脚	align<br/>valign	双标签
tr	行	height<br>align<br/>valign	双标签
td	普通单元格	width<br>height<br>align<br/>valign<br>colspan<br>rowspan	双标签
th	表头单元格（第一行）<br/>默认为粗体并居中	width<br/>height<br/>align<br/>valign<br/>colspan<br/>rowspan	双标签

html

<table border="1">
    <!-- 表格标题 -->
    <caption>用户信息表</caption>
    <!-- 表格头 -->
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
        <th>地址</th>
    </tr>
    </thead>
    <!-- 表格体 -->
    <tbody>
    <tr>
        <td>1</td>
        <td>曹操</td>
        <td>男</td>
        <td>13378652389</td>
        <td>上海市松江区</td>
    </tr>
    </tbody>
    <!-- 表格脚 -->
    <tfoot>
        <tr>
        	<td colspan="2">页脚信息</td>
    	</tr>
    </tfoot>
</table>

表格样式设置

单位一般都是px（像素）

整体样式

给 table 标签设置如下属性：

width：设置宽度
height: 设置高度
cellspacing：设置单元格之间的间距
cellpadding：设置单元格内补白（边框与内容的间距）
border：设置表格边框（最外边）

设置单元格宽高

给 td、th 设置 width 和 height 属性：

给 td、th 设置 width 相当于设置列宽
给 td、th 设置 height 相当于设置行高

给 tr 和 td 设置 height 有什么区别：

给 th、td 设置height，实际行高会在设置的高度的基础上加上上下的 cellpadding
给 tr 设置 height 就是总行高

设置单元格中内容对齐方式

align（横向）：left、right、center

valign （纵向）：top、bottom、middle

给 thead、tbody、tfoot 设置：所包裹的单元格都会生效
给 tr 设置：所包裹的单元格都会生效
给 td、th 设置：本单元格会生效

单元格跨行和跨列

给 td、th 设置属性：

rowspan：设置所跨行数
colspan：设置所跨列数

表单标签

html

<!--html5新属性：novalidate:该属性不需要值，让表单不进行验证-->
<form action="http://www.baidu.com/s" target="_blank">
     <input type="text" name="wd">
     <button>搜索</button>
</form>

表单控件属性

旧标准存在的表单控件属性：

disabled	设置不可用，该属性不需要值
name		表单控件的标识
value		表单控件的值

新标准增加的表单控件属性：

placeholder		给输入框或文本域设置提示文字
autofocus		自动获取焦点，不需要设置值
required		设置必填或必选，不需要设置，否则表单无法提交
pattern			值是一个正则表达式用于验证输入的内容，如果不匹配表单如法提交
autocomplete	输入框是否显示输入记录，值：on、off，默认值on
form			可以以某个表单的ID作为值，将该表单控件与表单关联

表单控件

html

<!-- text:不指定类型默认为text,maxlength:可以限制最大输入长度 -->
<input type="text" maxlength="10">

<!--密码输入框-->
<input type="password" maxlength="6">

<!--单选框,多个单选需要相同name，checked:默认选中，-->
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked>其他

<!--复选框-->
<input type="checkbox">唱
<input type="checkbox" checked>跳
<input type="checkbox" checked>RAP

<!--提交按钮-->
<input type="submit" value="免费注册">
<button type="submit">提交</button>

<!--重置按钮-->
<input type="reset">
<button type="reset">重置</button>

<!--普通按钮-->
<input type="button" value="普通按钮01">
<button type="button">普通按钮02</button>

<!--文本域，rows：显示行数，cols：显示列数-->
<textarea rows="10" cols="60"></textarea>

<!--下拉选项，selected默认选择-->
<select>
    <option selected>新疆维吾尔自治区</option>
    <option>内蒙古自治区</option>
    <option>广西壮族自治区</option>
</select>


<!--点击label会聚焦到关联标签上,如点击下方用户名或男、女描述，则相当于点击输入框（单选框）-->
<!-- 使用label关联描述文字和输入框 -->
<label for="usernameInp">用户名：</label>
<input type="text" id="usernameInp">

<label>
    <input type="radio" name="gender">男
</label>
<label>
    <input type="radio" name="gender">女
</label>

<!--使用边框框住各种表单控件，并在边框上添加标题内容-->
<form>
    <fieldset>
        <legend></legend>
        各种表单控件...
    </fieldset>
</form>

表单控件的属性

标签名	语义和功能	属性	单标签和双标签
form	表单包裹元素	action：设置表单提交地址。<br>target：设置提交地址从那个窗口打开	双标签
input	各种类型的表单控件	type：表单控件类型。<br>maxlength：最大可输入长度。<br>checked：设置默认选中。<br>name：表单控件标识。<br>value：表单控件的值。<br>disabled：设置为不可用。	单标签
button	各种类型的按钮	type：按钮类型。<br>disabled：设置为不可用。	双标签
textarea	文本域	rows: 默认显示的行数。<br>cols：默认显示的列数。<br>name：表单控件标识。<br/>disabled：设置为不可用。	双标签
select	下拉选项包裹元素	name：表单控件标识。<br/>disabled：设置为不可用。	双标签
option	下拉的选项	value：表单控件的值。<br/>selected：设置默认选中<br>disabled：设置为不可用。	双标签
label	用于关联表单控件	for：表单控件的id	双标签
fieldset	设置外围的边框	无	双标签
legend	设置表单标题<br>需要与fieldset配合	无	双标签

Html5表单新属性

html

<!--输入框类（5个）-->
<!-- 邮箱  要求必须输入电子邮箱，否则表单提交； 如果不输入不会验证 -->
<input type="email" placeholder="请输入邮箱">

<!-- 输入内容必须是数字，范围为min-max，点击添加步长为0.1，如果不输入不会验证-->
<input type="number" placeholder="请输入数字" max="100" min="-20" step=".1"> <br>

<!-- URL 要求必须输入URL， 否则表单无法提交； 如果不输入不会验证 -->
<input type="url" placeholder="请输入网址">

<!-- 电话号码  没有验证功能，手机端会自动弹出数字键盘 -->
<input type="tel" placeholder="请输入电话号码">
        
<!-- 搜索框 没有验证功能-->
<input type="search" placeholder="请搜索...">


<!--范围选择框-->
<!-- 拖动滑块,选择数字。范围为min-max，步长为10 -->
<input type="range" name="n2" max="50" min="-50" value="40" step="10"> <br>


<!--颜色选择框-->
<input type="color">


<!--日期时间选择框类-->
<!-- 选择日期 年月日 -->
<input type="date"> <br><br>
<!-- 选择年月 -->
<input type="month"> <br><br>
<!-- 选择年、第几周 --> 
<input type="week"> <br><br>
<!-- 选择时间 小时 分钟 -->
<input type="time"> <br><br>
<!-- 选择日期和时间 -->
<input type="datetime-local">

<!--输入框的搜索提示-->
<input type="text" class="text-input" list="searchData">
<datalist id="searchData">
    <option value="高小乐"></option>
    <option value="高启强"></option>
    <option value="高育良"></option>
    <option value="老头乐"></option>
</datalist>

其他标签

内联框架标签

标签名	功能和语义	属性	单标签还是双标签
iframe	内联框架<br>将各种类型的文件引入当前页面	src: 设置目标文件地址，网页，PDF<br>frameborder：设置是否有边框，0表示没有，其他数字表示有。<br>width：设置宽度。<br>height：设置高度。	双标签

HTML 字符实体

https://www.w3cschool.cn/htmltags/html-symbols.html

&nbsp;			空格
&lt;			小于号 <
&gt;			大于号 >
&amp;           和好 &

&yen;			人民币符号
&copy;			版权符号
&times;			乘号
&divide;		除号

HTML 全局属性

基本标签

全局属性指所有的标签都具有的属性

https://www.w3school.com.cn/tags/html_ref_language_codes.asp

id		唯一标识，可以用作锚点名、可以用作css选择器
name	设置名称标识，对于表单控件用处较大
class	设置类名，用于css选择器
style	用于直接设置css样式
title	设置提示文字，鼠标悬浮在元素上会显示
lang	设置语言，英文：en; 中文：zh-CN

Html5新标签

HTML5 标准新增的全局属性

hidden 		让元素隐藏，不需要值

a 标签新增的属性：

download	如果设置该属性，超链接点击下载目标文件，该属性不需要值。
            目标文件需要与当前文件同服务器，才有下载功能

meta 元信息

html

<!-- 字符集编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 设置完美视口，width=device-width 设置视口的宽度等于设备的宽度，initial-scale=1.0 设置初始缩放级别为1.0，即页面在加载时不会被缩放。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 设置网页刷新，content=3，表示每三秒刷新 -->
<!-- <meta http-equiv="refresh" content="3"> -->

<!-- 定时跳转，10s后跳转url -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">

<!--网页标题-->
<title>Document</title>

HTML5 兼容性方案

设置元信息

html

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

IE8以及以下的浏览器支持H5新标签

html

<!--对于下方代码，注释也是代码的一部分，不能删除-->
<!--[if lt IE 9]>
    <script src="../js/html5shiv.js"></script>
<![endif]-->

HTML ​

排版标签 ​

基本标签 ​

Html5新标签 ​

文本标签 ​

基本标签 ​

Html5新标签 ​

状态标签 ​

详情标签 ​

注音标签 ​

文本标签 ​

多媒体标签 ​

路径 ​

绝对路径 ​

相对路径 ​

图片 ​

音视频标签 ​

标签属性 ​

浏览器支持格式 ​

视频格式 ​

音频格式 ​

超链接和锚点 ​

超链接 ​

锚点 ​

列表 ​

无序列表 ​

有序列表 ​

定义列表 ​

表格标签 ​

表格的结构 ​

表格样式设置 ​

整体样式 ​

设置单元格宽高 ​

设置单元格中内容对齐方式 ​

单元格跨行和跨列 ​

表单标签 ​

表单控件属性 ​

表单控件 ​

表单控件的属性 ​

Html5表单新属性 ​

其他标签 ​

内联框架标签 ​

HTML 字符实体 ​

HTML 全局属性 ​

基本标签 ​

Html5新标签 ​

meta 元信息 ​

HTML5 兼容性方案 ​

设置元信息 ​

IE8以及以下的浏览器支持H5新标签 ​

HTML

排版标签

基本标签

Html5新标签

文本标签

基本标签

Html5新标签

状态标签

详情标签

注音标签

文本标签

多媒体标签

路径

绝对路径

相对路径

图片

音视频标签

标签属性

浏览器支持格式

视频格式

音频格式

超链接和锚点

超链接

锚点

列表

无序列表

有序列表

定义列表

表格标签

表格的结构

表格样式设置

整体样式

设置单元格宽高

设置单元格中内容对齐方式

单元格跨行和跨列

表单标签

表单控件属性

表单控件

表单控件的属性

Html5表单新属性

其他标签

内联框架标签

HTML 字符实体

HTML 全局属性

基本标签

Html5新标签

meta 元信息

HTML5 兼容性方案

设置元信息

IE8以及以下的浏览器支持H5新标签