標籤：序列 oldboy 結構 css 元素 產生 效果 char ble
HTML --- 簡單的標籤
html概述和基本結構html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言 (HTML)，超文本指的是超連結，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔，檔案的副檔名為html或者htm，一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。
HTML 不是一種程式設計語言，而是一種標記語言 (markup language)
HTML 使用標記標籤來描述網頁
一個html的基本結構如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body></html>
第一行是文檔聲明，
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
第二行“<html>”標籤和最後一行“</html>”定義html文檔的整體，“<html>”標籤中的‘lang=“en”’定義網頁的語言為英文，定義成中文是‘lang="zh-CN"‘,不定義也沒什麼影響，它一般作為分析統計用。 “<head>”標籤和“<body>”標籤是它的第一層子項目，“<head>”標籤裡面負責對網頁進行一些設定以及定義標題，設定包括定義網頁的編碼格式，外鏈css樣式檔案和javascript檔案等，設定的內容不會顯示在網頁上，標題的內容會顯示在標題列，“<body>”內編寫網頁上顯示的內容。
html標籤格式html文檔規範xhtml制定了文檔的編寫規範，html5可部分遵守，也可全部遵守，看開發要求。
1、所有的標籤必須小寫
2、所有的屬性必須用雙引號括起來
3、所有標籤必須閉合
4、img必須要加alt屬性(對圖片的描述)
標籤的文法：
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
1 <!-- 這是一段注釋 -->
<head>內常用標籤 <meta>標籤
meta介紹
<meta>元素可提供有關頁面的元資訊（meta-information），針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的資訊是使用者不可見的
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
(1)name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
1 <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">2 3 <meta name="description" content="老男孩培訓機構是由一個很老的男孩建立的">
(2)http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
1 <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)2 3 <meta http-equiv="content-Type" charset=UTF8">4 5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />非meta標籤
1 <title>oldboy</title> <!-- title裡面放的是網頁標籤上面的名字 -->2 <link rel="icon" href="http://www.jd.com/favicon.ico">3 <link rel="stylesheet" href="css.css">4 <script src="hello.js"></script><body>內常用標籤
1 <hn>: n的取值範圍是1~6; 從大到小. 用來表示標題. 2 3 <p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白. 4 5 <b> <strong>: 加粗標籤. 6 7 <strike>: 為文字加上一條中線. 8 9 <em>: 文字變成斜體.10 11 <sup>和<sub>: 上角標 和 下角表.12 13 <br>:換行.14 15 <hr>:水平線16 17 特殊字元：18 < >；"；©®html塊
<div></div> ： <div>只是一個區塊層級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
區塊層級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片載入失敗時顯示的文字，以及對搜尋引擎和盲人讀屏軟體的支援。
1 <img src="images/pic.jpg" alt="產品圖片" />超連結標籤(錨標籤)
<a>標籤可以在網頁上定義一個連結地址，通過src屬性定義跳轉的地址，通過title屬性定義滑鼠移至上方時彈出的提示文字框。
1 <a href="#"></a> <!-- # 表示連結到頁面頂部 -->2 <a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>3 <a href="2.html">測試頁面2</a>定義頁面內滾動跳轉
頁面內定義了“id”或者“name”的元素，可以通過a標籤連結到它的頁面滾動位置，前提是頁面要足夠高，有捲軸，且元素不能在頁面頂部，否則頁面不會滾動。
1 <a href="#mao1">標題一</a>2 ......3 ......4 <h3 id="mao1">跳轉到的標題</h3>html列表有序列表
在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：
1 <ol>2 <li>列表文字一</li>3 <li>列表文字二</li>4 <li>列表文字三</li>5 </ol>
在網頁上產生的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。
無序列表在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，代碼如下：
1 <ul>2 <li>列表文字一</li>3 <li>列表文字二</li>4 <li>列表文字三</li>5 </ul>
在網頁上產生的列表，每條項目上會有一個小表徵圖，這個小表徵圖在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉預設的小表徵圖，如果需要表徵圖，可以用樣式自訂表徵圖，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。
定義列表定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：
1 <h3>前端三大塊</h3> 2 <dl> 3 <dt>html</dt> 4 <dd>負責頁面的結構</dd> 5 6 <dt>css</dt> 7 <dd>負責頁面的表現</dd> 8 9 <dt>javascript</dt>10 <dd>負責頁面的行為</dd>11 12 </dl>html表格<table>table常用標籤
1、table標籤：聲明一個表格
2、tr標籤：定義表格中的一行
3、td和th標籤：定義一行中的一個儲存格，td代表普通儲存格，th表示表頭儲存格
table常用屬性：1、border 定義表格的邊框
2、cellpadding 定義儲存格內內容與邊框的距離
3、cellspacing 定義儲存格與儲存格之間的距離
4、align 設定儲存格中內容的水平對齊,設定值有：left | center | right
5、valign 設定儲存格中內容的垂直對齊 top | middle | bottom
6、colspan 設定儲存格水平合并
7、rowspan 設定儲存格垂直合并
傳統布局：傳統的布局方式就是使用table來做整體頁面的布局，布局的技巧歸納為如下幾點：
1、定義表格寬高，將border、cellpadding、cellspacing全部設定為0
2、儲存格裡面巢狀表格格
3、儲存格中的元素和嵌套的表格用align和valign設定對齊
4、通過屬性或者css樣式設定儲存格中元素的樣式
HTML --- 簡單的標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
