Html笔记二
结构标签
header 网页的头部
main 网页的主体部分(一般就一个)
footer 网页的底部
nav 网页的导航
aside 和主体相关的内容,侧边栏
article 文章之类的
section 独立的区块,上面的标签都不合适,就用这个,用来代替div
<header>头部</header>
<main>主体</main>
<footer>底部</footer>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章</article>
<section>独立的区块</section>
行内与块元素
元素分类
块元素(block element)用来布局
特点:
1、会独占一行
2、默认情况下,块元素的宽度是整个视口的100%
3、默认情况下,块元素的高度是 常用块元素:div、p、h1-h6、header、main、footer、nav
4、行内块元素(inline element)用来包裹文字
特点:
1、不会独占一行
2、宽高是被内容撑开的,内容有多宽,它就有多宽
3、 常用行内元素:span、strong、em、del等
行内块元素
特点:
1、兼具块元素和行内元素的特点
2、常用行内块元素:img
注意:
1、块元素主要是用来布局的,里面可以放任何元素,块元素、行内元素、行内块元素
2、行内元素主要用来包裹文字的,一般情况下,不能放块元素
3、p标签是一个特殊的块元素,它里面不能放块元素
4、a标签(超链接)是个特殊的行内元素,它里面什么都能放
列表
列表:
1、如果页面中,出现结构、样式、功能等都比较雷同的部分,就可以使用列表
列表(list) 一组一组
1:有序列表 用ol创建列表,li表示列表项
2:无序列表 用ul创建列表,li表示列表项
3:定义列表 用dl创建列表,dt表示下定义,dd表示对定义的解释
类似:大列表里面有很多小列表,每个小列表里面有标题,有对标题的解释
注意:
1、列表之间是可以相互嵌套的,ul,ol,li是块元素
2、可以使用type属性,更改项目符号
ol 它的项目符号:1、a、A、I等,默认项目符号是‘1’
ul 它的项目符号,默认项目符号:实心的圆
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
3、默认样式,li前面有项目符号,上下左右有间距
4、最常用ol、ul,在实际的使用中,一般不做顺序或者无顺序区分
5、(ol,li)、(ul,li)、(;dl,dt,dd)都是配套使用,就像cp。
超链接
超链接:
可以是一个字,可以是一个块元素,可以是图片,可以是任何内容
特殊的行内元素,它可以包裹任何元素,除了它自己
默认样式:字体有一定的颜色,有下划线
功能:
1、从一个页面跳到另一个页面
2、在当前页面进行跳转(楼梯导航/锚点功能)
3、下载
属性:
href属性 指向跳转的地址
绝对地址:不管你的html文件在哪里,我去的地方是确定的,是绝对的
相对地址:它的地址值跟超链接的html文件位置相关
./ 当前目录下跳转 ./可省略,默认是./
…/ 跳出当前目录,来到上一级目录
注意:
很多路径规则都是一样的,包括图片,音视频跳转等
target属性 指定超链接页面打开的方式
可选值:
_self 在当前页面打开超链接 一般情况下,默认值(国外)
_blank 新开页面打开超链接 国内常用
具体用哪种方式,根据项目需求来的
锚点功能实现
去顶部:href属性值设置为#
去任意的位置:
1、先给要去的位置打个标记 id属性=‘id属性值’
2、在href里填写标记 href=‘#id属性值’
注意:
id属性值: 你起的名字
1、一般不以数字开头
2、一般不用汉字
3、不能重复使用
补充:
空链接的写法:
<a href="#">空链接1</a>
<a href="JavaScript:;">空链接</a>`
<!-- a标签可以包裹任意元素 -->
<a href="https://www.baidu.com/" target="_blank">
百度
</a><br><br>
<a href="./03.列表.html">
图片
</a>
<a href="../../11.16/课后作业/京东新闻资讯页.html">
京东资讯
</a>
<!-- 楼梯导航(锚点功能实现) -->
<a href="#abc">
去底部
</a>
<a href="#center">
去中间
</a>`
音视频标签
<!-- audio标签 用来想页面中引入一个外部的音频文件 -->
<!-- video标签来向页面中引入一个视频,使用方式跟音频基本上一样 -->
<!--
src 引入音视频的路径
controls 控制用户是否可以播放,默认是不能播放
autoplay 自动播放 (基本被废止,也是考虑到用户体验,除了ie9以下)
loop 循环播放
-->
<audio src="" controls autoplay loop></audio>
<video src="" controls autoplay loop></video>