《Web前端技術H5+CSS3》筆記--第一章 HTML基礎[雲圖智聯]

時間 2020-07-19

標籤 Web前端技術H5+CSS3 筆記第一章 html 基礎雲圖欄目 HTML 简体版

原文原文鏈接

1.1 HTML簡介

1.1.1 HTML：Hyper Text Markup Language（超文本標記語言）

在學習使用HTML以前，你們常常會問，什麼是HTML？HTML是用來描述頁面的一種語言，它是一種超文本標記語言，也就是說，HTML不是一種編程語言，僅是一種標記語言。 HTML由一套標記標籤組成，在製做網頁時，HTML使用標記標籤來描述網頁。javascript

1.1.2 發展史

1.1.3 HTML5的優點

HTML5自正式推出以來，就以一種驚人的速度被迅速推廣着，各主流瀏覽器對於HTML5表現出來的熱烈歡迎、積極支持。

一、世界知名瀏覽器廠商對HTML5的支持
        經過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查，發現它們都在支持HTML5上採起了措施
        - 微軟：2010年3月16日，微軟與拉斯維加斯市舉行的MIX10技術大會上宣佈已推出InternetExplorer(IE)9瀏覽器開發者預覽版。
        - Google：2010年2月19日，GoogleGears項目經理伊安~費特經過博客宣佈，谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目
        - 蘋果：2010年6月7日，蘋果開發者大會的會後發佈了Safari5。這款瀏覽器支持10個以上HTML5的新技術，包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能
        - Opera：2010年5月5日，Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體採訪，他認爲HTML5和CSS3將是全球互聯網發展的將來趨勢
        - Mozilla：2010年7月，Mozilla基金會發布了Firefox4瀏覽器的第一個測試版，從官方文檔看，它對HTML5是徹底級別的支持
二、市場的需求
        如今的市場已經火燒眉毛地要求有一個統一的互聯網通用標準。HTML5以前的狀況是，因爲各瀏覽器之間不統一，僅修改web瀏覽器之間的因爲兼容性而引發的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺，在HTML5平臺上，視頻，音頻，圖像，動畫及同計算器的交互都被標準化。
三、跨平臺
        HTML5能夠作到跨平臺開發，用戶只用打開瀏覽器便可訪問應用，PC網站、各類移動設備，插件等核心代碼就能夠不須要重複編寫，極大地減小了開發人員的工做量。html

1.1.4 W3C標準

發明HTML的初衷是實現信息資料的網絡傳播和共享，但願HTML文檔具備平臺無關性，即同一個HTML文件，在不一樣的瀏覽器上看到一樣的頁面內容和效果。可是遺憾的是，隨着瀏覽器市場的激烈競爭，各大瀏覽器廠商爲了吸引用戶，都在早期HTML版本的基礎上擴展各種標籤，各瀏覽器之間互不兼容，致使HTML編碼規則混亂，違背了HTML發明的初衷，所以須要一個組織來指定和維護統一的國際化web開發標準，確保多個瀏覽器都兼容，HTML內容結構都是語義化的。前端

W3C標準不是某一個標準，而是一系列的標準集合，一個網頁主要有三部分組成，即結構、表現、行爲。 html5

對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3CDOM）、ECMAScript等。這些標準大部分由W3C起草和發佈，也有一些是其餘標準組織制訂的標準，好比ECMA（European Computer Manufacturers Association）的ECMAScript標準。java

1.1.5 網頁編輯工具

一、開發工具：記事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
        你能夠從以上軟件的官網中下載對應的軟件，按步驟安裝便可。
        接下來咱們將爲你們演示如何使用 WebStorm來建立 HTML 文件。
二、使用WebStorm編輯HTML文檔以下：
        1.打開WebStorm編輯器後，選擇File->New->HTML File命令，打開「HTML File」對話框;
        2.在「Name」文本框中輸入HTML的文件名爲「my_firstPage」在「Kind」下拉列表框中選擇HTML5 file選項後OK按鈕便可建立一個HTML5頁面的模板;
        3.在body元素和title元素中添加網頁內容;
        4.網頁內容添加完成後，鼠標移動到編輯器的右上方，會出現幾個常見的瀏覽器圖標，單擊Chrome瀏覽器附表便可打開頁面;
        5.在Chrome瀏覽器中能夠顯示出結果。web

2.1 HTML基礎

2.1.1 HTML5的基本結構

<html>
    <head>
             <title>個人第一個網頁</title>
    </head>
    <body>
             個人第一個網頁
    </body>
</html>

標籤都是成對出現的。有一個開頭標記就應該有一個對應的結束標記記，「<>」開始，以「</>」結束，要求成對出現，標籤之間有縮進，提現層次感，方便閱讀。 chrome

HTML5的基本結構分爲兩部分。整個HTML包括頭部｛head｝和主體｛body｝兩部分，頭部包括網頁標題｛title｝等基本信息，主體包括頁面的內容信息，如圖片、文字等。編程

2.1.2 網頁的基本信息

一、DOCTYPE 聲明
在這個HTML5文件最上面有一行關於DOCTYPE文檔類型的聲明，約束HTML文檔結構。檢查是否符合相關WEB標準，同時告訴瀏覽器使用那中規範來解釋這個文檔中的代碼。DOCTYPE聲明必須位於HTML文檔的第一行。 canvas

HTML5:瀏覽器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

二、<title>標籤
使用<title>標籤描述頁面的標籤，相似一個文檔的標題，爲一個簡介的主題，並能使讀者有興趣。

<title>搜狐-中國最大的門戶網站</title>

三、<meta>標籤
使用<meta>標籤描述網頁的摘要信息，包括文檔內容類型、字符編碼信息，搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標籤的內容並不顯示，其目的是方便瀏覽器解析或利於搜索引擎搜索，它採用「名稱/值」對的方式描述摘要信息。

meta標籤可分爲兩大部分：http-equiv和name變量。

http-equiv至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

1.文檔內容類型，字符編碼信息書寫以下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

  屬性：charset表示字符集編碼，經常使用的編碼有如下幾種。
        1.gb2312：簡體中文，通常用於包含中文和英文的頁面；
        2.ISO-885901：純英文，通常用於只包含英文的頁面；
        3.big5：繁體，用於帶有繁體字的頁面；
        4.UTF-8：國際性通用的編碼，一樣適用於中文和英文的頁面。和gb2312編碼相比，國際通用性更好。

2.搜索關鍵字和內容描述信息書寫以下：

<meta name="keywords" content="雲圖智聯">
<meta name="description"content="雲圖智聯是國內的IT教育集團，致力於爲中國培養優秀的IT技術人才">

網站示例：

<!--京東-->
 <meta name="description"
          content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!"/>
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東"/>

<!--淘寶-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘寶網 - 淘！我喜歡</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各種服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />

2.1.3 HTML5的基本標籤

一、標題標籤

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

標題標籤表示一段文字和標題或主題，而且支持多層的內容結構。例如，一級標題採用h1，二級標題採用h2，其餘級別標題以此類推。HTML共提供了六級標題h1~h6，並賦予了標題必定的外觀，全部標題字體加粗，h1字號最大，h6字號最小。

二、段落標籤、換行標籤和水平線標籤

<p>段落標籤</p>
<br/><!--換行標籤-->
<hr><!--水平線標籤-->

三、字體樣式標籤

<!--加粗-->
<strong></strong>
<b></b>
<!--傾斜-->
<em></em>
<i></i>
<!--字體縮小-->
<small></small>
<!--刪除線-->
<s></s>
<!--下劃線-->
<u></u>

四、圖像標籤

（1）常見的圖像格式

1.JPG格式
        JPG格式圖像是在Internet上被普遍支持的圖像格式，它是聯合圖像專家組格式的英文縮寫。JPG格式採用的是有損壓縮，會形成圖像畫面的失真，不過壓縮以後的體積很小，並且比較清晰，因此比較適合在網頁中應用此格式最適合用於排和或連續取色調圖像的高級格式，這事由於JPG文件能夠包含數百萬種顏色。隨着JPG格式文件品格式質的提升，文件的大小和下載時間也會隨着增長。一般能夠經過壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。

2.GIF格式
        GIF格式圖像是網頁中使用最普遍，最普通的一種圖像格式，它是圖像交換格式的英文縮寫。GIF格式文件支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上用得很是多；還支持動畫，這是它最突出的一個特色，所以GIF格式圖像在網頁中應用很是普遍。

3.BMP格式
        BMP格式圖像在Windows操做系統中使用得比較多，它是位圖的英文縮寫。BMP格式圖像格式與其餘Microsoft Windows程序兼容。它不支持文件壓縮，也不是用於Web頁。

4.PNG格式
        PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式，它兼有GIF和JPG格式的優點，同時具有GIF格式不具有的特性。

（2）圖像標籤

<img src="path" alt="text" title="text"  width="x"  height="y" />

src屬性表示圖片路徑，alt屬性指定圖像的代替文本，表示圖像沒法顯示時（如圖片路徑錯誤或網速太慢等）替代先是文本，這樣，即便當圖像沒法顯示時，用戶還能夠看到網頁丟失的信息內容。

title屬性能夠提供額外的提示或幫助信息，當鼠標移至圖片上時顯示提示信息，方便用戶使用。

width和height兩個屬性分別表示圖片的寬度和高度，若是不設置，那麼圖片默認顯示原始大小。

五、超連接標籤

（1）超連接包含兩部份內容，一是連接地址，即連接的目標，能夠是某個網站或文件路徑，對應a標籤的href屬性；二是連接文本或圖像，點擊該文本或圖像，將跳轉到href屬性指定的連接地址。

<a href="path" target="目標窗口位置">連接文本或圖像</a>

href：連接地址的路徑;

target：指定連接在哪一個窗口打開，經常使用的取值有_self（自身窗口）、_blank（新建窗口）。
超連接便可以是文本超連接，也可使圖片超連接

（2）經常使用的超連接
    1>頁面間連接
    從一個頁面連接到另外一個頁面
    2>錨連接
    錨連接也稱錨點連接，命名錨點連接（也叫書籤連接）經常用於那些內容龐大繁瑣的網頁，經過點擊命名錨點，自動跳轉到咱們設置錨點的位置，相似於咱們閱讀書籍時的目錄頁碼或章回提示。
    錨點連接能夠跳轉到頁面的任何位置。通常用於在頁面下面的時候，點擊回到最上面。錨點連接的名稱能夠隨意取，只起到標記做用。

1.從A頁面的甲位置跳轉到本頁中的乙位置

示例：

<a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.從A頁面的甲位置跳轉到B頁面中的乙位置

示例：

<!--A頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>錨連接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>錨連接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性連接

<!--下載圖片-->
<a href="img/qq.jpg">點擊下載圖片</a>

<!--發送郵件-->
<a href="mailto:Webmaster@ytzl.cn">聯繫咱們</a>

<!--引用腳本語言-->
<a href="javascript:alert('哈哈哈哈')"></a>

六、註釋和特殊符號

<!--註釋符號-->

當頁面的HTML結構複雜或內容較多時，須要添加必要的註釋方便代碼閱讀和維護。同時，有時爲了調試，須要暫時註釋掉一些沒必要要的HTML代碼。特殊符號通常以"&"符號開頭，";"結尾。

3.1 練習

3.1.1 製做《悟空》歌詞

需求：
      一、標題使用標題標籤，文字使用p標籤標題與正文之間的分隔線使用水平線標籤；歌詞詞結束後使用換行標籤換行
      二、人名加粗顯示，時間斜體顯示
      三、製做頁面版權部分

<h2>悟空</h2>
<hr/>
<p>《悟空》是<strong>戴荃</strong>創做並演唱的歌曲，收錄於<i>2015年8月7日</i>發行的中國好歌曲第二季導師原創專輯《奇幻遊樂園》中。</p>
<p>
    月濺星河，長路漫漫，<br>
    風煙殘盡，獨影闌珊；<br>
    誰叫我身手不凡，<br>
    誰讓我愛恨兩難，<br>
    到後來，肝腸寸斷。<br>
</p>
<hr/>
<p>&copy; 2015-2025 雲圖智聯</p>

3.1.2 製做圖書簡介頁面

使用學過的圖像標籤、標題標籤、水平線標籤、斜體標籤、加粗標籤、段落標籤等製做京東讀書新聞資訊頁面，主標題使用一級標題標籤，副標題使用二級標題標籤，二級標題與圖片之間使用水平線分隔。

<h1>HTML5+CSS3從入門到精通（標準版）</h1>
<h2>做者：將來科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="圖書" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript從入門到精通（標準版）</em></p>
<p><em>  以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML  CSS  JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫  html5揭祕 html 遊戲 html5權威指南 的基本知識都有涉及。</em></p>
<p><strong>全書分兩大部分，共12章</strong></p>
<p>介紹了HTML5入門和CSS3實戰入門內容：使用HTML標籤標識網頁內容，使用CSS設計網頁基本樣式，如使用並美化文本、圖像、超連接、列表、表單和表格等</p>
<p>第二部分爲CSS3佈局部分，主要講解使用CSS3設計完整網頁的方法和技巧，以及CSS3中的各類新技術應用；</p>
<p>&copy; 2015-2025 雲圖智聯</p>

3.1.3 錨連接的應用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>