HTML總結篇

時間 2021-04-03

標籤 html 瀏覽器佈局網站搜索引擎編碼 url spa code 欄目 HTML 简体版

原文原文鏈接

一.HTML基本結構標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1. <!DOCTYPE> 標籤html

<!DOCTYPE> 文檔類型聲明，做用就是告訴瀏覽器使用哪一種HTML版原本顯示網頁

<!DOCTYPE html>

這句代碼的意思是: 當前頁面採起的是 HTML5 版原本顯示網頁.

2. lang 語言瀏覽器

簡單來講,定義爲en 就是英文網頁, 定義爲 zh-CN 就是中文網頁

其實對於文檔顯示來講，定義成en的文檔也能夠顯示中文，定義成zh-CN的文檔也能夠顯示英文

這個屬性對瀏覽器和搜索引擎(百度.谷歌等)仍是有做用的

3. charset 字符集佈局

字符集 (Character set)是多個字符的集合。以便計算機可以識別和存儲各類文字。

在<head>標籤內，能夠經過<meta> 標籤的 charset 屬性來規定 HTML 文檔應該使用哪一種字符編碼。

<meta charset=" UTF-8" />

charset 經常使用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱爲萬國碼，基本包含了全世界全部國家須要用到的字符.

注意：上面語法是必需要寫的代碼，不然可能引發亂碼的狀況。通常狀況下，統一使用「UTF-8」編碼，儘可能統一寫成標準的 "UTF-8"，不要寫成 "utf8" 或 "UTF8"。

二.經常使用的標籤

1.標題標籤 <h1> - <h6>（重要）

爲了使網頁更具備語義化，咱們常常會在頁面中用到標題標籤。HTML 提供了 6 個等級的網頁標題，即<h1> - <h6> 。

<h1> 我是一級標題 </h1>

單詞 head 的縮寫，意爲頭部、標題。

標籤語義：做爲標題使用，而且依據重要性遞減。

特色：加了標題的文字會變的加粗，字號也會依次變大。一個標題獨佔一行。

2.段落和換行標籤（重要）

<p> 我是一個段落標籤 </p>
換行標籤 <br />

3.文本格式化標籤網站

4.<div> 和<span>標籤ui

<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內容的。

<div> 標籤用來佈局，可是如今一行只能放一個<div>。大盒子

<span> 標籤用來佈局，一行上能夠多個 <span>。小盒子

5.圖像標籤和路徑 (重點）

圖像標籤：

在 HTML 標籤中，<img> 標籤用於定義 HTML 頁面中的圖像。

<img src="圖像URL" />

src 是<img>標籤的必須屬性，它用於指定圖像文件的路徑和文件名。

圖像標籤的其餘屬性：

6.超連接標籤 (重點）

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

連接分類：

外部連接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

內部連接:網站內部頁面之間的相互連接. 直接連接內部頁面名稱便可，例如 < a href="index.html"> 首頁 </a >。

空連接: 若是當時沒有肯定連接目標時，< a href="#"> 首頁 </a > 。

下載連接: 若是 href 裏面地址是一個文件或者壓縮包，會下載這個文件。

網頁元素連接: 在網頁中的各類網頁元素，如文本、圖像、表格、音頻、視頻等均可以添加超連接.

錨點連接: 點咱們點擊連接,能夠快速定位到頁面中的某個位置.

在連接文本的 href 屬性中，設置屬性值爲 #名字的形式，如<a href="#two"> 第2集 </a>

找到目標位置標籤，裏面添加一個 id 屬性 = 剛纔的名字，如：<h3 id="two">第2集介紹</h3>

7.特殊字符

8.表格標籤搜索引擎

<table>
 <tr>
 <th>表頭</th>
 ...
 </tr>

<tr>
 <td>單元格內的文字</td>
 ...
 </tr>

 ...
</table>

<table> </table> 是用於定義表格的標籤。

<tr> </tr> 標籤用於定義表格中的行，必須嵌套在 <table> </table>標籤中。

<td> </td> 用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中。

字母 td 指表格數據（table data），即數據單元格的內容。

<th> 標籤表示 HTML 表格的表頭部分

表格的結構標籤：編碼

<thead></thead>：用於定義表格的頭部。<thead> 內部必須擁有 <tr> 標籤。通常是位於第一行。

<tbody></tbody>：用於定義表格的主體，主要用於放數據本體。

以上標籤都是放在 <table></table> 標籤中。

合併單元格：

跨行合併：rowspan="合併單元格的個數"

跨列合併：colspan="合併單元格的個數"

合併單元格三步曲：

先肯定是跨行仍是跨列合併。

找到目標單元格. 寫上合併方式 = 合併的單元格數量。好比：<td colspan=「2」></td>。

刪除多餘的單元格。

9.列表標籤

表格是用來顯示數據的，那麼列表就是用來佈局的。

列表最大的特色就是整齊、整潔、有序，它做爲佈局會更加自由和方便。

根據使用情景不一樣，列表能夠分爲三大類：無序列表、有序列表和自定義列表。

無序列表（重點）：

<ul>
 <li>列表項1</li>
 <li>列表項2</li>
 <li>列表項3</li>
 ...
</ul>

無序列表的各個列表項之間沒有順序級別之分，是並列的。

<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標籤中輸入其餘標籤或者文字的作法是不被容許的。

<li> 與 </li> 之間至關於一個容器，能夠容納全部元素。

無序列表會帶有本身的樣式屬性，但在實際使用時，咱們會使用 CSS 來設置。

有序列表（理解）：

<ol>
 <li>列表項1</li>
 <li>列表項2</li>
 <li>列表項3</li>
 ...
</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標籤中輸入其餘標籤或者文字的作法是不被容許的。

<li> 與 </li>之間至關於一個容器，能夠容納全部元素。

有序列表會帶有本身樣式屬性，但在實際使用時，咱們會使用 CSS 來設置。

自定義列表（重點）：

自定義列表的使用場景:

自定義列表經常使用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。

<dl>
 <dt>名詞1</dt>
 <dd>名詞1解釋1</dd>
 <dd>名詞1解釋2</dd>
</dl>

<dl></dl> 裏面只能包含 <dt> 和 <dd>。

<dt> 和 <dd>個數沒有限制，常常是一個<dt> 對應多個<dd>。

10.表單標籤

<form action=「url地址」 method=「提交方式」 name=「表單域名稱">
 各類表單元素控件
</form>

<input> 表單元素：

type 屬性的屬性值及其描述以下

input type="屬性值" />

除 type 屬性外，<input>標籤還有其餘不少屬性，其經常使用屬性以下

name 和value 是每一個表單元素都有的屬性值,主要給後臺人員使用.

name 表單元素的名字, 要求單選按鈕和複選框要有相同的name值.

checked屬性主要針對於單選按鈕和複選框, 主要做用一打開頁面,就要能夠默認選中某個表單元素.

maxlength 是用戶能夠在表單元素輸入的最大字符數, 通常較少使用.

<label> 標籤：

<label> 標籤爲 input 元素定義標註（標籤）。

<label> 標籤用於綁定一個表單元素, 當點擊<label> 標籤內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增長用戶體驗.

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

<select> 表單元素：

在頁面中，若是有多個選項讓用戶選擇，而且想要節約頁面空間時，咱們可使用<select>標籤控件定義下拉列表.

<select>
 <option>選項1</option>
 <option>選項2</option>
 <option>選項3</option>
 ...
</select>

<select> 中至少包含一對<option> 。

在<option> 中定義 selected =「 selected " 時，當前項即爲默認選中項。

<textarea> 表單元素：

使用場景: 當用戶輸入內容較多的狀況下，咱們就不能使用文本框表單了，此時咱們可使用 <textarea> 標籤。

在表單元素中，<textarea> 標籤是用於定義多行文本輸入的控件。

使用多行文本輸入控件，能夠輸入更多的文字，該控件常見於留言板，評論。

<textarea rows="3" cols="20">
 文本內容
</textarea>

經過 <textarea> 標籤能夠輕鬆地建立多行文本輸入框。

cols=「每行中的字符數」，rows=「顯示的行數」，咱們在實際開發中不會使用，都是用 CSS 來改變大小。

相關標籤/搜索

每日一句

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