HTML學習彙總

時間 2020-07-03

標籤 html 學習彙總欄目 HTML 简体版

原文原文鏈接

HTML學習大彙總

(1)HTML概述

Html（超文本標記語言）：用文字來描述的標籤語言，用文字來描述網頁的一種語言。javascript
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。css
HTML 是用來描述網頁的一種語言。html
1. HTML 指的是超文本標記語言 (Hyper Text Markup Language)
2. HTML 不是一種編程語言，而是一種標記語言 (markup language)
3. 標記語言是一套標記標籤 (markup tag)
4. HTML 使用標記標籤來描述網頁

HTML 標籤前端

HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。
1. HTML 標籤是由*尖括號*包圍的關鍵詞，好比 <html>
2. HTML 標籤一般是*成對出現*的，好比 <b> 和 </b>
3. 標籤對中的第一個標籤是*開始標籤*，第二個標籤是*結束標籤*
4. 開始和結束標籤也被稱爲*開放標籤*和*閉合標籤*

Html的骨架java

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
          網頁顯示內容
    </body>
</html>


第一行是文檔聲明，第二行「<html>」標籤和最後一行「</html>」定義html文檔的總體，「<html>」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。 「<head>」標籤和「<body>」標籤是它的第一層子元素，「<head>」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「<body>」內編寫網頁上顯示的內容。
    
Html有兩種標籤，一個是雙標籤，一個是單標籤。雙標籤例如：<html></html>,單標籤例如：<br/>,單標籤不多，基本上能夠數過來。

HTML 文檔 = 網頁編程
1. HTML 文檔描述網頁
2. HTML 文檔包含 HTML 標籤和純文本
3. HTML 文檔也被稱爲網頁
Web 瀏覽器的做用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：瀏覽器
```
<html>
	<body>
		<h1>個人第一個標題</h1>
		<p>個人第一個段落。</p>	
	</body>
</html>
```
例子解釋編程語言
```
- <html></html> 之間的文本描述網頁
- <body> </body> 之間的文本是可見的頁面內容
- <h1></h1>之間的文本被顯示爲標題
- <p></p>之間的文本被顯示爲段落
```
Html的標籤關係：編輯器

1.嵌套關係（父子）佈局
```
<head>
<title>標題</title>
</head>
```
2.並列關係（兄弟）
```
<head></head>
<body></body>
```
先定義合適的html結構，在定義css樣式。

(2)HTML的各種標籤詳解

html標題標籤

經過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤能夠在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關係，好比說： <h1>用做主標題，其後是 <h2>，再其次是 <h3>，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，因此網頁上使用標題是很重要的。
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

html段落標籤、換行標籤與字符實體

1.html段落標籤

<p>標籤訂義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼以下：</p>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
    文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的
    標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm。
    </p>

    <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方
    式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網
    頁能夠從一個網頁連接跳轉到另一個網頁。</p>
</body>
</html>

2.html換行標籤

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，若是真想換行，能夠在代碼的段落中插入<br />來強制換行，代碼以下：
<p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用<br />
文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
</p>

3.html字符實體

代碼中成段的文字，若是文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，若是想顯示多個空格，可使用空格的字符實體,代碼以下：

<!--  在段落前想縮進兩個文字的空格，使用空格的字符實體：&nbsp;   -->
<p>
&nbsp;&nbsp;一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用<br />
文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。</p>

在網頁上顯示「<」和「>」會誤認爲是標籤，想在網頁上顯示「<」和「>」可使用它們的字符實體，好比：

<!-- 「<」 和 「>」 的字符實體爲 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

html塊標籤、含樣式的標籤

1.html塊標籤

1）<div> 標籤 塊元素，表示一塊內容，沒有具體的語義。

2）<span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。

2.含樣式和語義的標籤

1）<em> 標籤 行內元素，表示語氣中的強調詞，表示斜體方式顯示的意思

2）<i> 標籤 行內元素，表示專業詞彙，表示斜體方式顯示的意思

3）<b> 標籤 行內元素，表示文檔中的關鍵字或者產品名，表示加粗方式意思

4）<strong> 標籤 行內元素，表示很是重要的內容，表示加粗方式意思

5）<s></s> <del></del> 兩個標籤都是表示加刪除線方式顯示的意思

6）<u></u> <ins></ins> 兩個標籤都是表示加下劃線方式顯示的意思

3.語義化標籤

語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜索引擎在爬網的時候能認識這些標籤，理解文檔的結構，方便網站的收錄。好比：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連接，dl、dt、dd表示定義列表等，語義化的標籤很少。

html圖像標籤、絕對路徑和相對路徑

1.html圖像標籤
```
<img>標籤能夠在網頁上插入一張圖片，它是獨立使用的標籤，它的經常使用屬性有：
- src屬性 定義圖片的引用地址
- alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，因此此屬性很是重要。
<img src="images/pic.jpg" alt="產品圖片" />
```
2.絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，須要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分爲絕對地址和相對地址。
- 絕對地址：相對於磁盤的位置去定位文件的地址
- 相對地址：相對於引用文件自己去定位被引用的文件地址
絕對地址在總體文件遷移時會由於磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
- 「 ./ 」表示當前文件所在目錄下，好比：「./pic.jpg」表示當前目錄下的pic.jpg的圖片，這個使用時能夠省略。
- 「 ../ 」表示當前文件所在目錄下的上一級目錄，好比：「../images/pic.jpg」表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

html連接標籤

<a>標籤能夠在網頁上定義一個連接地址，它的經常使用屬性有：
- href屬性 定義跳轉的地址
- title屬性 定義鼠標懸停時彈出的提示文字框
- target屬性 定義連接窗口打開的位置
  - target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
  - target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
<a href="#"></a> <!--  # 表示連接到頁面頂部   -->
<a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>
<a href="2.html" target="_blank">測試頁面2</a>

html列表

1.有序列表

在網頁上定義一個有編號的內容列表能夠用<ol>、<li>配合使用來實現，代碼以下：
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在網頁上生成的列表，每條項目上會按一、二、3編號，有序列表在實際開發中較少使用。

2.無序列表

在網頁上定義一個無編號的內容列表能夠用<ul>、<li>配合使用來實現，代碼以下：
<ul>
    <li><a href="#">新聞標題一</a></li>
    <li><a href="#">新聞標題二</a></li>
    <li><a href="#">新聞標題三</a></li>
</ul>

在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不一樣瀏覽器上顯示效果不一樣，因此通常會用樣式去掉默認的小圖標，若是須要圖標，能夠用樣式自定義圖標，從而達到在不一樣瀏覽器上顯示的效果相同,實際開發中通常用這種列表。

3.定義列表

定義列表一般用於術語的定義。<dl>標籤表示列表的總體。<dt>標籤訂義術語的題目。<dd>標籤是術語的解釋。一個<dl>中能夠有多個題目和解釋，代碼以下：
<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>
    <dt>css</dt>
    <dd>負責頁面的表現</dd>
    <dt>javascript</dt>
    <dd>負責頁面的行爲</dd>
</dl>

html表單

表單用於蒐集不一樣類型的用戶輸入，表單由不一樣類型的標籤組成，相關標籤及屬性用法以下：

一、<form>標籤 定義總體的表單區域

- action屬性 定義表單數據提交地址
- method屬性 定義表單提交的方式，通常有「get」方式和「post」方式

二、<label>標籤 爲表單元素定義文字標註

三、<input>標籤 定義通用的表單元素

- type屬性
  - type="text" 定義單行文本輸入框
  - type="password" 定義密碼輸入框
  - type="radio" 定義單選框
  - type="checkbox" 定義複選框
  - type="file" 定義上傳文件
  - type="submit" 定義提交按鈕
  - type="reset" 定義重置按鈕
  - type="button" 定義一個普通按鈕
  - type="image" 定義圖片做爲提交按鈕，用src屬性定義圖片地址
  - type="hidden" 定義一個隱藏的表單域，用來存儲值
- value屬性 定義表單元素的值
- name屬性 定義表單元素的名稱，此名稱是提交數據時的鍵名

四、<textarea>標籤 定義多行文本輸入框

五、<select>標籤 定義下拉表單元素

六、<option>標籤 與<select>標籤配合，定義下拉表單元素中的選項

**註冊表單實例：**
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>我的描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input類型爲submit定義提交按鈕  
     還能夠用圖片控件代替submit按鈕提交，通常會致使提交兩次，不建議使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

html表格

一、<table>標籤：聲明一個表格，它的經常使用屬性以下：

- border屬性 定義表格的邊框，設置值是數值
- cellpadding屬性 定義單元格內容與邊框的距離，設置值是數值
- cellspacing屬性 定義單元格與單元格之間的距離，設置值是數值
- align屬性 設置總體表格相對於瀏覽器窗口的水平對齊方式,設置值有：left | center | right

二、<tr>標籤：定義表格中的一行

三、<td>和<th>標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格，它們的經常使用屬性以下：

- align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
- valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
- colspan 設置單元格水平合併，設置值是數值
- rowspan 設置單元格垂直合併，設置值是數值

頁面佈局概述

佈局也能夠叫作排版，它指的是把文字和圖片等元素按照咱們的意願有機地排列在頁面上，佈局的方式分爲兩種：

一、table佈局：經過table元素將頁面空間劃分紅若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。

二、HTML+CSS佈局(DIV+CSS)：主要經過CSS樣式設置來佈局文字或圖片等元素，須要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。
table佈局及實例

table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：

一、按照設計圖的尺寸設置表格的寬高以及單元格的寬高。

二、將表格border、cellpadding、cellspacing所有設置爲0，表格的邊框和間距就不佔有頁面空間，它只起到劃分空間的做用。

三、針對局部複雜的佈局，能夠在單元格里面再嵌套表格，嵌套表格劃分局部的空間。

四、單元格中的元素或者嵌套的表格用align和valign設置對齊方式

五、經過屬性或者css樣式設置單元格中元素的樣式

(3)大總結(重點)

1.<h1></h1>標題標籤

2.<p></p>段落標籤

3.<hr />水平線標籤（單標籤）

4.<br/>break打斷、換行的簡稱。換行標籤（單標籤）

5.Div 、span是沒有語義的，是咱們網頁佈局主要的2個盒子 css+div   Div就是division的縮寫 分割、分區的意思 其實有不少div來組合網頁。

6.Span跨度，跨距，範圍 語法格式：<div>這是頭部</div> <span>今日價格</span>

7.文本格式化標籤：

<b></b> <strong></strong>顯示的兩個標籤都是表示加粗方式意思

<i></i> <em></em>兩個標籤都是表示斜體方式顯示的意思

<s></s> <del></del> 兩個標籤都是表示加刪除線方式顯示的意思

<u></u> <ins></ins> 兩個標籤都是表示加下劃線方式顯示的意思

這些文本格式化標籤後面的標籤的語義更好，能夠推薦使用後面的語義，這樣也比較方便。前面的標籤語義比較差。

8.圖像標籤（單標籤）

基本圖片的插入方式：<img src="images/pic.jpg" alt="產品圖片" />

圖片的經常使用屬性：alt  title

8.連接標籤：

<a  herf="跳轉目標"  target="目標窗口的彈出方式">文本或者圖像</a>

若是跳轉目標沒有寫好，咱們能夠用#先代替。

target：表示目標窗口打開的方式 blank表示在新的窗口打開，默認是在本來的窗口打開。

錨點定位：

<a herf="#live">我的生活</a>

<h3 id =」live">我的生活</h3>

9.base標籤：<base target="_blank"/>

<base target="_self"/>

10.特殊字符：

11.註釋標籤：<!--這裏面是註釋-->

12.列表標籤：

無序列表的使用：
<ul>
	<li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
    <li>列表項4</li>
	……..
</ul>

無序列表注意事項：無序列表在使用的時候，沒有前後的順序，排列的方式可能不同，可是結果是同樣的，內容是同樣多的。

13.有序列表的使用：
<ol>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
    <li>列表項4</li>
    ……..
</ol>

13.自定義列表的使用：<dd>標籤是解釋說明<dt>標籤的
<dl>
	<dt></dt>
	<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>

14.表格標籤
<table width=」500」 border=」1」 align=」center」>
	<tr align="center">
   	<td>姓名</td>
   	<td>性別</td>
   	<td>電話 </td>
   </tr>
   <tr>
   	<td>小王 </td>
   	<td>女 </td>
   	<td>110 </td>
   </tr>
   <tr>
   	<td>小明 </td>
   	<td>男 </td>
   	<td>120 </td>
   </tr>
</table>

表格屬性：通常狀況下，三個參數 border cellpadding cellspacing 爲0，cellpadding，cellspacing這兩個屬性能夠是表格中的行與行的邊距以及行與內容的邊距的值爲0，實際上表格更加的美觀。

合併單元格：

跨行合併：rowspan 跨列合併：colspan//不管是跨行合併仍是跨列合併，跨的行數和列數都是用數字來表示的，可是在合併的以後，會使得表格的某一行或者某一列出現溢出的狀況，這樣的話，咱們就必須把多餘的溢出的行和列給刪除掉。

合併的通常規則以下：

1.先確認是跨行仍是跨列

2.先上後下，先左後右的規則