1、列表
1、作用
按照一定的结构来显示数据
按照从上到下的顺序来显示数据
所有的列表都由两部分组成
1、列表类型(有序<ol>或无序<ul>)
2、列表项<li>
2、使用列表
1、有序列表
1、语法
列表类型:<ol></ol> -- Order List
列表项:<li></li> -- List Item
注:列表项是列表类型的子标签
2、属性
列表类型属性
1、type
取值:
1、1:默认值、数字
2、a:小写字符显示
3、A:大写字符显示
4、i:小写罗马字符
5、I:大写罗马字符
2、start
类型的起始编号
如下图展示:
<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"></head><body><dl><dt>水浒装</dt><dd>描述的是105个男人和3个女人的惊心动魄的武侠故事!</dd><dt>红楼梦</dt><dd>描述的也是爱情故事!... ...</dd></dl><ul type="none"><li>西游记<ol><li>孙悟空</li><li>猪悟能</li><li>沙悟净</li></ol></li><li>三国演义</li><li>水浒传<ul><li>宋江</li><li>李逵</li><li>卢俊义</li></ul></li><li>红楼梦</li></ul><ol type="A" start="356"><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li></ol></body></html>
2、无序列表
1、语法
列表类型:<ul></ul> -- Unorder List
列表项:<li></li>
2、属性
1、type
取值:
1、disc:默认值、实心圆
2、circle:空心圆
3、square:实心矩形
4、none:没有
3、定义列表
1、作用
定义列表往往用于要给出一类事物的定义的情形,
如名词解释等...
2、语法
<dl></dl>:定义一个定义列表
<dt></dt>:定义 列表中的一个术语
<dd></dd>:定义 列表中对术语的解释
3、使用场合
图文混排
2、结构标记<跟随Html5出现的,div做布局可读性差>
1、作用
专门搭建网页结构,用于提升标记的可读性
以后可以通过结构标记来取代做布局的div
2、详解
1、<header>元素
作用:定义网页文档的页眉(顶部信息)
语法:<header></header>
取代:<div id="header"><div>
2、<nav>元素
作用:定义页面中的导航链接部分
语法:<nav></nav>
取代:<div id="nav"></div>
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="footer"></div>
3、表单(重难点)【关联服务器和输入数据的纽带】
1、表单的作用
用于收集信息并将信息提交给服务器
表单的两个基本部分
1、实现数据交互的可见界面元素—表单控件
2、表单提交后的处理
2、表单元素
表单:收集用户数据,并且提交给服务器
语法:
1、标记
<form></form>
注意:只有放在form里的表单控件才能被提交
2、属性
1、action
要提交给服务器处理程序的地址
默认提交给本页
2、method
提交方式,默认值是 get
取值:
1、get
1、以明文方式提交数据
2、安全性较低
3、大小限制为2KB(与浏览器有关,IE 限制2KB,Chrome 限制8KB ,行业中以限制大小最小为标准大小)
4、向服务器要数据时,使用get
2、post
1、隐式提交
2、安全性较高
3、无大小限制
4、传递数据给服务器进行处理时,使用post
3、put
4、delete
5、... ...
3、enctype
指定表单数据的编码方式即指定什么样的数据可以提交给服务器
1、application/x-www-form-urlencoded(默认值)
默认值,允许将普通字符,特殊字符提交给服务器
2、multipart/form-data(用的比较少)
允许将 文件 提交给服务器
3、text/plain(一般不用)
只允许将普通字符提交给服务器。特殊字符,文件则不可以
4、name
定义表单的名称
3、表单控件
能与用户交换,并且提供可视化外观的HTML元素
表单控件,只有放在表单中,数据才可以被提交
表单控件分类:
1、input元素
2、textarea元素-多行文本域
3、select和option元素-选项框
4、其他元素
表单控件详解
1、input元素
1、作用:用于收集用户的信息
2、语法:<input>
3、属性:
1、type
根据type属性值,创建各种不同的输入控件
2、name
指定控件的名称,一般提交给服务器时使用
采用的是匈牙利命名法(控件缩写+作用)
3、value
控件的值,提交给服务器使用
4、disabled
禁用控件
该属性无值
4、input详解
1、文本框与密码框
文本框:<input type="text">
密码框:<input type="password">
特有属性:
1、name
缩写:txt
ex:txtUsername:用户名称的文本框
txtUserpwd:用户密码
2、maxlength:
限制输入的字符数
ex:
<input maxlength="15">
3、readonly
只读,只能看不能写
无值属性
2、单选按钮和复选框
单选按钮:<input type="radio">
复选框:<input type="checkbox">
属性:
1、name
单选按钮缩写:rdo
复选框缩写:chk
注意:name属性除定义名称外,还能分组,如果属于一组的单选按钮或复选框,名称必须相同
2、value
根据需求自己设定
3、checked
设置默认被选中
3、按钮
1、提交按钮
<input type="submit">
作用:功能预定义,负责将当前表单中的数据提交给服务器
2、重置按钮
<input type="reset">
作用:功能预定义,将表单中的数据恢复初始化的状态
3、普通按钮
<input type="button">
作用:无功能,可以由用户自定义的编写功能
属性:
1、name
2、value:定义按钮上的文本
button name缩写:btn
2、textarea元素
称为:多行文本域
语法:
1、标记
<textarea></textarea>
2、属性
1、name
定义名称,缩写 txt
2、cols
指定文本域显示的列数,变相的指定宽度
ex:
cols="50"
英文字符:显示50个
中文字符:显示25个
3、rows
指定文本域显示的行数,变相的指定高度
(如果显示行数不够,会自动出现滚动条)
4、readonly
只读
3、select 和 option元素-选项框(下拉列表/滚动列表)
称为:选项框
1、语法
1、<select></select>
作用:创建选项框(下拉,滚动)
属性:
1、name
控制名称,缩写 sel
2、size
指定选项框,默认显示选项的数量。
大于1的话,则为滚动列表,否则就是下拉选项框
3、multiple
设置多选
无值
2、<option>显示的数据</option>
选项
属性:
1、value
提交给服务器的数据
2、selected
预选中
4、其他元素
1、浮动框架
1、什么是浮动框架
可以在一个浏览器窗口中能够同时显示多个HTML文档内容
2、语法
<iframe>文本内容</iframe>
属性:
1、src
浮动框架中引入的页面url
2、width
宽度
3、height
高度
4、frameborder
边框,如果不想要边框,则将frameborder改为0
1、label元素(标签)
作用:关联 文本 和 表单控件的。关联之后,单击文本,就如同单击 表单控件 一样
语法:
<label>文本</label>
属性
for:表示要与该文本关联的控件的ID值
2、为控件分组
<fieldset></fieldset>:为控件分组
<legend></lengend>:为分组指定标题
2、摘要与细节
1、作用
可以通过用户的点击操作,来显示/隐藏某一部分内容
2、语法
<details></details> :定义摘要和细节
<summary></summary> :定义允许被用户点击的标题文本
注意:summary 必须是details中的第一对子元素
3、度量元素
1、语法
<meter></meter>
作用:表示度量元素,比如:投票的比例,电池的电量... ...
2、属性
1、min:定义度量范围的最小值,默认为0
2、max:定义度量范围的最大值,默认为1,通常情况会将其改为100
3、value:当前显示在度量元素上的值
4、时间元素
1、作用
关联时间的不同表现形式
2、语法
<time>文本</time>
属性:
datatime:表示关联的日期和时间,如果同时关联日期和时间的话,中间用 T 分割
5、高亮文本显示
1、作用
以突出的背景颜色显示文本
2、语法
<mark>文本</mark>
4、隐藏域和文本选择框
1、隐藏域:<input type="hidden">
作用:想提交给服务器,但不想让用户看到的数据,可以保存在隐藏域中。
缩写:txt
2、文件选择框
<input type="file">
缩写:txt
注意:
1、method 必须设置为 post
2、enctype 必须设置为multipart/form-data
具体实例:
<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"></head><body><!-- 1、作用:将里面所有的表单控件的数据提交给服务器2、提交方式:get3、动作地址:本页4、编码方式:application/x-www-form-urlencode--><form><fieldset><legend>基本信息</legend><p>用户名称:<input type="text" name="txtUsername" value="请输入您的名称"></p><p>用户密码:<input type="password" name="txtUserpwd"></p></fieldset><p><!-- 注意:只有一组内的单选按钮才能实现单选功能。通过 name 属性进行分组 -->用户性别:<input type="radio" name="rdoGender" value="male" checked>男<input type="radio" name="rdoGender" value="female" id="rdoFemale"><label for="rdoFemale">女</label></p><p>用户爱好:<input type="checkbox" name="chkHobby" value="eat">吃<input type="checkbox" name="chkHobby" value="drink">喝<input type="checkbox" name="chkHobby" value="play">玩<input type="checkbox" name="chkHobby" value="happy">乐<input type="hidden" name="txtUserID" value="U1234567890"></p><p>用户头像:<input type="file" name="txtImage"></p><p>自我介绍:<textarea name="txtIntro" cols="50" rows="4">这家伙很懒,什么都没留下......</textarea></p><p>籍贯选择:<select name="selJiguan" size="5" multiple><option value="-1">===请选择===</option><option value="1">北京</option><option value="2">上海</option><option value="3">天津</option><option value="4">重庆</option></select></p><p><input type="submit" value="起飞"><input type="reset" value="恢复"><input type="button" value="普通按钮"></p></form></body></html>