一、HTML简介
1、HTML是什么？
Hyper Text Markup Language
超文本（功能丰富）标记（标签）语言，用于搭建网页结构。
2、HTML标记标签
由尖括号包围，成对出现（开始标签/开放标签、结束标签/闭合标签）
<html>元素内容</html>
3、HTML文档
用于描述网页，包含 HTML 标签和纯文本，也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
二、HTML元素
HTML文档由HTML元素定义。
1、HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
<a href="www.baidu.com" > 搜索</a>
2、HTML元素语法
<开始标签>元素内容<结束标签>
某些 HTML 元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束），关闭空元素在开始标签中添加斜杠，比如 <br />。
大多数 HTML 元素可拥有属性
3、HTML常用标签
名称 作用
html 包裹所有其他标签，是HTML最外层元素
body 所有网页内容
head HTML文档头部
title 网页标题
div 表示一个容器（盒子）
span 表示一个容器，用来装一小段文字，多个span标签内文字显示在一行
h1~h6 表示多级标题
p 段落标签，装整段文字
hr 表示一条水平分割线
ul.li ul表示无序列表，li中为无序列表的每个项目内容
i/em 表示斜体
strong 加粗
br 换行，插入单个折行
img 单标签，图像标签，用于引入图像，<img src="w3school.jpg" width="104" height="142" />
a 超链接，链接一切资源，包括网址、文字和视频等，<a href="http://www.w3school.com.cn">This is a link</a>
<!--注释内容--> 定义注释
4、HTML元素关系（嵌套）
4-1 分类
①块级元素
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul、li
特点：总是在新行上开始，高度、行高以及上下边距都可控制，宽度默认是容器的100%，除非设定宽度，支持所有css命令。
功能：主要是用来搭建网站架构、网页布局、承载内容。
<div> 元素常见的用途是文档布局。取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
1.无默认样式：
<div ><nav><section><header><footer>
2.有默认样式
<h></h>标题 margin、字体加粗、字体大小
<p></p> 段落 margin
<dl></dl>列表 maigin
<dd></dd>列表项 maigin
<ul></ul> 无序 maigin、padding
<ol></ol>有序 maigin、padding
<li></li>列项表项 list-style：none
②行内元素（内联、内嵌）
span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var
特点：和其他元素都在一行上，高、行高、以及上下边距不可变，宽度就是它的文字和图片的宽度，不可改变，代码换行被解析。
HTML <span> 元素是行内元素，能够用作文本的容器。设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。
1.无默认样式：
<span></span>
2.有默认样式：
a标签 默认有颜色、下划线
strong 默认有字体加粗，强调的意思
em，i 默认有字体倾斜
mark 默认有背景颜色、字体颜色
table 默认有表格边框颜色，边框间隙
big 默认有字体加大
b 默认有字体加粗
table表格边框颜色、边框间隙。
big字体加大
③内联块
1、块转内联: display: inline;
2、内联转块: display:block;
3、内联块: display: inline-block;
注意:IE67需要加.inlineB{*display: inline;*zoom: 1;}，IE67用*前缀;IE6用_前缀。
inline-block特性：块在一行显示，行内属性支持宽高，没有宽高时内容撑开宽高。
问题：内容换行被解析，ie6,7不支持。
④为何有的行内元素如input和img可设置宽高？
替换元素 根据标签和属性决定显示内容，如input、select等，一般有内在尺寸，如img默认以src属性引用图片的宽高。
不可替换元素 内容直接展示
4-2 嵌套规则：
1、块级元素与块级元素平级、内嵌元素与内嵌元素平级
2、块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。
3、有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素h1~h6、p、dt
4、块级元素不能放在标签p里面
5、li标签可以包含标签，因为li和div标签都是装载内容的容器
6、a标签想要用hover必须把它的路径写全
三、HTML属性
属性为HTML元素提供附加信息。推荐使用小写。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，则必须使用单引号，例如：name='Bill "HelloWorld" Gates'
1、常用属性
属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）
2、img相关属性
<img src="图片地址" width="104" height="142" />
1、图片地址
绝对地址 当前图片在硬盘上的位置
相对地址 参照物——当前所写文件位置
①与参照物同级 图片地址=“图片名字”或“./图片名字”
②在参照物下级 图片地址从同级开始寻找=“./文件夹/文件夹……/图片名称”
③在参照物上级 图片地址=“../文件夹……/图片名称”
2、属性
属性名称 描述
src 展示图片
alt 当图片无法展示时用来提示用户的文字
title 当鼠标移动到图片时用来提示用户的文字
3、a相关属性
href 超链接地址
target -blank 新建一个浏览器标签页来显示超链接内容，不覆盖原来的网页
四、HTML标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题，<h6> 定义最小的标题。只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
用标题来呈现文档结构，搜索引擎使用标题为网页的结构和内容编制索引，用户可以通过标题来快速浏览网页。
注释：浏览器会自动地在标题的前后添加空行。默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
五、HTML段落
1、段落是通过 <p> 标签定义的。
注释：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！但是不要用 <br /> 标签去创建列表。
2、HTML 折行——在不产生一个新段落的情况下进行换行（新行），使用 <br /> 标签。
3、HTML 输出
无法确定 HTML 被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果。无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作（显示为）一个空格。
六、HTML样式
1、style 属性用于改变 HTML 元素的样式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
2、
3、文本对齐
<h1 style="text-align:center">This is a heading</h1>
七、HTML格式化
1、以HTML的标准来格式编辑某个HTML的文件，HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
pre 标签可控制空行和空格，很适合显示计算机代码
2、改变文本的外观和含义
改变文本的外观并为文本关联其隐藏的含义的这些标签可以分成两类：基于内容的样式（content-based style）和物理样式（physical style）。
https://www.w3school.com.cn/html/html_style.asp
八、HTML引用
标签名称 描述
q 定义短的引用，浏览器通常会为<q>元素包围引号
blockquote 定义被引用的节，浏览器通常会对该元素进行缩进处理
abbr 定义缩写或首字母缩略语，对缩写标记能为浏览器、翻译系统以及搜索引擎提供有用的信息
dfn 如果设置了该元素的title属性，则定义项目。如果包含具有标题的 <abbr> 元素，则title 定义项目。 否则，<dfn> 文本内容即是项目，并且父元素包含定义
address 定义文档或文章的联系信息（作者），通常以斜体显示。大多数浏览器会在此元素前后添加折行
cite 定义著作的标题，浏览器通常会以斜体显示 <cite> 元素
bdo 定义双流向覆盖，覆盖当前文本方向<bdo dir="rtl">This text will be written from right to left</bdo>
acronym 标记首字母缩写，HTML5 中不支持 标签，使用 <abbr> 标签代替
九、计算机代码
1、计算机代码格式
通常，HTML 使用可变的字母尺寸和字母间距。在显示计算机代码示例时，并不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。
2、键盘格式 <kbd> 元素定义键盘输入文本
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
3、样本格式 <samp> 元素定义计算机输出代码示例
4、代码格式 <code> 元素定义编程代码示例文本，不保留多余的空格和折行，如需解决该问题，须在 <pre> 元素中包围代码
5、变量格式化 <var> 元素定义数学变量
十、HTML CSS
1、使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
2、使用样式属性做一个没有下划线的链接 <a href="/example/html/lastpage.html" style="text-decoration:none">链接</a>
3、使用<link> 标签链接到一个外部样式表 <head><link rel="stylesheet" type="text/css" href="/html/csstest1.css" ></head>
4、当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。插入样式表有以下三种方式
①外部样式表 适用于样式需要被应用到很多页面时
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
②内部样式表 适用于单个文件需要特别样式时
在 head 部分通过 <style> 标签定义内部样式表。
③内联样式 适用于特殊的样式需要应用到个别元素时
在相关的标签中使用样式属性，样式属性可以包含任何 CSS 属性。
<p style="color:red>this is a statement</p>
相关标签 描述
style 定义样式定义
link 定义资源引用，link 元素是空元素，仅包含属性。只能存在于 head 部分，不过它可出现任何次数。
span 定义文档中的行内的小块或区域，组合文档中的行内元素
十一、HTML链接
1、超链接
超链接可以是一个字、词、组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。
把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
通过使用 <a> 标签在 HTML 中创建链接，有两种使用 <a> 标签的方式：
①通过使用 href 属性 - 创建指向另一个文档的链接
②通过使用 name 属性 - 创建文档内的书签
2、链接语法
<a href="url">link text</a>
href 属性规定链接的目标,开始标签和结束标签之间的文字(可以是图片或其他HTML元素)被作为超级链接来显示。
3、链接属性
①target属性 定义被链接的文档在何处显示。
target="_blank" 在新窗口打开文档
target其他值：_parent _self _top
②name 属性 规定锚的名称，创建 HTML 页面中的书签（对读者不可见）
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。可使用id属性替代name属性
命名锚的语法
<a name="tips">注意事项（显示在页面上的文本）</a> ——创建一个书签
<a href="#tips">注意事项</a>——在同一文档中创建指向该锚的链接
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">注意事项</a>——在其他页面中创建指向该锚的链接（将 # 符号和锚名称添加到 URL 的末端）
4、注意事项
始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
十二、图像
1、定义图像的语法是：<img src="url"/>
在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，只包含属性，并且没有闭合标签。在页面上显示图像，需要使用源属性（src）。
浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
2、img相关属性
源属性src "source"。源属性的值是图像的 URL 地址（存储图像的位置）。
替换文本属性alt 为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息，浏览器将显示这个替代性的文本而不是图像。
区域属性area 定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。area 元素总是嵌套在 <map> 标签（<img>标签中的 usemap 属性与map元素 name 属性相关联，创建图像与映射之间的联系。）
align属性 属性值为：bottom（默认） middle top 定义图像在文字中的对其方式。属性值为：right、left 定义图片浮动至段落的左或右。
3、注意事项
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以慎用图片。
gif 和 jpg 文件均可用作 HTML 背景。如果图像小于页面，图像会进行重复。
制作图像链接：img标签被A标签包围
创建图像映射：带有可供点击区域的图像地图，其中的每个区域都是一个超级链接,img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
十三、HTML表格
1、表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2、表格标签
table 定义表格
caption 定义表格标题
th 定义表格的表头，多数浏览器将表头显示为粗体居中的文本
tr 定义表格的行
td 定义表格单元格
thead 定义表格的页眉
tbody 定义表格的主体
tfoot 定义表格的页脚
col 定义表格的列的属性
colgroup 定义表格列的组
3、表格边框和属性
①<table border="0" cellspacing="" cellpadding="">……</table>如果
不定义边框属性，表格将不显示边框。
②table属性
属性 值 描述
width px/% 规定表格宽度（包含border）
border px 规定表格边框宽度
Bgcolor 三种颜色表示法 规定表格背景颜色
align left、center、right 表格相对于周围元素的对齐方式
cellpadding px/% 规定单元格边缘与单元格内容间的空白
cellspacing px/% 规定单元格与单元格间的空白
frame void/hsides/vsides/lhs/rhs/above 外侧边框显示样式，frame 属性无法在 Internet Explorer 中正确地显示。
rules none/groups/rows/cols/all 内侧边框线条样式
③tr标签属性
align left/right/center/justify 规定行内容水平对齐方式
valign top/middle/baseline 规定行内容垂直对齐方式
Bgcolor 规定行的背景颜色
4、空单元格
在一些浏览器中，如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。 <td> </td>
5、表格合并
在第一个要合并的单元格上加合并属性，数值为目标合并单元格数量+1。
①水平合并（跨列）<td colspan="3">...</td> 水平合并2列
②垂直合并（跨行）<td rowspan="3">...</td>
注意：合并后多出单元格，需要将合并后不存在的单元格删除。
6、表格嵌套
完整表格结构，放入td标签内。注意表格行列的完整性。
十四、HTML列表
1、无序列表
<ul><li>apple</li></ul>
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，始于 <ul> 标签。每个列表项始于 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<ul type="disc"/"circle"/"square">...</ul> 项目标记符号为粗圆点/空心圆圈/实心正方形
2、有序列表
<ol><li>apple</li></ol>
有序列表也是一列项目，列表项目使用数字进行标记，始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<ol type="A"/"a">...</ol> 项目列表序号默认为数字，可设置为大小写字母和大小写罗马字母
3、定义列表
<dl><dt>apple</dt></dl>
自定义列表不仅仅是一列项目，而是项目及其注释的组合，以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始（有缩进效果）。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
4、列表嵌套
完整的列表格式插入列表项中。
十五、HTML布局
1、使用 <div> 元素的 HTML 布局，<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
2、使用 HTML5 的网站布局，HTML5 提供的新语义元素定义了网页的不同部分：
3、使用表格的 HTML 布局（元素不是作为布局工具而设计的，<table> 元素的作用是显示表格化的数据）使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式
十六、HTML响应式web设计
1、RWD 指的是响应式 Web 设计（Responsive Web Design），能够以可变尺寸传递网页，对于平板和移动设备是必需的。
2、创建自己的响应式设计
①自己创建
②使用 Bootstrap——现成的 CSS 框架。Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
十七、HTML框架
1、通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：开发人员必须同时跟踪更多的HTML文档，很难打印整张页面。
2、框架结构标签<frameset>
<frameset>定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列，rows/columns 的值规定了每行或每列占据屏幕的面积。
3、框架标签<frame>
Frame 标签定义了放置在每个框架中的 HTML 文档。
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。为不支持框架的浏览器添加 <noframes> 标签。
重要提示：不能将<body> 标签与<frameset>标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body>标签内。
4、行列混合框架
5、导航栏
分两列，第一列固定宽度，导航栏为链接形式，第二列放默认显示页面
内联框架<iframe src="……"></iframe>由iframe标签实现
6、使用框架导航跳转至指定的节
左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
十八、内联框架iframe
iframe 用于在网页内显示网页。定义内联的子窗口（框架）
1、添加iframe的语法
<iframe src="URL"></iframe> URL 指向隔离页面的位置。
2、iframe属性
height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框。
3、iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性。
十九、HTML背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（Bgcolor）属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。（应考虑背景图像是否增加了页面的加载时间。建议图像文件不应超过 10k。）
注意：应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
二十、HTML脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
1、HTML script 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
2、<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比如在浏览器禁用脚本时，或浏览器不支持客户端脚本时。可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容。
二十一、HTML文件路径
文件路径描述了网站文件夹结构中某个文件的位置，会在链接外部文件时被用到：网页、图像、样式表和JavaScript。
绝对文件路径是指向一个因特网文件的完整 URL：https://www.w3school.com.cn/images/picture.jpg
相对路径指向了相对于当前页面的文件。如果使用了相对路径，网页就不会与当前的基准 URL 进行绑定。所有链接在电脑上 (localhost) 或未来的公共域中均可正常工作。
二十二、HTML 头部
1、<head> 元素 是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
2、<title> 标签 定义文档的标题，在所有 HTML/XHTML 文档中都是必需的。title 元素能够：定义浏览器工具栏中的标题、提供页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题。
3、<base /> 标签 为页面上的所有链接规定默认地址或默认目标（target）。
4、<link /> 标签 定义文档与外部资源之间的关系，最常用于连接样式表。
5、<style> 标签 为 HTML 文档定义样式信息，可在标签内规定 HTML 元素在浏览器中呈现的样式。
6、<meta> 元素 提供关于 HTML 文档的元数据（关于数据的信息，不会显示在页面上，但是对于机器是可读的）。典型的情况是，meta 元素被用于规定页面的描述（<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />）、关键词（<meta name="keywords" content="HTML, CSS, XML" />）、文档的作者、最后修改时间以及其他元数据。始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面（name 和 content 属性的作用是描述页面的内容）。
7、<script> 标签用于定义客户端脚本，比如 JavaScript。
二十三、HTML 字符实体
1、HTML 中的预留字符必须被替换为字符实体。在 HTML 中，某些字符是预留的，如不能使用小于号（< 或 <）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体。
2、不间断空格。HTML 中的常用字符实体是不间断空格( )。浏览器将HTML 页面中的N个空格显示为1个。
二十四、HTML 统一资源定位器URL
URL （Uniform Resource Locator）也被称为网址。可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
1、当点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址遵守以下的语法规则：scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
2、流行的URL Schemes
3、HTML URL 字符编码 URL 编码会将字符转换为可通过因特网传输的格式。
URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。
二十五、HTML Web Server
如果希望向世界发布自己的网站，那么必须把它存放在 web 服务器上。（）
托管自己的网站：
1、在自己的服务器上托管网站
需考虑：硬件支出——如果要运行“真正”的网站，需要购买强大的服务器硬件和稳定的（一天 24 小时）高速连接。
软件支出——服务器授权通常比客户端授权更昂贵，也许有用户数量限制。
人工费——须安装自己的硬件和软件，同时要处理漏洞和病毒以确保服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
2、使用因特网服务提供商（ISP）（从 ISP 租用服务器）
需注意：24 小时支持，每日备份，ISP 的流量限制，带宽和内容限制，支持需要的 e-mail 功能，支持数据库访问。
二十六、HTML颜色
1、颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
2、颜色名
仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。
二十七、HTML文档类型
1、<!DOCTYPE> 声明帮助浏览器正确地显示网页。
只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
2、定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
<!DOCTYPE> 声明没有结束标签，声明对大小写不敏感。
3、常用声明
HTML5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
更多参考：https://www.w3school.com.cn/tags/tag_doctype.asp
十五、表单
1、表单简介
表单用于收集用户输入数据，将其发送给后台，是一个包含“表单元素（表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。）”的区域。处理信息的过程：点击表单中的提交按钮，用户输入信息上传到服务器中，服务器有关程序将信息处理后进行储存或返回客户端浏览器。因此需要明确的内容是：提交的内容是什么？提交给谁？提交方式？提交后的反应是什么？这些都将有form标签的属性完成。
<form> 元素（标签）定义 HTML 表单
2、form标签属性
属性名称 描述
name 定义表单名称，通过命名控制表单和后台程序的关系（对于 DOM 使用：document.forms.name），如果要正确地被提交，每个输入字段必须设置一个 name 属性。
method 告诉浏览器如何将数据发送给服务器，定义发送数据的 HTTP 方法（GET 或 POST）
action 定义表单处理程序的位置，即提交到哪里
enctype 设置表单提交信息的编码方式
target 设置表单返回窗口，规定在何处打开action中设定的url（默认：_self）
①action属性值应该为一个url，如果省略 action 属性，则 action 会被设置为当前页面。
②method属性（默认：GET）
get：本质为一个url的拼接，将input中获取的参数信息拼接到一起形成新的url。请求可被缓存，可保留在浏览器历史记录中，可被收藏为书签，不适用于敏感数据。有长度限制，用于取回数据，如向后台查询数据。
post：url不发生改变，参数信息 被更安全地传输给后台。不可缓存，无记录，不可收藏。无长度限制，用于向后台上传数据，如上传文章。
③enctype值 （默认：url-encoded）
application/x-www-form-urlencoded 默认，于发送前编码所有字符
multipart/form-data 不对字符编码，用于包含文件上传控件的表单
text/plain 空格转换为+，不对特殊字符编码
autocomplete 值为on和off，规定是否启用表单自动完成功能（默认：开启）
novalidate 使用此属性，提交表单时不进行HTML5自带的验证
3、表单标签控件及其属性
控件是收集信息的工具。form表单提交信息的格式是：keyword：value，因此每个控件均有name和value两个属性，其中name由开发人员命名，value由用户输入。
①<input>标签 元素有很多形态，根据不同的 type 属性。
属性名称 描述
type 定义控件类型
name 定义表单域的名称
value 规定输入字段的初始值，其他属性根据type不同而变化
maxlength 控制最多输入的字符数，该属性不会提供任何反馈，须编写 JavaScript 代码提醒用户
size 控制框的宽度（输入字段的尺寸）（以字符计）
readonly 规定输入字段为只读（不能修改），属性不需要值
disabled 规定输入字段是禁用的，被禁用的元素是不可用和不可点击且不会被提交，属性不需要值
HTML5 为 <input> 增加了如下属性：
1）autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。
2）novalidate 属性属于 <form> 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。
3）autofocus 属性是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
4）form 属性规定 <input> 元素所属的一个或多个表单。提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
5）formaction 属性规定当提交表单时处理该输入控件的文件的 URL。覆盖 <form> 元素的 action 属性，适用于 type="submit" 以及 type="image"。
6）formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。覆盖 <form> 元素的 enctype 属性，适用于 type="submit" 以及 type="image"。
7）formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。覆盖 <form> 元素的 method 属性，适用于 type="submit" 以及 type="image"。
8）formnovalidate 属性覆盖 <form> 元素的 novalidate 属性，可用于 type="submit"。
9）formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。覆盖 <form> 元素的 target 属性，可与 type="submit" 和 type="image" 使用。
10）height 和 width 属性规定 <input> 元素的高度和宽度，仅用于 <input type="image">。注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
11）list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
12）min 和 max 属性规定 <input> 元素的最小值和最大值。适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
13）multiple 属性是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值，适用于以下输入类型：email 和 file。
14）pattern 属性规定用于检查 <input> 元素值的正则表达式。适用于以下输入类型：text、search、url、tel、email、and password。提示：请使用全局的 title 属性对模式进行描述以帮助用户。
15）placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中，适用于以下输入类型：text、search、url、tel、email 以及 password。
16）required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段，适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
17）step 属性规定 <input> 元素的合法数字间隔。示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
<input type="控件类型">
1）<input type="text"> 定义用于文本输入的单行输入字段 表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
2）<input type="submit"> 定义用于向表单处理程序（包含用来处理输入数据的脚本的服务器页面，在表单的 action 属性中指定）提交的按钮。每个字段需要有name属性才可以被正确提交
3）<input type="reset" value="重置按钮" />
4）<input type="radio" checked /> 单选按钮，checked默认选中
5）<input type="tpassword" value="密码输入框" />
6）<input type="img" value="图片" />
7）<input type="hidden" value="隐藏域" />
8）<input type="file" value="文件提交" />
9）<input type="CheckBox" disabled />复选框允许用户在有限数量的选项中选择零个或多个选项。 disabled 表示禁用
10）<input type="button" />普通按钮
HTML5新增输入控件
1）<input type="number" name="quantity" min="1" max="5">/ 包含数字值的输入字段，可对数字做出限制，根据浏览器支持，限制可应用到输入字段。
2）<input type="date" min="2000-01-02 max="1979-12-31"/> 用于应该包含日期的输入字段。根据浏览器支持，日期选择器会出现输入字段中。
3）<input type="color"> 用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现输入字段中。
4）<input type="range" min="0" max="10"/> 用于应该包含一定范围内的值的输入字段。根据浏览器支持，输入字段能够显示为滑块控件。
5）<input type="month"> 允许用户选择月份和年份。根据浏览器支持，日期选择器会出现输入字段中。
6）<input type="week"> 允许用户选择周和年。根据浏览器支持，日期选择器会出现输入字段中。
7）<input type="time"> 允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现输入字段中。
8）<input type="datetime"> 允许用户选择日期和时间（有时区）。根据浏览器支持，日期选择器会出现输入字段中。
9）<input type="datetime-local"> 允许用户选择日期和时间（无时区）。根据浏览器支持，日期选择器会出现输入字段中。
10）<input type="email"> 用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
11）<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
12）<input type="tel"> 用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。
13）<input type="url"> 用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。IE9 及其更早版本不支持 type="url"。
②<select>标签 下拉列表
<option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项。
③<textarea>标签 定义多行输入字段（文本域）
<textarea name="邮件" rows="10" cols="30">The cat was playing in the garden.</textarea>
阻止浏览器对窗口的拖动：CSS属性设置{resize：none}
3、表单标签补充
①<fieldset>标签和<legend> 标签
<fieldset>标签组合表单中的相关数据，<legend> 元素为<fieldset>标签定义标题。相当于一个方框，字段集中可包含文本和其他元素，用于对表单中的元素进行分组并在文档中区别标出文本。可嵌套。
②label 标签
<label for="绑定控件的id名">...</label> 用于定义标签，为页面上其他元素提供指示信息。
③HTML5新增表单元素
<datalist> 元素为<input>元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input>元素的 list 属性必须引用<datalist> 元素的id属性。 元素的 id 属性
