web标准与html语义化

时间 2019-12-10

标签 web 标准 html 语义栏目 HTML 繁體版

原文原文链接

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

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

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

代码标准

标签成对出现 ：html

不合法的写法java

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

合法的写法web

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

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

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

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

合理嵌套: 一样由于XHTML要求有严谨的结构，所以全部的嵌套都必须按顺序不合法的写法ide

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

合法的写法优化

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

属性值须要用引号括起来ui

在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>
复制代码