HTML三种列表总结,HTML标签元素、列表、表格、表单的的理解及总结——2019-8-30...

HTML的标签、元素及属性HTML文档由各种html元素组成，如html元素，HTML文档的根元素；head元素，HTML文档的头部元素，body元素，HTML文档的主体元素，title元素是文档的标题元素。

HTML的标签是由一堆尖括号组成<>,分为其实标签和结束标签，如

、、

---

等没有结束标签。HTML的标签对大小写不敏感，大小

和小写

一样能被浏览器所识别。

HTML元素是组成HTML文档的基本组成部件，它是由HTML的标签来体现，如下面的示例

内容

表明是一个段落元素，HTML元素可以相互嵌套，由最外层的html元素，嵌套里边的head，body等元素，HTML元素又分为“块元素”和“行内元素”，“块元素”会独占一行，在网页中的效果是该元素的内容对于其前后元素的内容都另起一行。比如前面有行内元素span，块元素p会另外起一行来显示，“行元素”在网页中的效果是该元素的内容对于其前后元素的内容都在一行显示，如span、img。

HTML元素属性是由元素属性和值来组成，HTML的元素属性显示了对HTML元素的描述，如img标签里的src、width、height属性，p标签里的style属性，浏览器就会按照设定的效果来显示内容。

实例

html>

Document

行内元素行内元素行内元素

我是一个段落

我是一个段落

我是一个段落

运行实例 »

点击 "运行实例" 按钮查看在线实例

HTML列表HTML列表有三种，它们都是块元素，分为有序列表，无序列表还有定义列表，用的最多的是无序列表，它们通常是组合标签出现，常用在网页布局导航的部分。

有序列表：最外层是ol，里面是li元素，默认会带上数字序列

实例

1. 导航1
2. 导航2
3. 导航3
4. 导航4
5. 导航5

运行实例 »

点击 "运行实例" 按钮查看在线实例

无序列表：最外层是ul，里面是li元素，不会带上数字序列，前面有默认样式小点，通常会用无序列表模拟有序列表，如新闻列表，导航里面用的多。

实例

• 我是新闻列表
• 我是新闻列表
• 我是新闻列表
• 我是新闻列表
• 我是新闻列表

运行实例 »

点击 "运行实例" 按钮查看在线实例

定义列表：最外层是dl，里面有dt和dd，dt是代表了列表的标题，是html元素更具有语义化，可以有多个dt。

实例

新闻标题 新闻标题

我是一条新闻

我是一条新闻

我是一条新闻

我是一条新闻

运行实例 »

点击 "运行实例" 按钮查看在线实例

列表与表格的区别

01、列表与表格很类似，都可以表示一组数据。

02、列表外部由ol、ul、dl表示，l代表了list，内部有li或者dd组成，而表格由最外层的table包裹，内部有thead、tbody、tfoot，内部有tr、td、th组成。

03、表格还有colspan和rowspan这两个属性用于创建特殊的表格。

04、colspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。

05、rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。

06、如果数据比较简单，只有一列数据，就用列表来表示，如果有多列数据，就适合用表格来表示。

列表实现工作计划

实例

工作计划

1. 学习完前端HTML相关知识
2. 学习JS、Jquery动态脚本语言
3. 学习前端框架，做出后台静态页面

• 学习PHP语法
• 学习laravel框架

项目实战开发

开发一套自己的CMS后台框架

使用CMS搭建一个门户网站

下一个工作，工资要涨5000

运行实例 »

点击 "运行实例" 按钮查看在线实例

商品清单

实例

商品清单

订单号	序列	商品名称	单价	数量	金额
000520190831	1	华为P30	5500	1	5500
2	华为Mate20	3800	2	7600
3	荣耀10	2000	2	4000
合计	5	17100

运行实例 »

点击 "运行实例" 按钮查看在线实例

HTML注册表单

实例

用户注册

用户:

密码:

邮箱:

年龄:

课程

请选择课程

HTML

JavaScript

Jquery

PHP

Mysql

Laravel

爱好

玩游戏

撸代码

看电影

性别

男

女

保密

按钮

确定

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结部分

小结：html元素比较多，常用的标签有div 、p、 ul(li)列表标签，重点理解行内元素和块元素的不同点。

表格里的colspan表示合并列，rowspan表示合并行，比较容易记混淆。

表单控件里的内容比较多，重点记住select和option是组合标签，复选框type类型用checkbox，name属性值相同后面带上[]，表示数组，单选框type类型用radio，name属性值相同。

input按钮里面type属性值为submit或者是button按钮的时候，会直接提交数据。