标签：
1、什么是结构化标记
对布局使用的div 进行升级 ， 根据页面的不同区域而提供的不同标签。作用与div几乎一致
专门用于搭建网站结构而用
2、结构标记详解
1、<header>元素
作用：用于定义【网页内容的头部】、或者是【某部分信息中的头部】
语法：
<header id="aa1">
头部区域的内容
</header>
<div id="aa1">
</div>
2、<nav>元素
作用：用于定义页面的【导航链接】部分
语法：<nav></nav>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
3、<section>元素
作用：定义文档中的 小节,可以定义网页主体内容
语法：<section></section>
<section>
<div></div>
<img />
普通文本 ....
....
</section>
4、<article>元素
作用：定义独立于文档其他部分的内容。
场合：多用于 论坛帖子、新闻信息、博客条目、用户评论、微博信息内容
语法：<article></article>
<article>
<h1>国产大飞机C919下线</h1>
<p> ...... ..... .....</p>
</article>
5、<footer>元素
作用：定义某区域的脚部(底部)信息
定义 版权信息、企业标识、售后服务 等一些非重要信息
语法：<footer></footer>
<footer>
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>社会招聘</li>
</ul>
</footer>
6、<aside>元素
作用：多数用于定义侧边栏
语法：<aside></aside>
<aside>
<p>发表信息</p>
<p>查看最新发表记录</p>
</aside>
7、注意：
如果在有些网站中 结构化标记 不够来显示网页的内容的时候，那么就使用 div 灵活控制
2、表单
1、表单
作用：接收用户的数据，【并且提交给服务器】
1、语法
定义表单：<form></form>
主要属性：
1、action : 动作，提交给服务器处理程序的 url，默认提交给本页
2、method : 提交方式，常用取值:get 或者 post
get : 本意是从服务器端得到数据
提交信息会原封不动的显示在地址栏上(明文提交),最大能提交 2kb 的数据
post : 本意是想发送数据给服务器去处理,
提交数据时，信息不会显示在地址栏上(密文提交),不限制提交数据大小
post的安全会高一点，对安全性要求比较高的时候，比如用户的注册、登录一定会使用post。提交数据量较大时，也选择使用post。
3、enctype ：表单数据进行编码的方式
注意：文本提交 和 文件提交 将采用不同的编码方式
默认值为 文本的提交方式 :application/x-www-form-urlencoded
提交文件时，需要将此属性值更改为:
multipart/form-data
4、name : 定义表单名称
2、表单元素
又称为表单控件,具备可视化外观，并且能够接受用户输入的数据
表单元素分类:
1、input元素
全部以 input 单标记开始的元素
语法:<input />
属性:
1、type ：类型， 根据不同的type值，创建不同的input元素(文本框、密码框、单选按钮、复选框)
2、value ：值，当前表单元素的值(默认值，用户输入的值)
3、name ：名称，定义表单元素的名称，主要是提交给【服务器】去使用
4、id ：唯一标识，提供给【本页面】的【javascript】去使用
5、disabled ：禁用控件
1、文本框与密码框
文本框:<input type="text" />
密码框:<input type="password" />
属性:
maxlength : 最大长度，限制用户输入的字符数
readonly : 只读 ，只能看， 不能写
name 与 id 值得取值规范:以控件的缩写开始，后面跟着功能名称，功能名称的每个单词中，首字符都要大写
文本框：用户名称 --> txtUserName
密码框：用户密码 --> txtUserPwd
2、单选按钮 和 复选框
单选按钮:
<input type="radio" name="" />
<input type="radio" name="" />
注意：name属性 除具备上述的功能外，还能够将 单选按钮进行分组，一组内，只能有一个被选中
复选框:
<input type="checkbox" name="" value="" />文本
属性：checked
3、按钮
1、提交按钮
功能固定化，将表单内的所有表单元素的数据都提交给服务器
<input type="submit" value="按钮上的文字" />
2、重置按钮
功能固定化，将表单内的所有的表单元素恢复成初始值。清空数据。
<input type="reset" value="按钮上的文字" />
3、普通按钮
没有任何功能，用于执行客户端的脚本的。(可自定义按钮功能)
<input type="button" />
==>
<button>文字</button>
userDo.php?txtUserName=wuji.zhang&txtUserPwd=zhaomin&rdoGender=Female&chkHobby=eat&chkHobby=play
4、隐藏域 和 文件选择框
1、隐藏域
隐藏在html页面中，不会显示给用户去看的元素，但是能够被提交到服务器上。
<input type="hidden" name="" value="" />
userDo.php?txtUserName=ZHANGWUJI&txtUserPwd=WUJI.ZHANG&rdoGender=Female&chkHobby=eat&chkHobby=drink&txtUid=1101001
2、文件选择框
允许用户打开一个对话框，选择文件上传到服务器上。
<input type="file" name="" />
注意：
1、要将 enctype 的值更改为 multipart/form-data
2、method 必须为 post
5、html5 core
<input type="email" />
<input type="url" />
2、textarea元素
学名：多行文本域、多行文本输入框
<textarea>默认文本</textarea>
属性:
name : 名称
cols : 指定文本域的列数,一行内能显示多少个字符
rows : 指定文本域的行数,默认情况下显示几行数据，超出的话则显示滚动条
3、select 和 option
select : 选项框、下拉列表框
语法：
<select></select>
属性：
name : 元素名称
size : 默认显示选项框的长度 大于1，则为滚动列表
multiple : 多选
option : 选项框中的选项数据，选项
<option>显示的文本</option>
属性:
value : 选项的值
selected : 预选中
4、其他元素
1、<label>元素
关联 【文本】 以及 【表单控件】
属性:
for : 表示与该元素相关联的【控件的】【ID】值
语法：<label for="id">文本内容</label>
2、分组元素
语法：
<fieldset></fieldset> : 为控件分组
<legend></legend> : 为分组指定一个标题
3、其他标记
1、浮动框架 <iframe>
可以通过该标签，向一个网页中嵌入另外一个网页
属性:
1、src
2、width
3、height
4、frameborder : 引入的浮动框架的边框，值为0，则无边框
注意：
1、iframe 标签 必须成对出现
2、摘要与细节
能够展开和收缩的内容
语法:
<details>
<summary>标题</summary>
正常显示内容
</details>
3、度量元素
语法:<meter></meter>
属性:
min : 当前度量元素的范围最小值 ， 默认0
max : 当前度量元素的范围最大值 ， 默认1
value : 度量值，默认为 0
4、时间元素
<time></time>
作用：时间的不同表现形式关联到一起
<time datetime="14:45">午时三刻</time>
5、高亮显示
<mark>高亮显示的文本</mark>
<UL type="none"></UL>
标签：
原文地址：http://www.cnblogs.com/lvlin16/p/5111707.html
