HTML

時間 2019-11-16

標籤 html 欄目 HTML 简体版

原文原文鏈接

web標準介紹

web標準：javascript

w3c：萬維網聯盟組織，用來制定web標準的機構（組織）
web標準：製做網頁遵循的規範
web標準規範的分類：結構標準、表現標準、行爲標準。
結構：html。表示：css。行爲：Javascript。

總結說明：css

結構標準：至關於人的骨架。html就是用來製做網頁的。
表現標準：至關於人的衣服。css就是對網頁進行美化的。
行爲標準：至關於人的動做。JS就是讓網頁動起來，具備生命力的

若是你們還不明白，請看下圖html

瀏覽器介紹

瀏覽器是網頁運行的平臺，經常使用的瀏覽器有IE、火狐（Firefox)、谷歌（Chrome）、獵豹瀏覽器、Safari和Opera等java

瀏覽器內核：linux

瀏覽器	內核
IE	trident
chrome	blink
火狐	gecko
Safari	webkit

PS：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。git

總結：渲染引擎是兼容性問題出現的根本緣由。github

開發工具介紹

Sublime Text的使用 Sublime Text使用技巧
Visual Studio Code編輯器
WebStorm
PyCharm
.....

HTML

超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則
瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）
靜態網頁文件擴展名：.html 或 .htm
標籤不區分大小寫，推薦用小寫
標籤嵌套：通常塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。須要注意的是，p標籤不能包含塊級標籤。
更多HTML特殊字符：HTML特殊字符參考表
html顏色碼對照表
瞭解doctype聲明

html概念:
html全稱HyperText Markup Language，翻譯爲超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。好比字體、顏色、大小等。

超文本：音頻，視頻，圖片稱爲超文本。
標記 ：<英文單詞或者字母>稱爲標記，一個HTML頁面都是由各類標記組成。
做用：HTML是負責描述文檔語義的語言。

注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。

HTML只是負責描述文檔語義的語言,在html中，除了語義，其餘什麼都沒有。
　　html是一個純本文文件（就是用txt文件更名而成），用一些標籤來描述文字的語義，這些標籤在瀏覽器裏面是看不到的，因此稱爲「超文本」，因此就是「超文本標記語言」了。

　　So，接下來，咱們確定要學習一堆html中的標籤對兒，這些標籤對兒可以給文本不一樣的語義。

html的網絡術語:
網頁 ：由各類標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記： <p>稱爲開始標記 ，</p>稱爲結束標記，也叫標籤。每一個標籤都規定好了特殊的含義。
元素：<p>內容</p>稱爲元素.
屬性：給每個標籤所作的輔助信息。


HTML的規範:
HTML是一個弱勢語言
區分大小寫
頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符，好比dos系統)
HTML的結構：
    聲明部分：主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。
    head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
    body部分：咱們所寫的須要顯示出來的代碼必須放在此標籤內。


編寫HTML的規範:
1）全部標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>
2）全部的標記都必須小寫。
3）全部的標記都必須關閉。
    雙邊標記：<span></span>
    單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />
4）全部的屬性值必須加引號。<h1 id="head"></h1>
5）全部的屬性必須有值。<input type="radio" checked="checked" />

    

HTML的基本語法特徵:
HTML對換行不敏感，對tab不敏感
HTML只在意標籤的嵌套結構，嵌套的關係。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
也就是說，HTML不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。可是，咱們發現有良好的縮進，代碼更易讀。要求你們都正確縮進標籤。

空白摺疊現象:
HTML中全部的文字之間，若是有空格、換行、tab都將被摺疊爲一個空格顯示。

標籤要嚴格封閉:
<html></html>
<meta />

HTML的規範

1、HTML結構

<!DOCTYPE html> 聲明位於文檔中的最前面的位置，告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出如今文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，可是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容

新建HTML文件，輸入 html:5,按tab鍵後，自動生成的代碼以下：

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

</body>
</html>


文檔聲明頭:
任何一個標準的HTML頁面，第一行必定是一個以<!DOCTYPE html>開頭的這一行，就是文檔聲明頭，DocType Declaration，
簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。


頭標籤（head）:
head標籤都放在頭部分之間。這裏麪包含了：<title>、<meta>、<link>，<style>
    <title>：指定整個網頁的標題，在瀏覽器最上方顯示。
    <meta>：提供有關頁面的基本信息
    <link>：定義文檔與外部資源的關係。
    <style>:定義內部樣式表與網頁的關係


Meta標籤:
元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標籤位於文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。
經常使用的meta標籤：


http-equiv屬性:
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">



name屬性:
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到。
<meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。

<meta name=viewport content="width=device-width, initial-scale=1">
上面這個標籤，是讓咱們網頁支持移動端，移動設備優先（瞭解便可）


title標籤:
主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。
<title>顯示在地址欄上方</title>


html顏色表示：
顏色表示：
純單詞表示：red、green、blue、orange、gray等
10進製表示：rgb(255,0,0)
16進製表示：#FF0000、#0000FF、#00FF00等
    
RGB色彩模式：
天然界中全部的顏色均可以用紅、綠、藍(RGB)這三種顏色波長的不一樣強度組合而得，這就是人們常說的三原色原理。
RGB三原色也叫加色模式，這是由於當咱們把不一樣光的波長加到一塊兒的時候，能夠獲得不一樣的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
在數字視頻中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是咱們常說的真彩色。全部顯示設備都採用的是RGB色彩模式。
RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

HTML結構

2、經常使用標籤

html標籤又叫作html元素，它分爲塊級元素和內聯元素（也能夠叫作行內元素），都是html規範中的概念。
塊級元素是指自己屬性爲display:block;的元素。由於它自身的特色，咱們一般使用塊級元素來進行大布局（大結構）的搭建。
塊級元素的特色:
1. 獨佔一行，每個塊級元素都會重新的一行從新開始，從上到下排布
2. 能夠直接控制寬度、高度以及盒子模型的相關css屬性
3. 在不設置寬度的狀況下，塊級元素的寬度是它父級元素內容的寬度
4. 在不設置高度的狀況下，塊級元素的高度是它自己內容的高度
內聯元素是指自己屬性爲display:inline;的元素。由於它自身的特色，咱們一般使用塊級元素來進行文字、小圖標（小結構）的搭建。
內聯元素的特色:
1. 和其餘內聯元素從左到右在一行顯示
2. 不能直接控制寬度、高度以及盒子模型的相關css屬性，可是直接設置內外邊距的左右值是能夠的
3. 內聯元素的寬高是由自己內容的大小決定（文字、圖片等）
4. 內聯元素只能容納文本或者其餘內聯元素（此處請注意，不要在內聯元素中嵌套塊級元素）
除此以外，從HTML的角度來說，標籤還能夠分爲文本級和容器級：
文本級標籤：p、span、a、b、i、u、em。文本標籤裏只能放文字、圖片、表單元素。
容器級標籤：div、h系列、li、dt、dd。容器級標籤裏能夠聽任何東西。
span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。
文本及標籤的意思是標籤中只能夠放文本，不能夠放其餘內容。你會發現除了p以外，全部的文本級標籤，都是行內元素。p是個文本級，可是是個塊級元素。　
PS：爲甚麼說p是文本級標籤呢？由於p裏面只能放文字&圖片&表單元素，p裏面不能放h和ul，p裏面也不能放p。
PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了很是好的開發工具，很是適合咱們開發人員使用。審查元素功能的快捷鍵是F12。

塊級元素
標題	h1	h2	h3	h4	h5	h6
列表	ol	ul	li	dl	dt	dd
排版標籤	p	div	hr	center	pre
表格	table
表單	form

標題:使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具備align屬性，屬性值能夠是：left、center、right。
列表:分爲三種，有序列表ol，無序列表ul和定義列表dl。其中ol和ul必須結合li標籤使用，而dl則必須結合dt,dd使用。

ol ordered list 有序列表
- li list item，列表項
- type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始
ul unordered list 無序列表
- li list item，列表項
- type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。
dl definition list 定義列表

<dt>：definition title 列表的標題，這個標籤是必須的
<dd>：definition description 列表的列表項，若是不須要它，能夠不加
備註：dd是描述dt的。
dt、dd都是容器級標籤，想放什麼均可以。因此，如今就應該更加清晰的知道：用什麼標籤，不是根據樣子來決定，而是語義（語義本質上是結構）。

須要注意的是：
li不能單獨存在，必須包裹在ul或者ol裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
咱們這裏再次強調，ul或者ol的做用，並非給文字增長小圓點的，而是增長列表是否有序的「語義」的，所以不能省略。

排版標籤:
- p
  - p 段落：是英文paragraph的縮寫。
  - align='屬性值'：對齊方式。屬性值包括：left、center、right
  - p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。
  - 錯誤寫法：（把h系列的標籤放到p裏）
- div
  - div和span是很是重要的標籤，div的語義是division「分割」； CSS課程中你將知道，這個東西，是最最重要的「盒子」。
  - div：把標籤中的內容做爲一個塊兒來對待(division)。必須單獨佔據一行。
  - div標籤的屬性：align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center
  - 若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。
  - div在瀏覽器中，除了換行之外，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域。
  - div標籤是一個容器級標籤，裏面什麼都能放，甚至能夠放div本身。
  - 「div+css」。div標籤負責佈局，負責結構，負責分塊。css負責樣式。
- hr
  - 水平分隔線（horizontal rule）能夠在視覺上將文檔分隔成各個部分
- 內容居中標籤 <center>
  - 此時center表明是一個標籤，而不是一個屬性值了。只要是在這個標籤裏面的內容，都會居於瀏覽器的中間。
  - 到了H5裏面，center標籤不建議使用。
- 預約義（預格式化）標籤：<pre>
  - 含義：將保留其中的全部的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
  - 說明：真正排網頁過程當中，pre標籤幾乎用不着。但在PHP中用於打印一個數組時使用。
  - pre能夠保留你寫入標籤內容的格式。
- table
  - 一個表格<table>是由表頭<thead>和表格內容<tbody>組成的。
  - 其中的每一行又是由<tr>組成的，每行中的每一格是由<td>組成的。
    在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。
  - border：邊框。像素爲單位。
  - style="border-collapse:collapse;"：單元格的線和表格的邊框線合併
  - width：寬度。像素爲單位。
  - height：高度。像素爲單位。
  - bordercolor：表格的邊框顏色。
  - align：表格的水平對齊方式。屬性值能夠填：left right center。
    注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）
  - cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。
    注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
  - cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0
  - bgcolor="#99cc66"：表格的背景顏色。
  - background="路徑src/..."：背景圖片。
    背景圖片的優先級大於背景顏色。
  - 備註：表格中很細表格邊線的製做：style="border-collapse:collapse;"
- <tr>：行
  - dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
  - bgcolor：設置這一行的單元格的背景色。
    注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。
  - height：一行的高度
  - align="center"：一行的內容水平居中顯示，取值：left、center、right
  - valign="center"：一行的內容垂直居中，取值：top、middle、bottom
- <td>：單元格
  - align：內容的橫向對齊方式。屬性值能夠填：left right center。
    若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。
  - valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom
  - width：絕對值或者相對值(%)
  - height：單元格的高度
  - bgcolor：設置這個單元格的背景色。
  - background：設置這個單元格的背景圖片。
- 單元格的合併
  - colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
  - rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上
  - 若是要將兩個單元格合併，那確定就要刪掉一個單元格。
- <th>：加粗的單元格。至關於<td> + <b>
  - 屬性同<td>標籤
- <caption>：表格的標題。使用時和tr標籤並列
  - 屬性同<td>標籤
- 表格的<thead>標籤、<tbody>標籤、<tfoot>標籤
  - 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
  - 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。

<dl>
        <dt>第一條規則</dt>
        <dd>不許睡覺</dd>
        <dd>不許交頭接耳</dd>
        <dd>不許走神</dd>

        <dt>第二條規則</dt>
        <dd>能夠看視頻</dd>
        <dd>能夠看代碼</dd>
        <dd>能夠看筆記</dd>
</dl>

內聯元素
字體	粗體	斜體	上下標	劃線
	b	em	sup	del/s
	strong	i	sub	u
排版	span	br
超連接	a
圖片	img

字體標籤:

粗體標籤<b>或<strong>(已廢棄)
斜體標記 <i>或<em>（已廢棄）
上標<sup> 下標<sub> b的意思是bottom：底部

排版標籤:

span
- div和span是很是重要的標籤，div的語義是division「分割」； span的語義就是span「範圍、跨度」。CSS課程中你將知道，這兩個東西，都是最最重要的「盒子」。
- 惟一區別在於：span是不換行的，而div是換行的
- 若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。
- span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。
換行標籤<br> （已廢棄）
- <p>標籤和<br>標籤的區別：<p>標籤會在段落的先後自動插入一個空行，而<br>標籤沒有空行；並且<br>標籤沒有屬性。
- 注意<br> 沒有結束標籤，把<br>標籤寫爲 <br/> 是經得起將來考驗的作法，XHTML 和 XML 都接受在打開的標籤內部來關閉標籤的作法。

超連接a
- 一、外部連接：連接到外部文件。舉例：
  - a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。
  - href是英語hypertext reference超文本地址的縮寫。
  - target="_blank"
- 二、錨連接
  - 指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
  - 首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。
- 三、郵件連接：
  - <a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
  - 效果：點擊以後，會彈出outlook，做用不大。
  - 前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息
- 特殊幾個連接：
  - <a href="#">跳轉到頂部</a>
  - javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</2
  - javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。例如：<ahref="javascript:alert()">內容</a>
- 超連接的屬性
  - href：目標URL
  - title：懸停文本。
  - name：主要用於設置一個錨點的名稱。
  - target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：
    - _self：在同一個網頁中顯示（默認值）
    - _blank：在新的窗口中打開。
    - _parent：在父窗口中顯示
    - _top：在頂級窗口中顯示
  - blank就是「空白」的意思，就表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。
    也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。
- ps:a是一個文本級的標籤
  - 好比一個段落中的全部文字都可以被點擊，那麼應該是p包含a,而不是a包裹p
  - a的語義要小於p，a就是能夠當作文原本處理，因此p裏面至關於放的就是純文字。
圖片標籤 <img />

img: 表明的就是一張圖片。是單邊標記。
img是自封閉標籤，也稱爲單標籤。
能插入的圖片類型：
- 可以插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什麼區別，css課上講。
- 不能往網頁中插入的圖片格式是：psd、ai
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。
src屬性：圖片的相對路徑和絕對路徑 src 是英語source「資源」的縮寫。
在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑,兩個標記 . 和 .. 分表表明當前目錄和父路徑。
絕對路徑包括以盤符開始的絕對路徑和網絡路徑，用盤符開始的絕對路徑沒有任何意義由於linux系統沒有盤符
咱們如今不管是在a標籤、img標籤，若是要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
相對路徑，就是../ image/ 這種路徑。從本身出發，找到別人；
絕對路徑，就是http://開頭的路徑。
絕對不容許使用file://開頭的東西，這個是徹底錯誤的！
img標籤的經常使用其它屬性：
- width：寬度
- height：高度
- title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。
- align：指圖片的水平對齊方式，屬性值能夠是：left、center、right
- alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）
文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」。此時你們能夠給圖片設置align屬性，來查看效果吧！
注意事項：
- （1）若是要想保證圖片等比例縮放，請只設置width和height中其中一個。
- （2）若是想實現圖文混排的效果，請使用align屬性，取值爲left或right

上圖中解釋：

11行代碼表示，頂部這個錨的名字叫作top。
而後在底部設置超連接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意上圖中紅框部分的#號不要忘記了，表示跳到名爲top的特定位置，這是規定。若是少了#號，點擊以後，就會跳到top這個文件或者top這個文件夾中去。
若是咱們將上圖中的第23行代碼寫成：<a href="new.html#top">回到頂部</a>
就表示，點擊以後，跳轉到new.html頁面的top錨點中去。
說明：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。爲了向前兼容，所以，name和id這兩個屬性都要寫上，而且值是同樣的。

一、<!DOCTYPE>標籤

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。web

做用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。

document.compatMode：chrome

BackCompat：怪異模式Quirks mode或者稱爲兼容模式Compatibility Mode，瀏覽器使用本身的怪異模式解析渲染頁面。
CSS1Compat：標準模式Standars mode或者稱爲嚴格模式Strict mode，瀏覽器使用W3C的標準解析渲染頁面。
js中判斷當前瀏覽器正在以何種方式解析：window.top.document.compatMode

如何設置爲怪異模式：編程

在頁面項部加 <!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」>
什麼也不加。

如何設置爲標準模式：

<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」「http://www.w3.org/TR/html4/loose.dtd」>
<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01//EN」「http://www.w3.org/TR/html4/strict.dtd」>
<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Frameset//EN」「http://www.w3.org/TR/html4/frameset.dtd」>

二、<head>內經常使用標籤

<meta>標籤

meta介紹
<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性。

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

1 2	`<` `meta` `name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">` `<` `meta` `name="description" content="老男孩培訓機構是由一個很老的男孩建立的">`

(2)http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

 
         < 
         meta 
         http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號，分別在秒數的前面和網址的後面) 
        
 
         < 
         meta 
         http-equiv="content-Type" charset=UTF8"> 
        
 
         < 
         meta 
         http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />  
        

<非meta>標籤

 
       < 
       title 
       >oldboy</ 
       title 
       > 
      
 
       < 
       link 
       rel="icon" href="http://www.jd.com/favicon.ico"> 
      
 
       < 
       link 
       rel="stylesheet" href="css.css"> 
      
 
       < 
       script 
       src="hello.js"></ 
       script 
       >　 
      

三、<body>內經常使用標籤

基本標籤（塊級標籤和內聯標籤）

 
       < 
       hn 
       >: n的取值範圍是1~6; 從大到小. 用來表示標題. 
      
       < 
       p 
       >: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白. 
      
       < 
       b 
       > < 
       strong 
       >: 加粗標籤. 
      
       < 
       strike 
       >: 爲文字加上一條中線. 
      
       < 
       em 
       >: 文字變成斜體. 
      
       < 
       sup 
       >和< 
       sub 
       >: 上角標 和 下角表. 
      
       < 
       br 
       >:換行. 
      
       < 
       hr 
       >:水平線 
      
       特殊字符： 
      
       &lt； &gt；&quot；&copy；&reg；

<div>和<span>

<div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現.
<span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

圖形標籤: <img>

 
       src: 要顯示圖片的路徑. 
      
       alt: 圖片沒有加載成功時的提示. 
      
       title: 鼠標懸浮時的提示信息. 
      
       width: 圖片的寬 
      
       height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

超連接標籤(錨標籤): <a> </a>

超連接：是指從一個網頁指向一個目標的鏈接關係，
這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序

URL: 是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成

第1部分：爲協議：http://、ftp://等
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。

 
       < 
       a 
       href="" target="_blank" >click</ 
       a 
       > 
      
       href屬性指定目標網頁地址。該地址能夠有幾種類型： 
      
       絕對 URL - 指向另外一個站點（好比 href="http://www.jd.com） 
      
       相對 URL - 指當前站點中確切的路徑（href="index.htm"） 
      
       錨 URL - 指向頁面中的錨（href="#top"）

列表標籤

 
       < 
       ul 
       >: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)] 
      
       < 
       ol 
       >: 有序列表 
      
       < 
       li 
       >:列表中的每一項. 
      
       < 
       dl 
       >  定義列表 
      
       < 
       dt 
       > 列表標題 
      
       < 
       dd 
       > 列表項

表格標籤: <table>

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。

 
         < 
         table 
         > 
        
         < 
         thead 
         > 
        
         < 
         tr 
         > 
        
         < 
         th 
         >標題</ 
         th 
         > 
        
         < 
         th 
         >標題</ 
         th 
         > 
        
         </ 
         tr 
         > 
        
         </ 
         thead 
         > 
        
         < 
         tbody 
         > 
        
         < 
         tr 
         > 
        
         < 
         td 
         >內容</ 
         td 
         > 
        
         < 
         td 
         >內容</ 
         td 
         > 
        
         </ 
         tr 
         > 
        
         < 
         tr 
         > 
        
         < 
         td 
         >內容</ 
         td 
         > 
        
         < 
         td 
         >內容</ 
         td 
         > 
        
         </ 
         tr 
         > 
        
         </ 
         tbody 
         > 
        
         </ 
         table 
         > 
        
         < 
         tr 
         >: table row 
        
         < 
         th 
         >: table head cell 
        
         < 
         td 
         >: table data cell 
        
         屬性: 
        
         border: 表格邊框. 
        
         cellpadding: 內邊距 
        
         cellspacing: 外邊距. 
        
         width: 像素 百分比.（最好經過css來設置長寬） 
        
         rowspan:  單元格豎跨多少行 
        
         colspan:  單元格橫跨多少列（即合併單元格）

表單標籤: <form>

功能：表單通常用來收集用戶的輸入信息,用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

表單屬性:

action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web
method: 表單的提交方式 post/get默認取值就是get

<input>系列標籤

 
       < 
       1 
       > 表單類型 
      
       type:        text 文本輸入框 
      
       password 密碼輸入框 
      
       radio 單選框 
      
       checkbox 多選框   
      
       submit 提交按鈕             
      
       button 按鈕(須要配合js使用.) button和submit的區別？ 
      
       file 提交文件：form表單須要加上屬性enctype="multipart/form-data"             
      
       上傳文件注意兩點： 
      
       1 請求方式必須是post 
      
       2 enctype="multipart/form-data" 
      
       < 
       2 
       > 表單屬性 
      
       name:    表單提交項的鍵. 
      
       注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱； 
      
       而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的 
      
       value:    表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣： 
      
       type="button", "reset", "submit" - 定義按鈕上的顯示的文本           
      
       type="text", "password", "hidden" - 定義輸入字段的初始值                 
      
       type="checkbox", "radio", "image" - 定義與輸入相關聯的值 
      
       checked:  radio 和 checkbox 默認被選中 
      
       readonly: 只讀. text 和 password 
      
       disabled: 對所用input都好使.

<select>系列標籤

 
       < 
       select 
       > 下拉選標籤屬性 
      
       name:表單提交項的鍵. 
      
       size：選項個數 
      
       multiple：multiple  
      
       < 
       optgroup 
       >爲每一項加上分組 
      
       < 
       option 
       > 下拉選中的每一項 屬性： 
      
       value:表單提交項的值.    
      
       selected: selected下拉選默認被選中

<textarea> 多行文本框

 
       < 
       form 
       id="form1" name="form1" method="post" action=""> 
      
       < 
       textarea 
       cols=「寬度」 rows=「高度」 name=「名稱」> 
      
       默認內容 
      
       </ 
       textarea 
       > 
      
       </ 
       form 
       >

<label>標籤

label標籤爲input元素定義標註（標記）。
label元素不會向用戶呈現任何特殊效果。
label標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

 
       < 
       form 
       method="post" action=""> 
      
       < 
       label 
       for=「username」>用戶名</ 
       label 
       > 
      
       < 
       input 
       type=「text」 name=「username」 id=「username」 size=「20」 /> 
      
       </ 
       form 
       >

<fieldset>標籤

 
       < 
       fieldset 
       > 
      
       < 
       legend 
       >登陸</ 
       legend 
       > 
      
       < 
       input 
       type="text"> 
      
       </ 
       fieldset 
       >

html中的特殊字符

 ：空格（non-breaking spacing，不斷打空格）
<：小於號（less than）
>：大於號（greater than）
&：符號&
¥：符號¥
®：註冊
"：雙引號
'：單引號
©：版權©
™：商標™
若是想把標籤做爲文本在頁面上顯示，直接寫是確定不行的，須要轉義字符。應該這麼寫：這是一個HTML語言的<p>標籤

相關標籤/搜索

html&html

html

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。