1.结构标签
html5:新增的标签,语义化更强,网站的性能也会更好
header 网页的头部
main 网页的主体部分
footer网页的底部
nav 网页的导航
aside 和主题相关的内容,侧边栏
article 文章之类的
section 独立的区块,上面的标签都不合适,就用这个
2.区分元素的种类
(1)块元素(block element) 用来布局
特点:1.会独占一行
2.默认情况下块元素的宽度是整个浏览器的宽度,视口的100%
3.默认情况下,块元素的高度是内容的高度
常用的块元素:div,p,h1-h6,结构标签 header main footer,nav
(2)行内元素(inline element) 用来包裹文字,图片
特点:1.不会独占一行
2.宽高是被内容撑开的,内容有多宽它就多宽
常用行内元素:span,strong,em,del
(3)行内块元素
特点:兼具块元素和行内元素的特点
常用行内块元素:img
注意:
(1)块元素主要是用来布局的,里面可以放任何元素
(2)行内元素主要用来包裹文字,不可以放块元素
(3)p标签是一个特殊的块元素,他里面不能放块元素
(4)a标签是个特殊的行内元素,它里面什么都能
3.列表
如果页面当中出现结构,样式,功能等都比较雷同的部分,就可以用列表
列表 一组一组
(1)有序列表:用ol创建列表,li表示列表项
(2)无序列表:用ul创建列表,li表示列表项
disc,默认值,实心圆点
square,实心的方块
circle,实心的圆
(3)定义列表:用dl创建列表,dt 表示下定义,dd表示对定义的解释
大列表中有很多个小列表,每个小列表里面有标题,对标题的解释
注意:(1)列表之间可以相互嵌套,ul,ol,li是块元素
(2)可以使用type属性,更改项目符号
ol的项目符号:123/abc/ABC/I II III等
ul的项目符号:disc,默认值,实心圆点
square,实心的方块
circle,实心的圆
(3)默认样式,li前有项目符号,上下左右有间距
(4)最常用ol,ul,在实际使用中,一般不做有顺序或者无顺序区分
(5)ol,li/ul,li/dl,dt,dd 都是配套使用的,就像cp,不要混合使用
4.超链接
超链接:可以是一个字,一个块元素,可以是图片,是任何内容
2个功能,2个属性,1个补充
默认样式:字体有一定的颜色,有下划线
是特殊的行内元素,可以包括任何元素
(1)功能
a.从一个页面跳到另一个页面
b.在当前页面进行跳转(楼梯导航)
c.下载
(2)属性
I.href属性 指向跳转的地址
绝对地址:不管你的html文件在哪里,超链接去的地方是确定的,
相对地址:它的地址值跟超链接的html文件位置有关
./ 当前目录下跳转 ./可省略,默认是./
../ 跳出当前目录,来到上一级目录
注意:很多路径规则都是一样的,包括图片,音视频跳转等
II.target属性 指定超链接页面打开的方式
可选值:
_self 在当前页面打开超链接 默认值 国外常用
_blank 新开页面打开超链接,国内常用
具体用哪种方式,根据项目需求来
(3)锚点功能实现:
去顶部 href的属性值设置为#即可
去任意的位置 先给要去的位置打个标记 用id属性=‘id属性值’
在href里填写标记 href=‘#id属性值’
注意: id的属性值:你起的名字
一般不以数字开头
一般不用汉字
不能重复使用
补充:空链接的写法
<a href="#">空链接1</a>
<a href="JavaScript:">空链接2</a>
5.图片格式
(1)JPEG
图片支持的颜色比较多,图片可以压缩
(2)PNG
PNG支持的颜色多,并且支持复杂的透明,不支持动图
一可以用来显示颜色复杂的透明的图片
专为网页而生的
(3)webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点,而且文件格式还很小
-缺点:兼容性不好
(4)base64
-讲图片 使用base64编码,这样可以将图片转换为字符, 通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则:
效果不一致,使用效果好的
效果一致,使用小的
网页加载流程:
第一次请求:加载网页本身
第二次之后请求:
6.音视频
audio标签用来向页面中引入一个外部的音频文件
rvideo标签来向页面中引入一个视频,使用方式跟音频基本上一样的
src 引入音视频的路径:
controls 控制用户是否可以播放,默认是不能播放
autoplay 自动播放 (基本被废止,也是考虑到用户的体验,除了ie9以下)
loop 循环播放