HTML语义化标签一（header、nav、section、article）

一、header元素

<header> 标签支持 HTML 的全局属性和 HTML 的事件属性。
<header> 标签表示介绍性的内容，可以让您了解页面涉及的内容，具有导航性。
<header> 标签可包含标题元素或其他元素，在一个文档中可以定义多个 <header> 元素。
<header> 标签定义文档或文档的一部分区域的页眉，应作介绍内容或导航链接栏的容器。

 <header><h1>秋天的味道</h1><h3>你想不想知道秋天的味道？它是甜、是苦、是涩……</h3></header>

二、nav元素

<nav> 标签支持 HTML 的全局属性和 HTML 的事件属性。
<nav> 标签定义导航链接的部分。
<nav> 元素只是作为标注一个导航链接的区域。

 <nav><ul><li><a href="#">首页</a></li><li><a href="#">公司概括</a></li><li><a href="#">产品展示</a></li><li><a href="#">联系我们</a></li></ul></nav>

三、section元素

<section> 标签支持 HTML 的全局属性和 HTML 的事件属性。
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

        <section><h2>评论</h2><article><h3>评论者：A</h3><p>小张真的很美</p></article></section>

四、article元素

<article> 标签支持 HTML 的全局属性和 HTML 的事件属性。
<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article><h1>世界杯半决赛将播放2首中文歌</h1><p>在2022卡塔尔世界杯半决赛中，阿根廷将在14日3点对战克罗地亚，法国将在15日3点对战摩洛哥。此外，世界杯官方宣布，《孤勇者》、《相信》两首中文歌曲将在半决赛现场播放。你还想在世界杯现场听到哪首歌？</p>
</article>

五、综合使用

 <article><header><h2>小张的个人介绍</h2></header><p>小张是一个好学生，是一个美女……</p><section><h2>评论</h2><article><h3>评论者：A</h3><p>小张真的很美</p></article></section><section><h2>评论</h2><article><h3>评论者：B</h3><p>小张真的很漂亮</p></article></section></article>

名言：

飞不动就跑，跑不动就走，走不动就爬。

HTML语义化标签一（header、nav、section、article）相关推荐

HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
h5新语义化标签(重要)
1.HTML5新语义化标签 html4.01:div span h1 img- css2.1:width height background- css3:transform border-radius ...
语义化的理解：有哪些语义化标签？有什么作用？
语义化:顾名思义,见名知意,通过明智知道意思; 在HTML5里面为了方便我们的开发,W3C为我们提供了大量的语义化标签, 通过这些语义化标签能够清楚的了解区块的功能,也能让页面的结构更加的简化避免起类 ...
HTML语义化标签：
1.HTML语义化标签: 语义化标签,就是让标签有语义的含义,让浏览器或搜索引擎直观的认识这个标签所传达的信息,是干什么的有什么作用. 过去采用的DIV+CSS的方式布局的页面,让DIV标签没有独特意 ...
HTML5语义化标签综合基础案例,HTML5语义化标签综合案例
HTML 标签声明必须是 HTML 文档的第一行,位于标签之前. 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 请始终向 HTML 文档添加 ...
section、article、aside区别及HTML5语义化标签
在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不同,浏览器在解释渲染这些标签的时候仅仅把它们作为普通的div块 ...
html5语义化标签大全
常见的语义化标签有 <article>.<section>.<nav>.<aside>.<header>.<footer> 详细 ...
html5语义化布局分割代码,HTML5语义化标签布局的兼容性.html
html5语义化标签布局兼容性调整 header, section, footer, aside, nav, main, article, figure { display: block; } bod ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

HTML语义化标签一（header、nav、section、article）

一、header元素

二、nav元素

三、section元素

四、article元素

五、综合使用

HTML语义化标签一（header、nav、section、article）相关推荐

最新文章

热门文章