Web标准是由一系列的标准组合而成,其核心思想就是将网页的结构、样式和行为分离开来,它可以分为三大类:结构部分、样式部分和行为部分。结构部分主要包括XML标准、XHTML标准;样式标准主要是指CSS标准;行为标准主要包括DOM标准和ECMAScript标准。
Web标准是一套理论性的指导思想,它的最终目的是让代码更易于维护,在实现结构、样式和行为分离的基础上,还要做到:精简、重用、有序。精简可以使文件减小,有利于客户端快速下载;重用可以使代码更易于精简,同时有利于提升开发速度;有序可以让我们更清晰地组织代码,使代码易于维护,有效应对变化。
语义化指在让标签有自己的含义。
1.通常语义化HTML会使代码变的更少,使页面加载更快。
2.语义化HTML会使HTML结构变的清晰,有利于维护代码和添加样式。
3.提升搜索引擎优化(SEO)的效果
4.便于其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),以语义的方式来渲染网页;
去掉样式,看网页结构是否组织良好有序,是否仍然有好的可读性。语义化良好的网页去掉样式后结构仍然是比较清晰的。尤其是在图片较少的网页中。
语义化前后的对比:
<div class="main">
<div class="h2">标签的语义<a href="#">更多</a></div>
<div class="p">段落1内容<span class="strong">强调内容</span></div>
<div class="p">段落2内容</div>
</div>
<main>
<header class="title">
<h2>标签的语义化</h2>
<a href="#">更多</a>
</header>
<article class="content">
<p>段落一的各种内容.....<strong>强调的内容</strong></p>
<p>段落二的内容。。。</p>
</article>
</main>
<title>
:相当于该网页的名称。正确的定义title有利于搜索引擎优化SEO<hn>
:h1~h6,分级标题, h1元素具有最高等级,h6元素具有最低的等级。<h1>
与<title>
协调有利于搜索引擎优化。<h2>标签的语义</h2>
<ul>
:无序列表。<ol>
:有序列表<li>
:无序/有序列表的元素。<nav>
:标记导航,仅对文档中重要的链接群使用。<main>
:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。<article>
:定义页面独立的内容,它可以有自己的header、footer、sections等,专注于单个主题的博客文章,报纸文章或网页文章。article可以嵌套article,只要里面的article与外面的是部分与整体的关系。<header>
:用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。<section>
:元素用于标记文档的各个部分,例如长表单文章的章节或主要部分。<footer>
:定义文档的底部区域,通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。只有当父级是body时,才是整个页面的页脚。<aside>
:定义与主要内容相关的内容块。通常显示为侧边栏,内容通常为文章的一组链接、广告、友情链接、相关产品列表等。<figure>
:用作文档中插图的图像,规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。<figcaption>
:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。<cite>
:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。<blockquote>
:定义块引用,浏览器会在 blockquote 元素前后添加换行,并增加外边距。cite属性可用来规定引用的来源。<q>
:短的引述(跨浏览器问题,尽量避免使用)。<time>
:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。<abbr>
:简称或缩写。使用title属性可提供全称,只在第一次出现时使用就ok。<dfn>
:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。短语元素,虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上我们只是让某段字符串拥有确切的语义。<em>
、<strong>
、<code>
、<samp>
、<kbd>
、<cite>
、<var>
<small>
:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small>
标签将不起任何作用。<strong>
:强调内容,以表示内容的重要性。和 em 标签一样,用于强调文本,但它强调的程度更强一些。<strong>强调的内容</strong>
<em>
:将其中的文本表示为强调的内容,表现为斜体。<mark>
:使用黄色突出显示部分文本。<code>
:标记代码。<address>
:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。<del>
:移除的内容。<ins>
:添加的内容。<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<meter>
:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)<progress>
:定义运行中的进度(进程)。<title>标签
<html>
<head>
<title>XHTML Tag Reference</title>
</head>
<body>
The content of the document......
</body>
</html>
<h1>~<h6>元素
<h1>top level heading</h1>
<section>
<h2>2nd level heading</h2>
<h3>3nd level heading</h3>
<h4>4th level heading</h4>
<h5>5th level heading</h5>
<h6>6th level heading</h6>
</section>`
<main>元素
<main>
<h1>My blog test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<p>etc.</p>
</main>
<article>元素
<article>
<header>
<h3>
<a href="">My blog post</a>
</h3>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.
</p>
</section>
<footer>
<small>
Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="">Code</a>
</small>
</footer>
</article>
<header>、<nav>元素
<header>
<h1>HTML Reference</h1>
<nav>
<a>Home</a>
<a>About</a>
<a>Contact</a>
</nav>
</header>
<aside>
<aside>
<h3>About the author</h3>
<p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>
<ol>、<ul>、<li>元素
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<ul>
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
<footer>元素
<footer>
COPYRIGHT@dingFY_Demi
</footer>
-<small>元素
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a></small>
<strong>元素
HTML should only be used to write <strong>content</strong>, and keep CSS for <strong>styling</strong> the web page.
<em>元素
HTML should only be used to write <em>content</em>, and keep CSS for <em>styling</em> the web page.
<mark>元素
<p>Do not forget to buy <mark>milk</mark> today.</p>
<blockquote>元素
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
Here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
<abbr>元素
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<figure>、<figcaption>元素
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<figcaption>拍摄者:W3School 项目组,拍摄时间:2010 年 10 月</figcaption>
<img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
<time>元素
<p>
我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>
<address>元素
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<del>元素
a dozen is <del>20</del> 12 pieces
<meter>元素
<p>显示度量值:</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
<progress>元素
<progress value="24" max="100"></progress>
参考文章
w3school HTML 参考手册
什么是HTML语义化标签?常见HTML语义化标签大全
web标准与HTML语义化
html语义化标签
文章浏览阅读97次。public class HelloWorld { public static void main(String[] args) { int age=25; if(age>60){ System.out.println("老年"); }else if(age>40 && age<60){ Sy..._java中多重if用if?:怎么写
文章浏览阅读109次。为什么80%的码农都做不了架构师?>>> ..._phaser和forkjoinpool
文章浏览阅读245次。MySQL数据库的主键和外键详解主键主键的定义主键:表中经常有一个列或多列的组合,其值能唯一地标识表中的每一行。这样的一列或多列称为表的主键,通过它可强制表的实体完整性。当创建或更改表时可通过定义 PRIMARY KEY 约束来创建主键。一个表只能有一个 PRIMARY KEY 约束,而且 PRIMARY KEY 约束中的列不能接受空值。由于 PRIMARY KEY 约束确保唯一数据,所以经常用来..._主键 外键 公共维度
文章浏览阅读889次,点赞20次,收藏9次。关节目标位置空间设为BCSBoneSpace时,用作关节目标位置的骨骼命名。执行器位置空间设为BCSBoneSpace时,用作执行器位置的骨骼命名。要应用IK解算器的骨骼命名。启用时,执行器(组件、父或骨骼)的旋转将应用到IK骨骼。肢体最大长度的比率,用于决定缩放骨骼的时间。在关节目标位置空间中指定位置关节目标的向量。XYZ组件在目标骨骼上的平移。XYZ组件在目标骨骼上的旋转。XYZ组件在目标骨骼上的缩放。XYZ组件在目标骨骼上的平移。XYZ组件在目标骨骼上的旋转。XYZ组件在目标骨骼上的缩放。
文章浏览阅读1.2k次。传送门 // 题意: 有k个怪物, 告诉每个怪物捕捉它需要的精灵球和皮卡丘收到的伤害, 给定精灵球的一共的数量和皮卡丘总的体力值, 问最多可以捕捉到多少个怪物, 然后如果能捕捉到的怪物相同则要消耗的体力值尽量的小….思路: 很明显的二维背包费用的题, 加了一维费用那么dp数组同时加一维即可……捡起一个物品所需要付出两种代价, 所以dp[i][u][v] 代表捕捉前i个怪物用掉精灵球u个, 体..._宠物小精灵之收服 百练
文章浏览阅读2k次。1.定义一个空的指针函数 指针函数的参数是uint8_t 类型chtypedef void (* usart_recv_callback)(uint8_t ch);2.声明这个类型usart_recv_callback usart1_recv_cb;3.串口配置时,一个形参为串口中断接收回调void Usart_Config(USART_TypeDef* USARTx, uint32_t bau..._stm32回调函数和中断服务函数
文章浏览阅读668次。这款VR研究工具可以用于心理学、消费者行为和人类表现等方面,是低成本、高效率的解决方案。 最近,Tobii Pro推出一款新的研究工具,可用于沉浸式VR研究。这种沉浸式VR研究与传统的研究方式大相径庭,可广泛应用于各类研究。据了解,Tobii Pro VR集成方案基于Tobii的眼动追踪技术和HTC Vive头显,并结..._vive unity vr 眼动数据
文章浏览阅读543次。 abort 中止 abstract class 抽象类 accelerator 快捷键 accelerator mapping 快捷键映射 accelerator table 快捷键对应表 access modifier 访问修饰符 Access Pack 访问包 access specifier 访问说明符 access violation 访问冲突 accessibili..._implementation 开发人员 setup
文章浏览阅读9.2w次,点赞108次,收藏95次。一位大四学长的实习体验,职场建议,经验分享,转型思考。_学长实习经验分享
文章浏览阅读2.3k次。C语言结构注释变量定义与赋值数据类型强制转换前言:我们都知道单片机要对其写指令、编程等就需要一种编程语言。在众多的编程语言中不可否认的是c语言是最适合成为单片机的编程语言的。我们在这里分享一下c语言的知识点。结构一般来说c语言的结构,一般都是包括若干个头文件(以#include" xxx ")和函数组合而成的。例:#include "stdio.h"int main(void){ printf("hello wold"); return 0;}在这里我们看到有两部分#include_单片机编程
文章浏览阅读326次。在一片漆黑的界面下,我们该如何查看和配置系统网卡、IP地址、路由等信息呢?最传统基本的网络命令,几乎所有旧的发行版都支持的配置命令:ifconfig查看系统的所有网卡及IP配置信息:ifconfig禁用网卡:ifconfig eth0 down,启用网卡:ifconfig eth0 up为网卡配置IP地址:ifconfig eth0 192.168.1.56 netmask 255.255.255.0Ifconfig命令的替代者,最新版本的linux发行版都支持:查看系统的所有...
文章浏览阅读1.7k次。文章目录1. Language to Logical Form with Neural Attention2. Abstract Syntax Networks for Code Generation and Semantic Parsing3. A Syntactic Neural Model for General-Purpose Code Generation4. Tree-structured Decoding with Doubly-recurrent Neural Network5. Seman_a syntactic neural model for general-purpose code generation,