【温故知新】HTML学习笔记（上）
HTML固定結(jié)構(gòu)：
<html>?<head><title> </title></head><body></body>?? ? </html>HTML標(biāo)簽分類：
- 1、雙標(biāo)簽 ?<head> </head> ?一對(duì)夫妻
- 2、單標(biāo)簽 ?<br /> ? 數(shù)量非常少
其中“/”稱之為關(guān)閉符
HTML標(biāo)簽關(guān)系：
- 1、嵌套關(guān)系（父子關(guān)系）
- 2、并列關(guān)系（兄弟關(guān)系）
用記事本來書寫開發(fā)效率很低，很容易忽視錯(cuò)誤。實(shí)際工作中，為了效率，推薦使用Subline工具。
生成HTML骨架快捷鍵：
輸入“html:5”，按下“TAB”鍵。
輸入“!”，按下“TAB”鍵。
預(yù)覽時(shí)，直接單擊鼠標(biāo)右鍵，在瀏覽器中打開即可。
- <!DOCTYPE html> ：HTML的版本號(hào)，這里表示HTML 5的版本，目前基本都是使用該版本。
- lang="en" ： 語言，雖然這里是"en" ，但是也可以錄入中文。
- <meta charset="UTF-8"> ： 字符集，"UTF-8"是目前最常用的字符集編碼方式，常用的還有GBK和GB2312，GB2312（國標(biāo)）是簡(jiǎn)體中文，包括了6763個(gè)漢字，BIG5是為了繁體中文港澳臺(tái)等使用，GBK包含全部中文字符，是GB2312的擴(kuò)展，加入了繁體字的支持，并且兼容GB2312，而UTF-8則包含了全世界所有國家用到的字符。
HTML標(biāo)簽語義化
就是白話，一眼看去，就知道那個(gè)是重點(diǎn)，結(jié)構(gòu)是什么，知道每塊的內(nèi)容是干什么的。核心是在合適的地方給一個(gè)合理的標(biāo)簽，它遵循的原則是，先確定語義的HTML，再選合適的CSS。
HTML常用的標(biāo)簽
HTML的標(biāo)簽有很多，正常學(xué)習(xí)時(shí)查詢手冊(cè)即可。
這里首先介紹一下基本的排版標(biāo)簽。
1、標(biāo)題標(biāo)簽
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
HTML有6個(gè)等級(jí)的標(biāo)題，依次變小，可作為標(biāo)題使用，并且依據(jù)重要性遞減。
2、段落標(biāo)簽
<p> 文本內(nèi)容 </p>
默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口大小自動(dòng)換行。
3、水平線標(biāo)簽
<hr /> 是一個(gè)單標(biāo)簽
就是一條線。
4、換行標(biāo)簽
<br /> 是一個(gè)單標(biāo)簽
就是強(qiáng)制換一行，直接按回車/空格是沒有效果的，區(qū)別于段落標(biāo)簽的是行間距。
5、div和span標(biāo)簽
div和span沒有語義，是我們網(wǎng)頁布局的兩個(gè)主要盒子，比如CSS+DIV。
<div> </div> : div一行只能有一個(gè)
<span> </span> : span一行可有多個(gè)
6、文本格式化標(biāo)簽
粗體： <strong> </strong> 語義強(qiáng)烈，推薦使用
? ? ? ? ? ?<b> </b>
斜體： <em> </em> 語義強(qiáng)烈，推薦使用
? ? ? ? ? ?<i> </i>
加刪除線： <del> </del> 語義強(qiáng)烈，推薦使用
? ? ? ? ? ? ? ? ? <s> </s>
加下劃線： <ins> </ins> 語義強(qiáng)烈，推薦使用
? ? ? ? ? ? ? ? ? <u> </u>
7、圖像標(biāo)簽
<img src="圖像URL" /> ? 是一個(gè)單標(biāo)簽
src是其中一個(gè)屬性，表明圖像的路徑。
alt是其中一個(gè)屬性，是替換文本（提示文本），要是圖像顯示不出來，可以以文字進(jìn)行提示。
titile是其中一個(gè)屬性，鼠標(biāo)放上去（懸停時(shí)）會(huì)有說明文本。
width/height是其中的屬性，表明圖像的寬度和高度，正常改一個(gè)值就可以了，自動(dòng)等比縮放。
border是其中一個(gè)屬性，可以給圖像添加邊框。
8、鏈接標(biāo)簽
<a herf="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式"> 這里放文本或者圖像 </a>
href是屬性，指定鏈接目標(biāo)的url地址，外部鏈接http協(xié)議不能省略（例如http://www.baidu.com），要是鏈接已經(jīng)有了，但是還不可以跳轉(zhuǎn)，那就以“#”代替。
target是屬性，指定鏈接頁面的打開方式，其取值有self（默認(rèn) “_self”）和blank（新窗口打開“_blank”）兩種。
9、錨點(diǎn)定位
通過定位（創(chuàng)建錨點(diǎn)）的方式，快速去往頁面某一個(gè)位置（目標(biāo)內(nèi)容）。
分為兩步實(shí)現(xiàn)：
使用<a href="#id名"> 鏈接文本 </a> 創(chuàng)建鏈接文本
使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置（使用id屬性 id="id名"）
10、base標(biāo)簽
<base /> 是一個(gè)單標(biāo)簽
在head部分使用，比如頁面中有多個(gè)鏈接，可以設(shè)置整體鏈接的打開狀態(tài)。
11、特殊字符標(biāo)簽
空格 ：
小于號(hào)<：<
大于號(hào)>：>
和號(hào)&：&
人民幣￥：¥
版權(quán)?：©
注冊(cè)商標(biāo)?：®
攝氏度°：°
正負(fù)號(hào)±：±
乘號(hào)X：×
除號(hào)÷：÷
平方（上標(biāo)2）2：²
立方（上標(biāo)3）3：³
12、注釋標(biāo)簽
<!-- 注釋語句 -->
多寫注釋是非常好的寫代碼習(xí)慣，瀏覽器不會(huì)執(zhí)行。
13、路徑介紹
- 相對(duì)路徑
在同一級(jí)路徑：直接輸入 <img src="aa.jpg" />
在下一級(jí)路徑：需要經(jīng)過相應(yīng)文件夾，以“/”隔開 <img src="images/aa.jpg" />
在上一級(jí)路徑：上一級(jí)需要輸入“../”<img src="../aa.jpg" />
- 絕對(duì)路徑
完整的路徑地址 <img src="D:\project\images\aa.jpg" />
這種方式基本不會(huì)用到。
14、列表標(biāo)簽
容器里面裝載著文字或者圖表的一種形式叫列表。
列表最大的特點(diǎn)是整齊有序。
分為以下三類：
- 無序列表：依次羅列，沒有順序，<ul>標(biāo)簽里面只能放<li>，而在<li>里面則可以容納所有標(biāo)簽，無序列表會(huì)帶有自己的樣式屬性，這部分是CSS的功能；
<ul>
? ? ?<li>列表項(xiàng)1</li>
? ? ?<li>列表項(xiàng)2</li>
? ? ?<li>列表項(xiàng)3</li>
? ? ?...
</ul>
- 有序列表：有上下順序，<ol>標(biāo)簽里面只能放<li>，而在<li>里面則可以容納所有標(biāo)簽
<ol>，會(huì)自動(dòng)帶有1、2、3、4...的順序，具體樣式也是在CSS里面調(diào)整；
? ? ?<li>列表項(xiàng)1</li>
? ? ?<li>列表項(xiàng)2</li>
? ? ?<li>列表項(xiàng)3</li>
? ? ?...
</ol>
- 自定義列表：常用于對(duì)術(shù)語或者名詞進(jìn)行解釋和描述，列表項(xiàng)前面沒有任何項(xiàng)目；
<dl>
? ? ?<dt>名詞1</dt>
? ? ?<dd>名詞1解釋</dd>
? ? ?<dd>名詞1解釋</dd>
? ? ?...
? ? ?<dt>名詞2</dt>
? ? ?<dd>名詞2解釋</dd>
? ? ?<dd>名詞2解釋</dd>
? ? ?...
</dl>
總結(jié)
以上是生活随笔為你收集整理的【温故知新】HTML学习笔记（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【转摘】Word中查找与替换的妙用
- 下一篇： 【温故知新】HTML学习笔记（表格）