结构标记，表单，其他标记

1、结构标记

1、作用

增强标签的语义性

2、结构标记

1、<header>元素

用作与网页头部，可能包含网页标题、LOGO、导航信息

该元素可以出现多次

等同于 <div id="header"></div>

<header>

<img src="logo.gif"/>

<h1>欢迎光临。。。</h1>

</header>

2、<nav>元素

用于定义网页导航

<nav>

<ul>

<li>首页</li>

<li>母婴用品</li>

<li>家居用品</li>

</ul>

</nav>

等同于：<div id="nav"></div>

3、<section>元素

section：小节

该元素标识网页内容中的某一具体部分。定义文章章节、内容的楼层（购物类网站居多）

4、<article>元素

article:文章，内容 。。。

在论坛中表式某一具体帖子信息、新闻类网站的某一具体新闻信息、博客类网站具体博客条目、用户评论等

5、<footer>元素

定义网页底部信息，多用于企业介绍、标识等部分内容

等同于 <div id="footer"></div>

6、<aside>元素

侧边栏，可以标识正规内容额外的部分内容

边栏内容优先使用<aside>元素

2、表单

1、表单的作用

1、显示、收集用户信息

2、将收集到的信息提交给服务器

2、表单语法

语法:<form></form>

注意：表单中的内容是可以提交给服务器的，提交给服务器的内容要放在表单元素里

属性:

action : 表单提交时的动作，提交地址,值为url,默认值为本页

method : 提交方式，常用取值：get或post

get(默认值) : 明文提交，安全性较低，提交数据大小有限制，为2kb(根据浏览器决定)

post : 密文提交,安全性较高，无大小限制

注意：用户登录、用户注册一律使用post提交

向服务器索取数据时(搜索引擎搜索数据)，可以使用get，也可以使用post

enctype : 表单数据的编码方式

取值 :

1、application/x-www-form-urlencoded(默

认)

可以将正常字符、特殊符号(&)提交给服务器(不支持文件上传)

2、text/plain

可以将正常字符提交给服务器

3、multipart/form-data

如果上传文件的时候，必须使用该值

name : 定义表单名称

<form action="...." method="post/get">

....

</form>

3、表单元素

表单元素指的是出现在表单中能够与用户进行交互的控件

表单元素分类:

1、input元素

input元素是空标记 <input />

属性:

type : 可以创建各种类型的input元素，比如：文本框、密码框、单选按钮、复选框

value : 当前表单元素的值，可以是提交给服务器的值，也可以是默认显示的初始值

name : 名称，要提交给服务器去使用

id : 唯一标识，只能在当前页面使用，服务器不能用

disabled : 禁用控件

1、文本框

type="text"

<input type="text" />

注意：如果type不写，或不在指定值范围内，那么默认都为 text

<input />

<input type="abcdefg" />

2、密码框

以密文的方式接收和显示用户的数据

type="password"

<input type="password" />

以上两个控件的通用属性:

1、name，id，value，

2、maxlength : 限制输入的字符数

3、readonly : 设置控件为只读

3、单选按钮

type="radio"

<input type="radio" />

name : 定义名称、分组

value : 值

checked : 默认被选中

4、复选框

能够实现多选的控件

type="checkbox"

<input type="checkbox" />

name :定义名称、分组

value :值

checked :默认被选中

5、按钮

1、提交按钮

功能固定化，用于将表单的数据提交给服务器

语法:

type="submit"

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

2、重置按钮

功能固定化，将表单控件值恢复到默认状态

语法:

type="reset"

<input type="reset" value="文本" />

3、普通按钮

没有任何功能的标准按钮，用于执行客户端脚本（自定义功能）

语法:

<input type="button" value="文本" />

6、文件选择框

<input type="file" />

注意:如果有文件上传的话，必须将表单的enctype更改为 multipart/form-data,同时method必须为post

7、隐藏域

<input type="hidden" name="" value="" />

使用场合：隐藏域在页面中是看不到的，一般会配合后台开发一起使用，从来不单独使用。

2、get提交数据的格式

url?name=value&name1=value1&name2=value2 ...

...test.jsp?uName=SanFeng&uPass=Hello&gender=3

2、选项框

别名:下拉框、下拉列表

1、下拉列表

2、滚动列表

语法：

<select></select>

属性:

name : 定义名称

size : 大于1，则为滚动列表，否则，九十下拉列表

multiple : 设置多选

<option></option>

属性:

value : 选项的值

selected : 预选中

<select name="province">

<option value="0451">黑龙江</option>

<option value="0431">吉林</option>

<option value="021">辽宁</option>

</select>

3、多行文本域

语法:

<textarea>默认显示文本</textarea>

属性:

name : 名称

cols : 指定文本域的列数，一行能显示多少个字符，表示宽度（以字符个数为单位）

rows : 指定文本域的行数，如果真是数据超出设定行数，将出现滚动条,表示高度

4、其他表单元素 - <label>

关联文本 与 表单元素

语法:

<label>文本</label>

属性:

for : 表示与该元素相关联的控件的ID值

3、其他标记

1、浮动框架

在一个浏览器中同时显示多个页面文档

语法:

<iframe></iframe>

属性:

src : 引入的网页路径(url)

width : 宽度

height : 高度

frameborder : 边框

注意：尽可能的少使用 iframe 元素

2、摘要与细节

将一部分内容进行 收缩或展开 的动作

语法:

<details>

<summary>标题</summary>

显示的内容

</details>

3、度量元素

语法:

<meter></meter>

属性:

min : 度量范围的最小值，默认为0

max : 度量范围的最大值，默认为1

value : 当前的度量值，默认为0

4、时间元素

语法:

<time datetime="时间值">显示的文本</time>

5、分组元素

<fieldset>

<legend></legend> 定义组标题

显示内容

</fieldset>定义组

6、高亮文本显示

以突出的方式显示一段文本

语法：<mark>高亮显示的文本</mark>