03overall
goer ... 2022-01-05 大约 2 分钟
[toc]
# 常用标签
# 1. 布局标签
布局标签：主要用于页面布局
div 标签 -------- 大块元素
span -------- 小部分文本
html:5的语义化标签
- header -------- 头部
- footer -------- 底部
- nav -------- 导航
- section -------- 区块标签
- article -------- 大段文本
- aside -------- 侧边栏
<header>头</header>
<nav>导航</nav>
<section>
区块标签
<div>
div
</div>
<span>文本</span>
<article>大段文本</article>
<aside>侧边栏</aside>
</section>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 2. 其他标签
其他： 有点不常用的，但是也会用呀！
- bdo 改变文本方向 rtl:右到左 ltr:左到右
- embed 用来嵌入外部应用或者互动程序（插件）
- base 页面上的所有链接规定默认地址或默认目标
- canvas 于图形的绘制 游戏等
# 3. HTML框架
frameset: 将几个页面组合为一个页面
1.主页面没有body标签
2.子标签frame一起使用
1
2
2
| property | value |
|---|---|
| cols(左右组合) | 百分比 (20%,40%,40%) |
| rows(上下组合) | 百分比(有几个值就被分成几份) |
| frameborder(设置边框) | 值 |
| noresize(禁止手动调节大小) | 自己 |
| scrolling(是否显示滚动条) | yes/no/auto自动 |
<!-- 没有body标签噢 -->
<frameset row="20%,80%" frameborder="0" noresize>
<frame src="header.thml"></frame>
<frameset clos="10%,20%,70%">
<frame src=""></frame>
<frame src=""></frame>
<frame src="content.html" name="conut"></frame>
</frameset>
</frameset>
<!-- content.html -->
<body>
<ul>
<li>
<a href="http://www.baidu.com" traget="conut">百度</a>
</li>
<li>
<a href="http://www.baidu.com" traget="conut">百度</a>
</li>
<li>
<a href="http://www.baidu.com" traget="conut">百度</a>
</li>
</ul>
</body>
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
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
# 4.图像热区
在大图上可以点击，到其他小图链接里 （拓展）
- 引入大图 标签img 设置usemap="#name"属性
- map标签 设置neme=""属性
- area 标签 设置形状
area标签属性:
| property | value |
|---|---|
| shape(当前区域形状) | rect(矩形:设置对角点坐标) | circle(圆形:设置圆心和半径) | poly(多边形:设置每个点的坐标) |
| coords(坐标) | 每个坐标点(空格分开) |
| href (地址) | 链接地址 |
<img src="one.jpg" alt="" usemap="#abc">
<map name="abc">
<area shape="rect" coords="0 0 0 0" href="任何链接"></area>
<area shape="ploy" coords="0 0 0 0 0 0 " href="dasff.html" target="_blank"></area>
</map>
1
2
3
4
5
6
7
2
3
4
5
6
7