No.1.2

列表标签

无序列表

标签名　　　　　　　　说明

ul　　　　　　　　　　表示无序列表的整体，用于包裹li标签

li　　　　　　　　　　 表示无序列表的每一项，用于包含每一行的内容

有序列表

标签名　　　　　　　　说明

ol　　　　　　　　　　表示有序列表的整体，用于包裹li标签

li　　　　　　　　　　 表示有序列表的每一项，用于包含每一行的内容

自定义列表

标签名　　　　　　　　说明

dl　　　　　　　　　　表示自定义列表的整体，用于包裹dt/dd标签

dt　　　　　　　　　   表示自定义列表的主题

dd　　　　　　　　　  表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进效果

表格

标签名　　　　　　说明

table　　　　　　表格整体，可用于包裹多个tr

tr　　　　　　　  表格每行，可用于包裹td

td　　　　　　　 表格单元格，可用于包裹内容

标签的嵌套关系：table > tr > td

属性：

属性名　　　　属性值　　　　效果

border　　　　 数字　　　　　边框宽度 

width　　　　   数字　　　　　表格宽度

height　　　　 数字　　　　　 表格高度

表格标题和表头单元格标签

标签名　　　　名称　　　　　　　　说明

caption　　　　表格大标题　　　　表示表格整体大标题，默认在表格整体顶部居中位置显示

th　　　　　　 表头单元格　　　　表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

表格的结构标签

标签名　　　　　　名称

thead　　　　　　表格头部

tbody　　　　　　表格主体

tfoot　　　　　　  表格底部

快捷键：Shift+Tab 往前缩进

快捷键：Tab　　往后缩进

合并单元格

水平或者垂直多个单元格合并成一个单元格

跨行合并（rowspan）或跨列合并（colspan）

属性名　　　　　　属性值　　　　　　　　说明

rowspan　　　　合并单元格个数　　　　　跨行合并，将多行的单元格垂直合并

colspan　　　　合并单元格的个数　　　　 跨列合并，将多列的单元格水平合并

同结构标签才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）

 表单标签

标签名：input

标签名　　　　　　type属性值　　　　　　　　　　说明

input　　　　　　　　text　　　　　　　　  文本框，用于输入单行文本

input　　　　　　　　password　　　　　　密码框，用于输入密码

input　　　　　　　　radio　　　　　　　　单选框，用于多选一

input　　　　　　　　checkbox　　　　　　多选框，用于多选多

input　　　　　　　　file　　　　　　　　　文件选择，用于之后上传文件

input　　　　　　　　submit　　　　　　　 提交按钮，用于提交

input　　　　　　　　reset　　　　　　　　重置按钮，用于重置

input　　　　　　　　button　　　　　　　 普通按钮，默认无功能，之后配和js添加功能

type属性值：text

常用属性：placeholder  占位符。提示用户输入内容的文本

type属性值：radio

常用属性：

属性名　　　　　　　　　　说明

name　　　　　　　　　　分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中

checked　　　　　　　　   默认选中

 type属性值：file

常见属性 ：属性名multiple　　多文件选择

input系列标签按钮

标签名　　　　　　type属性值　　　　　　说明

input　　　　　　　　submit　　　　　　提交按钮，点击之后提交数据给后段服务器

input　　　　　　　　reset　　　　　　  重置按钮，点击之后回复表单默认值

input　　　　　　　　button　　　　　　普通按钮，默认无功能，之后配合js添加功能

添加按钮显示的文字写value属性

需要实现按钮功能，需要配合form标签使用

button标签

标签名　　　　　　type属性值　　　　　　说明

button　　　　　　　submit　　　　　　提交按钮，点击之后提交数据给后端服务器

button　　　　　　    reset　　　　　　  重置按钮，点击之后回复表单默认值

button　　　　　　　button　　　　　　普通按钮，默认无功能，之后配合js添加功能

谷歌浏览器中button默认是提交按钮

button标签是双标签，更便于包裹其他内容：文字、图片等。

select下拉菜单标签

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

selected下拉菜单的默认选择

textarea文本域标签

常见属性：

　　cols: 规定了文本域内可见宽度

　　rows：规定了文本域内可见行数

label标签

使用1.（1）：使用label标签把内容包裹起来

　　   （2）：在表单标签上添加id属性

　　   （3）：在label标签的for属性中设置对应的id属性值

　　2.（1）：直接使用label标签把内容（如：文本）和表单标签一起包裹起来

　　   （2）：需要把label标签的for属性删除即可

 没有语义的标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

html5新增语义化标签（通常手机端网页用）

标签名　　　　　　语义

header　　　　　　网页头部

nav　　　　　　　 网页导航

footer　　　　　　 网页底部

aside　　　　　　 网页侧边栏

section　　　　　  网页区块

article　　　　　　网页文章

字符实体(重点记)

显示结果　　　　　　　　描述　　　　　　　　实体名称

　　　　　　　　　　　　空格　　　　　　　　 

<　　　　　　　　　　　小于号　　　　　　　 &lt;

>　　　　　　　　　　　大于号　　　　　　　 &gt;

&　　　　　　　　　　　  和号　　　　　　　  &amp;

"　　　　　　　　　　　 单引号　　　　　　　  &quot;

'　　　　　　　　　　　  双引号　　　　　　　&apos;(IE不支持)

©　　　　　　　　　　　版权（copyright）　　&copy;

 

快捷键：Shift+Alt+⬇（下箭头） 快速复制到下一行