HTML5学习
HTML5
目录
一、基本结构
| 标签 | 说明 |
|---|---|
| DOCTYPE | 声明为HTML文档 |
| html | lang:设置网页的语言 |
| head | 文档说明部分，对搜索引擎提供信息或加载CSS、JS等 |
| title | 网页标题 |
| keyword | 向搜索引擎说明你的网页关键 |
| description | 向搜索引擎描述网页内容的摘要信息 |
| body | 页面主体内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="html5,web前端">
<meta name="description" content="html5的基本结构学习">
<title>Document</title>
</head>
<body>
</body>
</html>
二、嵌套关系
三、内容标题
标题使用h1~h6 来定义，用于突出显示文档内容。
- 从h1到h6对于搜索引擎权重来说会越来越小
- 在一个页面中尽量只有一个h1标签
- 标题最好不要嵌套如h1内部包含h2
对于默认样式的效果，等掌握了CSS后我们就可以随意美化了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
四、页眉页脚
1. header
header标签用于定义文档的页眉，下图中的红色区域都可以使用header标签构建。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页眉</title>
</head>
<body>
<header>
<ul>
<li><a href="">系统学习</a></li>
<li><a href="">视频库</a></li>
</ul>
</header>
</body>
</html>
2. footer
footer标签定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页脚</title>
</head>
<body>
<footer>
<ul>
<li>©2021 Baidu </li>
<li>(京)-经营性-2017-0020</li>
<li>京公网安备11000002000001号</li>
<li>京ICP证030173号</li>
</ul>
</footer>
</body>
</html>
五. 导航元素
在Html中使用nav设置导航链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航元素</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">学术</a></li>
<li><a href="#">更多</a></li>
</ul>
</nav>
</header>
</body>
</html>
六. 主要区域
Html5中使用main标签表示页面主要区域，一个页面中main元素最好出现一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主要区域</title>
</head>
<body>
<main>
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
<li>内容四</li>
</ul>
</main>
</body>
</html>
七. 内容区域
使用article标签规定独立的自包含内容区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容区域</title>
</head>
<body>
<!-- 主要区域 -->
<main>
<!-- 内容区域 -->
<article>
<ul>
<li>新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ul>
</article>
</main>
</body>
</html>
八. 区块定义
使用section定义一个区块，一般是一组相似内容的排列组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>区块定义</title>
</head>
<body>
<main>
<article>
<section>
拼劲每一刻
</section>
<section>
2021男子手球锦标赛
</section>
<section>
氧气般小清新教主
</section>
</article>
</main>
</body>
</html>
九. 附加区域
使用aside用于设置与主要区域无关的内容，比如侧面栏的广告等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>附加区域</title>
</head>
<body>
<!-- 附加区域 -->
<aside>
附加区域
</aside>
<main>
<!-- 内容区域 -->
<article>
内容区域
</article>
</main>
</body>
</html>
十. 通用容器
div通用容器标签是较早出现的，也是被大多数程序员使用最多的容器。不过我们应该更倾向于使用有语义的标签，如： article（内容区域）、section（区块定义）、aside（附加区域）、nav（导航元素）等。
有些区域这些有语义的容器不好表达，这时可以采用div容器，比如轮播图效果中的内容。
十一. 图像
用作文档中插图的图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figure </title>
</head>
<body>
<!-- 页眉 -->
<header>这是页眉</header>
<!-- 主要区域 -->
<main>
<!-- 内容区域 -->
<article>
<!-- 插入图像 -->
<figure>
<!-- 给插入图像添加一个标题 -->
<figcaption>图像标题</figcaption>
<img src="../images/timg.gif" alt="图片加载失败">
</figure>
</article>
</main>
<!-- 页脚 -->
<footer>这是页脚</footer>
</body>
</html>
十二. meter
meter标签定义度量衡。仅用于已知最大和最小值的度量。
比如：磁盘使用情况，查询结果的相关性等
注意：meter不能作为一个进度条来使用。
<meter value="3" min="0" max="10"></meter>
十三. progress
progress标签定义运行中的任务进度。
注意：progress标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。
<progress value="3" max="10"></progress>
浙公网安备 33010602011771号