HTML学习笔记

浏览器与服务器

浏览器

浏览器的作用

(1)将网页渲染出来,供用户查看;

(2)能够让用户通过浏览器,进行网页的交互。

浏览器的内核

  浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容,以及页面格式信息;

  • IE内核:Trident;
  • 谷歌内核:webkit/blink;
  • 火狐内核:gecko;
  • Safari内核:webkit;
  • 欧朋内核:presto.

浏览器的兼容问题

  (1)浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指不同的浏览器对同一段代码进行不同的解析渲染,造成页面显示效果不一致的情况。

  (2)作为前端开发者的目标是,无论用户用什么浏览器查看我们的网页,都应该是统一的显示效果。

  (3)关于一些常见的浏览器兼容问题以及解决方案,会在后面的学习中进行总结。

服务器

服务器是一台超级计算机,24小时不关机,用于存储数据,用其他电脑可以访问这些数据。

浏览器访问网页原理

  缓存文件夹:用于存储网页数据。
  1.当我们利用浏览器访问网页时,有真是的物理文件传输。浏览器先将网页上的内容存储到本地文件夹中,再渲染出来呈现用户查看。
  2.第二次访问网页较快,因为第一次访问时已经将这个网页上的信息缓存到本地,直接从本地查找。
  3.缓存文件夹中除了图片之外,还缓存了.js,.css.html等文件。即网页越复杂,组成网页的文件就越多。

浏览器请求数据的过程

  • 按下回车时浏览器根据输入的URL地址发送请求报文;
  • 服务器接收到请求报文,会对请求报文进行处理;
  • 服务器将处理完的结果通过响应报文返回给浏览器;
  • 浏览器解析服务器返回的结果,将结果显示出来。

Web技术

根据Web浏览器地址栏中指定的URL,Web浏览器从Web服务器端获取资源等信息,从而显示Web页面

Web技术之URL

  Web由很多资源组成,比如HTML页面、视频和图片,在网络上每个资源都有一个编号,这个编号就是URL地址,世界上任何一个资源的编号是唯一的,客户端通过URL地址在互联网中找到该资源,URL的官方名称叫作统一资源标识符(Uniform ResourceLocator)。

  URL的规则定义如下:

1
2
我们在浏览器的地址栏中输入的地址
<!--https://www.atjava.cn/posts/1953754523.html-->
  • 协议类型://ip地址:端口号/资源路径/资源名称;
  • ip是指找到哪一台计算机;
  • 端口号是指找到哪一个应用程序;
  • 资源路径/资源名称:用户想要获取的数据

Web技术之HTTP

http.png

补充知识

  • 通过发送请求获取服务器资源的web浏览器等,都可成为客户端;
  • Web使用一种HTTP的协议作为通信规范,完成从客户端到服务器端等一系列运行流程,也就是Web是建立在HTTP协议上通信的;
  • 纯文本文件就是能用 记事本的打开方式打开的文件并且能正常显示;
  • .html文件是一个网址类型, 通过浏览器打开不能编辑只能观看效果, 通过记事本打开可以更改编辑。

Web技术之HTML

  客户端(浏览器)通过HTTP接收的资源一般是一个HTML页面,而用户并看不懂HTML页面,这时就需要浏览器将HTML页面转换成用户能理解的内容。

  为了更方便阅读,HTML语言定义了一些标记字符,客户端(浏览器)根据标记字符的含义(利用HTML标签)对文字进行处理。

初识HTML

什么是HTML

HTML(Hypertext Markup Language)即超文本标记语言。

HTML的作用:为文本添加语义,而不是修改文本的样式。

HTML(Hypertext Markup Language)即超文本标记语言

HTML的发展史

2632.png

涉及的机构:

  • IETF
  • W3C
  • WHATWG

HTML特点

  • HTML不需要编译,直接由浏览器执行;
  • HTML文件是一个文本文件;
  • HTML文件后缀名必须是.html或者.htm结尾;
  • HTML大小写不敏感。

HTML基础语法

HTML基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--DTD文档声明必须在HTML文件第一行(除了注释)-->
<!DOCTYPE html>

<!--告诉浏览器使用哪种语言显示-->
<html lang="en">

<!--头部信息(告诉浏览器的)-->
<head>
<title>标题</title>
</head>

<!--用户查看网页信息部分-->
<body>

<!--网页主体信息-->
</body>
</html>
  • HTML基本结构中所有的标签都是成对出现的,不带/的标签称为开始标签,带/的标签称之为结束标签。
  • 其他所有的标签都必须写在html标签里面。
html标签

用来告诉浏览器这是一个网页,也就是告诉浏览器是一个HTML文档

head标签

用来给网站添加一些配置信息,比如:

  • 指定网站的标题,或者网站的小图标;
  • 添加网站的SEO相关信息(指定网站的关键字、指定网站的描述信息);
  • 外挂一些外部的css和js文件;
  • 添加一些浏览器适配的相关内容。

一般情况下,写在head标签内部的内容都是不会显示给用户查看,是给浏览器查看的。

title标签

专门用于指定网站的标题,并且指定的标题会作为用户保存网站的默认的标题,title标签必须写在head标签里面

body标签
  • 专门用于定义HTML文档中需要显示给用户查看的内容(文字、图片、音频、视频);
  • 一对html标签只能有且只有一对body标签。

字符集问题

meta标签

指定当前网页的字符集,常见字符集有GBK(中文)、Unicode(UTF-8)包含所有字符。

在网页中指定字符集的意义在于告诉浏览器使用哪一个字符集进行解码,从而转换成我们能看的懂的内容。

乱码

为啥会有乱码现象?

  • 在编写网页中没有指定字符集;
  • 或者是指定不正确的字符集;
  • HTML文件保存的字符集与网页指定的字符集不一致。

如何解决乱码问题?

在编写网页中指定字符集;

字符集
  • 字符集就是指字符的集合,也就是很多字符集堆在一起;
  • 例如就像中国人与外国人用各自语言和对方写信,看不懂对方书信的内容
GBK(GB2312)和UTF-8的区别
  • GBK(GB2312)里面存储的字符比较少,主要包括存储用汉字和一些常用外文,体积较小
  • UTF-8里面存储了世界上所有的文字,体积较大。
  • 网站仅仅包含中文字符,建议使用GBK(GB2312)字符集;网站除了中文还包含其他国家语言,那么推荐使用UTF-8。

HTML标签

语法

格式:<标签名></标签名>

HTML标签分类

分类一

  • 单标签

    • 只有开始标签没有结束标签,也就是由一个<>组成的;
    1
    <meta charset="UTF-8">
  • 双标签

    • 有开始标签和结束标签,也就是由<>和</>组成。
    1
    2
    3
    <body>
    <!--网页主体信息-->
    </body>

分类二(标签关系)

  • 并列关系(兄弟关系、平级关系)
1
2
<meta charset="UTF-8">
<title>Hello world</title>
  • 嵌套关系(父子关系、上下级)
1
2
3
4
<head>
<meta charset="UTF-8">
<title>Hello world</title>
</head>

分类三

  • 行内元素;
  • 块级元素;
  • 行内块元素

行内和块元素的区别:

  • 显示效果不同:
    • 块级元素会独占一行,其宽度自动填满其父元素宽度
    • 行内元素不会独占一行,其宽度随元素的内容而变化。
  • 块级元素可以设置宽高属性(块级元素即使设置宽度,仍然独占一行),行内元素设置宽高无效;
  • 块级元素可以设置margin和padding,行内元素水平方向有效,垂直方向无效;
HTML标签属性

语法:

<标签名 属性名1=“值” 属性名2=“值” ……..>元素的内容</标签名>

HTML元素

从开始标签到结束标签的所有代码,称为HTML元素。

1
<p>这是第一个段落</p>

HTML注释

1
2
<!--这是HTML格式的注释-->
注释内容在网页中不显示

DTD文档声明

什么是DTD文档声明?

由于HTML有很多个版本的规范,每个版本的规范之间又有一定的差异,所以为了能够让浏览器正确地编译、解析和渲染我们的网页,我们就应该在当前网页中指定DTD文档声明,浏览器就会知道自己会使用哪一个版本的规范进行编译、解析和渲染我们的网页。

DTD文档声明格式

每一个不同版本的HTML规范都有不同的DTD文档声明,HTML5向下兼容HTML和XHTML规范

1
2
3
4
5
6
7
<!DOCTYPE html>
<!--1.<! DOCTYPE>声明必须在HTML文档的第一行(除了首行的注释);
2.<! DOCTYPE>声明不是HTML标签;
3.DTD文档声明不区分大小写;
4.虽然DTD文档声明的作用是用于告诉浏览器我们的网页是采用哪一个版本的HTML规范编写的,是为了方便浏览器进行解析和渲染,但是浏览器并不是完全依靠这个DTD文档声明,浏览器拥有一套自己的机制
也就是说DTD文档声明不写网页也能正常运行,但是由于W3C规定第一行必须写上DTD文档声明,所以为了遵守规定,推荐写上DTD文档声明
-->

HTML基础标签

文字和段落标签

标题标签

  • 创建HTML文件的快捷键: Ctrl + Alt + ins(在Home键左边);
    • Home:让光标移动到当前行的最前面;
    • End: 让光标移动到当前行的最前面;
    • 按住Alt不放,然后按住鼠标不放,然后拖动鼠标就可以同时编辑多行文字;
  • 作用:用于给文本添加标题语义的,不是修改文本的样式的;
  • 标题系列标签只有6个,超过6个的部分无效:
1
<h1></h1>~~~~~<h6></h6>
  • 被标题系列的标签包裹的内容会独占一行;
  • 在标题系列的标签中,h1最大,h6最小;
  • 在企业开发中,一定要慎用标题系列的标签,特别是h1标签,一般情况下一个界面只能出现一个h1标签(和SEO有关)。

段落标签

  • 作用:给文本添加段落语义,也就是说告诉浏览器哪些文字是段落
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>
李知恩(이지은、Lee Ji Eun),艺名IU,
1993年5月16日出生于韩国首尔特别市,韩国女歌手、演员、主持人。
2008年9月,在Mnet音乐节目《M! Countdown》中演唱歌曲《迷儿》,正式出道;随后发行首张迷你专辑《Lost And Found》。
2009年,发行首张正规专辑《Growing Up》。
2010年,发行迷你专辑《Real》,主打歌《好日子》连续五周位居韩国Gaon榜榜首。
2011年,发行第二张正规专辑《Last Fantasy》,全专歌曲总下载量超过1700万次。
2012年,名列韩国福布斯名人榜第三位。
2013年,发行的第三张正规专辑《Modern Times》展现了多元化的歌曲风格。
2014年,发行翻唱专辑《花书签》,同年获得韩国盖洛普调查歌手部门第一位以及第16届Mnet亚洲音乐大奖最佳女歌手奖 。
2015年,发行迷你专辑《CHAT-SHIRE》,并被《Billboard》认可为韩国流行音乐百强榜的领跑者;同年获得韩国大众文化艺术奖国务总理表彰奖。
2017年,发行第四张正规专辑《Palette》和第二张翻唱专辑《花书签2》。
2011年,出演校园剧《dream high》,并成为SBS音乐节目《人气歌谣》的固定主持人。
2013年,凭借周末剧《最佳李顺心》获得KBS演技大赏新人女演员奖。
2015年,主演KBS金土剧《制作人》。2016年,主演古装穿越《步步惊心:丽》。
2017年,获得2017年度MAMA最佳女歌手奖 。
2018年,获得韩国金唱片奖音源部门大奖。2019年,首次主演电影《Persona》和主演tvN爱情奇幻剧《德鲁纳酒店》。
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题与段落标签1</title>
</head>
<body>
<p>我是一个段落</p>
<p>我是一个段落</p>
我是一个段落
我是一个段落
</body>
</html>
  • 在浏览器中会独占一行,可以通过谷歌浏览器开发工具进行查看。
  • 段落p的align对齐属性值:
    • left:左对齐;
    • right:右对齐;
    • center:居中对齐内容;
    • justify:对行进行伸展,保证每行都可以有相等的长度。

水平线标签

  • 作用:在浏览器中显示一条分割线;
  • 在浏览器中会独占一行;
  • 属性:
    • width:设置水平线宽度,可以像素或者百分比;
    • color:设置水平线颜色;
    • align:设置水平线居中对齐;
    • noshade:设置水平线无阴影;

br标签

  • 作用:换行

  • 多个br标签可以连续使用,使用了多少个br标签就会换多少行。

  • 由于HTML的作用是用于给文本添加语义,而br标签的语义是不另起一行段落换行,而在企业开发中一般情况下需要换行都是应为需要另起一个段落,所以在企业开发中很少使用br标签。

  • 当一个段落语义完成了用P标签换行,当未完成用br标签换行。

修饰标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题与段落标签2之修饰标签</title>
</head>
<body>
<!--文字斜体-->
<i>我是斜体文字</i>
<em>我是斜体文字</em>
<hr>
<br/>
<!--文字粗体-->
<b>我是粗体文字</b>
<strong>我是粗体文字</strong>
<hr>
<br/>
<!--上标与下标-->
<sub>IU</sub>
<p>李知恩<sub>IU</sub></p>
<hr>
<br/>
<!--类似添加下划线-->
<ins>插入内容</ins>
<!--删除线-->
<del>删除内容</del>
</body>
</html>
特殊符号(字符实体)

在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体;

在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理;

1
2
3
4
5
6
7
8
9
<!--
注意是英文分号
(1)&lt; < 小于号或者显示标记;
(2)&gt; < 大于号或者显示标记;
(3)&reg; ® 已注册;
(4)&copy ; © 版权;
(5)&trade; ™ 商标;
(6)&nbsp; 一个空格;
-->
图像标签

图像标签

  • 作用:告诉浏览器我们需要显示一张图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
格式:<img src="" alt=""/>
<!--
img属性:
(1)src[必写] url 显示图像的url[可以显示本地图片或者网络图片];
(2)alt 文字 当图片不存在或者找不到时就显示文字进行替换图片;
(3)height和width [数值或者百分比] 指定图片的高度与宽度。
-->
<!--
img三要素
<img src alt title>
1.img=image图片
2.格式:<img src=" ">
3.src=source资源 想要显示图片的名称
4.img标签不会独占一行
5.属性width,height设置显示的图片有多高多宽
6.如果不设置属性,按照图片原本大默认宽高显示
7.等比例放大只需修改其中一个属性即可
8.title:用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容
9.Alt:用于告诉浏览器, 当需要显示的图片找不到(网速太慢、src属性中的错误、浏览器禁用图像),用户无法查看图像时,alt属性可以用文字代替图像显示。
-->
图片路径

图片路径分为绝对路径与相对路径。

相对路径分为三种位置(图片与当前HTML文件的位置):

  • 同级;
  • 下级;
  • 上级
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路径问题</title>
</head>
<body>
<!--
路径问题
其实想给src属性赋值有两种方式
1.通过相对路径赋值
相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

1.1同级
同级就是"图片"和".html文件"存储在同一个文件夹中
格式: src="QRCode.jpg"
含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

1.2下级
下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
格式: src="images/QRCode.jpg"
含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹
然后再在images文件夹中找到名称叫做QRCode.jpg的图片

1.3上级
上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
格式: src="../QRCode.jpg"
含义:在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg
其中../代表找到当前文件夹的上一级文件夹

2.通过绝对路径赋值
绝对路径就是每次都从指定的盘符开始查找

格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"
含义: 在C盘下找到Users文件夹, 然后在Users文件夹中找到Jonathan_Lee文件夹, 然后在Jonathan_Lee文件夹中找到Desktop文件夹, 然后在Desktop文件夹中找到HTML基础文件夹, 然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片
注意:
1.路径中不要出现中文, 否则可能出现未知问题
2.如果是通过"相对路径"来指定图片, 不能跨盘符
2.1例如.html文件在C盘, 那么不能去查找D盘图片
-->
<img src="QRCode.jpg">
<img src="images/QRCode.jpg">
<img src="../QRCode.jpg">
<img src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg" >
</body>
</html>
超链接标签

什么是超链接标签?

1
2
3
4
<!--
a标签的作用: 就是用于控制页面与页面之间跳转的
a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
-->
1
2
3
4
5
<!--
a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转
_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转
-->
1
2
3
4
5
6
7
8
9
<!--
a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的

注意点:
1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击
2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方
3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://
4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址
-->
base标签

专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开。

  • base标签必须写在head标签的开始标签和结束标签之间;
  • 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base标签</title>
<base target="_blank">
</head>
<body>
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="http://tieba.baidu.com/">贴吧</a>
</body>
</html>
假链接
  • 点击之后不会跳转的链接我们称之为假链接;
  • 假链接存在的意义:
  • 假链接的格式:
    • #;
    • javascript:;
    • #的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部。
锚点

1.同一页面(定义锚)格式:

1
2
3
4
<a href="#锚名1">跳转到指定位置</a>
<a href="#锚名2">跳转到指定位置</a>
<a href="#" name="锚名1">内容</a>
<a href="#" name="锚名2">内容</a>

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同一页面锚点</title>
</head>
<body>
<a href="#center">跳转到中部</a>
<a href="#bottom">跳转到底部</a>
<p>我是一个段落</p>
<br>
<br>
<br>
<!--自己实验多复制几行<br>即可-->
<a href="javascript:" name="center">hahahahahah1</a>
<br>
<br>
<!--自己实验多复制几行<br>即可-->
<a href="javascript:" name="bottom">hahahaha2</a>
</body>
</html>

2.不同页面(定义锚点)格式:

1
<a href="网页名称#锚名">.......</a>

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--锚点测试.html-->
<a href="DifferentHtmlA.html#bottomDifferent">跳转不同页面的底部</a>

<!--DifferentHtmlA.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bottomDifferent</title>
</head>
<body>
<br>
<br>
<br>
<br>
<a href="#" name="bottomDifferent">我是超链接</a>
</body>
</html>

3.总结:

  • 定义锚的位置和锚名;
  • 设置寻找锚的锚的链接。
电子邮件链接

电子邮件链接格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bottomDifferent</title>
</head>
<body>
<!--
格式:
<a href="mailto:邮箱地址">内容</a>
-->
<a href="mailto:99941724@qq.com">hahahahah</a>
</body>
</html>
列表标签
  • 列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体。
  • HTML中列表标签的分类:
    • 无序列表(unordered list);
    • 有序列表(ordered list);
    • 定义列表(definition list)
无序列表
  • 作用:给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分;
  • 格式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li>需要显示的条目内容</li>
</ul>
li其实是英文list item的缩写
list是列表的意思
item是条目的意思
<!--
type属性值:
disc(圆点);
square(正方形);
circle(空心圆);
注意:
列表项目的符号类型,推荐使用样式设置
虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干。
-->
  • 注意点:

    • 一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的;
    • ul标签和li标签是一个整体, 是一个组合;
    • ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签。
    1
    2
    3
    4
    总结:
    1.一定更要记住ul标签中最好只放li标签;
    2.但是li标签中还可以继续放其它的标签;
    3.ul标签可以进行嵌套。
  • 应用场景:

    • 新闻列表;
    • 商品列表;
    • 导航条。
  • 代码实例:

1
2
3
4
5
6
7
<h2>中国的城市有哪些</h2>
<ul>
<li>广州</li>
<li>北京</li>
<li>上海</li>
<li>武汉</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h1>四大名著</h1>
<ul>
<li>
<h2>《三国演义》</h2>
<p>《三国演义》故事开始黄巾兵起义,结束于司马氏灭吴开晋,以描写战争为主,反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争,展现了从东汉末年到西晋初年之间近一百年的历史风云,并成功塑造了一批叱咤风云的英雄人物。</p>
</li>
<li>
<h2>《水浒传》</h2>
<p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p>
</li>
<li>
<h2>《西游记》</h2>
<p>《西游记》前七回叙述孙悟空出世,有大闹天宫等故事。此后写孙悟空随唐僧西天取经,沿途除妖降魔、战胜困难的故事。书中唐僧、孙悟空、猪八戒、沙僧等形象刻画生动,规模宏大,结构完整,并且《西游记》富有浓厚的佛教色彩,其隐含意义非常深远,众说纷纭,见仁见智。可以从佛、道、俗等多个角度欣赏,是中国古典小说中伟大的浪漫主义文学作品。</p>
</li>
<li>
<h2>《红楼梦》</h2>
<p>《红楼梦》讲述的是发生在一个虚构朝代的封建大家庭中的人事物,其中以贾宝玉、林黛玉、薛宝钗三个人之间的感情纠葛为主线通过对一些日常事件的描述体现了在贾府的大观园中以金陵十二钗为主体的众女子的爱恨情愁。而在这同时又从贾府由富贵堂皇走向没落衰败的次线反映了一个大家族的没落历程和这个看似华丽的家族的丑陋的内在。</p>
</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h1>物品清单</h1>
<ul>
<li>
<h2>蔬菜</h2>
<ul>
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h1>水果</h1>
<ul>
<li>苹果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
  • 快捷键
1
2
3
4
5
6
在webstorm中如何快速编写一个ul的格式
ul>li
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签

ul>li*3
含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签
有序列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<!--
什么是有序列表?
有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

有序列表格式:
<ol>
<li></li>
</ol>
其它用法和ul都差不多, 也就是应用场景/注意点都和ul差不多
-->
<ol>
<li>演员</li>
<li>小丑</li>
<li>女人不应该让男人太累</li>
<li>男人不应该让女人流泪</li>
</ol>
</body>
</html>
自定义列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<!--
1.定义列表的作用:
1.1给一堆数据添加列表语义
1.2先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息

2.定义列表的格式:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
其实dt和dd都是英文的缩写
dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的

3.定义列表的应用场景
3.1做网站尾部的相关信息
3.2做图文混排

4.定义列表的注意点
4.1和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
4.2和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
4.3一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.
推荐使用一个dt对应一个dd
4.4和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签
-->
<dl>
<dt>北京</dt>
<dd>中国的首都</dd>
<dd>雾都, 雾霾比较严重</dd>
<dt>上海</dt>
<dd>经济金融中心</dd>
</dl>
</body>
</html>

HTML表格

表格应用场景
  • 作为一个自定义的容器,用于装载数据;
  • 过去广泛地应用于网页的布局,如今使用Div标签进行网页布局。
表格标签的含义

主要用来给一堆数据添加表格语义,用于数据的展示。

表格标签的基本格式
1
2
3
4
5
6
7
8
9
10
<!--表格-->
<table>
<!--行-->
<tr>
<!--单元格-->
<td></td>
<td></td>
<td></td>
</tr>
</table>
  • 表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框;
  • 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现。

代码示例(创建两行三列的表格):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--表格-->
<table border="1px">
<!--
<tbody>表体:编写代码没有写这个标签,浏览器自动给我们添加的
-->
<tr>
<td>李知恩</td>
<td>池昌旭</td>
<td>白敬亭</td>
</tr>
<tr>
<td>周杰伦</td>
<td>林俊杰</td>
<td>李荣浩</td>
</tr>
<!-- </tbody>-->
</table>
表格标签常用属性

注意区分表格属性与单元格属性。

2306.jpg
带表头的表格

格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1px"   cellspacing="10px" cellpadding="10px" width="50%" bgcolor="aqua" >
<tr>
<!--表格头,内容居中,加粗显示-->
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td >李知恩</td>
<td>池昌旭</td>
<td>白敬亭</td>
</tr>
<tr>
<td>周杰伦</td>
<td>林俊杰</td>
<td>李荣浩</td>
</tr>
</table>
带标题的表格

格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table align="center" border="1px" cellspacing="0px">
<!--
表格标题: 居中显示
-->
<caption>
<h2>最喜欢的歌手</h2>
</caption>
<tr>
<td>周杰伦</td>
<td>林俊杰</td>
<td>李荣浩</td>
</tr>
<tr>
<td>汪苏泷</td>
<td>丁当</td>
<td>王泽科</td>
</tr>
<tr>
<td>萧敬腾</td>
<td>胡彦斌</td>
<td>阿悄</td>
</tr>
</table>
带结构的表格

表格划分三个部分:表头、主体、脚注。

  • thead:表格的头(放表格的表头);
  • tbody: 表格的主体(放数据的本体);
  • tfoot:表格的注脚;
  • 如果我们没有编写tbody, 系统会系统给我们添加tbody;
  • 果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
表格的完整结构
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
表格合并
跨列属性(colspan)

其实就是在某一行中操作单元格;

代码实例:

1
2
3
4
5
6
7
8
9
10
<table align="center" border="1px" cellspacing="0px">
<tr align="center">
<!--
colspan="3":(在某一行)合并三列,也就是说该行的其他单元格应该删掉
-->
<td colspan="3" >周杰伦</td>
<!--<td>林俊杰</td>-->
<!--<td>李荣浩</td>-->
</tr>
</table>
跨行属性(rowspan)

其实就是将准备要跨行的单元格,添加属性rowspan=数值,然后在下一行或者多行删掉与跨行单元格同一列的td标签

1
2
3
4
5
6
7
8
9
10
11
12
<table align="center" border="1px" cellspacing="0px">
<tr align="center">
<td>汪苏泷</td>
<td>丁当</td>
<td rowspan="2">王泽科</td>
</tr>
<tr align="center">
<td>萧敬腾</td>
<td>胡彦斌</td>
<!--<td>阿悄</td>-->
</tr>
</table>

表格合并总结:

  • 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示;
  • 一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
快速移动选中的代码, 上下移动
往上移动 Ctrl + shift + ↑(方向键上)
往下移动 Ctrl + shift + ↓(方向键下)

快速合并和展开代码(合并和展开的是某一个标签)
合并: Ctrl + -
展开: Ctrl + +

快速合并和展开代码(合并和展开选中的所有标签)
合并: Ctrl + shift + -
展开: Ctrl + shift + +

快速新启一行
shift + enter
-->
细线表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--
在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服

细线表格的制作方式:
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = "1px"

注意点:
table标签和tr标签以及td标签都支持bgcolor属性
但是以上内容仅仅作为了解, 因为样式以后都是通过css来控制
-->
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td bgcolor="red">1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>

HTML表单

  • 主要用于采集和提交用户输入的信息。
  • 作为HTML的重要组成部分之一。
  • 表单三元素:
    • 表单控件:表示搜集用户信息的表单元素;
    • Action:表示将用户信息提交到那里去;
    • Method:发送表单信息的方式(get、post)。
表单格式
1
2
3
4
5
6
7
<form action="#">
<表单元素>
<!--
表单元素:input、select、option、textarea、optgroup等

-->
</form>
表单元素
form标签

属性:action、method、name、target和enctype。

enctype属性:在发送表单数据之前如何对其进行编码。

1
2
3
4
5
<!--
1.application/x-www-form-urlencoded
2.multipart/form-data
3.text/plain
-->
input标签
1
2
语法:
<input type="类型属性" name="名称"....../>

type属性值:

  • text:文字框;
  • password:密码框;
  • file:文件框;
  • checkbox:多选框;
  • radio:单选框;
  • button:按钮;
  • submit:提交按钮;
  • reset:重置按钮;
  • hidden:隐藏。
  • image:图片。

(1)单行文本输入框

格式:

1
2
3
4
<form action="#">
<input type="text">
</form>
<!--单行文本输入框允许用户输入一些简短的单行信息-->

属性:

  • name:文字框的名称;
  • maxlength:用户输入最大字符长度;
  • size:文本框的长度,以字符个数为单位,默认是20个字符。
  • value:文本框的默认值;
  • placeholder:规定用户填写字段的提示。
1
placeholder在input中只是充当占位符的角色,在你input框中的value为空的时候它才会显示出来,但是它本身并不是value,也不会被表单提交

(2)密码框

密码框也是文本框的形式,输入到文本框的文字”……….”显示。

格式:

1
2
3
4
5
<form action="#">
<input type="password" name="....." />
</form>
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

(3)文件框

不同浏览器,外观显示不同。

格式:

1
2
3
<form action="#">
<input type="file" name="....." />
</form>

(4)单选框

格式:

1
2
3
4
<form action="#">
<input type="file" name="....." value="....." checked=checked />
</form>
同一组的name值要相同

(5)多选框

格式:

1
2
3
<form action="#">
<input type="checkbox"name="....." value="....." checked="checked">
</form>

(6)按钮

格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form action="#">
<!--
定义一个普通按钮
作用:配合JS完成一些操作
-->
<input type="button" name="..." value="...">

<!--
定义提交按钮
作用:将表单中的数据提交到远程服务器
注意点:
要想把表单中的数据提交到远程服务器,必须满足两个条件
1.告诉表单需要提交到哪个服务器
可以通过form标签的action属性来告诉表单,需要提交到那个服务器
2.告诉表单,表单中的哪些数据需要提交
-->
<input type="submit" name="..." value="...">

<!--
定义重置按钮
作用:清空表单中的数据
注意点:
重置按钮有默认的按钮标题, 默认叫做 重置
也可以通过value属性来修改默认标题
-->
<input type="reset" name="..." value="...">
</form>

(7)图像按钮

格式:

1
2
3
4
5
6
7
<form action="#">
<!--
定义一个图片按钮
作用:配合JS完成一些操作
-->
<input type="image" name="..." src="图片地址">
</form>

(8)隐藏

格式:

1
2
3
4
<input type="hidden" name="...." value=".....">
<!--
隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用(隐藏只是在网页页面上面不显示输入框,但是虽然隐藏了,还是具有form传值功能,一般用来传值,而不必让用户看到。)
-->
label标签

要想让输入框和文字绑定在一起, 那么我们可以使用Label标签。

格式:

1
2
3
4
5
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="">
<label for="account">账号:</label><input type="text" id="account"><br>
<label for="pwd">密码:</label><input type="password" id="pwd"><br>

<hr>
<label>
账号:<input type="text">
</label><br>
<hr>

<label for="def">账号:</label><input type="text" id="abc"><br>
<label for="abc">密码:</label><input type="password" id="def"><br>
</form>
datalist标签

作用: 给输入框绑定待选项。

格式:

1
2
3
4
datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>

如何给输入框绑定待选列表:
1.搞一个输入框;
2.搞一个datalist列表;
3.给datalist列表标签添加一个id;
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可;

实例代码:

1
2
3
4
5
6
7
8
9
10
<form action="#">
<input type="text" list="漫画">
<datalist id="漫画">
<option value="火影忍者"></option>
<option value="多啦a梦"></option>
<option value="七龙珠"></option>
<option value="灌篮高手"></option>
<option value="一拳超人"></option>
</datalist>
</form>
H5新增表单元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form>
<!--
可以自动校验输入的内容是否符合邮箱的格式
-->
邮箱:<input type="email"><br>
<!--
可以自动校验输入的内容是否是URL地址
-->
域名:<input type="url"><br>
<!--
输入框中只能输入数字
-->
电话:<input type="number"><br>
<!--
可以通过日历来选择时间
-->
时间:<input type="date"><br>

<!--
可以通过取色板来选择颜色
-->
颜色: <input type="color"><br>

<input type="submit">
</form>
html5表单新增属性
1
2
3
4
5
1.autocomplete 属性,表示表单是否应该启用自动完成(off/on);
2.autofocus 表示页面加载时自动获得焦点;
3.multiple 输入域中选择多个文件或者输入多个值;
4.placeholder提供一个提示,描述输入域中所期待的值;
5.required规定在提交之前填写输入域,输入域不能为空.
下拉列表

格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select>
<optgroup label="分组名称1">
<option value=".....">选项</option>
<option value=".....">选项</option>
<option value=".....">选项</option>
<option value=".....">选项</option>
</optgroup>
<optgroup label="分组名称2">
<option value=".....">选项</option>
<option value=".....">选项</option>
<option value=".....">选项</option>
<option value=".....">选项</option>
</optgroup>
</select>

注意点:
(1)下拉列表不能输入内容, 但是可以直接在列表中选择内容;
(2)可以通过给option标签添加一个selected属性来指定列表的默认值;
(3)可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>广西</option>
<option selected="selected">武汉</option>
</select>
<!--
<select>标签属性
1.name 设置下拉菜单和列表的名称;
2.multiple 设置可以选择多个选项;
3.设置列表中可见选项的数目。

<option>标签属性
selected 设置默认选中状态;
value 定义送往服务器的选项值
-->
多行文本域

格式:

1
2
3
4
5
6
7
  <textarea name="" id="" cols="30" rows="10">内容</textarea>
<!--
name :设置文本区的名称;
id:id值;
cols:设置文本区内的可见宽度;
rows:设置文本区内的可见行数。
-->

HTML5多媒体标签

video标签

格式一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<!---->
<video src=""></video>
</body>
<!--
ideo标签的属性
src: 用于告诉video标签需要播放的视频地址;

autoplay: 用于告诉video标签是否需要自动播放视频;

controls: 用于告诉video标签是否需要显示控制条;

poster: 用于告诉video标签视频没有播放之前显示的占位图片;

loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放;

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效;

muted:静音;

width/height: 和img标签中的一模一样.
-->

格式二:

1
2
3
4
5
6
7
8
9
10
11
12
13
格式:
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
<!---
1.video标签的第二种格式存在的意义就是为了解决浏览器适配问题;
2.video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放.

注意点:
3.当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
4.在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media实现。
-->

示例代码:

1
2
3
4
5
6
7
8
9
格式一:
<video src="video/sb1.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>

格式二:
<video autoplay="autoplay" controls="controls">
<source src="video/sb1.webm" type="video/webm"></source>
<source src="video/sb1.mp4" type="video/mp4"></source>
<source src="video/sb1.ogg" type="video/ogg"></source>
</video>
audio标签

格式:

1
2
3
4
5
6
7
8
9
10
<audio src=""></audio>

<audio>
<source src="" type="">
</audio>
<!--
注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
-->

代码示例:

1
2
3
4
5
<audio src="audio/yinyue.mp3" autoplay="autoplay" controls="controls"></audio>

<audio autoplay="autoplay" controls="controls">
<source src="audio/yinyue.mp3" type="audio/mp3">
</audio>

详情和概要标签

1.作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息;
2.默认情况下是折叠展示, 想看见详情必须点击。

格式:

1
2
3
4
<details>
<summary>概要信息</summary>
详情信息
</details>

marquee标签

作用:跑马灯

格式:

1
2
3
4
5
6
7
8
9
10
<marquee behavior="" direction=""></marquee>
<!--
属性:
direction: 设置滚动方向 left/right/up/down;
scrollamount: 设置滚动速度, 值越大就越快;
loop: 设置滚动次数, 默认是-1, 也就是无限滚动;
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回。
注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
-->

被废弃的标签

因为当前的HTML中的标签只有一个作用, 就是用来添加语义,而早期的HTML标签中有一部分标签是没有语义的,有一部分标签是用来修改样式的,所以这部分标签就被淘汰了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--
<br> <hr> <font>
<b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的

注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签
如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用

strong == b
ins == u
em == i
del == s

strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized): 定义强调的文字
del语义(deleted): 定义被删除的文字
-->

HTML5

广义的HTML5

HTML5+CSS3+JavaScript+API

html5变化

  • 标签变化

    • DTD,新增的标签,删除的标签,重定义的标签;
    • 结构标签(有意义的div)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    <article></article> 标记定义一篇文章
    <header></header> 标记定义一个页面或者一个区域的头部
    <nav></nav> 标记定义一个导航链接
    <section></section> 标记定义一个区域
    <aside></aside> 标记定义页面内容部分的侧边栏
    <hgroup></hgroup> 标记定义文件中一个区块的相关信息(标题组)
    <figure></figure> 标记定义一组媒体内容以及他们的标题
    <figcaption></figcaption> 标记定义figure元素的标题
    <footer></footer> 标记定义一个页面或者一个区域的底部
    <dialog></dialog> 标记定义一个对话框(会话框)
    • 多媒体标签
    1
    2
    3
    4
    5
    <video></video>
    <audio></audio>
    <source></source>
    <canvas></canvas>
    <embed></embed>
    • Web应用标签
    • 其他标签
  • 页面布局

  • 属性变化

    • Input,表单属性,链接属性,其他属性.
  • HTML5展望

    • 简述API
    • Canvas
    • 移动端应用

HTML5页面布局

传统布局
11117.jpg
HTML5布局

11146.jpg

  • 让更多语义化结构代码标签替换大量无意义的div标签;
    • 提升网页的质量和语义;
    • 减少了以前用于CSS调用的class和id属性.
  • 对搜索引擎更加友好.

搭建HTML网页结构

div标签

属于块级元素,作为容器标记,可以包含段落、图片、表格等各种HTML元素。

span标签

行内元素,用来修改网页局部信息。

HTML标签嵌套规则

  • 块级元素可以包含行内元素和其他块级元素;
  • 行内元素不能包含块级元素,只能包含其他行内元素;
  • 块级元素不能放在p标签内;
  • 块级元素与块级元素并列,行内元素与行内元素并列。

gz.gif

点击查看
-------------------本文结束 感谢您的阅读-------------------
0%