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