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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。