一、列表
1.作用
按照一定的格式显示数据
2.列表的分类&语法
2.1列表的组成
由列表类型以及列表项来组成
2.2分类&语法
-
有序列表
<ol></ol>
—>Order List
允许包含若干列表项:
<li></li>
—>List Item -
无序列表
<ul></ul>
—>Unorder List
允许包含若干列表项
<li></li>
-
属性
ol属性
1、type
1
按数字方式排列,默认值
a
按小写英文方式排列
A
按大写英文方式排列
i
按小写罗马数字排列
I
按大写罗马数字排列
2、start
指定标识从 几 开始显示
ul属性
1、type
disc
实心圆,默认值
circle
空心圆
square
实心矩形
none
-
列表的嵌套
被嵌套的内容只能放在<li>
中 -
DEMO
<!doctype html>
<html>
<head>
<title>我的妈耶</title>
</head>
<body>
<h1>lainxi</h1>
<ol>
<li>
三国
<ul type=square>
<li>周瑜</li>
<li>黄盖</li>
<li>吕布</li>
</ul>
</li>
<li>
水浒
<ul>
<li>武松</li>
<li>王英</li>
<li>孙二娘</li>
</ul>
</li>
</ol>
</body>
</html>
3.定义列表
3.1作用
以一种特殊的结构来排列数据
通常用语对一类事物/名词 的解释上面
3.2语法
<dl></dl>
:声明一个定义列表
<dt></dt>
:声明要解释的事物名称 或 名词
<dd></dd>
:对上述名词或事物解释的内容
3.3常用场合
图文混排
二、结构标记
1.结构标记的作用
搭建网页的结构(布局),用于替代 div,最大的优点是提升了标记的"语义性"
2.结构标记详解
-
<header></header>
作用:表示网页 或 某块内容的头部 -
<nav></nav>
作用:表示网页中的 导航内容 -
<section></section>
作用:表示网页主体内容中的某一部分 -
<article></article>
作用:出现在文字描述性比较强的场合:一则新闻,论坛中的帖子,微博信息,博客的信息 -
<aside></aside>
作用:表示网页中,或某部分内容的 边栏信息 -
<footer></footer>
作用:表示网页中尾部的信息
三、表单
1表单的作用
用于收集用户的信息并提交给服务器
表单主体是由两部分组成的
1>表单元素
收集信息,并提交给服务器
2>表单控件
用于与用户交互的一些元素:文本框,密码框
2.表单元素
2.1标记:
<form></form>
2.2注意:
只有放在 里面的表单控件的值,才能提交给服务器
2.3属性:
-
action
提交给服务器处理程序的地址 (动作) -
method
提交方式,以什么样的方式把数据交给服务器
get
特点:
1>以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上)
2>安全性很低
3>提交数据最大限制为 2KB
4>向服务器要数据时可以使用
post
特点:
1>以隐式的方式将数据传递给服务器
2>安全性很高
3>不限制提交数据的大小
4>要提交数据给服务器处理时使用 -
enctype
作用:指定表单数据进行编码的方式
取值:
1>application/x-www-form-urlencoded
默认值,允许将任意类型的文本提交给服务器
2>multipart/form-data
允许将文件提交给服务器
3>text/plain
不对任何数据进行编码和传输
3.表单控件
3.1表单元素分类
- input元素
- textarea 多行文本域
- select和option 选项框
- 其他元素
- 新input元素
3.2详解
- input元素
里面会包含若干个不同的表单控件
标记 :<input>
属性 | 作用 |
---|---|
type | 根据不同的type属性值,可以创建不同的input元素 |
name | 定义表单控件的名称,主要提交给服务器使用的。注意:如果不声明name属性的话,元素则无法提交给服务器 |
value | 定义当前控件的值,主要提交给服务器使用的 |
disabled | 禁用控件,无值的属性<input disabled> |
- 文本框 与 密码框
文本框:<input type="text">
密码框:<input type="password">
具备除以上四个属性外,还具备以下几个独立属性:
属性 | 作用 |
---|---|
maxlength | 限制输入的字符数,取值为数字 |
readonly | 只读,无值属性 |
placeholder | 占位符,即默认显示在文本框用于给用户提示的文字 |
- 按钮
按钮 | 作用 | 标记 |
---|---|---|
提交按钮 | 将表单提交给服务器 | <input type="submit" value="显示的文本"> |
重置按钮 | 将表单恢复到初始化的状态 | <input type="reset" value="显示的文本"> |
普通按钮 | 通过 JS 自定义功能 | <input type="button" value="显示的文本"> |
<button>显示的内容</button>
属性:
1、type :submit / reset / button
- 单选按钮 和 复选框
单选按钮:<input type="radio">
复选框:<input type="checkbox">
属性 | 作用 |
---|---|
name | 设置名称,并用于分组,一组单选按钮 或 复选框的名称必须相同 |
value | 必须设置 |
checked | 默认被选中,无值属性 |
- 隐藏域 和 文件选择框
1>隐藏域
<input type="hidden" name="" value="">
想提交给服务器,但不想给用户看的数据,可以放在隐藏域中
2>文件选择框
<input type="file" name="">
注意:
form的 method 属性值必须为 post
form的 enctype属性值必须为multipart/form-data