一、HTML基礎語法
1.什么是HTML
HTML（Hypertext Markup language）超文本標記語言
2.HTML發展史
HTML1.0（1993IETF）→HTML2.0（1995W3C）→HTML3.2（1996W3C）→HTML4.0（1997W3C）→HTML4.0.1（1999W3C）
→…→XHTML1.0（2000W3C）→…→HTML5定稿（20014） （主要學習加粗的）
3.HTML特點
-HTML不需要編譯，瀏覽器直接運行
-HTML檔案是一個文本檔案
-HTML檔案必須使用html或者htm為檔案名后綴
-HTML大小寫不敏感，HTML跟html是一樣的
4.開發工具
HTML是一個文本檔案，所以只要是能編輯文本檔案的都可以，比如，記事本，Word，
專業工具：Dreamweaver、WebStorm、sublime
5.HTML基本結構
（Ctrl+n新建檔案 Ctrl+s保存 f5-）
6.HTML標簽
（注：div標簽為塊級結構布局元素，放到css中結合盒模型講解）
l head標簽中的內容不會顯示在網頁內容中，主要用于定義檔案的頭部，是所有頭部元素的容器，<head>標簽中的元素可以參考腳本，提示瀏覽器在哪里找到樣式表，提供元資訊等等，
l <title></title>-標題，內容不是顯示在頁面檔案中，而是在網頁的標簽中顯示
l <p></p>-段落標簽
l 大部分是雙標簽，但也有單標簽，比如<hr>-水平線，可用<hr>或<hr/>，為了規范，通常用<hr/>來閉合這個標簽
水平線屬性：
- Width-設定水平線寬度（像素/百分比）
- Color-水平線顏色
- align-設定水平線居中
- noshade-設定水平線無陰影
7.HTML元素
元素=開始標簽+內容+結束標簽（開始和結束標簽也被稱為開放標簽和閉合標簽）
8.HTML屬性
語法：
<標簽名 屬性名1=“屬性值” 屬性名2=“屬性值”…>…</標簽名>
9.注釋
<!-- 內容 -->
二、文章段落
1.DOCTYPE檔案型別宣告
- l <!DOCTYPE>宣告必須在第一行
- l <!DOCTYPE>宣告不是HTML標簽
2.網頁編碼設定
Q：當網頁出現亂碼時怎么解決
A：在<head></head>標簽中添加：
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8”/>
這句話的意思是告訴網頁的內容是使用什么語言，使用什么編碼形式，
（國內常用utf-8，GB2312，gbk等編碼）
- http-equiv=”Content-Type”-檔案型別
- text/html-內容是html檔案
- charset=utf-8-內容的編碼形式
- utf-8支持簡體、繁體、英文、日文、韓文等等
- GB2312支持簡體中文
3.文欄位落標簽
- 標題標簽：<h1></h1>...<h6></h6>
- 段落標簽：<p></p>
- align對齊屬性值：
|
Left |
左對齊內容 |
|
right |
右對齊內容 |
|
Center |
居中對齊內容 |
|
justify |
對行進行伸展，這樣每行都可以有相等的長度 |
使用：<p align=”left”></p>
- l 換行標簽：<br/> （換行以后行與行之間是緊挨著的，不同于換段落）
- l 空格：
- l 預格式標簽：<pre></pre>-可以保留文本編輯器的格式
- l 文字斜體：<i></i>，<em></em>
- l 文字加粗：<b></b>，<strong></strong>
- l 文字下劃線：<ins></ins>
- l 上標：<sup></sup> 下標：<sub></sub>
- l 輸入內容：<ins></ins> 洗掉內容<del></del>
4.特殊符號
三、串列標簽
1.無序串列
<ul>
<li>串列項</li>
<li>串列項</li>
……
</ul>
（代碼縮進，Tab）
2.無序串列的type屬性
<ul type=”disc”></ul>
l disc-圓點
l square-正方形
l circle-空心圓
3.有序串列
<ol>
<li>串列項</li>
<li>串列項</li>
……
</ol>
4.有序串列的type屬性
- l 數字1,2…
- l 小寫字母a,b…
- l 大寫字母A,B…
- l 小寫羅馬數字
- l 大寫羅馬數字
5.定義串列
專案及專案描述的組合，即標題加上描述內容
<dl>
<dt>定義串列項</dt>
<dd>串列項描述</dd>
<dd>串列項描述</dd>
<dt>定義串列項</dt>
<dd>串列項描述</dd>
<dd>串列項描述</dd>
…………
</dl>
（dt和dd是同級標簽）
(dd的內容會自動縮進)
6.串列標簽使用場景
（查看網頁源代碼：右擊查看源代碼/f12網頁除錯工具-Elements，問號點擊后可查看網頁對應位置的代碼）
在實際的開發中，ul和ol的編號去掉，使用圖片
（HTML+CSS+JS：結構+表現+行為）
四、影像和超鏈接
1.影像標簽
語法：
<img scr=”” alt=”” …/> （單標簽）
img屬性：
l Src（必寫）-URL-顯示影像的URL
l alt-文字-影像代替文本
l height-數值（像素）和百分比-影像的高
l weight-數值（像素）和百分比-影像的寬
2.HTML路徑
絕對路徑：從盤開始寫起，直到找到檔案
相對路徑：相對于HTML位置的檔案路徑，上一級-“../”
l 網頁和圖片同一個檔案夾：直接參考（<img src=https://www.cnblogs.com/MiKihuahua/p/”1.jpg”/>）
l 圖片在網頁的上一級檔案夾：回傳上一級再參考（<img src=https://www.cnblogs.com/MiKihuahua/p/”../1.jpg”/>）
l 圖片在網頁的下一級檔案夾：直接往下參考（<img src=https://www.cnblogs.com/MiKihuahua/p/”檔案夾名/1.jpg”/>）
3.img的alt屬性
當由于-網速太慢
-src中的錯誤
-瀏覽器中禁用影像
用戶無法查看影像，alt屬性可以代替影像顯示在網頁中的內容
4.超鏈接標簽
l 語法：
<a href=https://www.cnblogs.com/MiKihuahua/p/””>內容
l href：鏈接地址，可以是內部鏈接外部鏈接
l 內部（站內）鏈接：同一網站的不同內容，一般相對路徑
l 外部（站外）鏈接：從當前跳轉到其他網站，一般使用絕對路徑
l 空鏈接：<a href=https://www.cnblogs.com/MiKihuahua/p/””>內容
（當鏈接為空時，點擊超鏈接會重繪頁面）
l 回到最頂部：<a href=https://www.cnblogs.com/MiKihuahua/p/”#”>內容
5.超鏈接屬性
（默認打開方式：當前視窗打開新的視窗，覆寫原來的）
l href：鏈接地址
l target：鏈接的目標視窗
- _self-當前視窗打開新頁面
- _blank-創建新的視窗打開新頁面
- _parent-在父框架集中打開被鏈接檔案
- _top-在整個視窗中打開被鏈接檔案（在框架中打開）
l title：鏈接提示文字
（用title屬性規定關于元素的額外資訊，資訊通常在滑鼠移動到元素上方時出現提示文字，title屬性通常和a和form屬性一同使用，以提供鏈接目標和輸入格式的資訊，同時也是abbr元素和acronym元素的必需屬性）
l name：鏈接命名
（a標簽中HTML5不支持該屬性）
6.錨鏈接（書簽）（同一頁面）
(超鏈接的錨功能:創建目錄，點擊目錄跳轉到相應的內容上)
l 錨是實作在單個頁面內不同位置的跳轉
l 用name屬性定義錨的名字
l 定義錨：（目錄是網頁顯示的錨的名字）
<a href=https://www.cnblogs.com/MiKihuahua/p/“#錨名1”>目錄1 //設定尋找錨的鏈接
<a href=https://www.cnblogs.com/MiKihuahua/p/“#錨名2”>目錄2
<a href=https://www.cnblogs.com/MiKihuahua/p/“...” name=”錨名1”>內容 //定義錨跳轉的起始點位置和錨名
XXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXX
<a href=https://www.cnblogs.com/MiKihuahua/p/“...” name=”錨名2”>內容
XXXXXXXXXXXXXXXXXXXXX
7.為什么不將圖片包含也能跳轉到圖片的位置
不知道
錨的定義a標簽不一定有具體的內容，只是作為一個定位的功能
8. 錨鏈接（不同頁面）
l 定義錨（不同頁面）：
網頁1：<a href=https://www.cnblogs.com/MiKihuahua/p/”網頁名稱#錨名”>……
網頁2：<a name=”錨名”>……</a>
l Eg: <a href="https://www.cnblogs.com/MiKihuahua/p/html2.html#js2" ><h2>javascript進階課程</h2></a>
<a name=”js2”></a><img…/>
9.郵件鏈接
電子郵件鏈接：<a href=mailto:郵箱地址>……</a>
檔案下載：<a href=https://www.cnblogs.com/MiKihuahua/p/”下載檔案的地址”>…
（下載檔案要壓縮，直接寫下載的檔案名，會打開檔案）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60248.html
標籤：Html/Css
下一篇：CSS核心概念之盒子模型