一、结构标签
布局标签(结构化标签) 用来布局的都是块元素
header 网页的头部
main 网页的主体部分
footer 网页的低部
nav 网页的导航
aside 和主题相关的内容,侧边栏
article 文章之类的
section 独立的区块,上面的标签都不合适,就用这个
用来代替div
二、行内与快元素
元素分类
块元素(block element)用来布局
特点:
1.会独占一行
2.默认情况下,块元素的宽度是视口的100%
3.默认情况下,块元素的高度是被内容撑开的
常用块元素:div、p、h1-h6、header、main、footer、nav
行内元素(inline element) 用来包裹文字
特点:
1.不会独一行
2.宽高是被内容撑开的,内容有多宽它就有多宽
常用行内元素 span、strong、em、del等
行内块元素
特点:
兼具块元素和行内元素的特点
常用行内块元素 img
注意:
1.块元素主要用来布局,里面可以放任何元素、块元素、行内元素、行内块元素
2.行内元素主要用来包裹文字的,一般情况下不能放块元素
3.p标签是个特殊的块元素,它里面不能放快元素
4.a标签是个特殊的行内元素,它里面什么都能放
三、列表
列表:如果页面中,出现结构、样式、功能等都比较雷同的部分就可以用列表
列表(list)一组一组
1.有序列表 用ol创建列表
2.无序列表 用ul创建列表
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
3.定义列表 用dl创建列表,dl表示定义,dt表示下定义,dd表示对定义的解释
类似:大列表里有很多的小列表,每个小列表里有标题,有对标题的解释
注意:1.列表之间可以互相嵌套的,ul、ol、li都是快元素
2.可以使用type属性 更改项目符号
ol 它的项目符号:1、a、A、I等
ul 它的项目符号:
disc,默认值,实心的圆
square,实心方块
circle,空心的圆
3.默认样式,li前有项目符号,上下左右有间距
4.最常用ol、ul,在实际的使用中,一般不做有顺序或者无顺序的区分
5.ol、li
ul、li
dl、dt,dd
都是配套使用的
四、超链接
超链接:可以是一个字,可以是一个块元素,可以是图片,可以是任何内容
特殊的行内元素,可以包裹任何元素,除了它自己
默认样式:字体有一定颜色,有下划线
功能:1.从一个页面跳到另一个页面
2.在当前页面跳转(楼梯导航/锚点功能)
3.下载
属性:
href属性 指向跳转的地址:不管你的html文件在哪里,超链接去的地方是确定的,是绝对路径
相对地址:它的地址值跟超链接的html文件位置相关
./ 当前目录下跳转 ./可省略 默认是./
../跳出当前目录,返回上一级目录
target属性 指定超链接页面打开的方式
可选值
_self 在当前页面打开超链接 一般情况下,默认值
_blank 新开页面打开超链接 一般情况下,国内常用具体用那种方式,根据项目需求来的
锚点功能实现
去顶部 href属性值设置为#
去任意的位置 先给要去的位置打个标记 id属性='id属性值'
在href里填写标记 href='#id属性值'
注意:id属性值:你起的名字
不易数字开头
一般不用汉字
一般不能重复使用
补充:空链接的写法
<a href="#">空链接1</a>
<a href="JavaScript:;">空链接2</a>
五、图片标签
六、图片格式
七、音频
八、作业展示
作业一
作业二
作业三
作业四
作业五
明天继续努力!