DOCTYPE

HTML

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
Strict：严格型
Transitional ：过渡型

HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：

Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

XHTML

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

XHTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

XHTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：

XHTML Frameset DTD
当您希望使用框架时，请使用此 DTD！

Meta标签

meta 的属性有两种：name和http- equiv。
name属性主要用于描述网页，对应于content（网页内容）

说明网页的编码方式
用以说明生成工具（如Microsoft FrontPage 4.0）等；
向搜索引擎说明你的网页的关键词；
告诉搜索引擎你的站点的主要内容；
网页重定向
告诉搜索引擎你的站点的制作的作者；
其中的属性说明如下：
　　设定为all：文件将被检索，且页面上的链接可以被查询；
　　设定为none：文件将不被检索，且页面上的链接不可以被查询；
　　设定为index：文件将被检索；
　　设定为follow：页面上的链接可以被查询；
　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；
　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

关键字keywords:

网页描述description：

http-equiv属性

网页重定向，5秒后跳转到百度的页面

链接外部样式表

icon图标

表格table

属性

table属性
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用，tr或者td内容居中。
caption 元素定义表格标题
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
表格的标准结构

这是标题
第一列	第二列	第三列
1	1	1
1	1	1
foter1	foter2	foter3

合并单元格
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
标记及其属性
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记替代相应的单元格标记即可。
注意：th中的内容自动加粗和居中
subline中创建一个三行三列的表格
table>tr*3>td*3然后按下tab键
边框颜色,table标签的属性
bordercolor="#ff00ff"
内容垂直对齐方式

valign=”top | middle | bottom”
top：顶部对齐
middle：居中对齐
bottom：底部对齐

案例：细线课程表

课程表
	星期一	星期二	星期三	星期四	星期五
上午	1	体育	体育	体育	体育	体育
2	英语	英语	英语	英语	英语
下午	1	数学	数学	数学	数学	数学
2	语文	语文	语文	语文	语文

细线课程表

表单form

属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。

文本输入框

maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
密码输入框

注意：文本输入框的所有属性对密码输入框都有效
单选框

男
女

只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。
注意：当name相同时，有多个radio有checked=”checked” 属性，根据DOM顺序加载的原则，最后一个radio的选中效果有效

下拉列表

属性：
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目

对下拉列表进行分组。
Label=”” 分组名称。

多选框

抽烟
喝酒
烫头

可以有多个默认选中项

多行文本框

Cols ：控制输入字符的长度。
Rows ：控制输入的行数

文件上传控件

表单提交

可以实现信息提交功能

普通按钮

不能提交信息，一般配合JS使用。

图片按钮

图片按钮也可实现信息提交功能

表单重置

将信息重置到默认状态

表单分组

对表单信息分组
表单信息分组名称


    
        测试表单

H5补充表单控件

H5表单控件

标签语义化

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：
- 1:网页结构合理
- 2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
- 3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
- 4:便于团队开发和维护
标签语义化（注意事项）
- 1：尽可能少的使用无语义的标签div和span；
- 2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 3：不要使用纯样式标签，如：b、font、u等，改用css设置。
- 4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

02_Html的DOCTYPE、表格、表单标签