1.HTML
(1)
HTML(Hypertext Markup Language)超文本標(biāo)記語(yǔ)言
它負(fù)責(zé)網(wǎng)頁(yè)的三個(gè)要素之中的結(jié)構(gòu)
HTML 使用標(biāo)簽的形式來(lái)認(rèn)識(shí)網(wǎng)頁(yè)中的不同組成部分
所謂超文本指的是超鏈接,使用超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面
HTML 文檔包含了 HTML 標(biāo)簽及文本內(nèi)容
HTML 文檔也叫做 web 頁(yè)面
(2)
HTML 標(biāo)題(Heading)是通過(guò)<h1>-<h6>標(biāo)簽來(lái)定義的
HTML 段落是通過(guò)標(biāo)簽<p>來(lái)定義的
HTML 鏈接是通過(guò)標(biāo)簽 <a> 來(lái)定義的
HTML 圖像是通過(guò)標(biāo)簽 <img> 來(lái)定義的
2. 標(biāo)簽 (元素)
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽(HTML tag)。
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如<html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如<b>和</b>(可用于一級(jí)標(biāo)題)
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽,第二個(gè)是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
標(biāo)簽可以嵌套
html
預(yù)覽
<html>
? ? <head>
? ? ? ? <title></title>
? ? </head>
? ? <body>
? ? ? ? <h1>這是我的第二個(gè)網(wǎng)頁(yè)</h1>
? ? </body>
</html>
示例
解釋: 1.<p>元素::: 這個(gè)<p>元素定義了 HTML 文檔的主體,這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽 <p> 以及一個(gè)結(jié)束標(biāo)簽 </p>.
2.<body>元素<body> 元素定義了 HTML 文檔的主體,這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽 <body> 以及一個(gè)結(jié)束標(biāo)簽 </body>。body標(biāo)簽用來(lái)設(shè)置網(wǎng)頁(yè)的主體內(nèi)容,網(wǎng)頁(yè)中所有可見(jiàn)的內(nèi)容,都應(yīng)該在 body 中編寫(xiě)
3.<html>元素 (有且只有一個(gè)根標(biāo)簽)<html> 元素定義了整個(gè) HTML 文檔,這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽 <html>,以及一個(gè)結(jié)束標(biāo)簽 </html>.
4. head 標(biāo)簽,該標(biāo)簽中的內(nèi)容,不會(huì)在網(wǎng)頁(yè)中直接顯示,它用來(lái)幫助瀏覽器解析頁(yè)面的
5. title 網(wǎng)頁(yè)的標(biāo)題標(biāo)簽,默認(rèn)會(huì)顯示在標(biāo)簽頁(yè)頂部title網(wǎng)頁(yè)的標(biāo)題標(biāo)簽,默認(rèn)會(huì)顯示在瀏覽器的標(biāo)題欄中搜索引擎在檢索頁(yè)面時(shí),會(huì)首先檢索title標(biāo)簽中的內(nèi)容它是網(wǎng)頁(yè)中對(duì)于搜索引擎來(lái)說(shuō)最重要的內(nèi)容,會(huì)影響到網(wǎng)頁(yè)在搜索引擎中的排名
HTML 標(biāo)簽參考手冊(cè)
菜鳥(niǎo)教程的標(biāo)簽參考手冊(cè)提供了有關(guān)這些標(biāo)題及其屬性的更多信息。您將在本教程下面的章節(jié)中學(xué)到更多有關(guān) HTML 標(biāo)簽和屬性的知識(shí)。
標(biāo)簽描述
<html>定義 HTML 文檔
<body>定義文檔的主體
<h1>
-<h6>
定義 HTML 標(biāo)題
<hr>定義水平線
<!--...-->定義注釋
常用標(biāo)簽
1. 標(biāo)題標(biāo)簽
在 html 中,一共有六級(jí)標(biāo)題標(biāo)簽,h1~h6,在顯示效果上,h1 最大,h6 最小h1 標(biāo)簽非常重要,它會(huì)影響到頁(yè)面在搜索引擎中的排名,一般頁(yè)面中的標(biāo)題標(biāo)簽只使用 h1,h2,h3,h3 以后的基本不使用
2. 段落標(biāo)簽
標(biāo)題標(biāo)簽用于表示內(nèi)容中的一個(gè)自然段,使用p標(biāo)簽來(lái)表示一個(gè)段落。p標(biāo)簽中的文字,默認(rèn)會(huì)獨(dú)占一行,并且段與段之間會(huì)有一個(gè)間距在 HTML 中,字符之間寫(xiě)再多的空格,瀏覽器也會(huì)當(dāng)成一個(gè)空格解析,換行也會(huì)當(dāng)成一個(gè)空格解析
3. 自結(jié)束標(biāo)簽
<br/>,<br/>表示一個(gè)換行
<hr>,<hr/>表示插入橫線img標(biāo)簽也是一個(gè)自結(jié)束標(biāo)簽
3. 注釋
可以將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。瀏覽器會(huì)忽略注釋,也不會(huì)顯示它們。例如:<!-- 這是一個(gè)注釋 -->
4. 屬性
屬性是 HTML 元素提供的附加信息
屬性通常出現(xiàn)在 HTML 標(biāo)簽的開(kāi)始標(biāo)簽中,用于定義元素的行為、樣式、內(nèi)容或其它特性
屬性總是以 “name=value” 的形式寫(xiě)在標(biāo)簽內(nèi),name是屬性的名稱,value是屬性的值
示例: <h1>這是我的<font color="red">第二個(gè)</font>網(wǎng)頁(yè)</h1>
屬性名 = “屬性值”,一個(gè)標(biāo)簽中可以同時(shí)設(shè)置多個(gè)屬性,屬性之間需要空格隔開(kāi)
6. 實(shí)體
概述:
在 html 中,一些如< >中特殊字符是不能直接使用的,需要使用一些特殊的符號(hào)來(lái)表示這些特殊字符,這些特殊符號(hào)稱為實(shí)體(轉(zhuǎn)義字符串)
語(yǔ)法:
&實(shí)體的名字;
應(yīng)用:
<:<
>:>
空格:
版權(quán)符號(hào):©
7. 圖片標(biāo)簽
概述:
使用img標(biāo)簽來(lái)向網(wǎng)頁(yè)中引入一個(gè)外部圖片
8.內(nèi)聯(lián)框架
概述:
使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁(yè)面,使用iframe來(lái)創(chuàng)建一個(gè)內(nèi)聯(lián)框架,但在現(xiàn)實(shí)開(kāi)發(fā)中不推薦使用內(nèi)聯(lián)框架,因?yàn)閮?nèi)聯(lián)框架中的內(nèi)容不會(huì)被搜索引擎檢索
使用屬性:
<iframe ></iframe>
src:指向一個(gè)外部界面的路徑,可以使用相對(duì)路徑
width:
將以上圖片提取文字并轉(zhuǎn)為markdown格式
使用屬性:
<iframe ></iframe>
src:指向一個(gè)外部界面的路徑,可以使用相對(duì)路徑
width:
height:
name:可以為內(nèi)聯(lián)框架指定一個(gè)name屬性
9. 超鏈接
概述:
使用超鏈接可以讓我們從一個(gè)界面跳轉(zhuǎn)到另一個(gè)界面
創(chuàng)建超鏈接:
使用a標(biāo)簽來(lái)創(chuàng)建一個(gè)超鏈接<a></a>
創(chuàng)建超鏈接時(shí),如果地址不確定可以直接寫(xiě)一個(gè)#作為占位符
屬性:
href:指向鏈接跳轉(zhuǎn)的目標(biāo)地址,可以寫(xiě)一個(gè)相對(duì)路徑也可以寫(xiě)一個(gè)完整的地址
target:a標(biāo)簽中的target屬性可以用來(lái)指定打開(kāi)鏈接的位置
可選值:_self,表示在當(dāng)前窗口打開(kāi)(默認(rèn)值)
_blank,表示在新的窗口打開(kāi)鏈接
可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值,連接將會(huì)在指定的內(nèi)聯(lián)框架中打開(kāi)
center標(biāo)簽中的內(nèi)容會(huì)默認(rèn)在頁(yè)面中居中顯示