HTML基礎知識整理

時間 2019-11-26

標籤 html 基礎知識整理欄目 HTML 简体版

原文原文鏈接

1 什麼是HTML？

HTML 指的是超文本標記語言 (Hyper Text Markup Language)。不是一種編程語言，而是一種標記語言，標記語言是一套標記標籤，HTML 使用標記標籤來描述網頁。html

2 HTML標籤

HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>；標籤一般是成對出現的，標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤。程序員

標籤分類：編程

雙標籤 html <標籤名> 內容 </標籤名>
單標籤(也稱爲空標籤) hr <標籤名 />

標籤關係分爲兩種：瀏覽器

嵌套關係

<head> 
     <title> </title>
</head>

並列關係

<head></head>
<body></body>

3 HTML基本結構

以下所示：服務器

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

代碼講解：
1. <html></html>稱爲根標籤，全部的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。

在head中設置網頁標題和字符集編碼
<head>
    <title>這裏是標題</title>
    <meta charset="utf-8"/>
</head>

4 標籤語義化

所謂標籤語義化，就是指標籤的含義。網絡

爲何要有語義化標籤編程語言

方便代碼的閱讀和維護。
同時讓瀏覽器或是網絡爬蟲能夠很好地解析，從而更好分析其中的內容。
使用語義化標籤會具備更好地搜索引擎優化。語義是否良好，在於當咱們去掉CSS以後，網頁結構依然阻止有序，而且有良好的可續性。也就是說，一眼看去知道哪一個是重點結構是什麼，知道每一塊的內容有什麼做用。

遵循的原則是先肯定語義的HTML，再選合適的CSS。post

5 段落標籤

<p>段落 </p>
<p>標籤的默認樣式，段前段後都會有空白。

6 換行標籤

若是但願在不產生一個新段落的狀況下進行換行（新行），請使用 <br /> 標籤：
<p>Helloween<br/>World！<br/>I'm Coming!</p>

7 標題標籤

標題標籤一共有6個，h一、h二、h三、h四、h五、h6分別爲一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。而且依據重要性遞減。<h1>是最高的等級。優化

語法： <hx>標題文本</hx> (x爲1-6)

標題標籤的樣式都會加粗，h1標籤字號最大，h2標籤字號相對h1要小，以此類推h6標籤的字號最小。一個標題標籤要獨佔一整行。網站

8 水平線標籤

<hr /> 標籤在 HTML 頁面中建立水平線,可用於分隔內容。
<p>Welcome to China!</p>
<hr/> 是單標籤
<p>Thank you!</p>

9 註釋

註釋的做用是爲了解釋代碼的用途，方便程序員查找以及他人閱讀。常見的註釋有：

<!--註釋-->     
/*註釋*/
可使用快捷鍵  ctrl+/ 或者 ctrl+shift+/

10 div span標籤

div span沒有語義，它的做用是爲告終合CSS設置單獨的樣式使用。

語法：
<div>分割</div>
<span>跨度</span>

11 列表

列表分爲無序列表、有序列表和自定義列表無序列表：使用ul-li標籤實現，沒有先後順序的信息列表。

語法：
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	...
</ul>

有序列表：使用ol-li標籤實現，是有先後順序的信息列表。

語法：
<ol>
	<li>6</li>
	<li>5</li>
	<li>4</li>
	...
</ol>

自定義列表：使用dl-dt-dd標籤實現，一般用於對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何項目符號。

語法：
<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	...
	<dt></dt>
	<dd></dd>
	<dd></dd>
	...
</dl>

12 表格

建立表格幾元素：table(定義表格)、tr(行)、td(列)、thread(表格頭部)、th(表格表頭)、tbody(表格主體) 除此以後還有<caption>指定表格標題，rowspan合併行，colspan合併列。

語法：
<table>
	<caption>標題</caption>
	<tr>第一行<td>第一列</td><td colspan="2">跨兩列</td><td></td></tr>
	<tr>第二行<td>第二列</td><td></td><td></td></tr>
</table>

13 超連接

超連接類型分爲三種：1 內部連接 2 外部連接 3 錨連接

語法：
<a href="跳轉目標" target="目標窗口的彈出方式" title="鼠標滑過顯示的文本">連接顯示的文本</a>
href：用於指定連接目標的url地址，當爲標籤應用href屬性時，它就具備了超連接的功能。  Hypertext Reference的縮寫。意思是超文本引用
target：用於指定連接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，_blank爲在新窗口中打開方式。

注意：

1.外部連接須要添加 http:// www.baidu.com

2.內部連接直接連接內部頁面名稱便可好比 < a href="index.html"> 首頁 </a >

3.若是當時沒有肯定連接目標時，一般將連接標籤的href屬性值定義爲「#」(即href="#")，表示該連接暫時爲一個空連接。

4.不只能夠建立文本超連接，在網頁中各類網頁元素，如圖像、表格、音頻、視頻等均可以添加超連接。

錨點定位（難點）經過建立錨點連接，用戶可以快速定位到目標內容。建立錨點連接分爲兩步：

使用「a href=」#id名>「連接文本"</a>建立連接文本（被點擊的） <a hef="#mao"></a>
使用相應的id名標註跳轉目標的位置。 <a id="mao">跳轉到錨連接</a>

14 圖片

語法：
<img src="圖片地址" alt="指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本" title = "提示文本">

15 表單

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是能夠把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就能夠處理表單傳過來的數據。

<form method="傳送方式" action="服務器文件" name="表單名稱">
action：在表單收集到信息以後，須要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的URL地址。
method:用於設置表單數據的提交方式，取值爲get或post。
name：用於知道你跟表單的名稱，以便於區分同一個頁面中的多個表單。

表單控件：單行文本輸入框、密碼輸入框、複選框、單選框、提交按鈕、重置按鈕等，都必須放在<form></from>標籤之間。

單行文本輸入框：當用戶要在表單中輸入字母、數字等內容時，就須要文本輸入框，文本框也能夠轉化爲密碼輸入框。

語法：
<form>
	<input type="text/password" name="名稱" value="文本" />
</form>
當type="text"對應的就是文本輸入框；當type="password",對應的就是密碼輸入框。

複選框：

<input type="checkbox" value="值" name="名稱" checked="checked"/> 好比我的資料填寫愛好的勾選

單選框：

<input type="radio" value="值" name="名稱" checked="checked"/>  好比性別的選取

多行文本框：

<textarea rows="行數" cols="列數">文本</textarea>  好比備註的填寫

下拉框：

<select>
	<option value="提交值" selected="selected">選項</option>
	<option value="提交值">選項</option>
	<option value="提交值">選項</option>
	...
</select>

按鈕：

提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置"/>

相關標籤/搜索

每日一句

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