HTML實例解析

、<!DOCTYPE html>聲明這是HTML5文檔

doctype 聲明是不區分大小寫的，以下這些，都是可以的

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

2、<html>元素是HTML頁面的根元素（至于是什么元素，小編也說不清，有懂的，留言交流）

3、<head>元素包含了文檔的元（meta）數據,如<meta charset="utf-8">是定義網頁編碼格式為utf-8

4、<title>元素描述了文檔的標題

5、<body>元素包含了可見的頁面內容

6、<h1> 元素定義一個大標題

7、<P>元素定義一個段落

什么是HTML

HTML是用來描述網頁的一種語言

HTML指的是超文本標記語言

HTML不是一中編程語言，而是一種標記語言

標記語言是一套標記標簽

HTML命名用標記標簽來描述網頁

HTML文檔包含了HTML標簽及文本內容

HTML文檔也叫做web頁面

HTML標簽

HTML標記標簽通常被稱為HTML標簽

HMTL標簽是由尖括號包圍的關鍵詞，例<html>

html標簽通常是成對出現，比如<b>和</b>

標簽中，第一個是開始標簽，第二個是結束標簽；也可以稱為開放標簽和閉合標簽

HTML元素

一個HTML元素包含了開始標簽和結束標簽

WEB瀏覽器

指用于讀取HTML文件，并將其以網頁顯示；例谷歌瀏覽器

瀏覽器并不是直接顯示HTML標簽，但可以用標簽決定如何展現HTML的頁面內容給用戶觀看。

HTML網頁結構

版規則

縮進

使用2個空格縮進

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫

只允許使用小寫。

所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環注釋：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項卡內容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規HTML設計規則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標簽說明：

div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權重標簽使用

H標簽使用

h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標題;
h3 可以做新聞列表;
h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。

據來自MDN整理https://developer.mozilla.org/

文檔元數據

元數據（Metadata）含有頁面的相關信息，包括樣式、腳本及數據，能幫助一些軟件（例如搜索引擎、瀏覽器等等）更好地運用和渲染頁面。對于樣式和腳本的元數據，可以直接在網頁里定義，也可以鏈接到包含相關信息的外部文件

<base>
HTML <base> 元素指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素
<head>
HTML head 元素規定文檔相關的配置信息（元數據），包括文檔的標題，引用的文檔樣式和腳本等。
<link>
HTML外部資源鏈接元素 (<link>) 規定了當前文檔與外部資源的關系。該元素最常用于鏈接樣式表，此外也可以被用來創建站點圖標(比如PC端的“favicon”圖標和移動設備上用以顯示在主屏幕的圖標)
<meta>
HTML <meta> 元素表示那些不能由其它HTML元相關元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數據信息
<style>
HTML的<style>元素包含文檔的樣式信息或者文檔的部分內容。默認情況下，該標簽的樣式信息通常是CSS的格式
<title>
HTML <title> 元素定義文檔的標題，顯示在瀏覽器的標題欄或標簽頁上。它只可以包含文本，若是包含有標簽，則包含的任何標簽都不會被解釋

內容分區

內容分區元素允許你將文檔內容從邏輯上進行組織劃分。使用包括頁眉(header)、頁腳(footer)、導航(nav)和標題(h3~h6)等分區元素，來為頁面內容創建明確的大綱，以便區分各個章節的內容。

<address>
HTML <address> 元素表示其中的 HTML 提供了某個人或某個組織（等等）的聯系信息
<article>
HTML <article>元素表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目
<aside>
HTML <aside> 元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響
<footer>
HTML <footer> 元素表示最近一個章節內容或者根節點（sectioning root ）元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息
<header>
HTML <header> 元素用于展示介紹性內容，通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素，但也可能包含其他元素，比如 Logo、搜索框、作者名稱，等等
<h1>~<h6>
HTML <h1>–<h6> 標題(Heading)元素呈現了六個不同的級別的標題，<h1> 級別最高，而 <h6> 級別最低
<hgroup>
HTML <hgroup> Element (HTML Headings Group Element) 代表一個段的標題。它規定了在文檔輪廓里（the outline of the document ）的單一標題是它所屬的隱式或顯式部分的標題
<main>
HTML <main> 元素呈現了文檔的 <body> 或應用的主體部分。主體部分由與文檔直接相關，或者擴展于文檔的中心主題、應用的主要功能部分的內容組成
<nav>
HTML <nav>元素表示頁面的一部分，其目的是在當前文檔或其他文檔中提供導航鏈接。導航部分的常見示例是菜單，目錄和索引
<section>
HTML <section>元素表示一個包含在HTML文檔中的獨立部分，它沒有更具體的語義元素來表示，一般來說會有包含一個標題

文本內容

使用 HTML 文本內容元素來組織在開標簽 <body> 和閉標簽 </body> 里的塊或章節的內容。這些元素能標識內容的宗旨或結構，而這對于 accessibility 和 SEO 很重要。

<blockquote>
HTML <blockquote> 元素（或者 HTML 塊級引用元素），代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進（注中說明了如何更改）。若引文來源于網絡，則可以將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，可以通過 <cite> 元素
<dd>
HTML <dd> 元素（HTML 描述元素）用來指明一個描述列表 (<dl>) 元素中一個術語的描述。這個元素只能作為描述列表元素的子元素出現，并且必須跟著一個 <dt> 元素
<div>
HTML <div> 元素 (或 HTML 文檔分區元素) 是一個通用型的流內容容器
<dl>
HTML <dl> 元素（或 HTML 描述列表元素）是一個包含術語定義以及描述的列表，通常用于展示詞匯表或者元數據 (鍵-值對列表)
<dt>
HTML <dt> 元素（或 HTML 術語定義元素）用于在一個定義列表中聲明一個術語。該元素僅能作為 <dl> 的子元素出現。通常在該元素后面會跟著 <dd> 元素，然而，多個連續出現的 <dt> 元素都將由出現在它們后面的第一個 <dd> 元素定義
<figcaption>
HTML <figcaption> 元素是與其相關聯的圖片的說明/標題，用?于描述其父節點 <figure> 元素里的其他數據。這意味著 <figcaption> 在<figure> 塊里是第一個或最后一個。同時 HTML Figcaption 元素是可選的；如果沒有該元素，這個父節點的圖片只是會沒有說明/標題
<figure>
HTML <figure> 元素代表一段獨立的內容, 經常與說明（caption） <figcaption> 配合使用, 并且作為一個獨立的引用單元。當它屬于主內容流（main flow）時，它的位置獨立于主體。這個標簽經常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體
<hr>
HTML <hr> 元素表示段落級元素之間的主題轉換（例如，一個故事中的場景的改變，或一個章節的主題的改變）。在HTML的早期版本中，它是一個水平線?，F在它仍能在可視化瀏覽器中表現為水平線，但目前被定義為語義上的，而不是表現層面上
<li>
HTML<li> 元素（或稱 HTML 列表條目元素） 用于表示列表里的條目。它必須包含在一個父元素里：一個有序列表(<ol>)，一個無序列表(<ul>)，或者一個菜單 (<menu>)。在菜單或者無序列表里，列表條目通常用點排列顯示；在有序列表里，列表條目通常在左邊顯示按升序排列的計數，例如數字或者字母
<main>
HTML <main> 元素呈現了文檔的 <body> 或應用的主體部分。主體部分由與文檔直接相關，或者擴展于文檔的中心主題、應用的主要功能部分的內容組成
<ol>
HTML <ol> 元素表示多個有序列表項，通常渲染為有帶編號的列表
<p>
<p>元素（或者說 HTML 段落元素）表示文本的一個段落。該元素通常表現為一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮進。另外，<p> 是塊級元素
<pre>
HTML <pre> 元素表示預定義格式文本。在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現出來，文本中的空白符（比如空格和換行符）都會顯示出來。(緊跟在 <pre> 開始標簽后的換行符也會被省略)
<ul>
HTML <ul> 元素（或稱 HTML 無序列表元素）表示一個內可含多個元素的無序列表或項目符號列表

內聯文本語義

使用 HTML 內聯文本語義（Inline text semantics）定義一個單詞、一行內容，或任意文字的語義、結構或樣式。

圖片和多媒體

HTML 支持各種多媒體資源，例如圖像、音頻和視頻。

內嵌內容

除了常規的多媒體內容，HTML 可以包括各種其他的內容，即使它并不容易交互。

腳本

為了創建動態內容和 Web 應用程序，HTML 支持使用腳本語言，最突出的就是 JavaScript。某些元素用于支持此功能。

編輯標識

這些元素能標示出某個文本被更改過的部分。

表格內容

這里的元素用于創建和處理表格數據。

表單

HTML 提供了許多可以起使用的元素，這些元素能用來創建一個用戶可以填寫并提交到網站或應用程序的表單。

交互元素

HTML 提供了一系列有助于創建交互式用戶界面對象的元素。

過時的和棄用的元素

警告：下面這些舊的 HTML 元素已被棄用，且不應再被使用。千萬不要在新的項目中使用它們，并且要盡快替換舊項目中的殘余。在此列出，僅供參考

在線咨詢

上一篇：Inventor大裝配技術-軟硬件配置及軟件設置
下一篇：day56：jQuery

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商