1、结构标记

1、<header>元素

<header></header>

==> <div id="header"></div>

定义网页头部，网站标题、LOGO

header可以在网页上出现多次。可以表示任何一部分内容的头部信息

2、<nav>元素

<nav></nav>

==》 <div id="navigation"></div>

<div id="nav></div>

负责定义页面的导航链接部分

<nav>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</nav>

3、<section>元素

<section></section>

==> <div id="main"></div>

用于定义文档中的节

特点：可以充当网页主体中的某一模块

4、<article>元素

<article></article>

==> <div id="article"></div>

用于描述文字性较强的内容：博客、微博、帖子、文章、用户评论

5、<aside>元素

可以表示网页主体内容中的边栏部分

<aside></aside>

==> <div id="left_side"></div>

6、<footer>元素

<footer></footer>

==> <div id="foot"></div>

出现在网页偏下端部分，用来定义网页文档的页脚部分内容：友情链接、版权信息、授权、作者等

2、表单

表单作用：

用于显示、收集信息，并将信息提交到服务器

表单两大部分：

1、实现数据交互的可见界面元素，即表单控件

2、提交表单后的处理操作

1、如何实现表单

语法：<form></form>

特点：没有任何显示效果，默默的帮助网页完

成信息提交的功能

属性:

1、action

动作、行为

表单要提交的服务器处理程序地址，通常都是由后台处理程序完成(JSP,php,aspx)

<form action="test.php"></form>

默认值：本页

2、method

提交方式

取值:get或post

get:（得到，获取）会将提交的信息全部显

示在地址栏上(明文提交)。大小限制为2KB。

使用场合：向服务器索取信息时，推荐使用get

提交方式，比如，百度搜索、各个网站的搜索栏

post:隐式提交，所提交的数据不会显示在地址栏上，安全性较高。并且没有提交数据的大小限制。

使用场合：

1、提交数据量较大时，上传头像、文档等

2、提交安全性要求较高的数据时，比如密码等

如果想将数据提交给服务器进行处理时，可以使用post，如 登录、注册。。

默认值：get

3、name

定义表单名称

4、id

定义表单唯一标识

注意：name 和 id ， 最终获取表单的方式不同而已。

5、enctype

表单数据编码方式

1、application/x-www-form-urlencoded

默认值,能够提交普通数据(包含特殊符号 & , = , ?)，无法提交文件

2、multipart/form-data

将所有内容都拆分成二进制进行提交

支持 文件上传

3、text/plain

只负责提交基本数据，不包含任何特殊字符的数据

尽量不用，有可能数据提交不完整

2、表单控件

具备可视化外观的html元素，并且能够接受用户输入的信息。而且表单控件中的数据是允许提交给服务器的。

表单控件：

1、input元素

语法：<input />

属性：

1、type,根据不同的type值，可以创建

各种类型的输入控件

2、value,控件的值,允许将value的值提

交给服务器

3、name,控件的名称,服务器使用

4、id,控件的唯一标识,本页面使用

5、disabled :禁用控件

<input id="value" disabled />

1、文本框 与 密码框

文本框:<input type="text"/>

密码框:<input type="password" />

属性：

maxlength:限制输入的字符数

readonly:只读

name和id的命名规范：

使用匈牙利命名法

text --> txt

password --> txt

type缩写作用名称

2、单选框 和 复选框

单选框：<input type="radio">

复选框：<input type="checkbox">

属性：

checked : 设置默认被选中

注意：name属性，一组单选框或复选框，name属性要设置为一致的。

一组中，只能有一个元素被选中

radio --> rdo,rdoGender

checkbox --> chk,chkHobby

3、按钮

1、提交按钮

固定功能，将表单控件的数据提交到服务器指定的处理程序(action)上

<input type="submit" value="按钮上的文字" />

2、重置按钮

固定功能，将表单控件的值都设置为默认值。

<input type="reset" value="按钮上的文字" />

3、普通按钮

由用户来定义功能

<input type="button" value="按钮上的文字" />

<button>显示的文字</button>

4、隐藏域 和 文件选择框

1、隐藏域

表单中，包含不希望用户看到的并且需要提交给服务器的信息，可以放在隐藏域中

<input type="hidden" />

2、文件选择框

允许用户选择 要上传的文件

<input type="file" name="" />

注意：

1、表单的 method 属性值 必须为 post

2、enctype的值必须为 multipart/form-data

2、其他元素

1、<label>元素

关联 文本与表单元素， 点击文本的时候相当于点击了表单元素一样

语法：<label>文本</label>

属性：for

表示与该label相关联的控件的id值

2、选项框(下拉列表框)

两种：

1、下拉选项框

2、滚动列表

语法：

选项框：

<select></select>

属性：

name:

id:

size:默认1，如果大于1则为滚动列表

multiple:多选

选项：

<option value="选项的值" selected>显示的文本

</option>

3、textarea元素

文本域，多行文本框元素

语法：

<textarea>

多行文本

</textarea>

属性：

name

cols:指定文本区域的列数(宽度)

rows:指定文本区域的行数(高度)

以上两个属性，以字符数作为值

readonly:只读

4、为控件分组

语法：

分组：

<fiedset>

元素

</fieldset>

标题：

<legend></legend>