web标准与html语义化

百度百科： WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

web标准
- 结构化标准语言： XHTML和XML
- 表现标准语言： CSS
- 行为标准：对象模型（如W3C DOM）、ECMAScript

web标准的作用：便于开发和维护

代码标准

标签成对出现 ：

不合法的写法

<p>这一段文本
<ul>
	<li>item
</ul>
复制代码

合法的写法

<p>这一段文本</p>
<ul>
	<li>item</li>
</ul>
复制代码

如果是单独不成对的标签，在标签最后加一个/。例如:

天生我才必有用 <br/>
千金散尽还复来
<img src="images/moon.png" alt="moon" title="古诗配图"/>
复制代码

小写元素：与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如： <BODY>必须写成<body> 。大小写夹杂也是不被认可的

合理嵌套: 同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序不合法的写法

<p><b>这是一段文本</p></b>
复制代码

合法的写法

<p><b>这是一段文本</b></p>
复制代码

属性值需要用引号括起来

在HTML中，可以不需要给属性值加引号，但是在XHTML中，必须加引号不合法的写法

<img src=images/picture.png />
复制代码

合法的写法

<img src="images/picture.png" />
复制代码

所有属性赋值

XHTML规定所有属性都必须有一个值，没有值的就重复本身

不合法的写法

<td nowrap>data<td>
<input type="checkbox" checked>
复制代码

合法的写法

<td nowrap="nwrap">data<td>
<input type="checkbox" checked="checked">
复制代码

同一个id选择器不可重复使用

正确的标签顺序

JavaScript写法

不合法写法

<script language="javascript"></script>
复制代码

正确写法

<script type="text/javascript"></script>
<script language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
复制代码

图片标签加上文字说明alt="说明" 不合法写法

<img src="bg.gif" height="50" border="0" />
复制代码

合法写法

<img src="bg.gif" height="50" border="0" alt="说明文字" />
复制代码

背景音乐不允许使用<bgsound>

不使用框架标签<iframe>

注解文字不可包含--符号

正确使用CSS样式表

<link>或<style>一定要放在<head></head>之间

非标签一部分的符号以编码表示，表单内包含以下符号也必须用编码表示

<以 <表示 > 以 > 表示 & 以 & 表示

html语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

html语义化的作用：

无css样式时亦可很好的呈现网页结构
提高用户体验
利于搜索引擎优化(SEO）
方便其他设备解析(移动设备、盲人阅读器、屏幕阅读器)
网页源码更具可读性，便于开发和维护

语义化标签

常用的语义化标签包括：

<header></header>

<nav></nav>

<section></section>

<main></main>

<artical></artical>

<aside></aside>

<footer></footer>

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>#title</title>
</head>
<body>
<header>
	<nav>头部导航栏</nav>
</header>
<main>
	<aside>侧边栏</aside>
	<section>
		<article>主要部分的文章</article>
	</section>
</main>
<footer>页脚</footer>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5cf9cfa06fb9a07ecc447694