HTML5：簡介與常用標籤

阿新 • • 發佈：2018-12-26

HTML 文件結構

HTML（Hyper Text Markup Language 超文字標記語言）基本文件結構是指組成一個基本的HTML頁面所必須的元素標籤。它的根節點是由一個文件宣告 “<!doctype html>” 和一個“<html>”標籤組成的，而<html>標籤下級（又稱“子節點”）又包含“<head>”和“<body>”兩個主要的標籤，具體編寫格式如下：

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

</body>
</html>

HTML 標籤

HTML標籤是由標籤名、屬性名、屬性值和內容組成。

這裡寫圖片描述

HTML 元素類別

html 元素分為塊級元素（block）、行內元素（inline）以及行內塊元素（inline-block）。

display：block

block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素的寬度。block元素可以設定width、height屬性。塊級元素及時設定了寬度，仍然會獨佔一行。block元素可以設定margin、padding屬性。

display：inline

inline元素不會獨佔一行，多個相鄰的行內元素會排在同一行裡，直到一行排列不下，才會新換行，其寬度隨元素的內容而變化。inline元素設定width、height屬性無效。inline元素的margin和padding屬性，水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，但豎直方向的padidng-top、padding-bottom、margin-top以及margin-bottom不會產生邊距效果。

display：inline-block

簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其具有block的寬度高度特性又具有inline的同行特性。

HTML 常用標籤

文字標籤

標題：h1~h6
文字：span
段落：p
強調：em
粗體：b
斜體：i
刪除線：s
上標：sup
下標：sub

語義化標籤

頭部：header
尾部：footer
導航：nav
文章：article
章節：section
側欄：aside
地址：address
時間：time
標記：mark
佈局：div
引用：blockquote
文件主要內容：main （塊級標籤）
詳細資訊：details，一般與 summary 標籤一起使用，summary 作為details的第一個子標籤使用

格式化標籤

換行：br
水平分割線：hr

HTML 常用轉義字元

"："
&：&
<：<
>：>
©：©
®：®;
¥：¥
空格：

HTML 圖片 ‘img’

html 圖片使用 ‘img’標籤

常用屬性

src：指定圖片連結地址（必須）
width/height：設定寬度/高度
title：設定圖片標題，滑鼠懸浮在圖片上時顯示
alt：設定提示，當圖片載入失敗時會顯示

HTML 超連結 ‘a’

a 標籤是一個行內元素

常用屬性

href：指定連結地址
target：規定“href”屬性中指定的網頁或檔案以何種方式行進跳轉或開啟，其值包括：_blank、_self、_parent、_top以及iframe的name屬性的值

利用超連結跳轉到本頁錨點

將a標籤的“href”屬性設定為“#”+“指定元素的ID值”後，該超連結不再是進行頁面間的跳轉或是檔案的打開了，而是將頁面滾動到本頁面中ID屬性值和“href”屬性值“#”後的值所對應的值的地方，頁面滾動的目標元素的上邊緣將和瀏覽器內容視窗上邊緣重合。

<div id="anchor"></div>
<a href="#anchor">點選跳轉到錨點</a>

利用超連結下載指定檔案

加上“download”屬性，並指定一個檔案下載後的名稱即可。

超連結的回到頂部按鈕

將href屬性值設定為‘#top’即可。

嵌入式框架 iframe

常用屬性

name：設定iframe的名稱
width：設定iframe的寬度，值可以為畫素（不用新增“px”單位）和百分數
height：設定iframe的高度，值可以為畫素（不用新增“px”單位）和百分數
src：設定iframe元素內需要顯示頁面或檔案的URL地址，該屬性的值可以由與之關聯的a標籤點選設定（通過將a標籤的“target”屬性的值設定為該iframe的“name”屬性的值進行關聯）
frameborder：設定是否顯示邊框（0 表示不顯示邊框/ 1 表示要顯示邊框）
scrolling：設定是否允許滾動（quto/yes/no）

HTML 列表

html 列表包括無序列表、有序列表以及定義列表，其顯示型別為塊級元素。

無序列表 ul

常用屬性

type：列表專案符號型別（disc（預設）/circle/square）

使用示例

<ul>
    <li>無序列表01</li>
    <li>無序列表02</li>
    <li>無序列表03</li>
</ul>

有序列表 ol

常用屬性

type：列表專案符號型別（1（預設）/A/a/I/i）
reversed：倒序
start：起始值

使用示例

<ol>
    <li>有序列表01</li>
    <li>有序列表02</li>
    <li>有序列表03</li>
</ol>

定義列表 dl

定義列表分為兩層：第一層為定義的列表dl；第二層分為兩個部分，即dt和dd，dt用於定義列表中的專案，dd用於描述定義的專案，它們的顯示型別都為“塊級元素（block）”。相對於“無序列表”和“有序列表”，這種列表由於其自身的結構原因，對需要進行名詞性描述的列表更為適用。

使用示例

<dl>
    <dd>HTML</dd>
    <dt>建立Web頁面</dt>

    <dd>CSS</dd>
    <dt>設定頁面樣式</dt>

    <dd>JavaScript</dd>
    <dt>讓頁面動態起來</dt>
</dl>

列表巢狀使用

無序列表與有序列表巢狀使用方式一致，這裡以無序列表為例:

<ul>
    <li>Web前端工程師
        <ul>
            <li>HTML</li>
            <li>CSS
                <ul>
                    <li>Bootstrap</li>
                    <li>LESS</li>
                    <li>SASS</li>
                </ul>
            </li>
            <li>JS
                <ul>
                    <li>JavaScript</li>
                    <li>jQuery</li>
                    <li>AngularJS</li>
                    <li>...</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>其他開發工程師</li>
</ul>

執行效果

這裡寫圖片描述

HTML 表格

html 表格使用 ‘<table>’標籤

表格常用屬性

width/height：設定寬度/高度
border：設定邊框
align：設定表格對齊方式（left/center/right）
cellspacing：設定單元格與單元格之間的間距
cellpadding：設定單元格與內容之間的間距
bgcolor：設定表格背景顏色
background：設定背景圖片
colspan：跨列 ‘<td colspan="2"></td>’
rowspan：跨行 ‘<td rowspan="2"></td>’

HTML5：簡介與常用標籤

HTML 文件結構

HTML 標籤

HTML 元素類別

display：block

display：inline

display：inline-block

HTML 常用標籤

文字標籤

語義化標籤

格式化標籤

HTML 常用轉義字元

HTML 圖片 ‘img’

常用屬性

HTML 超連結 ‘a’

常用屬性

利用超連結跳轉到本頁錨點

利用超連結下載指定檔案

超連結的回到頂部按鈕

嵌入式框架 iframe

常用屬性

HTML 列表

無序列表 ul

有序列表 ol

定義列表 dl

列表巢狀使用

HTML 表格

相關概念

表格常用屬性

相關推薦