HTML

Weipeng Qiao大约 21 分钟

来源：

MDNopen in new window

一、初识 HTML

什么是 HTML?

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

html 标签格式

html 标签是由尖括号包围的关键字。如：<html>,<div>,<span>等;
html 标签通常是成对出现。如：<div></div>,第一个是开始，第二个有斜线的是结束（双标签）
有些标签是单独呈现的,也叫自结束标签。如：<hr/>、<br/>、<img src="222.png"/>;（单标签）
标签里面带有若干属性，也有不带的；

html 标签关系

包含关系

<!-- head和title是包含关系 -->
<head>
  <title>Document</title>
</head>

并列关系

<!-- head和body是并列关系 -->
<head> </head>
<body></body>

html 注释

<!-- 注释内容 -->

html 中的骨架标签

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Document</title>
  </head>
  <body></body>
</html>

注意

注意：html 中不区分大小写

标签	说明	备注
`<!DOCTYPE html>`	文档类型声明（表示使用 html5 版本来显示网页）	不是 html 签
html	表示文档的根标签	lang（定义此网页的语言类型）zh-CN 表示中文，en 表示英文等
head	定义文档头部	head 标签中的内容不会展示在浏览器页面上
title	定义文档标题
body	定义文档主体内容

什么是标签语义化？

白话：所谓标签语义化，就是指标签的含义。根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

代码结构清晰可读性强
有利于 SEO（搜索引擎优化）
方便设备解析（如屏幕阅读器、盲人阅读器等）

语义是否良好：当我们去掉 CSS 之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 )

注意

注意：html 标签，我们只需要关心语义即可

字符集

<meta charset="UTF-8" />

字符集( Character set)是多个字符的集合。以便计算机能够识别存储各种文字。
在<head>标签内，可以通过<meta>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码；
charset 常用的值有：GB2312、BIG5、GBK 和 UTF-8,其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符；
一般情况下，统一使用 UTF-8 编码，尽量统一写成标准的"UTF-8",不要写成"utf-8"或"UTF8"。

二、什么是 Web 标准？

Web 标准不是某一个标准，而是由 W3C 组织和其他标准化组织制定的一系列标准的集合

web 标准的作用？

web 标准的好处？

让 Web 的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

web 标准的构成？

web 标准的构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构用于对网页元素进行整理和分类，主要是 HTML。
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS
行为是指网页模型的定义及交互的编写，指的是 Javascript

三、文本标签

h1~h6（标题标签）

定义标题
特点：

使用标题标签文字会有加粗效果，字号也会依次变大
一个标题独占一行（块级元素）

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

注意

每个页面中最多只能有一个 h1 标签，在 seo 中 h1 标题的权重仅次于 title 标签，所以 h1 包含的是一个页面中最重要的内容，不建议有多个（有多个 h1 也不会影响书写）
h1,h2,h3,使用最多，h4~h6 几乎不用
h1 之中也不能包含其他标题标签，这样没有任何意义

p（段落标签）

文本在一个段落中会根据浏览器窗口的大小自动换行
段落与段落上下之间存在间隙

<p>
  自俄罗斯宣布对乌克兰的入侵后，众多企业撤出俄罗斯，扭转了1991年苏联解体后西方企业和其他外国企业在该国进行的30年投资。目前已有大部分公司表示面临在声誉和财务方面的极大风险，并称难以在俄罗斯继续开展业务。
</p>
<p>
  英国石油和壳牌等石油巨头因西方国家对俄实行大规模制裁而相继宣布撤出俄罗斯市场，这一历史性举动将带来数十亿美元的损失。现在，其他国家大型公司面临效仿此举的压力也越来越大。
</p>

字符实体

代码	含义	字符
&nbsp；	表示空格
&lt；	表示小于号	<
&gt；	表示大于号	>
&amp；	和	&
&yen；	人民币	￥
&copy；	版权	©
&reg；	注册商标	®
&deg；	摄氏度	°
&plusmn；	正负号	±
&times；	乘号	×
&divide；	除号	÷
&sup2；	平方	²
&sup3；	立方	³

来源：
WSCschool 中的字符实体open in new window

四、格式化文本标签

<!-- 粗体 -->
<strong>我表示很重要</strong>
<b>我表示强调</b>

<!-- 斜体  -->
<em>我表示着重强调</em>
<i>我表示区分其他文本</i>

<!-- 删除线 -->
<del>我是删除线</del>
<s>我也是删除线</s>

<ins>我是下划线</ins>
<u>我也是下划线</u>

五、div 和 span 标签 (无语义)

div 标签用来布局（宏观），一行只能放一个 div。(大盒子，块级元素)
span 标签也是用来布局的一种，主要是用来表示网页中的选中文字，一行可以有多个 span。（小盒子，行内元素）
注意：一般情况下，会在块级元素内放行内元素，但是不会再行内元素中放块级元素

<!-- 可以这么做  -->
<h1><em>你好</em></h1>

<!-- 不会这么做  -->
<em>
  <h1>你好</h1>
</em>

六、img（图像标签）

<!-- img标签  -->

<img
  src="http://www.baidu.com/img/flexible/logo/pc/result.png"
  alt="百度LOGO"
  width="300px"
  border="1"
  title="百度一下你就知道"
/>

src（必写）:表示图片文件的 URL
alt ：表示图片无法正常加载时的替换文本。搜索引擎会通过此字段来关联图片，无障碍模式下，可以阅读此属性中的内容
title：表示鼠标悬停时的提示文本
width：宽度
height：高度
border：边框
注意：
1. 宽度和高度如果只修改了一个，另一个会等比例缩放
2. 一般情况下，不建议修改图片的大小，需要多大的图片就裁多大（更有利于节省资源，小规模效果不明显）。在移动端，经常要对图片进行缩放（大图缩小）

七、路径

路径主要分为相对路径和绝对路径，为了更好的理解相关概念，我们需要先认识一下目标文件夹和根目录

目标文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，如 html 文件，图片等。
根目录:打开目标文件夹的第一层就是根目录

相对路径

处在同一级路径：可以直接进入文件夹"img/test.png"也可以使用./。如："./img/test.png"
处在下一级路径："img/test.png"
处在上一级路径：使用../跳出该文件夹
如："../img/test.png"。如果文件夹较多，以此类推:"../../../img/test.png"

绝对路径

网络路径：如：https://www.baidu.com/favicon.ico
本地路径:如：D:\web\img\logo.gif

八、a（超链接标签）

<!-- a标签  -->
<a href="https://www.baidu.com/">百度一下你就知道</a>

href:链接目标的 URL
target:页面打开方式
- _self（默认，当前页面打开）
- _blank（新窗口打开）

<!-- 新窗口打开百度  -->
<a href="https://www.baidu.com/" target="_blank">百度一下你就知道</a>

常见的链接类型

外部链接：单击该超链接会链接到其他网站的某一个页面

<!-- 外部链接  -->
<a href="https://www.baidu.com/">百度一下你就知道</a>

内部链接：单击该超链接会链接到同一网站的其他页面

<!-- 内部链接  -->
<a href="about.html">百度一下你就知道</a>

锚点链接：点击链接，可以快速定位到页面中的某个位置

<!-- 锚点链接  -->
<a href="#C5">查看关于我们。</a>
<h2>首页</h2>
<!-- name属性和id属性都可以，id表示唯一 ，区分大小写 -->
<h2><a name="C4">关于我们</a></h2>
<h2><a id="C5">关于我们</a></h2>

空链接：没有确定链接目标时,可以设置为空链接（也可以理解为链接到自己），会刷新当前页面

<!-- 空链接  -->
<a href="#">首页</a>

注意：空连接也可以直接返回当前页面的顶部，比较简单粗暴

拓展：可以将 herf 属性值设置为javascript:;表示点击此超链接没有任何效果,js 中较为常用

<a href="javascript:;">没有任何效果</a>

下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件

<!-- 下载链接  -->
<a href="https://www.baidu.com/favicon.ico" download="下载下来的文件名">下载</a>

网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<!-- 网页元素链接  -->
<a href="https://www.mi.com">
  <img
    src="https://s02.mifile.cn/assets/static/image/logo-mi2.png"
    width="50px"
  />
</a>

唤起指定应用可以唤起本地应用并通过指定联系方式进行联系

<!-- tel:手机号码            表示给XXX打电话
         mailto:邮件地址        表示给谁发邮件
          msm:手机号            表示给谁发短信
    -->
<a href="tel:10010">给中国联通打电话</a>
<a href="mailto:qiaoweipeng@outlook.com">给我发邮件</a>
<a href="msm:10086">给10086发短信</a>

九、列表

`ul>li`（无序列表）

<!-- 无序列表  -->
<ul>
  <li>banana</li>
  <li>apple</li>
  <li>orage</li>
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的。
ul 中只能嵌套 li,不能直接在 ul 中输入文字或者其他标签
li 相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，在实际使用时，我们会使用 CSS 来设置
列表之间可以嵌套

<ul>
  <li>
    前端
    <ul>
      <li>html</li>
      <li>css</li>
      <li>js</li>
    </ul>
  </li>
</ul>

`ol>li`（有序列表）

<!-- 有序列表  -->
<ol>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>

除了有序号外，其余和无序列表特点类似

`dl>dt+dd`（自定义列表）

<!-- 自定义列表  -->
<dl>
  <dt>手机</dt>
  <dd>小米手机</dd>
  <dd>iphone手机</dd>
</dl>

dl 中只能包含 dt 或者 dd
dt 和 dd 没有数量限制，经常一个 dt 对应多个 dd
dt 和 dd 里面可以放任何标签

十、表格

表格标签

table:表格外边框
tr:行。只能存在 table 标签中
td:单元格。只能存在 tr 标签中
th:表头。只存在于 tr 标签中
caption：标题。只存在于 table 标签中
thead:表示表格头部
tbody:表示表格主体部分
tfoot:表示表格底部

<!-- 表格  -->
<table
  border="1"
  cellspacing="0"
  cellpadding="0"
  width="80%"
  height="100"
  align="center"
>
  <!-- 标题  -->
  <caption>
    登记表
  </caption>
  <!-- 表头 -->
  <tr>
    <th>编号</th>
    <th>姓名</th>
  </tr>
  <!-- 内容  -->
  <tr>
    <td>1</td>
    <td>张三</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
  </tr>
</table>

合并单元格

colspan:横向合并，跨列
rowspan:纵向合并，跨行

<!-- 合并单元格 -->
<table
  cellspacing="0"
  cellpadding="0"
  width="50%"
  height="400px"
  align="center"
  border="1px"
>
  <tr>
    <td></td>
    <td rowspan="3"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

表格标签的常用属性

属性	含义	备注
cellpadding	单元格中的文字到边框的距离，相当于 css 中的 padding 内边距	一般情况下设置为 0,表示边框与边框之间无缝隙`并不代表边框会合并`
cellspacing	单元格与单元格的距离，相当于 css 中的 margin 外边距	一般情况下设置为 0,表示边框与边框之间无缝隙`并不代表边框会合并`
width	表格的宽度
height	表格的高度
border	表格的边框	如果 border 属性添加在 table 标签上，0 表示整个表格没有边框，1 表示整个表格添加 1px 的边框，大于 1px 则只对 table 边框有效
align	内容水平排列方式	center 水平居中、left 水平居左、right 水平居右
valign	内容垂直排列方式	top 顶部对齐、middle 垂直居中、bottom 底部对齐

注意：表格所有的属性建议使用 CSS 代替

十一、表单

什么是表单？

表单在网页中主要负责数据采集功能。HTML 中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

表单的组成部分

表单域（form）
表单标签(各种 input)
表单按钮(submit,或者其他 button)

表单的同步提交及缺点

form 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
form 表单同步提交后，页面之前的状态和数据会丢失。

如何解决表单同步提交的缺点

解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。

form (表单域)

<!-- 去百度搜索
    action必须是https://www.baidu.com/s
    input的name属性值必须是wd 
    -->
<form action="https://www.baidu.com/s" method="get">
  <input type="text" name="wd" />
  <input type="submit" value="去百度抖索" />
</form>

<!-- 去京东搜索
    action必须是https://search.jd.com/search
    input的name属性值必须是keyword
    
    -->
<form action="https://search.jd.com/search" method="get">
  <input type="text" name="keyword" />
  <input type="submit" value="去京东搜索" />
</form>

form 标签的常见属性

action

action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
当 form 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

target

target 属性用来规定在何处打开 action URL.

method

method 属性用来规定以何种方式把表单数据提交到 action URL
它的可选值有两个，分别是get和post。默认值为 get

get 和 post 的区别？

get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，form 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单
get 提交会将提交信息显示在浏览器的地址中，post 则不会。

name

用于指定表单的名称，以区分同一页面中多个表单域

enctype

enctype 属性用来规定在发送表单数据之前如何对数据进行编码。
注意：
1. 在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
2. 如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可

input (表单标签)

<form action="http://www.baidu.com" method="get">
  文本框：<input
    type="text"
    name="text"
    id=""
    required="required"
    autofocus
    autocomplete=""
    placeholder="手机号或电子邮箱"
  />
  <br />
  密码框：
  <input type="password" name="" id="" disabled /><br />
  单选框： <input type="radio" name="sex" id="" checked="checked" />男
  <input type="radio" name="sex" id="" />女<br />
  复选框: <input type="checkbox" name="habby" id="" />游戏
  <input type="checkbox" name="habby" id="" />运动
  <input type="checkbox" name="habby" id="" checked="checked" />学习<br />
  <button>一个按钮</button><br />选择文件：
  <input type="file" name="" id="" multiple /><br />
  隐藏按钮： <input type="hidden" /><br />
  <input type="image" src="img/test.png" alt="" /><br />Email:
  <input type="email" name="" id="" /><br />url:
  <input type="url" name="" id="" /><br />date:
  <input type="date" name="" id="" /><br />datetime-local:
  <input type="datetime-local" name="" id="" /><br />datetime：
  <input type="datetime" name="" id="" /><br />time:
  <input type="time" name="" id="" /><br />month:
  <input type="month" name="" id="" /><br />week:
  <input type="week" /><br />tel:
  <input type="tel" name="" id="" /><br />search:
  <input type="search" /><br />color:
  <input type="color" name="" id="" /><br />进度条:
  <input type="range" name="" id="" /><br />
  <input type="button" value="按钮" /><br />number：
  <input type="number" name="" id="" /><br />
  <input type="submit" value="提交" />
  <input type="reset" value="重置" />
</form>

input 标签的常见属性

typeopen in new window

id

定义唯一元素
使用 label 标签时也要使用

name

定义 input 元素的名称
radio 和 checkbox 必须有相同的 name，否则无法正常使用
提交表单是必须使用 name 属性，这样后台才能通过 name 找到这个表单元素，也是通过 name 属性来区分不同的表单元素
注意：每个表单元素都需要有 name 和 value 属性值，主要给后台人员使用

value

定义 input 元素的值（内容）
radio 和 chexkbox 必须设置 value 值，否则后台没有数据

checked

设置默认选中状态，常用于 radio 和 checkbox

required （H5 新增）

表示必填，不能为空

autofocus（H5 新增）

表示必填，不能为空

autocomplete（H5 新增）

表示显示用户之前输入过的值（值为 on 表示提示用户，off 表示不提示用户，默认值为 on）。
注意：需要给此表单加上 name 属性，并提交成功过,要不然无法出现效果

placeholder（H5 新增）

提示信息、占位符

multiple

可以选择多个文件提交
select 中可以选择多选
注意：多选时需要借助键盘 ctrl 或者 shift 键

maxlenght

规定输入框中的最大长度（正整数）
了解即可：后面我们会使用正则替代

disabled

给表单空间设置 disabled 即可禁用表单控件

textarea 文本域

cols:表示一行可以显示 30 个字符
rows：表示可以显示 10 行

<label for="text">备注：</label>
<!-- 文本域标签  -->
<textarea name="" id="text" cols="30" rows="10"></textarea>

select > option 下拉列表

<!-- 下拉列表 
  (1) option中使用selected表示已选中
  (1) 使用multiple可以多选 
  -->
<select name="" id="" multiple>
  <option value="">请选择(可多选):</option>
  <option value="">北京</option>
  <option value="">上海</option>
  <option value="" selected>广州</option>
  <option value="">深圳</option>
</select>

注意：seleted（表示默认选中状态）

label

直接使用 label 包裹元素

<label>Click me <input type="text" /></label>

使用 for..id

请选择您的兴趣爱好：
<input type="checkbox" id="sing" />
<label for="sing">唱歌</label>
<input type="checkbox" id="ball" />
<label for="ball">球类</label>
<input type="checkbox" id="play" />
<label for="play">电竞</label>
<input type="checkbox" id="outside" />
<label for="outside">户外</label>

增加用户体验的标签
label 标签中 for 属性的值为对应 input 标签中的 id 属性

button 按钮

<!-- 按钮  -->
<button>我是一个按钮</button>

一个空按钮

fieldset>legend

fieldset 表示对某些表单进行分类
legend 表示分类的名字

<form action="">
  <!-- 分类 -->
  <fieldset>
    分类名字
    <legend>user</legend>
    username:<input type="text" /> age:<input type="text" />
  </fieldset>
  <fieldset>
    <legend>home</legend>
    parentsname:<input type="text" /> age:<input type="text" />
  </fieldset>
</form>

十二、H5 新增标签

布局标签

标签	含义
`header`	表示整个页面或部分区域的头部，可能有多个
`footer`	表示整个页面或部分区域的底部，可能有多个
`nav`	表示网页中的导航，可能有多个
`article`	文章、帖子、杂志、新闻、博客、评论等
`section`	页面中的某段文字、或文章中的某段文字（里面通常会包含标题）
`aside`	侧边栏
`main`	文档中的主要内容（ WHATWG 没有语义、IE 不支持）几乎不用
`hgroup`	包裹连续的标题，如文章的主标题、副标题的组合（w3c 将其删除）

注意：IE9 需要转换为 block

article 和 section 的区别和联系？

article 里面可以有多个 section。
section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。
article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。

多媒体标签

`video`（视频标签）

属性	含义
src	src 为默认播放源，引入播放源音乐默认不会播放，因为浏览器有限制
controls	表示是否显示播放控件（默认不显示）
autoplay	表示是否自动播放（默认不自动播放）
loop	表示是否循环播放（默认不循环播放）
muted	表示是否为静音（默认不静音）
width\height	设置 vedio 的宽和高
poster	视频播放前 video 所展示图片的 URL
preload	表示是否预加载 `none`:不预加载视频 `metadata`:仅预先获取视频的元数据（例如长度） `auto`:下载整个视频问价，即使用户不希望使用它

  <!-- video为视频标签
  （1）src为默认播放源，引入播放源音乐默认不会播放，因为浏览器有限制
  （2）controls 表示是否显示播放控件 （默认不显示）
  （3）autoplay表示是否自动播放（默认不自动播放）
  （4）loop 表示是否循环播放 （默认不循环播放）
  （5） muted 表示是否为静音 （默认不静音）
   (6) poster 表示视频未播放前video中展示的图片

-->
  <video src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/cyberone/sec1-vm.mp4" controls loop muted width="50%"
    poster="https://img.youpin.mi-img.com/ferriswheel/899249d7_b5c4_4831_845e_e65b2bcf4909.jpeg@base@tag=imgScale&F=webp&h=700&q=90&w=1270"></video>
  </body>

`audio`（音频标签）

属性	含义
src	src 为默认播放源，引入播放源音乐默认不会播放，因为浏览器有限制
controls	表示是否显示播放控件（默认不显示）
autoplay	表示是否自动播放（默认不自动播放）
loop	表示是否循环播放（默认不循环播放）
muted	表示是否为静音（默认不静音）

<!-- audio为音乐标签 
  （1）src为默认播放源，引入播放源音乐默认不会播放，因为浏览器有限制
  （2）controls表示是否显示播放控件 （默认不显示）
  （3）autoplay表示是否自动播放（默认不自动播放）
  （4）loop 表示是否循环播放 （默认不循环播放）
 （5） muted 表示是否为静音 （默认不静音）-->
<audio
  src="https://m701.music.126.net/20221112153811/4b852fb3086b591289485ecb27353f4c/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/5015514651/809b/a206/0144/2e414e4b37baae02e4019bcf36e2c7f7.m4a"
  autoplay
  controls
  loop
  muted
></audio>

source 标签

可以添加多种音视频文件，避免浏览器不兼容的情况
属性：src（播放文件的 URL）

状态标签

列表标签

文本标签

十四、其他不常用标签

iframe 标签

表示内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页路径
frameboder 指定内联框架的边框

<!-- 利用iframe嵌入一个网页  -->
<iframe
  src="http://www.taobao.com"
  frameborder="0"
  width="600px"
  height="450px"
></iframe>
<!-- 利用iframe嵌入一个广告 -->
<iframe src="" frameborder="0" width="300px" height="800px"></iframe>

meta 标签

charset 属性，可以设置字符集
name 属性，表示要设置内容的名字。如：keywords，description
content 属性，表示要设置的内容

br

表示换行（单标签）

离离原上草，<br />
一岁一枯荣；<br />
野火烧不尽，<br />
春风吹又生。

hr

表示一条直线

注意

建议使用 CSS 中的 border 代替，实际开发中基本上不会使用

HTML

# 一、初识 HTML

# 什么是 HTML?

# html 标签格式

# html 标签关系

# html 注释

# html 中的骨架标签

# 什么是标签语义化？

# 字符集

# 二、什么是 Web 标准？

# web 标准的作用？

# web 标准的好处？

# web 标准的构成？

# 三、文本标签

# h1~h6（标题标签）

# p（段落标签）

# 字符实体

# 四、格式化文本标签

# 五、div 和 span 标签 (无语义)

# 六、img（ 图像标签）

# 七、路径

# 相对路径

# 绝对路径

# 八、a（超链接标签）

# 常见的链接类型

# 九、列表

# ul>li（无序列表）

# ol>li（有序列表）

# dl>dt+dd（自定义列表）

# 十、表格

# 表格标签

# 合并单元格

# 表格标签的常用属性

# 十一、表单

# 什么是表单？

# 表单的组成部分

# 表单的同步提交及缺点

# 如何解决表单同步提交的缺点

# form (表单域)

# form 标签的常见属性

# action

# target

# method

# get 和 post 的区别？

# name

# enctype

# input (表单标签)

# input 标签的常见属性

# typeopen in new window

# id

# name

# value

# checked

# required （H5 新增）

# autofocus（H5 新增）

# autocomplete（H5 新增）

# placeholder（H5 新增）

# multiple

# maxlenght

# disabled

# textarea 文本域

# select > option 下拉列表

# label

# button 按钮

# fieldset>legend

# 十二、H5 新增标签

# 布局标签

# article 和 section 的区别和联系？

# 多媒体标签

# video（视频标签）

# audio（音频标签）

# source 标签

# 状态标签

# 列表标签

# 文本标签

# 十四、其他不常用标签

# iframe 标签

# meta 标签

# br

# hr

一、初识 HTML

什么是 HTML?

html 标签格式

html 标签关系

html 注释

html 中的骨架标签

什么是标签语义化？

字符集

二、什么是 Web 标准？

web 标准的作用？

web 标准的好处？

web 标准的构成？

三、文本标签

h1~h6（标题标签）

p（段落标签）

字符实体

四、格式化文本标签

五、div 和 span 标签 (无语义)

六、img（图像标签）

七、路径

相对路径

绝对路径

八、a（超链接标签）

常见的链接类型

九、列表

`ul>li`（无序列表）

`ol>li`（有序列表）

`dl>dt+dd`（自定义列表）

十、表格

表格标签

合并单元格

表格标签的常用属性

十一、表单

什么是表单？

表单的组成部分

表单的同步提交及缺点

如何解决表单同步提交的缺点

form (表单域)

form 标签的常见属性

action

target

method

get 和 post 的区别？

name

enctype

input (表单标签)

input 标签的常见属性

typeopen in new window

id

name

value

checked

required （H5 新增）

autofocus（H5 新增）

autocomplete（H5 新增）

placeholder（H5 新增）

multiple

maxlenght

disabled

textarea 文本域

select > option 下拉列表

label

button 按钮

fieldset>legend

十二、H5 新增标签

布局标签

article 和 section 的区别和联系？

多媒体标签

`video`（视频标签）

`audio`（音频标签）

source 标签

状态标签

列表标签

文本标签

十四、其他不常用标签

iframe 标签

meta 标签

br

hr