常用标签进阶版
1.布局标签
html搭建网页的结构,都有头部 主体 底部 导航 文章等等
header 网页的头部
main 网页的主体部分(一般就一个)
footer 网页的底部
nav 网页的导航
aside 和主体相关的内容 ,侧边栏
article 文章之类的
section 独立的区块,上面的标签都不合适,就用这个代替div
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
2.元素分类
块元素(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标签(超链接)是个特殊的行内元素,它里面什么都能放
超链接
html 超文本语言
超链接:2个功能, 2个属性,1个补充
超链接:可以是一个字,可以是一个块元素,可以是图片,可以是任何内容,特殊的行内元素,可以包裹任何元素,除了它自己
默认样式:字体有一定颜色,有下划线
功能:1.从一个页面跳另一个页面
2.在当前页面进行跳转(楼梯导航/描点功能)
3.下载
属性:
href属性 指向跳转的地址
绝对地址:不管你的html文件在哪里,我去的地方是确定的,是绝对的
相对地址:它的地址值跟超链接的html文件的位置相关
./当前目录下跳转 ./ 可省略 默认./
../ 跳出当前目录,来到上一个目录
注意:很多路径规则都是一样的,包括图片,音视频。
target属性 指定超链接页面的打开方式
可选值:
_self 在当前页面打开超链接 一般情况下,默认值,国外常用
_blank 新开页面打开超链接,国内常用
具体用那种方式,根据题目要求
描点功能实现:
1.去顶部 href属性值设为#
2.去任意的位置,先给要去的位置打个标记 id属性="id属性值"
在href里填写标记 href="id属性值"
id属性值 :
一般不以数字开头
一般不用汉字
不能重复使用
3.空连接的写法
<a href="#">空连接1</a>
<a href="javaScript:;">空连接2</a>