HTML基礎(chǔ)（一）-創(chuàng)新互聯(lián)

HTML 是用來描述網(wǎng)頁的一種語言。

十多年的五寨網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整五寨建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“五寨網(wǎng)站設(shè)計”,“五寨網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

  • HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)

  • HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)

  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

  • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML 標(biāo)簽

HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。

  • HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 <html>

  • HTML 標(biāo)簽通常是成對出現(xiàn)的，比如 <b> 和 </b>

  • 標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽

  • 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

HTML 文檔 = 網(wǎng)頁

  • HTML 文檔描述網(wǎng)頁

  • HTML 文檔包含 HTML 標(biāo)簽和純文本

  • HTML 文檔也被稱為網(wǎng)頁

Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容：

  • <html> 與 </html> 之間的文本描述網(wǎng)頁

  • <body> 與 </body> 之間的文本是可見的頁面內(nèi)容

  • <h2> 與 </h2> 之間的文本被顯示為標(biāo)題

  • <p> 與 </p> 之間的文本被顯示為段落

HTML 標(biāo)題

HTML 標(biāo)題（Heading）是通過 <h2> - <h7> 等標(biāo)簽進(jìn)行定義的。

    超過的部分不顯示為標(biāo)題

Test：

<html>
	<body>
		<h2>My First Heading</h2>
		<h3>This is a heading </h3>
		<h4>This is a heading </h4>
		<!--支持1-6個-->
		<h22> What?</h22>	
		<p>My First paragraph</p>
		<p>My Sencong paragraph</p>
		<a >This is a link</a>
		<!-- 壓縮而不是截取-->
		<img src="1.jpg" width="500" height="500">
		<img src="2.jpg" >
	</body>
</html>

HTML 元素語法

  • HTML 元素以開始標(biāo)簽起始

  • HTML 元素以結(jié)束標(biāo)簽終止

  • 元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容

  • 某些 HTML 元素具有空內(nèi)容（empty content）

  • 空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）

  • 大多數(shù) HTML 元素可擁有屬性

嵌套的 HTML 元素

大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文檔由嵌套的 HTML 元素構(gòu)成。

空的 HTML 元素

沒有內(nèi)容的 HTML 元素被稱為空元素?？赵厥窃陂_始標(biāo)簽中關(guān)閉的。

<br> 就是沒有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。

在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實(shí)是更長遠(yuǎn)的保障。

HTML 提示：使用小寫標(biāo)簽

HTML 標(biāo)簽對大小寫不敏感：<P> 等同于 <p>。許多網(wǎng)站都使用大寫的 HTML 標(biāo)簽。

萬維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強(qiáng)制使用小寫。

HTML 屬性

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。

屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。

屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

始終為屬性值加引號

屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號是最常用的，不過使用單引號也沒有問題。

在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：

name='Bill "HelloWorld" Gates'
<html>
	<!--背景色定義為粉色-->
	<body bgcolor="pink">
		<!-- 設(shè)置標(biāo)題顯示的位置，中左右-->
		<h2 align="center">My First Heading</h2>
		<h3 align="left">This is a heading </h3>
		<h4 align="right">This is a heading </h4>
		<!--支持1-6個-->
		<h22> What?</h22>	
		<p>My First paragraph</p>
		<p>My Sencong paragraph</p>
		
	</body>
</html>

HTML 標(biāo)題

標(biāo)題（Heading）是通過 <h2> - <h7> 等標(biāo)簽進(jìn)行定義的。

<h2> 定義大的標(biāo)題。<h7> 定義最小的標(biāo)題。

瀏覽器會自動地在標(biāo)題的前后添加空行。

默認(rèn)情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標(biāo)題元素前后。

標(biāo)題很重要

請確保將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標(biāo)題。

搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

因?yàn)橛脩艨梢酝ㄟ^標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。

應(yīng)該將 h2 用作主標(biāo)題（最重要的），其后是 h3（次重要的），再其次是 h4，以此類推。

HTML 水平線

<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。

hr 元素可用于分隔內(nèi)容。

使用水平線 (<hr> 標(biāo)簽) 來分隔文章中的小節(jié)是一個辦法（但并不是唯一的辦法）。

<html>
	<!--背景色定義為粉色-->
	<body bgcolor="pink">
		<!-- 設(shè)置標(biāo)題顯示的位置，中左右-->
		<h2 align="center">My First Heading</h2>
		
		<hr/> <!--  此標(biāo)簽用于插入一條橫線  -->

		<h3 align="left">This is a heading </h3>
		<hr/>
		<h4 align="right">This is a heading </h4>
		<!--支持1-6個-->
		<hr/>
		<h22> What?</h22>	
		<hr/>
		<p>My First paragraph</p>
		<hr/>
		<p>My Sencong paragraph</p>
		
	</body>
</html>

HTML 段落

段落是通過 <p> 標(biāo)簽定義的。瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）

使用空的段落標(biāo)記 <p></p> 去插入一個空行是個壞習(xí)慣。用 <br /> 標(biāo)簽代替它

<br /> 元素是一個空的 HTML 元素。由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽

<html>
	<!--背景色定義為粉色-->
	<body bgcolor="pink">
		<!-- 每一個br控制依次換行  -->
		<p>This<br/> is<br/> a<br/> HTML  </p>
		
	</body>
</html>

<br> 還是 <br />

您也許發(fā)現(xiàn) <br> 與 <br /> 很相似。

在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結(jié)束標(biāo)簽（閉合標(biāo)簽）的 HTML 元素。

即使 <br> 在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠(yuǎn)的保障。

HTML 輸出 - 有用的提示

我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。

對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。

HTML 超鏈接（鏈接）

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。

當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>

我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。

有兩種使用 <a> 標(biāo)簽的方式：

  1. 通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接

  2. 通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽

HTML 鏈接 - target 屬性

使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。

<html>
	<!--背景色定義為粉色-->
	<body bgcolor="pink">
		<a >BaiDu</a>
	</body>
</html>

HTML 鏈接 - name 屬性

name 屬性規(guī)定錨（anchor）的名稱。

您可以使用 name 屬性創(chuàng)建 HTML 頁面中的書簽。

書簽不會以任何特殊方式顯示，它對讀者是不可見的。

當(dāng)使用命名錨（named anchors）時，我們可以創(chuàng)建直接跳至該命名錨（比如頁面中某個小節(jié)）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。

提示：錨的名稱可以是任何你喜歡的名字。

提示：您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。

基本的注意事項(xiàng) - 有用的提示：

注釋：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務(wù)器產(chǎn)生兩次 HTTP 請求。這是因?yàn)榉?wù)器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：。

提示：命名錨經(jīng)常用于在大型文檔開始位置上創(chuàng)建目錄?？梢詾槊總€章節(jié)賦予一個命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問百度百科，您會發(fā)現(xiàn)其中幾乎每個詞條都采用這樣的導(dǎo)航方式。

提示：假如瀏覽器找不到已定義的命名錨，那么就會定位到文檔的頂端。不會有錯誤發(fā)生。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：HTML基礎(chǔ)（一）-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article44/dspoee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、企業(yè)建站、網(wǎng)站制作、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)