1、列表
1、列表的作用
按照一定的格式显示数据
通常情况下,会将具备相似特征的一组内容进行排列显示。
默认格式:从上到下
2、列表的使用
1、列表的组成
每个列表由两部分组成
1、列表类型
指定列表是有序的还是无序的
有序:<ol></ol>
无序:<ul></ul>
2、列表项
指定具体的列表显示的内容
列表项:<li></li>
2、有序列表
语法:
<ol>
<li></li>
</ol>
属性:
1.type
作用:指定有序列表前标识的类型
取值:
1.数字(默认值)
a.小写英文
A.大写英文
i:小写罗马数字
I:大写罗马数字
2、start
作用:指定有序标识符的起始编号
取值:数字
3、无序列表
作用:是以没有顺序的标识符展现在列表项之前
语法:
<ul>
<li></li>
</ul>
属性:
type:
disc(默认值)实心圆
circle空心圆
square实心方块
none:取消标识符(重点)
3、列表的复杂应用
列表的嵌套
被嵌套的内容出现在li中
允许嵌套div
4、定义列表
语法:
<dl>
<dt>独立术语</dt>
<dd>独立术语的解释</dd>
</dl>
使用场合:图文混排
2、结构标记
1、作用:提升标签的"语义化"
2、常用的结构标记
1、<header></header>
作用:定义页面文档的上方内容部分
注意:一个标签可以在页面出现多次
2、<nav></nav>取代<div id="nav"></div>
作用:用于页面导航链接的部分
3、section
作用:用于定义页面的主体部分
4、article
作用:用于论坛的帖子、评论、新闻的具体信息、博客
5、footer
作用:用于定义页面底部信息
6、aside
作用:用于定义页面中的边栏部分
注意:能使用结构标记的场合一定尽量使用结构标记,如果不适合使用结构标记,就可以使用<div id=""></div>
3、表单(重难点)
1、表单的作用:用于显示、收集用户信息,并将信息提交给服务器
2、表单的组成
1、表单:负责提交数据后的表单处理
2、表单控件:实现用户交互的可见的页面元素
3、表单
<form></form>
1、用来收集表单控件所输入的信息,来提交给服务器
属性:
1、action
作用:后台中,处理表单数据的应用程序的url,由后端工程师提供
2、method
提交数据的方式
常用取值:
1、get默认值
显示提交数据,被提交的数据显示在地址栏中
不安全,输入密码,身份证号
特点:
有大小限制,所提交数据的最大不能超过2kb
向服务器要数据时,使用get提交方式
2、post
隐式提交数据
特点:无大小限制
当你需要向服务器发送数据时,使用post方式
3、enctype
作用:指定表单数据的编码方式,表单允许将什么样的数据提交给服务器
1、application/x-www-form-urlencoded
默认值,允许将表单中的字符,数字,特殊字符,一起提交给服务器
2、multipart/form-data
只在上传文件时使用
3、text/plain
只允许提交普通字符还有数字,特殊字符不能提交
4、name
定义表单的名称
4、表单控件
1、表单控件的作用:接受用户输入的数据
2、表单控件的分类
1、
1、语法:<input>
2、属性:
1、type:根据不同的type值。可以创建不同的输入控件
2、value:控件的值,要提交给服务器处理程序的数据
3、name:控件的名称,要提交给服务器处理程序的名称
4、disabled:禁用控件,允许不给值
3、具体控件
1、文本框与密码框
文本框:<input type="text">
密码框:<input type="password">
属性:
1、maxlength限制输入的字符数
2、readonly:只读,允许不给值
3、name:采用”匈牙利“命名法
控件缩写+功能名称组成
2、单选按钮和复选框
单选按钮 type="radio"
复选框:type="checkbox"
属性:name:定义名称:分组
缩写:rdo、chk
checked 默认被选中
3、按钮
1、提交按钮
将表单中的数据提交给服务器
type="submit"
2、重置按钮
将表单中的数据恢复到初始化的状态
type="reset"
3、普通按钮
type="button"
属性:value:定义按钮上的文本
注意:
1、submit只负责提交自己所在的表单的数据,与其他表单没有关系
2、submit和reset不要脱离独立存在,否则没有功能实现
3、只有在表单内的控件的值才会被提交,表单之外无法提交
4、隐藏域和文件选择框
1、隐藏域:
type="hidden"
作用:在页面上看不到,但是允许被提交的数据
2、文件选择框
作用:提供了选择文件的操作
type="file"
注意:
1、form当中的method必需为post
2、form当中的enctype属性值必须为multipart/form-data
2、textarea元素
中文名:多行文本域
语法:<textarea>显示的内容</textarea>
属性:name:控件的名称,服务器用
cols:指定文本域的列数,一行内能显示多个个字符(中文减半)
rows:指定文本域的行数,初始化时,默认能够显示多少行的数据
readonly:只读
3、选项框
select,option
分类:
1、下拉选择框
2、滚动列表
1、语法:
<select></select>选项框
缩写:sel
属性:
1.name:名称
2、size:大于1,则为滚动列表
3、multiple:这是多选,不需要给值
<option></option>选项框中的选项
属性:
1、value:值
2、selected:预选中
4、其他元素
1、label元素
作用:关联文本以及表单控件。关联之后,点击文本时相当于点击表单控件。
语法:
<input type="text" id="txtName">
<label for="txtName">文本</label>
属性:for:表示与该元素相关联的表单控件的id值
3、其他标记
1、浮动框架
作用:在一个网页中嵌入另一个网页
标签:
<iframe></iframe>
属性:
1、src:被引入网页的url
2、width
3、height
4、frameborder:浮动框架的边框,设置为0,取消默认边框
2、摘要与细节
作用:用来展开和收缩网页内容
标签:
<details></details>定义细节
<summary></summary>定义细节中的标题
3、为控件分组
语法:
<filedset></fieldset>为控件分组
<legend>标题文本</legend>为分组指定标题
4、度量元素
作用:用于在页面中定义一个度量衡
标签:<meter></meter>
属性:
1、min:范围的最小值,默认为0
2、max:范围的最大值,默认为1
3、value:当前度量元素所显示的值,默认为0
5、时间元素
作用:关联时间的不同表现形式
标签:<time>文本</time>
属性:datetime:用于关联真正的时间
年月日与时分秒之间用T作为分隔
6、高亮文本元素
功能:在标识出来的文本上,以突出的背景颜色进行显示
标签:<mark>文本</mark>