1、
Web标准
HTML——结构标准；CSS——表现标准；JS——行为标准。
浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式。
渲染引擎是兼容性问题出现的根本原因。
HTML基本要素：标记、元素、内容、属性
<p id="p1">第一个web页面</p>
标记名 属性名 属性值 内容 标记名
（起始标记） （结束标记）
HTML单标记元素：不包含内容，没有结束标记，直接闭合。
eg. <meta /> <img /> <link /> <br /> <hr /> <input />
HTML全局属性：指几乎所有的HTML元素都可以添加的属性。
最常用的全局属性有：id、class、style、title。
2、HTML文档类型、注释
HTML5规范对应的文档类型声明只有一种：<!DOCTYPE html>
HTML的注释：<!-- comments --> （快捷键 Ctrl+/ ）
3、HTML head及其相关标记
a.定义文档编码方式：
<meta charset="UTF-8" /> UTF-8——通用字符集
b.定义文档的title和icon小图标：
<title>......</title>
<link rel="icon" type="..." href="..." />
c.为SEO(搜索引擎优化)定义keywords和description
<meta name="keywords" content="keyword1, keyword2, keyword3" />
<meta name="description" content="how to describe the document" />
d.定义文档的样式规则（即添加css代码）
<link rel="stylesheet" type="text/css" href=" .css" />
<style type="text/css">put your css rules here</style>
e.定义文档的JavaScript代码
<script type="text/javascript" src=" .js"></script>
<script type="text/javascript">put some js code here</script>
4.HTML标题、段落和文本格式化
标题元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<h1>元素在一个页面里只能出现一次。
段落元素：<p>
<br/>——换行元素；<hr/>——创建水平线
文本格式化标签：
<b>Bold text</b>
<strong>Important text</strong>
——文本加粗尽量使用<strong>,更有语义化。
<i>Italic text</i>
<em>Emphasized text</em>
——文本倾斜尽量使用<em>,更有语义化。
<small>Smaller text</small>
<del>(deleted text)</del> ——删除线标签
<ins>(inserted text)</ins> ——下划线标签
<sup>上标</sup>
<sub>下标</sub>
5.HTML图片image和超链接hyperlink
HTML图片：
<img src="url" width="" height="" alt="这里是加载失败时的替换文字" title="鼠标放到图片上显示的文字" />
要求必须添加alt属性。
alt——替换文本；title——提示文本。
相对路径与绝对路径：...
HTML超链接：
文档外链接：<a href="url" target="_blank">...</a>
target 属性规定在何处打开链接文档,取值为：
_self—— 默认值。在相同的框架中打开被链接文档。
_blank——在新窗口中打开被链接文档。
文档内导航（锚链接）：
<a href="#botton-section">去底部</a>
<a href="#">回顶部</a>
<a href="#faq">常见问题</a>
文档内导航的做法：
（1）先定义一个锚点：
如<h2 id="heading2">;
（2）超链接到锚点：
如<a href="#heading2">标题2</a>;
这样，使用超链接就可实现文档内导航。
空链——不知道链接到那个页面的时候，用空链。
<a href="#">空链</a>
超链接的优化写法：
<base target="_blank" />——让所有的超链接都在新窗口打开。
注意：此语句要写在<head>元素中。
6.特殊符号
例如：
空格符——
< ——<
> ——>
tip：一个汉字占两个空格符。
7.HTML列表list和表格table
Unordered list无序列表：
<ul> 效果就是：
<li>Item1</li> .Item
<li>Item2</li> .Item
</ul>
Oredered list有序列表：
<ol> 效果就是：
<li>First<li> 1.First
<li>Second</li> 2.Second
</ol>
type=”1|a|A|i|I”，取值可以为1,a,A,i,I。
<ul>和<ol>元素可用来表示线性数据结构，如一组数据内容，导航栏的各个子项，下拉列表的各个子项等。
<li>元素中除了纯文本plain text还可以放置嵌套的<ul>或<ol>，从而表示树形数据结构。
自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
Table可用来表示二维数据结构。
基本的Table tags:
<table>
<caption>——表格的标题
<tr>table row——每一行
<th>table head——表头；表头的文字自动加粗水平居中对齐
<td>table data——单元格具体的数据
table>tr*5>td*3——即可生成5行3列的表格。
border属性规定表格边框的宽度，如 border="1"。
td的合并属性：
colspan="2"——合并同一行上的单元格；
rowspan="2"——合并同一列上的单元格。
扩展：其他和table相关的HTML Tags
.对多行进行分组<thead>、<tbody>、<tfoot>
.对多列进行分组<colgroup>、<col>
8.HTML的div和span
容器元素：
.<div> 块级容器 block container
.<span> 行内容器 inline container
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
9.HTML表单Form
a.表单标签
<form> 表单标签元素为用户输入创建HTML表单，用于向服务器提交数据。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
属性解释：
action 属性规定向何处提交表单的地址（URL）（提交页面）。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。
Get通过地址栏提交数据，安全性差。
Post通过action属性中指定的表单处理程序来提交数据，安全性高。
name 属性：规定识别表单的名称。
如果要正确地被提交，每个输入字段必须设置一个name属性。
b.文本框
<input> 元素是最重要的表单元素。根据不同的 type 属性，有很多形态。
type属性的一些取值：
text——定义用于文本输入的单行输入字段。
password——定义密码字段；密码字段中的字符会被做掩码处理（显示为星号或圆点）
radio——定义单选按钮输入（选择多个选择之一）；
*只有将 name 的值设置相同的时候，才能实现单选效果。
*checked="checked" 设置默认选中项。
checkbox——定义复选框；复选框允许用户选择零个或多个选项。
checked="checked" 设置默认选中项。
file——文件上传控件。
button——定义普通按钮；不能提交信息，配合JS使用。
submit——定义用于向表单处理程序（form-handler）提交表单的按钮（提交表单）
表单处理程序在表单的 action 属性中指定。
image——图片按钮；可实现信息提交功能。
reset——重置按钮；将信息重置到默认状态。
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；如 name="username" "pwd" 等。
value属性定义文本框的初始值。
size属性定义文本框的宽度，单位是单个字符宽度。
maxlength属性定义最多输入的字符数。
required 属性规定必需在提交之前填写输入字段。
如果使用该属性，则字段是必填（或必选）的。
例： 用户名：<input type="text" name="username">
密 码：<input type="password" name="pwd">
性 别：<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
c.下拉列表
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
如：
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性：
name——规定下拉列表的名称。
select元素设置属性multiple="multiple"——将下拉列表设置为多选项。
option元素设置属性selected="selected"——设置默认选中项目。
<optgroup label=""></optgroup>——对下拉列表进行分组。
label=""——分组名称。
d.文本域
<textarea></textarea>元素定义一个文本区域 (text-area)（一个多行的文本输入区域）。
用户可在此文本区域中写文本。
cols——控制输入字符的长度。
rows——控制输入的行数。
e.表单信息分组
<fieldset></fieldset>——对表单信息分组。
<legend></legend>——表单信息分组名称。
标签语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。
好的语义化的网站标准就是去掉css文件之后，html结构依然很清晰。
HTML5中常见的语义化分段元素：
.<body>,<section>,<article>,<aside>,and <nav>
.每一个分段元素都可以拥有自己独立的<header>和<footer>
标签语义化注意事项：
.尽可能少的使用无语义的标签<div>和<span>。
.在语义不明显时，既可以使用<div>或者<p>时，尽量用<p>, 因为<p>在默认情况下有上下间距，对兼容特殊终端有利。
.不要使用纯样式标签，如：<b>、<font>、<u>等，改用css设置。
.需要强调的文本，strong是加粗（不要用b），em是斜体（不用i），更有语义化。
11.文档对象模型DOM
DOM模型将整个HTML文档看做是一个节点树。
这个节点树的根节点是document对象，而根元素是<html>元素。
其他几个概念：
.父节点parent、子节点child
.祖先节点ancestor、后代节点descendant
.兄弟节点sibling
。紧邻兄弟节点adjacent sibling
12.HTML实践注意
.根据应用场景和需求，建立合适的HTML标记结构，选择合适的HTML标记元素
.不要忘记文档类型声明，文档开头应有如<!doctype html>
.不要忘记字符编码声明，如<head>元素中应加入<meta charset="UTF-8" />
.不要使用HTML5不再支持的Tag，如：<center>、<font>、<basefont>、<big>等
.不要使用HTML5不再支持的Tag属性，如：table、img等标记的align属性、border属性等
13.HTML中应用CSS的三种常用的方式
a.文档内样式代码，通过在HTML的<head>元素中添加<style>子元素实现；
b.元素的行内样式，通过元素的style属性来实现，代码可复用性非常低；
c.外部样式文件，通过在HTML的<head>元素中<link>元素引入外部css文件，代码可复用性是最高的。
Web标准
HTML——结构标准；CSS——表现标准；JS——行为标准。
浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式。
渲染引擎是兼容性问题出现的根本原因。
HTML基本要素：标记、元素、内容、属性
<p id="p1">第一个web页面</p>
标记名 属性名 属性值 内容 标记名
（起始标记） （结束标记）
HTML单标记元素：不包含内容，没有结束标记，直接闭合。
eg. <meta /> <img /> <link /> <br /> <hr /> <input />
HTML全局属性：指几乎所有的HTML元素都可以添加的属性。
最常用的全局属性有：id、class、style、title。
2、HTML文档类型、注释
HTML5规范对应的文档类型声明只有一种：<!DOCTYPE html>
HTML的注释：<!-- comments --> （快捷键 Ctrl+/ ）
3、HTML head及其相关标记
a.定义文档编码方式：
<meta charset="UTF-8" /> UTF-8——通用字符集
b.定义文档的title和icon小图标：
<title>......</title>
<link rel="icon" type="..." href="..." />
c.为SEO(搜索引擎优化)定义keywords和description
<meta name="keywords" content="keyword1, keyword2, keyword3" />
<meta name="description" content="how to describe the document" />
d.定义文档的样式规则（即添加css代码）
<link rel="stylesheet" type="text/css" href=" .css" />
<style type="text/css">put your css rules here</style>
e.定义文档的JavaScript代码
<script type="text/javascript" src=" .js"></script>
<script type="text/javascript">put some js code here</script>
4.HTML标题、段落和文本格式化
标题元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<h1>元素在一个页面里只能出现一次。
段落元素：<p>
<br/>——换行元素；<hr/>——创建水平线
文本格式化标签：
<b>Bold text</b>
<strong>Important text</strong>
——文本加粗尽量使用<strong>,更有语义化。
<i>Italic text</i>
<em>Emphasized text</em>
——文本倾斜尽量使用<em>,更有语义化。
<small>Smaller text</small>
<del>(deleted text)</del> ——删除线标签
<ins>(inserted text)</ins> ——下划线标签
<sup>上标</sup>
<sub>下标</sub>
5.HTML图片image和超链接hyperlink
HTML图片：
<img src="url" width="" height="" alt="这里是加载失败时的替换文字" title="鼠标放到图片上显示的文字" />
要求必须添加alt属性。
alt——替换文本；title——提示文本。
相对路径与绝对路径：...
HTML超链接：
文档外链接：<a href="url" target="_blank">...</a>
target 属性规定在何处打开链接文档,取值为：
_self—— 默认值。在相同的框架中打开被链接文档。
_blank——在新窗口中打开被链接文档。
文档内导航（锚链接）：
<a href="#botton-section">去底部</a>
<a href="#">回顶部</a>
<a href="#faq">常见问题</a>
文档内导航的做法：
（1）先定义一个锚点：
如<h2 id="heading2">;
（2）超链接到锚点：
如<a href="#heading2">标题2</a>;
这样，使用超链接就可实现文档内导航。
空链——不知道链接到那个页面的时候，用空链。
<a href="#">空链</a>
超链接的优化写法：
<base target="_blank" />——让所有的超链接都在新窗口打开。
注意：此语句要写在<head>元素中。
6.特殊符号
例如：
空格符——
< ——<
> ——>
tip：一个汉字占两个空格符。
7.HTML列表list和表格table
Unordered list无序列表：
<ul> 效果就是：
<li>Item1</li> .Item
<li>Item2</li> .Item
</ul>
Oredered list有序列表：
<ol> 效果就是：
<li>First<li> 1.First
<li>Second</li> 2.Second
</ol>
type=”1|a|A|i|I”，取值可以为1,a,A,i,I。
<ul>和<ol>元素可用来表示线性数据结构，如一组数据内容，导航栏的各个子项，下拉列表的各个子项等。
<li>元素中除了纯文本plain text还可以放置嵌套的<ul>或<ol>，从而表示树形数据结构。
自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
Table可用来表示二维数据结构。
基本的Table tags:
<table>
<caption>——表格的标题
<tr>table row——每一行
<th>table head——表头；表头的文字自动加粗水平居中对齐
<td>table data——单元格具体的数据
table>tr*5>td*3——即可生成5行3列的表格。
border属性规定表格边框的宽度，如 border="1"。
td的合并属性：
colspan="2"——合并同一行上的单元格；
rowspan="2"——合并同一列上的单元格。
扩展：其他和table相关的HTML Tags
.对多行进行分组<thead>、<tbody>、<tfoot>
.对多列进行分组<colgroup>、<col>
8.HTML的div和span
容器元素：
.<div> 块级容器 block container
.<span> 行内容器 inline container
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
9.HTML表单Form
a.表单标签
<form> 表单标签元素为用户输入创建HTML表单，用于向服务器提交数据。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
属性解释：
action 属性规定向何处提交表单的地址（URL）（提交页面）。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。
Get通过地址栏提交数据，安全性差。
Post通过action属性中指定的表单处理程序来提交数据，安全性高。
name 属性：规定识别表单的名称。
如果要正确地被提交，每个输入字段必须设置一个name属性。
b.文本框
<input> 元素是最重要的表单元素。根据不同的 type 属性，有很多形态。
type属性的一些取值：
text——定义用于文本输入的单行输入字段。
password——定义密码字段；密码字段中的字符会被做掩码处理（显示为星号或圆点）
radio——定义单选按钮输入（选择多个选择之一）；
*只有将 name 的值设置相同的时候，才能实现单选效果。
*checked="checked" 设置默认选中项。
checkbox——定义复选框；复选框允许用户选择零个或多个选项。
checked="checked" 设置默认选中项。
file——文件上传控件。
button——定义普通按钮；不能提交信息，配合JS使用。
submit——定义用于向表单处理程序（form-handler）提交表单的按钮（提交表单）
表单处理程序在表单的 action 属性中指定。
image——图片按钮；可实现信息提交功能。
reset——重置按钮；将信息重置到默认状态。
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；如 name="username" "pwd" 等。
value属性定义文本框的初始值。
size属性定义文本框的宽度，单位是单个字符宽度。
maxlength属性定义最多输入的字符数。
required 属性规定必需在提交之前填写输入字段。
如果使用该属性，则字段是必填（或必选）的。
例： 用户名：<input type="text" name="username">
密 码：<input type="password" name="pwd">
性 别：<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
c.下拉列表
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
如：
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性：
name——规定下拉列表的名称。
select元素设置属性multiple="multiple"——将下拉列表设置为多选项。
option元素设置属性selected="selected"——设置默认选中项目。
<optgroup label=""></optgroup>——对下拉列表进行分组。
label=""——分组名称。
d.文本域
<textarea></textarea>元素定义一个文本区域 (text-area)（一个多行的文本输入区域）。
用户可在此文本区域中写文本。
cols——控制输入字符的长度。
rows——控制输入的行数。
e.表单信息分组
<fieldset></fieldset>——对表单信息分组。
<legend></legend>——表单信息分组名称。
f.html 5 补充表单控件
如网址、日期、时间、邮件、数字、滑块控件。
type="url""date""time""email""number""range"
g.<label> 标签的 for 属性
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果在 label 元素内点击文本，就会触发对应的表单控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性规定 label 与哪个表单元素绑定。
for 属性应当与相关元素的 id 属性相同。
例如：<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
标签语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。
好的语义化的网站标准就是去掉css文件之后，html结构依然很清晰。
HTML5中常见的语义化分段元素：
.<body>,<section>,<article>,<aside>,and <nav>
.每一个分段元素都可以拥有自己独立的<header>和<footer>
标签语义化注意事项：
.尽可能少的使用无语义的标签<div>和<span>。
.在语义不明显时，既可以使用<div>或者<p>时，尽量用<p>, 因为<p>在默认情况下有上下间距，对兼容特殊终端有利。
.不要使用纯样式标签，如：<b>、<font>、<u>等，改用css设置。
.需要强调的文本，strong是加粗（不要用b），em是斜体（不用i），更有语义化。
11.文档对象模型DOM
DOM模型将整个HTML文档看做是一个节点树。
这个节点树的根节点是document对象，而根元素是<html>元素。
其他几个概念：
.父节点parent、子节点child
.祖先节点ancestor、后代节点descendant
.兄弟节点sibling
。紧邻兄弟节点adjacent sibling
12.HTML实践注意
.根据应用场景和需求，建立合适的HTML标记结构，选择合适的HTML标记元素
.不要忘记文档类型声明，文档开头应有如<!doctype html>
.不要忘记字符编码声明，如<head>元素中应加入<meta charset="UTF-8" />
.不要使用HTML5不再支持的Tag，如：<center>、<font>、<basefont>、<big>等
.不要使用HTML5不再支持的Tag属性，如：table、img等标记的align属性、border属性等
13.HTML中应用CSS的三种常用的方式
a.文档内样式代码，通过在HTML的<head>元素中添加<style>子元素实现；
b.元素的行内样式，通过元素的style属性来实现，代码可复用性非常低；
c.外部样式文件，通过在HTML的<head>元素中<link>元素引入外部css文件，代码可复用性是最高的。
<link rel="stylesheet" type="text/css" href="***.css" />
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
