HTML 是 Web 标准中的第一层，主要用于构建网页的结构，描述页面的内容，在这里，我们能够初步学习到HTML 的相关语法以及最常用的标签。
1. HTML简单介绍
HTML，超文本标记语言（Hypertext Markup Language），超文本，超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如图片、链接、音频、视频、程序等。而标记，也叫作标签，有着特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。HTML利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
网页的基本组成结构
结构层(HTML)：主要负责描述页面的结构以及内容
表现层(CSS)：主要通过CSS来负责页面的外观样式表现
行为层(Javascript)：通过JS实现用户的交互行为主流浏览器及内核
IE/Edge: Trident内核， 前缀 -ms-
Firefox: Gecko内核 ， 前缀 -moz-
Safari: Webkit内核， 前缀 -webkit-
Opera: presto --> Webkit --> Blink， 前缀 -o-
Chrome: Webkit ---> Blink( Google 与 Opera Software共同开发 )， 前缀 -webkit--
HTML的语义化及其优势
文件中，使用特殊语义的标记，使得不同的内容具有不同的语义，能够让网站的结构划分更加清晰。
语义化网页的优势：
1、方便代码的阅读和后期维护
2、便于浏览器或是网络爬虫更好地解析网站内容
3、使用语义化标签，有利于SEO搜索引擎优化，提高网站的搜索排名
2. HTML基本结构
HTML文件的基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
文档主体部分
</body>
</html>
HTML文件最基本的四个标签，组成了网页的基本骨架，包括:
<html>、<head>、<title>、<body>四组标签。!DOCTYPE
文档声明类型，用于告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面。<html>标签
根标签，表示整个的HTML文档，所有的标签要书写在<html>标签内。-
<head>标签
用于存放<title>、<meta>、<base>、<style>、<script>、<link>,其内部用于对网页的设置。<title>标签
给页面定义标题，使页面拥有自己的名字。
<title>中的内容可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。-
<meta>标签
通过相关属性声明文档的一些特殊信息，例如charset字符集编码，keywords关键字，description页面描述等。常见的字符集编码
UTF-8：以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小。
-
中文国标字库
gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。gbk：是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小。
<body>标签
定义网页的主体部分，用于存放所有的HTML显示内容的标签<p>、<h1>、<a>、<div>等。
<body>内部的元素内容会显示在浏览器的窗口中。
HTML常用标签
- HTML标签
HTML 标记通常被称为 HTML 标签- 标签语法规范
标签名必须书写在一对尖括号
<>内部。标签分为单标签和双标签，双标签必须成对出现。
<p></p> 双标签
<br /> 单标签双标签包含开始标签和结束标签，结束标签必须书写关闭符号
/，单标签也需要进行自封闭书写。在HTML5中，单标签可以不写关闭符号。
- 标签语法规范
HTML元素和HTML标签的不同概念
HTML标签，指的是一对双标签或者单标签的HTML标记，不包含标签内的内容，而HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
-
标签级别
• 根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。- 容器级：标签内部可以存放任意内容，包含容器级标签。比如h1，div等。
- 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p等。
-
标题标签<h1>~<h6>
标题标签的作用是给标签内部的元素内容添加对应级别标题的语义。<h1>在整个HTML中的权重非常高,内部的内容对于提高搜索引擎排名也非常重要，因此<h1>应该放置HTML中最重要的内容。此外，为了防止作弊，如果一个页面出现多个<h1>，反而降低权重。约定俗成的，一个页面中只能出现一个<h1>。 段落标签<p>
给标签内部的内容添加一个完整段落语义，属于文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等。(不能嵌套其他块级标签，如<div>、<p>)换行标签<br />
<br />标签是HTML中一个简单的换行符，属于单标签。在需要换行的位置可以使用<br />标签书写-
常用的文本格式化类标签
- 文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
标签 描述 <b> 粗体 <em> 着重、斜体 <i> 斜体 <small> 小号字体 <strong> 加重语气、粗体 <sub> 下标 H2O <sup> 上标 X2 <ins> 插入字、下划线 <del> 删除字 -
图像标签<img>
单标签，在指定的位置插入一张图片。
<img>常用属性：属性名 描述 src 图片路径 width 宽度(像素数值) height 高度(像素数值) border 边框(数值) title 提示文本 alt 设置图像未找到时的替换文本 src属性和路径
<img>标签的各种属性写法：<img src="01.jpg" title="提示文本" alt="可替换文本" />路径----相对路径与绝对路径
相对路径：查找文件时，需要从文件本身出发，根据相对的位置进行查找，包含 三种查找方式： 同级查找(如：./.jpg)、子级查找(./images/.jpg)、上级查找(../images/*.jpg)绝对路径： 查找文件时，直接从电脑的盘符出发进行查找，或者使用网址形式查找。(如：C:/User/.../.jpg 或者 http://.../xxx/.jpg)
一般使用相对路径（文件的相对位置需要保持不变），可以适当使用网址形式的绝对路径
-
超链接标签<a>
在指定的位置添加超链接，提供用户进行点击和跳转。<a>标签的属性值
- href: 设置链接目标的路径地址
- target：定义被链接的文档在何处跳转显示，主要可选值:
- _self: 默认值，表示在当前窗口打开
- _blank: 空白的，表示跳转的页面在新窗口打开
- title: 鼠标悬停时的提示文本，提高用户体验
超链接标签的写法
<a href="http://www.baidu.com" target="_blank" title="跳转到百度页面">链接</a><a>标签可以实现两种跳转：跨页面跳转、页面内跳转。页面内跳转
- 步骤一：设置锚点(跳转的目标位置)，有两种方式
方式 1：在目标位置找到任一标签，给它添加id属性，id的属性值必须唯一
<p id="mubiao">目标位置</p>
方式 2：在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值必须唯一
<a name="mubiao"></a> - 步骤二：添加链接
链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。
<a href="#mubiao">跳转</a>
跨页面跳转
- 步骤一：设置锚点。方式与页面内锚点跳转一致
- 步骤二：添加链接。相当于先跳转到另一个页面(new.html)，再进行页面内跳转。
<a href="new.html#mubiao">跳转</a>
-
列表标签(无序列表、有序列表、定义列表)
无序列表
<ul>由两个标签组成，
<ul>、<li>，两者是嵌套关系，一个列表中可以有任意个列表项。<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul> 默认显示效果： • 列表项1 • 列表项2 • 列表项3 • 列表项4<ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写，列表项无顺序之分。<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以再次嵌套一个列表。有序列表
<ol>与无序列表一样，只是语义不同，由两个标签组成，
<ol>、<li><ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ol> 默认显示效果： 1. 列表项1 2. 列表项2 3. 列表项3 4. 列表项4<ol>内部只能嵌套<li>，<li>标签不能脱离<ol>单独书写，列表项之间存在顺序先后之分。<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以再次嵌套一个列表。定义列表
<dl>自定义列表不仅仅是一列项目，而是项目及其注释的组合。由三个标签组成完整的结构
<dl>、<dt>、<dd>。<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>是同级关系。<dl> <dt>主题</dt> <dd>解释项1</dd> <dd>解释项2</dd> </dl><dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>不能脱离<dl>单独书写。dl内部可以放多组dt和dd(不建议放多组)，每个dd解释说明的是前面的距离最近的一个dt。
每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。
dt和dd标签也是容器级标签，内部可以放置任意内容。dl定义列表可以应用于图文混排的效果。
-
常用布局标签
<div>和<span>常用作布局，没有具体明确的语义。
<div>标签多用于划分网页区域，进行结构布局，整体设置大的布局效果;<span>标签可辅助进行局部调整。 -
表格标签<table>
表格主要需要这三个标签，
<table>、<tr>、<td>
三者是嵌套关系：table > tr > td ，一个表格中有多个行，每个行中有多个单元格table属性
- border：边框属性。属性值：数字，表示像素值。
- cellspacing：定义单元格之间的间隔。(可以使用css设置border-collapse属性替代)
- cellpadding ：定义单元格边沿与其内容之间的距离。（不建议使用，后期使用css设置内边距）
- border-collapse：设置表格的边框是否被合并为一个单一的边框（css样式属性）。默认情况下表格的单元格之间有空隙(默认值是separate)，会导致双线边框,将值设置为collapse,去掉多余的边框(设置此属性，cellspacing属性将失效)。
- table-layout：设置表格单元格宽高是否固定。automatic(自动布局，内容决定宽度)、fixed(固定表格布局，列宽由表格宽度和列宽度设定)。
制作表格的相关标签 - th: 表格表头（粗体居中）
- tr: 表格行数
- td：表格单元格，有以下属性：
rowspan：跨行合并(上下的合并)
colspan：跨列合并(左右的合并)
属性值为数字，表示合并几行或几列
表格书写示例：
<table> <tr> <th>姓名</th><th>性别</th> </tr> <tr> <td>张三</td><td>男</td> </tr> <tr> <td>李四</td><td>男</td> </tr> </table>制作表格的技巧
1. 先列出所有行<tr>，以最小单元格为标准。
2. 再添加每一行的<td>或<th>单元格。
3. 划分单元格所在行时，顶边对齐的属于同一行。
4. 将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。表格的分区标签
<table>内部最直接的子级包含四个分区标签。标签 描述 caption 表格的标题，书写标题文字 thead 表格的头部，内部嵌套tr>th tbody 表格的主体，内部嵌套tr>td tfoot 表格的页脚，内部嵌套tr>td 浏览器对Table的解析是等待整个table全部加载完才显示。如果加入tbody，浏览器则一边下载一边显示已经下载的内容。（这一点很有意义）
四个分区标签可以选择性的进行组合，其中最主要的标签是tbody。无论顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。
一般使用顺序：thead，tfoot，tbody。tfoot在tbody之前，目的是为了让tbody内容过多时，tfoot的内容能先显示出来。
<table border="1"> <thead> <tr> <th>姓名</th><th>性别</th> </tr> </thead> <tfoot> <tr> <td colspan="2">工作人员的相关信息</td> </tr> </tfoot> <tbody> <tr> <td>张三</td><td>男</td> </tr> <tr> <td>李四</td><td>男</td> </tr> </tbody> </table> -
<form>表单
表单的作用
搜集不同类型的用户输入数据。表单的组成
表单域、提示信息和表单控件。表单的功能：
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行相关填写与操作。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。表单域标签
<form>
通过对应属性规定提交数据的方法和提交位置
<form action="xxx.php" method="post/get" name="message"> 提示信息及表单控件书写位置 </form>属性 描述 action url形式，提交表单数据的服务器url地址 method get/post，设置表单数据提交方式 name 规定表单名称 -
<input>标签
<input>是最重要的一个表单元素，单标签,通过标签属性实现各种功能 。<input>的type属性类型
type属性值 描述 text 单行文本输入框 password 密码输入框 radio 单选框 checkbox 复选框 button 普通按钮 reset 重置按钮 submit 提交按钮 image 图像形式的按钮，利用src厲性 查找图片路径 file 文件上传按钮，定义了输入字段和"浏览按钮" hidden 隐藏按钮（客户端不可见，服务器可见） input其他常用属性：
- name：自定义值， 定义控件的名称，关键属性，提交时数据对应着相应的name
- value：自定义值，定义控件的默认文本值
- size：数值，定义控件的宽度
- checked：布尔值，checked，默认是否被选中
- maxlength：数值，定义允许输入的最多字符数
- readonly：布尔值，readonly，指定文本框的值只可读，不允许修改（js可改），数据仍然能够被提交
- disabled：布尔值，disabled，指定该控件被禁用，数据无法提交
<input>写法
<input type=" " value="默认输入文本" name=" ">四种按钮类型
type 名称 特点 button 普通按钮 无任何特殊功能 reset 重置按钮 将填写的表单内容清空，恢复成默认 submit 提交按钮 数据提交,并重置清空 <form>中填写的倌息image 图片按钮 默认与提交按钮的效果相同 文件上传
<input type="file"/>设置multiple属性能够上传多个文件。-
文本域<textarea></textarea>
可输入多行文本区域。<textarea>有两个标签属性，可以设置显示区域大小。（注意空白折叠现象）- rows：行数，可显示的最大行数，若超过行数则会被隐藏并且出现滚动条。
- cols：列数，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。
-
下拉菜单
下拉菜单由两个标签组成-
<select>：选择，表示定义下拉菜单整体结构。 -
<option>：选项，表示定义下拉菜单的每一项。
<!-- select > option，option可以有任意多项 --> <select name="city1"> <option value=''>北京</option> <option>上海</option> <option>武汉</option> <option>广州</option> </select> <!-- 可以对下拉菜单项进行分组管理(optgroup) --> <!-- select > optgroup > option --> <!-- optgroup有一个abel属性，表示给这一组选项添加一个分组标签名 --> <select name="city2"> <optgroup label="湖北省"> <option>武汉</option> <option selected="selected">黄石</option> </optgroup> <optgroup label="广东省"> <option>广州</option> <option>深圳</option> </optgroup> </select> -
-
<label>标签
能够为表单元素定义标注（标记）。如果将表单控件与提示内容使用
<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器会自动将焦点转到和标签相关的表单控件上。与表单控件的绑定方式：
- 给
<label>标签设置for属性，属性值为绑定的表单元素的id属性值
<input type="checkbox" name="hobby" id="sport" /> <label for="sport">运动</label>- 直接使用
<label>标签将绑定内容与表单元素一起进行嵌套
<label><input type="radio" name="sex" />男</label> - 给
字符实体
规则：所有的字符实体和实体编号都是以 & 开头，以 ; 结尾。常用的字符实体有：
<(< less than) 、>(> great than)、 (空格)、©(©版权)、¥(￥)、×(x)
