1.W3C
W3C（World Wide Web Consortium）即万维网联盟。W3C中国
W3C标准包括：结构化标准语言：HTML、XML
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
2.HTML定义
HTML（Hyper Text Markup Language）即超文本标记语言，是Internet上用于编写网页的主要标记语言。
HTML是一种建立网页文件的语言，通过标记式的指令（Tag），将超文本——影像、声音、图片、文字、动画等内容显示出来。
HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。
HTML5 提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。
（新的网页功能：使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等）
HTML5 优势：微软、Google、苹果、Opera、Mozilla均支持HTML5。
市场的需求
跨平台
3.HTML基本结构
<html><!-- 表示文档标签 -->
<head><!-- 标签表示文档的头部标签，在<head>标签中的信息是用于给浏览器识别的内容，如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 -->
<meta charset="UTF-8">
<!-- 我是注释，不会显示在网页上，注释的内容写在符号之间 -->
<title>我的第一个HTML文件</title>
</head>
<body><!-- 标签为我们在浏览器中看到的内容 -->
我的第一个HTML文件
</body>
</html>
<!-- 注释内容 --> 注释内容不会显示在网页上
如<title>、</title> 成对的标签，分别叫开放标签和闭合标签。
单独呈现的标签（空元素），如<hr/>；意为用 / 来关闭空元素。
4.HTML头部标签
1）DOCTYPE标记
标记位于文档的最前面，告诉浏览器，我们要使用什么规范。主要用于浏览器解析文档标签的依据，协议的不同会影响整个页面的显示效果。
2）html标记
<html> -- </html> --里面包括<head>和<body>等标记, HTML文件中所有的内容都应该在这两个标记之间。
可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档。 如：<html lang="zh-cn"></html>表示当前文档语言为中文。 <html lang="en"></html>表示当前文档语言为英文。
3）head标签
<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后。
主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对
<head>标记，head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
4）meta标签
描述性标签，一般用来做SEO。（Search Engine Optimization，搜索引擎优化），必须位于<head>标记之内。
<meta>标记可提供有关页面的元信息（meta-information）位于文档的头部，不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta name="description" content="来这个地方可以学习HTML">
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
5）title标签
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。
<title>我的网页标题</title>
title标签对于网站SEO至关重要，标题的好坏直接影响网站的SEO。
6) link标签
<link>标记最常用的用法是用来链接外部的CSS文件，必须位于<head>标记之内。
<link rel="stylesheet" type="text/css" href="theme.css" />
此外还可以用来引入网站的icon图标
<link rel="shortcut icon" href="<http://www.baidu.com/favicon.ico>" />
5.HTML内容标签
1）标题标签
标题标签用<h1> - <h6> 来表示，其中<h1> 定义最大的标题。<h6> 定义最小的标题。
从<h1> - <h6>，相对于当前文档的重要性递减。
<h1>一级标题是重中之重，一般运用于网站标题或者头条新闻上；
<h2>二级标题主要出现在页面的主体内容的文章标题和栏目标题上。
<h3>三级标题一般出现在页面的边侧栏上。
由于页面层级关系不能太深，
<h4>、<h5>和<h6>一般较少出现。
建议h1标签在整个页面中最多出现一次（当然可以超过，但是不利于搜索SEO）。
标题标签是用于体现文档内容的重要性，不要仅仅是为了产生粗体或大号的文本而使用标题。
ps：浏览器会自动地在标题的 前 后 添加空行。
2）段落标签
段落是通过<p>标签定义的，p标签之间不会相互共用一行，会独占一行或者多行的空间。
3）水平线标签
hr标签，表示在页面中插入一条水平线，hr标签是单标签，不需要闭合标签。
4）换行标签
<p>标记中的属性align能够设置段落中文字的对齐方式，对齐方式分为左对齐，居中和右对齐。
语法：<p align="对齐方式"> — </p> （ left，center，right ）
5）span标签
<span>标签被用来组合文档中的行内元素，span标签可以跟其他的span标签共用一行。
通常情况下，需要给span标签应用样式，否则与页面上的其他文本没有什么任何区别。
6）div标签
<div>标签用来组合块级元素，这样就可以使用样式，对他们进行格式化。
7）img标签
<img> 标签向网页中嵌入一幅图像。从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。
<img> 标签创建的是被引用图像的占位空间。最好专门创建一个文件夹放resource。
<img src="path" alt="备选文本” title="悬停文字" width=“宽度” height=“长度”>
alt 属性：（图像显示不出时，图像备选文本）。
title属性：（鼠标在图像上悬停时，出现的文字）
../ 表示当前页面的上一级目录 （相对路径）
<img>标签有两个必需填的属性：src 属性 和 alt 属性。
8）字体样式标签
粗体<strong> </strong> 斜体 <em> </em>
9）滚动标签
<marquee>标记可以让文字滚动，常用属性有：滚动方向（direction）、滚动方式（behavior）、滚动次数（loop）、滚动速度（scrollamount）、滚动延迟（scrolldelay）、背景颜色（bgcolor）、宽度（width）、高度（height）等。
<marquee direction="滚动方向" behavior=“滚动方式” >滚动的文字</marquee>
direction的值有up、down、left、right，向左滚动是默认情况；
behavior的值有scroll、slide、alternate（循环滚动、只滚一次，来回交替滚动）；
loop的值为整数；
scrollamount的值为文字每次移动的长度，以像素为单位；
scrolldelay的单位是毫秒。
10）多媒体标签（bgm/音频/视频）
背景音乐：<bgsound src="音乐文件的路径及名称" loop=“播放次数”> （单标签）
多媒体文件：<embed src="多媒体文件的路径及名称" width=“播放器宽度” height=“播放器的高度”></embed>
视频：<video src="视频文件的路径及名称" controls autoplay></video>
音频：<audio src="音频文件的路径及名称" controls autoplay></audio>
路径可以是相对路径也可以是绝对路径
相对路径：是以当前文件所在的路径为基准进行相对文件的查找。
绝对路径：是完全路径，是文件在硬盘上的真正路径。
11）超链接标签
超链接的作用是建立从一个位置到另一个位置的链接。 成对出现
利用超链接不仅可以进行网页间的相互访问，还可以使网页链接到其他相关的多媒体文件上。
../ 表示当前页面的上一级目录 （相对路径）
同一级别目录下可以省略路径名。
<a href=“链接路径（必填）” target=“目标窗口的打开方式”>链接内容（文字or图片）</a>
target的值有_self、_blank、 _top、 _parent，_self是默认值。
_blank表示目标页面会在一个新的空白窗口中打开；
_top表示目标页面会在顶层框架中打开；
_parent表示目标页面会在当前框架的上一层打开。
12）锚链接
定位文章具体位置，类似于书签。
首先在页面上命名锚记
如在页面顶部如下代码
<a id="top">（可以写字可以不写）</a>（id做锚记）然后在页面的最下面可以这样写
<a href="#top">回到顶部</a>。
图片锚链接
<a href="你要链接到的地址" target="_blank" ><img scr="图片地址URL" width="宽度" height="高度" alt="图片说明" border="0" ></a>
文字锚链接
<a href="所要链接的地址" target="_blank">输入的文字</a>
LOGO锚链接
<img src="图片logo地址" border="0">
把以下代码加在已经存在的面板里（想选那种方式就加那段代码，不要全部都加）
13）功能性链接
<a href="mailto:邮箱地址“>点击联系我</a>
QQ链接，QQ推广（先在页面登录QQ页面会自动生成代码）
14）特殊符号
空格  
<font size="数字">文字<font>
15) iframe内联框架（实现了网页的 拼装组合）
<iframe src="path" name="名字" frameborder="数字" width=“数字” height=“数字”></ifram>
和<a href="跳转地址" target=“iframe的名字”>点击跳转</a> 搭配使用
在iframe里面打开href的地址
6.块元素和行内元素
块元素
无论内容多少，该元素独占一行。（p段落、h1-h6几级标题）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行。（a、strong、em）
可以放在一行里的标签，都是行内元素
7.HTML高级标签
1）列表标签
a. 无序列表 （unorder list）（导航、侧边栏）
无序列表用<ul>标签来表示。在每个列表项目文字之前，以项目符号作为每条列表项的前缀。
项目符号默认是●，可以通过<ul>的type属性，改变无序列表的项目符号。
<ul type="disc"></ul>
type的值有disc ●，circle○，square■。
其中的列表项用<li>标签表示，无序列表的各个列表项之间没有顺序级别之分，是并列的。
b. 有序列表 （order list）（试卷、问答）
有序列表用<ol>标签来表示。也有项目类型，可以通过type属性设置自己的项目类型。
项目序号默认是数字。
type的值有1（1、2、3、4····）、a（a、b、c、d···）、A（A、B、C、D····）、i（i、ii、iii、iv···）、Ⅰ（Ⅰ、Ⅱ、Ⅲ、Ⅳ···）
可以通过start属性改变项目序号的起始值，起始值只能是数字，但同样对字母、罗马数字起作用。
其中的列表项也用<li>标签表示，其各个列表项按照一定的顺序排列定义。
c. 自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号.
自定义列表用<dl>标签来表示；
其中的列表项用<dt>标签表示；
每个列表项的解释用<dd>标签表示。
2）表格标签
简单的 HTML 表格由 table 元素
以及一个或多个 tr、th 或 td 元素组成（行、列、单元格组成）
表格的code都需写在<table></table>之间 table的属性有border、style。
colspan=“跨的列数值”，rowspan=“跨的行数值”，align=“对齐格式”
table的属性，border=“边框（像素）”
<caption>表格标题</caption>
tr 元素定义表格行；row
th 元素定义表头；head
td 元素定义表格单元
3）表单标签
表单就是用户提交数据到后台的一个虚拟单子，表单一般由文本框、下拉列表、单选、多选、文本域等组成。
A.表单语法框架
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text"></p>
<p> 密码：<input name="pass" type="password"></p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
面试必考！
method的值有get、post，提交方式
get 可以直接在URL中看见我们提交的信息（高效、不安全、默认值）
post 在URL中看不见我们提交的信息（比较安全，可以传输大文件）
可以在审查元素中抓住post，network，headers，form data中看见密码！（可以加密）
action 表示向何处发送表单数据（必填）（可以是网站 or 请求处理地址）
From标签
<form></form>表单的域标签，用于包裹整个表单的内容。
Input标签
Input标签是文本框、单选、多选、按钮等。Type属性不同的取值决定了input标签的作用。
<input /> 自闭合标签
name属性，指定表单元素的名称，一般所有都要写！
value属性，元素的初始值。type为radio时必须指定一个值。
size属性，指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。文本框长度
maxlength属性，type为text或password时，输入的最大字符数。
type的值有text、password、checkbox（多选）、radio（单选）、submit（）、reset（清空表单）、file、hidden、image和button，默认值是text。
B.文本框与密码框
type的值为text，表示是单行文本框，输入内容以单行显示。（可以输入数字、字母、文本）
type的值为password，表示是密码框，在其中输入的字符都以星号*****或者圆点●显示。
此时value可以是用户自定义或官方设定默认值
C.单选框和多选框
radio单选框，一般由○表示，name一般写成同一组，name不一样就可以同时选。
checkbox多选框，一般由□表示，name一般写成同一组。（数组形式获取）
checked属性，属性值只有一个checked，可以省略属性值，在单选按钮和多选按钮中表示此按钮被选中。type为radio或checkbox时，指定按钮是否是被选中。可以用户自选或官方默认选中
D.按钮
实现和用户的交互，主要配合脚本语言（JavaScript）来进行表单的处理。
此时value中的值是可以显示在按钮框里
关闭窗口：<input type="button" value="关闭" οnclick="window.close()"/>
type值为image时，也可以跳转。
Select标签
select 元素可创建单选或多选菜单，<select> 元素中的 <option> 标签用于定义列表中的可用选项。
1.下拉列表
selected 直接写出，表示默认选中某一项。
2.列表标签
列表标签（左）
Multipe：也是一个单属性。值只有一个multiple。设置了此属性，表示select标签表现为列表标签，否则表示下拉列表标签。
文本域
文本域实现上传照片或文件的功能，由文本框和“浏览”按钮组成。
文本框<textarea name="" id="" cols="30" rows="10"></textarea>
文件域 type=“file”
文件域，可以选择直接输入上传文件的路径，“浏览”按钮可以选择文件。
使用文件域上传文件时，一定不要忘记设置form表单信息提交编码方式为（enctype=“multiple/form-data”）
Lable标签
Lable标签，可以在你点击文本时，让label指向的表单标签获得焦点。
8.页面结构分析
header😁
标题头部区域的内容
footer😁
标记脚部区域的内容
section
Web页面中的一块独立区域
article
独立的文章内容
aside
相关内容或应用（常用于侧边栏）
nav😁
导航类辅助内容
9. 简单验证
邮箱验证
<input type="email" name="邮箱名字"> （自动验证）
<input type="button" value="上传" name="upload">
URL验证
<input type="url" name="url"> （自动验证）
数字验证
<input type="number" name="num" max="100" min="0" step="1">（自动验证）
滑块
<input type="range" name=“音量或者进度条” min="0" max="100" step="2">
搜索框
<input type="search" name="search">
10.表单的应用
隐藏域
hidden （属性还在，但是隐藏了，可以传递默认值，提前设定value）
只读
value=“定值” readonly （就不能改了）
禁用
disabled （点不了选不了了）
11.表单初级验证
为了安全，减轻处理压力。
方框里的灰色提示信息
文本框中才有用 placeholder=“提示信息”
非空判断
required 直接使用
正则表达式 😁
pattern="用什么查什么"
12.HTML的不足之处
HTML不可扩展。
HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。
HTML只能用于信息显示。
HTML可以设置文本和图片显示方式，但没有语义结构。
即HTML显示数据是按照布局而非语义的。
随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如：当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。
HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
13.参考
清华大学出版社出版：Java Web开发（从入门到实战）ISBN：978-7-302-52911-8
文章基本框架参考，我做了扩展：HTML入门
视频参考：哔哩哔哩【狂神说Java】HTML5
