HTML學習筆記一_ZenDei技術網路在線

HTML 描寫 HTML是網頁語言（超文本標記語言），採用標簽格式進行編寫 HTML標簽：採用尖括弧包圍的關鍵字，通常成對出現（閉合標簽），但是也有個別非成對的（非閉合標簽） HTML文檔：一個完整的HTML編寫的文檔，可以形成一個瀏覽器可以訪問的資源網頁如上就是最簡單的HTML文檔內容，標簽之 ...

HTML

描寫

HTML是網頁語言（超文本標記語言），採用標簽格式進行編寫

HTML標簽：採用尖括弧包圍的關鍵字，通常成對出現（閉合標簽），但是也有個別非成對的（非閉合標簽）
HTML文檔：一個完整的HTML編寫的文檔，可以形成一個瀏覽器可以訪問的資源網頁

<html>
    <body>
        <h1>  </h1>
        <p>   </p>
    </body>
</html>

如上就是最簡單的HTML文檔內容，< html> 標簽之間描述的代碼內容就是描述網頁（文檔內容），< body>標簽之間的文本代表可見的網頁文檔內容，< h1>代表一級標題，< p>代表一個內容段落

HTML標題：< h1>~< h6>

在HTML中，分為六級標題，第六級標題就是和普通文本同效力

<html>
    <body>
    <h1> 一級標題 </h1>
    <h2> 二級標題 </h2>
    <h3> 三級標題 </h3>
    <h4> 四級標題 </h4>
    <h5> 五級標題 </h5>
    <h6> 六級標題 </h6>
    </body>
</html>

HTML段落：< p>

一個段落標簽內容，都會是一個段落內容，可以有多個段落

HTML換行：< br />

在HTML中，可以使用該標簽在文本中換行顯示

HTML鏈接：< a>

HTML文檔中URL格式的連接都是利用 < a>標簽進行定義的

<a href = "http://www.baidu.com"> 百度搜索 </a>

href屬性的值代表連接的URL地址，而標簽中的文本是用戶HTML頁面可見的文字描述

target屬性：

用來定義鏈接的目標顯示方法（當前頁顯示/新建視窗顯示……）
name屬性：

命名錨

HTML圖像：< img />

<img src="圖像.jpg" width=“100” height=“100” />

src屬性：

src屬性的值是圖像的絕對位置，其他屬性可以定義圖片在頁面中的大小等其他設置
alt屬性：（替換文本屬性）

alt屬性用來為圖像定義可替換的文本元素；在載入圖像的時候，會以替換文本的元素內容顯示在頁面上

HTML水平線：< hr />

非閉合標簽，主要可以使用水平線

HTML註釋：< !-- *** -->

<!-- 註釋內容 -->

註釋的內容不會被HTML頁面顯示和解析

HTML新樣式:style屬性

HTML樣式主要通過style屬性定義的

樣式背景：

background-color：定義背景顏色

文本字體、顏色、尺寸：

font-family：定義文本字體
color：定義文本顏色
font-size:定義文本大小

文本對齊：

text-align：定義文本的水平對齊方式wen

<html>
    <body>
    <h1 style="text-align: center"> 主席外交 </h1>
    <h2 style="text-align: center"><a href="http://news.cctv.com/2019/08/29/ARTIgMnFeSPUwCgFYYenw4uI190829.shtml">會見菲律賓總統杜特爾特</a></h2>
    <hr />
    <div style="text-align: center">
        <img src="./img.jpg" width="400" height="500" / ><!--載入本地圖片 --> 
    </div>
    
    <div style="background-color: #CDCDC1">
    <p style="font-size: 20px">　杜特爾特祝賀中華人民共和國成立70周年，表示中國成功發展的經驗值得菲律賓學習借鑒。他表示，我珍視同*近平主席的親密友誼。中國對菲律賓很重要，菲中關係是百年大計。我願同*近平主席經常見面，加強溝通，共同推動兩國全面戰略合作關係持續強勁發展，實現互利共贏。菲方希望中方繼續助力菲經濟發展和基礎設施建設，感謝中方對菲人權事業、地震災區重建、反恐、禁毒等方面給予的支持。事實證明，中國是菲律賓真誠的朋友。在香港問題上，菲律賓完全尊重中國的法律以及依法維護法治的權利。</p>
    <p style="font-size: 20px">　杜特爾特表示，我主張選擇合作而非對抗的方式和平解決南海爭議，維護地區友好合作、和平穩定大局，這符合本地區各方利益。菲方願同中方加快推進海上油氣共同開發。菲律賓作為現任東盟－中國關係協調國，致力於推動各方早日達成“南海行為準則”。</p>
    
    </div>

    </body>
</html>

HTML文本格式化：

粗體：< b >

大號字：< big >

小號字：< small >

著重文字：< em >

加重語氣：< strong >

斜體文字：< i >

下標字：< sub >

上標字：< sup >

插入字：< ins >

刪除字：< del >

下劃線：< u >

HTML引用：

短引用：< q >

<q>引用內容</q>

長引用：< blockquote >

縮略詞：< abbr >，< dfn >

用來定義一個長單詞的縮寫

<p><abbr title="電腦技術交流站">交流站</abbr></p>

abbr的title屬性表示需要縮略的所有內容，文本元素內容表示HTML頁面顯示的內容

ps:abbr標簽的縮略會有下劃線顯示，而dfn不會有下劃線顯示

聯繫信息：

< address > , < cite >

用來顯示一些需要註明的信息內容，該元素的文本為斜體輸出

HTML表格：< table >

單元行、格標簽：< tr >,< td >

表格的框架體用< table >……< /table >定義
每個表格的單元行用 < tr >標簽定義
每一行的單元格用< td >標簽定義

<html>
    <body>
        <table>
            <tr> <td>1</td> <td>W</td> </tr>
            <tr> <td>2</td> <td>M</td> </tr>
        </table>
    </body>
</html>

表格邊框屬性：border

在table標簽定義的時候，預設是沒有可見邊框的

border：定義邊框的粗（預設單位：px）

<html>
    <body>
        <table border="1"><! -- 邊框像素為：1px -->
            <tr> <td>1</td> <td>W</td> </tr>
            <tr> <td>2</td> <td>M</td> </tr>
        </table>
    </body>
</html>

表頭標簽：< th >

表頭標簽的字體會加粗

< th >標簽和< td >標簽的應用方法一樣，被< tr >標簽所包涵

空單元格問題：

如果< td >標簽的內容為空，則會出現一些異常，所以想表示空單元格，可以在< td >標簽中寫入“&nbsp ;”

表格標簽：

標簽	描述
< table >	定義表格
< caption >	定義表格標題
< th >	定義表頭
< tr >	定義表行
< td >	定義單元格
< thead >	定義表格頁眉
< tbody >	定義表格主題
< tfoot >	定義表格頁腳
< col >	定義表格列屬性
< colgroup >	定義表格列的組

HTML列表：

無序列表：< ul >…< li >

無序列表是一個以“粗圓點”為序的項目列表；始於< ul >標簽，每一個列表始於< li >

<ul>
    <li> 一 </li>
    <li> 二 </li>
</ul>

type屬性：設置列表的標記（disc,circle,square）

有序列表：< ol >…< li >

有序列表是以數字順序排序的列表進行標記

<ol>
    <li>第一列表</li>
    <li>第二列表</li>
</ol>

type屬性：設置列表的標記(A,a,1,I,i……)

定義列表：< dl >,< dt >,< dd >

定義列表從< dl >標簽開始，每一個自定義列表項以< dt >，每一個自定義列表項的定義從< dd >開始

列表是可以嵌套在上一層有序/無序列表中的，形成所謂的二級列表

HTML 塊：

塊元素：可以通過< div >和< span >將HTML各類標簽和元素組合。

塊元素：

塊元素，在瀏覽器中，通常是從新的一行開始和結束

內聯元素：

內聯元素在瀏覽器顯示時，不會以新行開始

< div >元素：

div是塊元素，主要用來組合其他HTML元素標簽
div元素沒有特殊含義，在div元素中，每一個div完整的閉合標簽都會以新的一行開始和結束。
div和CSS一起使用，可以有效的設置樣式屬性

< span >元素：

HTML < span >元素是內聯元素，可用作文本的容器
與CSS一起使用是，元素可用於部分文本設置樣式屬性

HTML 類：

對HTML進行(元素)分類（設置類），可以為元素的類定義CSS樣式
ps：為相同的類設置相同的樣式，或者為不同的類設置不同的樣式
定義設置類（名）：

class屬性：可以為該標簽設置類名

< div >,< span >標簽是一種容器，都可以藉由class屬性進行類定義

HTML佈局：

HTML最常使用< div >元素佈局（通過CSS定位）

HTML響應式設計：

HTML框架：

框架結構標簽：< frameset >

frameset定義了視窗如何比例分割（百分比或像素）
每一個frameset定義一系列行貨列

框架標簽：< frame >

frame標簽中定義 放置一個HTML文檔

 <frameset cols="40%,60%">
     <frame src="**.html">
     <frame src="**.html">
</frameset>

cols：垂直（列）分佈框架屬性；rows：水平（行）分佈框架屬性

ps：HTML的frame框架是可以拖動的，所以，可以在標簽中添加：“noresize屬性：noresize=“noresize” ”

混合框架：換言之——框架嵌套，可以在55水平框架中的框架中在添加一個235垂直框架

HTML內聯框架：< iframe >

用於在一個HTML頁面中，顯示另一個HTML頁面
格式：
```
<iframe src="URL"></iframe>
```

高度、寬度屬性：

height：設置高度
width：設置寬度

屬性值的預設單位是像素，也可以用百分比來設定

刪除邊框：預設的內聯框架是有粗邊框的
- frameboreder：設置邊框粗細（px）
```
<iframe src="**.html" frameborder="*px"></iframe>
```

鏈接屬性：*

target：引用iframe的name屬性

HTML背景：

< body >標簽有兩個配置背景的標簽，背景可以是 顏色或圖像

背景顏色：bgcolor

背景顏色屬性將背景設置為某種顏色，屬性值可以是十六進位、RGB值或者顏色名（英文）

<body bgcolor="#000000"></body>
<body bgcolor="reb(0,0,0)"></body>
<body bgcolor="black"></body>

背景：background

背景屬性將背景設置為圖像，屬性值是圖像的URL地址（本地地址），如果圖像尺寸小於視窗則會自動複製多個圖像直至鋪滿視窗

<body background="**.gif"></body>
<body background="http://****"></body>

HTML腳本：

script元素：

< script >標簽用於定義客戶端腳本，既可以是在HTML文檔中包含腳本語句，也可以通過src屬性指向外部腳本文件

<script type="text/javascript">
    JavaScript腳本代碼;
</script>

type屬性值需要符合MIME類型

< noscript >標簽

< noscript >標簽提供無法使用腳本時的替代內容；在瀏覽器禁止腳本時，瀏覽器才會執行< noscript >標簽的內容

HTML頭部：

< head >標簽：

< head >標簽元素是所有頭部元素的容器標簽：

涵蓋元素標簽範圍：title , base , link , meta , script , style 等

< title >標簽元素：

< title >標簽的內容會顯示在網頁的標題，不會顯示在頁面上

< base />標簽元素：

< base >標簽為頁面上所有鏈接規定預設的地址（href）或者預設目標（target）

href：指的是鏈接的目標地址URL；target：指的是打開目標鏈接的方法（新視窗或本頁顯示）

< link /> 標簽元素：

定義HTML文檔與外部資源之間的關係

< style >標簽元素：

用於為HTML文檔定義樣式信息；可以在style元素內規定HTML元素呈現的樣式

< meta >標簽元素：

元數據：是關於數據的信息

< meta >標簽提供關於HTML標簽的元數據，元數據不會顯示頁面上，但是機器可讀的；典型情況：meta元素被用於規定頁面的描述、關鍵詞、文檔的作者、修改時間以及其它元數據；始終位於head元素中

元數據可用於瀏覽器（如何顯示內容或重新載入頁面），搜索（關鍵字）或其它web服務。

< meta >標簽的name和content屬性的作用是描述HTML頁面簡介和關鍵字

HTML < !DOCTYPE >

聲明幫助瀏覽器可以正確的顯示HTML網頁信息

< !DOCTYPE >聲明：

HTML有多個不同的版本，只有完全明白頁面中使用的確切的HTML版本，瀏覽器才能完全正確的顯示HTML頁面，這就是聲明的用處。

< !DOCTYPE >不是HTML標簽，它為瀏覽器提供信息聲明，即HTML的版本信息。。

HTML實體

在HTML中，預留了部分字元，在HTML中不能使用大/小於號；如果希望正確的顯示預留字元，就必須在HTML源代碼中使用字元實體

HTML 實體符號參考手冊

顯示結果	描述	實體名稱	實體編號
	空格
<	小於號	<	<
>	大於號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分（cent）	¢	¢
£	鎊（pound）	£	£
¥	元（yen）	¥	¥
€	歐元（euro）	€	€
§	小節	§	§
©	版權（copyright）	©	©
®	註冊商標	®	®
™	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

HTML學習筆記一