列表、结构标记、表单
1 列表
默认按照从上到下的顺序显示数据,可以在数据前添加标识;
使用列表布局(去掉标识)
1.1 列表的作用
列表是将具有相似特征或者具有先后顺序的几行文字进行对齐排列;
所有列表都由列表类型和列表项组成:
列表类型:有序列表<ol> order list 和无序列表<ul> unorder list
列表项:<li>指示具体列表类型list
图文混排
1.2 列表的使用
按从上到下,或者从左到右的顺序显示所有数据,可以在数据前添加标识符号
-
<ol>
<ol>元素表示有序列表,用于列出页面上有特定次序的项目
<ol>元素只能包含列表项元素<li></li>
<ol>属性:
type指定标识项类型:1数字(默认),a小写字母,A大写字母,i小写罗马数字,I大写罗马数字
start指定起始编号 -
无序列表<ul>
<ul>元素表示无序列表,用于列出页面上没有特定次序的项目;
<ul>元素只能包含列表项元素<li></li>;
<ul>属性:
type指定标识项类型:disc实心圆(默认),circle空心圆,square实心菱形,none不显示标识 -
列表嵌套
嵌套使用可以创建多层列表,常用于创建文档大纲和导航菜单等;
语义上规定下一级ul必须写在外层ul>li中,否则会影响后续CSS的定义 -
定义列表<dl>
用于给出一类事物定义情形
<dl>标记定义一个定义列表;
<dt>标记定义了定义列表中的术语;
<dd>标记定义列表中的术语提供定义<dl> <dt>要解释的名词</dt> <dd>具体解释</dd> </dl>
2 结构标记
2.1 概述
如果使用<div>元素设计页面的大致布局,当布局复杂时会出现大量<div>元素,相互嵌套会导致难以处理和维护页面;
HTML5提供结构标记专门用于标识常见结构,可以很方便地实现页面各部分划分,是的文档结构清晰明确,容易阅读;
<body>
<header></header>
<section></section>
<footer></footer>
</body>
2.2 结构标记
- <header>元素
<header>标签,用于定义文档的页眉;可以多次出现,为任何部分的头部定义; - <nav>元素
<nav>元素定义页面导航链接部分,用于包含表示链接的其他元素<nav>元素定义页面导航链接部分,用于包含表示链接的其他元素 - <section>元素
<section>标签用于定义文档中的节,表示文档中一个具体组成部分;常用于为页面上内容分块;可以使用<header>元素为内容添加标题 - <article>元素
<article>标签常用于定义与文字相关内容,论坛 - <footer>元素
<footer>元素常用于定义网页底部内容,版权、解释说明、备案号 - <aside>元素
<aside>元素常用于定义页面的额外组成部分
3 表单
3.1 表单概述
3.1.1 表单作用
表单用于显示、收集信息并提交至服务器;
表单有两个基本部分:
1.提供可视化的输入控件;
2.收集用户信息并提交给服务器;
前端:提供表单控件,与用户做交互的可视化控件;
后端:对提交数据进行处理(接口)
使用<form>元素创建表单;
在<form>元素中添加其他表单可以包含的控件元素;
3.1.2 表单元素<form>
form表单只会提交表单中具有属性name的元素,而异步提交数据是通过元素的id来获取的。
<form></form>
主要属性:
1)action:定义表单被提交时发生的动作,通常定义服务器处理数据的URL,默认提交给当前地址
2)method:指定表单数据提交方式;
- get是默认值,明文提交(通过url地址传递),数据传递有大小限制2KB,安全性较低,常用于向服务器获取数据;
- post隐式提交数据无大小限制,不通过url传递,常用于提交数据到服务器,参数放在请求主体form data中,安全性较高;
- delete
- put
3)enctype:表单数据进行编码的方式;
设置表单允许提交的数据
- 提交普通字符,不能带有特殊符号;enctype=“text/plain”
- 允许将任意字符提交给服务器;enctype=“application/x-www-form-urlencoded”
- 允许将文件提交给服务器;enctype=“multipart/form-data”
4)name:表单名称
3.1.3 表单控件
表单可以包含很多不同类型的表单控件;
表单控件元素是包含在表单元素中具有可视化外观的HTML元素,用于访问者输入信息;
input元素:文本输入控件、按钮、单复选按钮、选项框、文件选择框和隐藏控件
textarea元素
select 和option元素
其他元素
3.2 <input>元素
<input>元素用于收集用户信息;单标记,<input />
主要属性:
type:根据不同type属性值创建各种类型输入字段
value:控件的数据
name:控件的名称
disabled:禁用控件,无值属性
- 文本框与密码框
文本框<input type=“text”/>
密码框<input type=“password” />
主要属性:
name名称、value访问者自由输入的任何文本;
maxlength限制输入的字符数;
readonly设置文本控件只读,无值属性,允许数据提交;
placeholder 占位符,默认显示在控件上的文本,得到焦点即无效 - 单选框和复选框
单选框:<input type=“radio” />
复选框: <input type=“checkbox” />
<input type=“checkbox” name="" value="" checked/>
主要属性:
name设置名称,用于分组,同组框的名称必须相同
value:当提交form时,如果选中,该value被发送到服务器;不设置value将传递on
checked:设置默认被选中,无值属性
复选框属性name需要设置为数组形式才能接受多个数据 - 按钮
按钮<input type=""/>
submit:提交按钮,传送表单数据给服务器端或其他程序处理
reset:重置按钮,清空表单内容,设置为默认值;
button:无功能按钮,属性onclick调用js脚本;
主要属性:name名称、value文本
H5定义<button> <button/>同时具备submit和button的特点 - 隐藏域
隐藏域:<input type=“hidden”/>在表单中包含不希望用户看见的信息
主要属性:name名称、value值; - 文件选择框
文件选择框:<input type=“file” />
主要属性:name名称
注意:method=“post” , enctype=“multipart/form-data”, 无值属性multiple设置多个文件上传,name属性也要设置为数组类型
3.3 其他控件
-
<label>元素
语法:<label></label>
for表示与label相联系的控件的ID值,将文本与控件联系在一起,单击文本,效果等同单击按键
<input type=“checkbox” name=“chkHid” id=“chkHid”/>
<label for=“chkHid”>文本<label> -
选项框
下拉选项框和滚动列表
<select>创建选项框
name:选项框命名;
size:定义显示选项的数量,默认为1,大于1则为滚动列表;
multiple:设置多选,忽略size属性成为滚动列表,属性name需要改为数组保存;
<option>:选项
value:选项的值;
selected:预选中;
当option没有value属性,select的value为option的内容;当option有value属性,select的value为option的value<select size=""> <option value="">\</option> </select>
-
<textarea>元素
多行文本输入框<textarea></textarea>
主要属性:
name:名称;cols:指定文本区域的列数,以英文字母为准;rows:指定文本区域的行数;readonly:只读
由于列数实际应用中不准确,故项目中很少使用 -
控件分组
<fieldset></fieldset>:为控件分组
<legend></legend>:分组标题 -
浮动框架<iframe>元素
在一个浏览器窗口同时显示多个网页;
<iframe>元素,设置属性src指向其他页面的URL;
<iframe></iframe>src网页URL,height/width用百分比和px调整,添加的文本内容将在浏览器不支持该元素时显示,frameborder=“0”,scrolling=“no”
用处:可以将网页固定不变的部分单独提取出HTML文件,在其他网页中用iframe重用;但是需要用js.dom计算窗口高度
4 H5新表单元素
4.1 新表单元素简介
4.2 新的input类型
- 电子邮件类型
输入Email地址的文本框:<input type=“email” />
验证Emai - 搜索类型
输入搜索关键字操作的文本框:<input type=“search” />
快速清除文本框 - URL类型
验证数据是否符合url绝对路径规范< input type=“url”/>
验证http://以及后面内容 - 电话号码类型
针对移动端输入,能够根据不同设备进行调整弹出九宫格键盘:<input type=“tel” /> - 数字类型
只能接受固定数字值:<input type=“number” />
属性:min、max阈值,step决定域所接受值递增或递减的步长,默认为1,value="10"设置默认值
不成熟,比如value初始值可以小于阈值 - 范围类型
允许用户选择一个范围的数值:<input type=“range” min=“10” max= “1000” value=“50” />
value:初始值,step:步长 - 颜色类型
预定义的颜色拾取控件:<input type=“color” /> - 日期类型
创建日期输入域:<input type=“date” /> - 周类型
与日期类似,但只能选择周:<input type=“week” /> - 月份类型
与日期类似,但只能选择月:<input type=“month” />