html标签的语义化
- 语义化标签更具有可读性，便于团队的开发和维护
- 没有css的情况下，网页也能很好的呈现出内容结构和代码结构
- 关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息
header标签
- 用来定义文档（网页或者是某一个段落）的页眉（头部）
- 可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
<header>元素不是分段内容，而是属于独立分块的头部.因此不会往 大纲 中引入新的段落。也就是说，<header>元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。- 完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、 尾部组成的（并不是强制）
- 整个页面没有header限制个数，可以使用多个
<header>元素不能作为<address>、<footer>或另一个<header>元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header标签</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
</div>
</body>
</html>
footer标签
- footer标签代表一个网页或者章节内容的底部区域（页脚）
- footer通常包含章节的作者，版权数据和文章的其他链接
- 其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页
<footer>元素不能作为<address>、<header>或另一个<footer>元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>
nav标签
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。- 导航部分的常见示例是菜单，目录和索引
- 并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
- 一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航
注意 nav使用有两种方法：
-
当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可
-
当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav标签</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
<!--
<nav>
<ul>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
</ul>
</nav>-->
</header>
<!--内容区域-->
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>
section标签
- section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
- 假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
- section主要是对网页进行分块，也可以对网页中的某块内容进行分块
- 通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
- 如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>section标签</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<section>
<h2>我是section元素的头部啊啊啊啊啊</h2>
</section>
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>
article标签
- 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
- 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
- 一般来说 一个article也有自己的头部header，或者是footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<section>
<h2>这里是评论区域</h2>
<article>
<h3>评论人：张三</h3>
<p>今天天气真好</p>
</article>
<article>
<h3>评论人：李四</h3>
<p>今天天气真好</p>
</article>
<article>
<h3>评论人：王五</h3>
<p>今天天气真好</p>
</article>
</section>
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>Copy to clipboardErrorCopied
div、article和section
-
article和section
- article元素可以看做是特殊的section，但是强调独立性比section更强
- section主要强调分段分块，article是强调很强的独立性
- 原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article
-
div、article和section
- div、section、article语义依次递增
- div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系
- 对于主题性的区域，我们可以使用section
- 加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article
aside元素
- 表示一个和其余页面内容几乎无关的区域
- 被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
- 这个里边的内容和其他元素内容关联性不强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<div>
<!-- 主题区域-->
<section>
<h2>这里是评论区域</h2>
<article>
<h3>评论人：张三</h3>
<p>今天天气真好</p>
</article>
<article>
<h3>评论人：李四</h3>
<p>今天天气真好</p>
</article>
<article>
<h3>评论人：王五</h3>
<p>今天天气真好</p>
</article>
</section>
<!--侧边栏-->
<aside>
我是侧边栏内容
</aside>
</div>
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>Copy to clipboardErrorCopied
figure元素
- 代表一块独立的内容，是一个独立的引用单元
- 这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
- 一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
- 如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figure</title>
</head>
<body>
<figure>
<figcaption>海贼王的图片</figcaption>
<img src="../images/05.jpg" alt="" width="300">
</figure>
</body>
</html>
mark元素
- 为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
- 突出显示的文本通常可能和用户当前的活动等有一定的关联性
- 比如，用户搜索的时候，它可以显示搜索之后的关键字
- 不要把mark和 em、strong进行混淆。em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性
- mark标签是行内标签，默认黄色背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mark元素</title>
</head>
<body>
<input type="text" value="下雨">
<p>今天晚上可能会<mark>下雨</mark>，明天中秋节晴朗</p>
</body>
</html>
time元素
- 用来表示24小时制 或者是 一个公历时间
- 作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
- 通用时间格式 XXXX-XX-XX XXXX
- 两种用法：
- time标签直接包含时间
- 使用datetime属性来表示时间
<!--内容区域-->
<div>
<!-- 主题区域-->
<section>
<h2>这里是评论区域</h2>
<article>
<h3>评论人：张三</h3>
<p>今天天气真好</p>
<p><time>2019-9-12 19:00:00</time></p>
</article>
<article>
<h3>评论人：李四</h3>
<p>今天天气真好</p>
<p><time datetime="2019-9-12 18:00:00">一小时之前</time></p>
</article>
<article>
<h3>评论人：王五</h3>
<p>今天天气真好</p>
</article>
</section>
<!--侧边栏-->
<aside>
我是侧边栏内容
</aside>
</div>Copy to clipboardErrorCopied
datalist 元素
- 包含了一组option元素，代表是列表可选的值
- 和input进行相关联，用来配套使用
- input中的list属性 == datalist的id属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datalist元素</title>
</head>
<body>
<input list="city" type="text">
<datalist id="city">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="湖北">湖北</option>
<option value="湖南">湖南</option>
<option value="胡建">胡建</option>
</datalist>
</body>
</html>
progress元素
- 主要用来显示一项任务的完成程度
- 规范没有规定默认的样式，所以各个浏览器默认的样式不一定相同
- 属性:
- value：是当前进度的值
- max：是总进度的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>progress元素</title>
</head>
<body>
<progress max="100" value="80"></progress>
</body>
</html>
4706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
