义化标签还有<header>(头部)、<nav>(导航)、<main>(主要区域)、<article>(主要内容)、<section>(区块)、<aside>(侧边栏)和<footer>(底部)等。
语义化优点:
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别:
其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析时间。
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:
在网页HTML的顶部,会发现顶部有一个<!DOCTYPE html>声明,所有处于标签之前,它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
如果不写文档DOCTYPE声明,浏览器将无法获知HTML或XHTML文档的类型,也会进入怪异模式,那么,在不同的浏览器下,显示的样式效果会不一致;相反,浏览器按照W3C标准来解析代码,呈现页面。
<meta> 标签由 name 和 content 属性定义,用来描述网页文档的属性,比如文章作者、关键词等。常用的meta标签:
对于viewport中的值,有下列选项:
接:http://www.daqianduan.com/6549.html
什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。
1.易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
2.有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
3.方便其他设备解析,如盲人阅读器根据语义渲染网页
4.有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
主体结构标签,如图所示:
1、<header>
<header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。
在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。
2、<nav>
<nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。
在一个文档中,可定义多个<nav>元素。
3、<main>
<main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。
需要注意的是在一个文档中不能出现多个<main>标签。
4、<article>
<article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。
当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
5、<aside>
<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
6、<footer>
<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。
注意不能包含<footer>或者<header>
7、<section>
<section>表示文档中的一个区域(或节),比如,内容中的一个专题组。
如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。
比较容易混淆的是<section>、<article>,所以特别说明:通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。
*请认真填写需求信息,我们会在24小时内与您取得联系。