前端開發HTML5——基礎標簽_ZenDei技術網路在線

什麼是HTML？ HTML是HyperText Markup Language（超文本標記語言）的簡寫，他不是一種編程語言，而是一種標記語言，用於告訴瀏覽器如何構造你的頁面。“超文本”就是指頁面可以包含圖片、鏈接，甚至音樂、程式等非文字元素。HTML也是一種規範，一種標準，它通過標記符號來標記要顯 ...

什麼是HTML？

　　HTML是HyperText Markup Language（超文本標記語言）的簡寫，他不是一種編程語言，而是一種標記語言，用於告訴瀏覽器如何構造你的頁面。“超文本”就是指頁面可以包含圖片、鏈接，甚至音樂、程式等非文字元素。HTML也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。

B/S架構模式（Browser/Server，瀏覽器/伺服器模式）

　　B/S結構（Browser/Server，瀏覽器/ 伺服器模式），是WEB興起後的一種網路結構模式，

WEB瀏覽器是客戶端最主要的應用軟體。這種模式統一了客戶端，將系統功能實現的核心部分集中到伺服器上，

簡化了系統的開發、維護和使用。客戶機上只要安裝一個瀏覽器，伺服器安裝服務器軟體，資料庫軟體等。

HTML文檔是由很多個HTML標簽和內容組成，而標簽是我們學的主要知識。

HTML標簽有兩種，一種是單標簽，一種是雙標簽。

單標簽主要是一個標簽，他只有屬性，沒有內容；類似於meta、img、input等標簽

雙標簽由開始標簽和結束標簽組成，在兩者之間填寫的內容，類似於<html></html>等

有些標簽是可以嵌套使用，有些標簽不能嵌套使用

標簽

　　1、<!DOCTYPE html> 表示我們的文檔類型

2、<html> Html的根元素，用來包含html文檔的所有元素

3. <head> 包含在頭部的內容不會被顯示的頁面中，這裡通常包含頁面的編碼，作者，頁面

的描述信息，js的導入，css的導入等信息。

4. <meta charset="utf-8"> 用來聲明當前文檔的編碼方式為utf-8

5. <title> 用來聲明當前文檔的標題，標題將會出現在瀏覽器的選項卡中

6. <body> 所有想要顯示在瀏覽器中的元素都被包含在該元素中。

HTML文檔的初始文本

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

大家須知：標簽也可以稱為HTML的元素，這個元素又可以分為4種。

1、塊級元素（ Block elements）獨占一行空間，用來佈局段落，列表，導航菜單，腳註等結構，不要將塊級元素嵌套在行內元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>this is paragraph1</p>
    <p>this is paragraph2</p>
</body>
</html>

　　2、行內元素（ Inline elements）與其他元素共用一行空間，一般被嵌套在塊級元素中，通常作為段落的一部分出現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>you are <strong>strong</strong> </p>
</body>
</html>

　　3、空元素（ Empty elements）只包含單個標簽，通常用於在文檔中插入部分內容，例如img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div><img src="a.jpg" alt=""></div>
</body>
</html>

　　4、替代元素（ replaced element ）替代元素已經脫離了CSS的範疇，它們的表現不依賴CSS，典型的替換元素有<img>,<object>,<video>,<textarea>,<input>,<audio>,<canvas>等

HTML屬性

元素可以擁有很多屬性，這個屬性通過鍵值對組成，頁面的顯示效果也和這些屬性相關，這裡不解釋，後期CSS內容會提到。

HTML的註意事項：瀏覽器只會解析一個空白格；註釋方式：；實體：類似於空格--->  < ---->< > ----->> 版權實體符---->©

標簽

段落標簽：p　　<p></p>

標題標簽：h1~6　　<h1></h1>

強調標簽：em、strong <em></em>　　<strong></strong>

加粗標簽：b　　<b></b>

斜體標簽：i　　<i></i>

下劃線標識：u　　<u></u>

列表標簽

　　有序列表：ol

　　　　子元素：li 序號預設從1開始 <ol><li></li><li></li></ol>

　　無序列表：ul

　　　　子元素：li　　<ul><li></li><li></li></ul>

　　列表：dl

　　　　子標題元素：dt

　　　　子列表項元素：dd　　<dl><dt><dd></dd><dd></dd></dt></dl>

超鏈接標簽：a <a href="" target=""></a>

　　鏈接到某個頁面

　　href的值可以是某個地址url，也可以是某個頁面的id值，在url後面需添加#再寫id

　　target的值一般是_blank（空白選項卡）、_self（當前選項卡）、_top、_parent

圖片標簽：img　　<img src="" alt="">

　　添加某張圖片

　　src的值是圖片的地址；alt的值提示內容指圖片沒載入成功就會顯示

表格標簽：table

　　表格標簽需要和其他標簽結合使用，才能顯示表格：caption/thead/tbody/tfoot/tr/td/th/col/colgroup,比起這些標簽，表格的屬性也尤為重要

　　　　表格屬性（直接使用鍵值對的形式即可，不需要使用style屬性，之後這些屬性用不著了

　　　　　　•align 表格應該如何在文檔中對齊，可以取值： left,center,right

　　　　　　•border 設定表格邊框特性，取整數為值，單位為 px

　　　　　　•cellpadding 設定內容與單元格之間的距離

　　　　　　•cellspacing 設定單元格與單元格之間的距離

　　　　　　•width 設定表格的寬度

　　　　　　•bgcolor 設定表格的背景色

　　　　表格標簽　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="2px" width="300px">
        <caption>放置表格標題的標簽</caption>
        <colgroup>
            <!-- colgroup 控製表格列的效果， span就是列數的意思 -->
            <col span="2" style="background-color:blue">
        </colgroup>
        <!-- thead、tbody、tfoot三個標簽只是一個界限的作用，沒有實際的作用 -->
        <thead>
            <!-- tr是代表一行，th代表表頭 -->
            <tr>
                <th>表頭</th>
                <th>表頭</th>
                <th>表頭</th>
            </tr>
        </thead>
        <tbody>
        <!-- td代表單元格 colspan跨列合併，rowspan跨行合併-->
            <tr>
                <td colspan="2">1</td>
                <td rowspan="2">2</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

View Code

　　新增標簽：

　　　　1、header　　是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含搜索表單或logo。

　　　　2、nav　　是一個可以用作頁面導航的鏈接組，其中導航元素鏈接到其他頁面或當前頁面的其他部分。

　　　　3、article　　代表文檔，頁面或應用程式中獨立的，完整的，可以獨自被外部引用的內容，也可以嵌套使用。可以是一篇博客或者報刊中的文章，一篇論壇帖子，一段用戶評論或者獨立的插件，或其他任和獨立的內容。

　　　　4、section　　<section>作為HTML文檔獨立的功能相當於div的感覺

　　　　5、aside　　元素用來表示當前頁面或文章的附屬信息部分，它可以包含當前頁面或主要內容相關的引用，側邊欄，廣告，導航條，以及其他類型的有別於主要內容的部分。

　　　　6、footer　　元素作為其上層父級內容區塊或是一個根區塊的腳註。footer通常包括其相關區塊的腳註信息，如作者，相關閱讀連接以及版權信息等。與header類似，一個頁面中也未限定footer元素的個數。

　　　　7、address　　元素用來在文檔中呈現聯繫信息，包括文檔作者或文檔維護者名字，他們的網站鏈接，電子郵箱，真實地址，電話號碼，以及跟文檔相關的聯繫人的所有聯繫信息。

　　　　8、figure& figcaption 　　figure元素是一種元素的組合，帶有可選標題，figure元素用來表示網頁上一塊獨立內容，將其從網頁上移除後不會對網頁上的其他內容產生任何影響，figure元素所表示的內容可以是圖片，統計圖或代碼示例，也可以是音頻插件，視頻插件，統計表格等。figcaption元素表示figure元素的標題，它從屬於figure元素，必須書寫在figure元素內部。一個figure元素內最多只允許放置一個figcaption元素，但是允許放置多個其他元素。

　　　　9、details 　　details元素是一種用於標識該元素內部的子元素可以被展開,收縮顯示的元素。 details元素內並不僅限於放置文字，也可以放置表單,插件或對於一個統計圖ᨀ供的詳細數據表格。

　　　　　　open 　　當該屬性值為true時，該元素內部的子元素應該被展開顯示；當該屬性的值為false 時，其內部的子元素應該被收縮起來不顯示。預設值為false

　　　　　　summary 　　summary元素從屬於details，用滑鼠單擊summary元素中的內容文字時，details 元素中的其他所有從屬元素將會展開或收縮。如果details元素內沒有summary元素，瀏覽器會ᨀ供預設文字(詳細信息)以供單擊。