# HTML 入門
# 復習
1. 上網原理: 本質是數據傳輸! 每個網址對應一個具體文件,根據網址URL,響應資源(html.css,js,圖片)等到用戶本地,瀏覽器解析
2. 存文本: 只有內容無樣式!! 無語義!
3. HTML: 超文本標記語言!
4. 標簽
```
<h1><h1> 標題語意, h是 headline標題的縮寫
<p></p> p 是paragraph 段落的意思
HTML中除了語義，其他什么都沒有：沒有樣式、沒有交互、沒有行為。
所以HTML不能讓文本居中、字號調整、顏色改變、字體……
````
# 目標
*編號為本節重難點*
- 常見標簽(h,p,img,a,hr,div,span,文本小標簽,注釋和特殊字符,ol,ul,dl)
# 基本環境
> 一些基本的電腦常識需要了解! 文件后綴名,瀏覽器等
這里還是要重復下上章節的內容!簡單了解下電腦基礎知識
- 不同文件有不同后綴: *.jpg 圖片 *.mp3 網頁 *.txt 文本
- 網頁 *.html
- 默認文件后綴名不顯示,需要手動設置顯示
雙擊我的電腦-- 工具---文件夾選項--- 查看---去掉勾選"隱藏已知文件擴展名"
- 瀏覽器
瀏覽網頁的軟件叫"瀏覽器", 常用瀏覽器有很多,有自己獨立核心技術"內核"的瀏覽器有如下幾個,其余都是盜版!
| 瀏覽器 | 簡介 |
| --- | --- |
| IE | 微軟,用戶量最大 |
| FireFox | 火狐, 最專業 |
| Google & Safari |谷歌和蘋果, 最炫 都是 webkit內核 |
| Opera | 歐朋, 最小巧,歐美常用 |
# 第一個網頁
> 網頁本質上是文本文檔! 以下步驟可以快速建立第一給自己的網頁!
1. 新建一個txt文件：
2. 改后綴名為*.html
3. 輸入內容,保存用瀏覽器打開
也就是說，html本質上和txt沒有任何區別，他們都是純文本文件。
我們強行把這個文件的拓展名，從txt更改為html，我們會發現小圖標就變成瀏覽器的小圖標了：
在“打開方式”中，用記事本可以編輯它。
現在要養成 `編輯器里面編輯 → 保存ctrl+s → 瀏覽器里面刷新F5` 的習慣。
# 使用標簽為網頁添加效果
> 以上3步可快速建立一個最簡單網頁! 本質上是一個文本! 如何為網頁添加特殊效果呢?
接了下我們為網頁添加一對特殊格式的字符
```
我的第一個網頁
<h1>靜夜思</h1>
```
保存,瀏覽,可發現"靜夜思" 標題別加粗放大! 這就是一個標題!
總結:
> h1就標識"靜夜思"為標題!
在網頁中這種成對存在的特殊符號叫"標簽/標記"
基本語法: <起始標簽>內容</結束標簽>
標簽一般成對存在,必須閉合! / 標示閉合符號
網頁中正因為添加了各種標簽才擁有了豐富的效果! 所以網頁全稱"超文本標簽語言"
Hyper Text Markup Langulare
超級 文本 標記 語言
>
# 制作一個標準網頁 [傻傻的才記憶]
> 以上我們制作的是一個最簡單的網頁,一個標準網頁結構如下:
## 標準結構
```
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3<head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6</head>
7<body>
8
9</body>
10</html>
```
我們詳細講解!
## 文檔聲明頭
第一行 就是文檔聲明頭，DocType Declaration。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
到底有哪些規范呢？
首先我們先確定一件事兒，我們`現在學習的是HTML4.01`這個版本，這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰，所以這幾年網頁還是應該用HTML4.01來制作。后面將知道手機、移動端的網頁，就可以使用HTML5了。
HTML4.01里面有兩大種規范，每大種規范里面又各有3種小規范。所以一共6種規范（見下面）：
HTML4.01里面規定了普通、XHTML兩大種規范。
HTML覺得自己有一些規定不嚴謹，比如，標簽是否可以用大寫字母呢？
```
<H1></H1>
```
所以，HTML就覺得，把一些規范嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示“嚴格的”。
總結一下，一共有6種DTD，說白了，HTML第一行語句一共有6種：
strict表示“嚴格的”，這種模式里面的要求更為嚴格。這種嚴格體現在哪里？有一些標簽不能使用。
比如，u標簽，就是可以讓一個本文加上下劃線，但是這和HTML的本質有沖突，因為HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。所以，在strict中是不能使用u標簽的。
1 <u>嘻嘻嘻嘻嘻</u>
怎么給文本增加下劃線呢？今后的css將使用css屬性來解決。
Transitional表示“普通的”，這種模式就是沒有一些別的規范。
Frameset表示“框架”，在框架的頁面使用
## 字符集
> 字庫規模 : urf-8 > gbk(只有漢字)
```
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
```
字符集用meta標簽定義，meta表示“元”。“元”配置，就是表示基本的配置項目。
charset就是charactor set“字符集”的意思。這個meta不用背，誰背誰傻，自動生成的。
中文能夠使用的字符集兩種：
```
第一種：UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
第二種：gb2312
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
也可以寫成gbk
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
```
什么是字符集？活字印刷術，所有的漢字都有一個個小印章，需要哪個字，就取哪個字。
但是，有兩個人都發明了字庫。老王發明了一個，老李也發明了一個。
比如同一個漢字，“傳”字在老王的字庫里面是第2個大盤子第4行第43列的。
而這個漢字“傳”在老李的字庫里面是第5個大盤子第6行第13列的。
計算機，不能直接存儲漢字，而是存儲的是編碼，所以，計算機記錄“傳”這個字，就是這么記錄的：
老王:20443
老李:50613
> 有兩個字庫UTF-8和gb2312。
UTF-8是國際通用字庫，里面涵蓋了所有地球上所有人類的語言文字，
比如阿拉伯文、漢語、鳥語……
gb2312 是國標，是中國的字庫，里面僅涵蓋了漢字和一些常用外文，
比如日文片假名，和常見的符號。
`字庫規模： UTF-8（字全） > gb2312（只有漢字）`
我們用meta標簽可以聲明當前這個html文檔的字庫，但是一定要和保存的類型一樣，否則亂碼！（重點）
當我們不設置的時候，sublime默認類型就是UTF-8。而一旦更改為gb2312的時候，就一定要記得設置一下sublime的保存類型： 文件→ set File Encoding to → Chinese Simplified(GBK)
注意，由于UTF-8里面保存了世界上所有人類語言，所以描述一個漢字需要的碼更多。
UTF-8里面存儲一個漢字3個字節。而gb2312中存儲一個漢字2個字節。
`保存大小： UTF-8（更臃腫、加載更慢） > gb2312 （更小巧，加載更快）`
列出2個使用情形：
1） 你們公司是做日本動漫的，經常出現一些日語動漫的名字，網頁要使用UTF-8。如果用gb2312將無法顯示日語。
2） 你們公司就是中文網頁，極度的追求網頁的顯示速度，要使用gb2312。如果使用UTF-8將每個漢字多一個byte，所以5000個漢字，多5kb。
我們親測：
● qq網、網易、搜狐都是使用gb2312。這些公司，都追求顯示速度。
● 新華網藏語頻道，使用的是UTF-8，保證字符集的數量。
我們的課程，一律使用UTF-8，因為我們懶，懶得改了。
瀏覽器就是通過meta來看你是什么字符集的，比如你保存的時候meta寫的，和聲明的不匹配，那么瀏覽器就是亂碼。
## 關鍵字和頁面描述
> meta除了可以設置字符集，還可以設置關鍵字和頁面描述。,有利于SEO優化
```
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
```
只要設置的Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO，search engine optimization，搜索引擎優化。
抽象一下：
```
<meta name=”” content=”” />
```
name就是“名字”的意思，content是“內容”的意思。
也就是說，我們定義了一個名字是“Description”（描述）的meta。內容是網易是中國領先……
定義關鍵詞：
```
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
```
這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。
Keywords就是“關鍵詞”的意思。
## title
> 網頁標題
```
<title>愛奇藝-全球領先的在線視頻網站-海量正版高清視頻在線觀看</title>
```
title也是有助于SEO搜索引擎優化的：
## body
用戶可見的內容都必須寫在body中
總結:
網頁的head標簽里面，表示的是頁面的配置，有什么配置？
字符集、關鍵詞、頁面描述、頁面標題。
今后我還能看見一些配置：IE適配、視口、iPhone小圖標等等……
## 補充:網站小圖標
> head 中也可以加入網站小圖標
```
<link rel="shortcut icon" href="圖標.ico">
```
# 常用標簽簡介
> 常用標簽: 標題,段落,水平線,換行,圖片
## . 標題系列
` h1-h6` 是 headline標題的縮寫
````
<h1>靜夜思</h1>
<h2>靜夜思</h2>
<h3>靜夜思</h3>
<h4>靜夜思</h4>
<h5>靜夜思</h5>
<h6>靜夜思</h6>
````
效果如圖: h1-h6,標題標簽,字體加粗放大,逐漸變小
## 段落 `p `
p是`paragraph` 段落的縮寫段落會自動換行
```
HTML標簽是分等級的，HTML將所有的標簽分為兩種：容器級、文本級。
顧名思義，容器級的標簽，里面可以放置任何東西；文本級的標簽里面，
只能放置文字、圖片、表單元素。
````
p標簽是一個文本級標簽。從學習p的第一天開始，就要死死記住：p里面只能放文字、圖片、表單元素。其他的一律不能放。
Chrome瀏覽器 是世界上HTML5支持最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。
Chrome的英語原意“硅”，是谷歌公司的產品
審查元素功能：
試著把h放到p到里：
```
<p>
我是一個小段落
<h1>我是一個主標題</h1>
</p>
```
瀏覽器不允許你這么做，我們使用Chrome的F12審查，你會發現，瀏覽器自己把p封閉掉了，不讓你去包裹h1。
`所以，再次強調，p是一個文本級的標簽，p里面只能放文字、圖片、表單元素。`
```
正確的：
<h3>個人經歷</h3>
<p>
我是一個主標題
</p>
````
## 水平線
```
<hr>
```
## 換行
````
<br/>
````
## 塊
表示頁面中一個區域,稍后可添加寬高!
```
<div>內容</div>
```
## 行標簽
表示一行中的一個或一部分,用戶為一行中特定部分添加效果!
```
<span>內容</span>
```
## 注釋和特殊符號
注釋:
```
<!--- 要注釋的內容 -->
```
特殊符號/實體
| 符號 | 介紹 |
| --- | --- |
| &ngbsp; | 空格 |
| > | 大于號 |
| < | 小于號 |
| " | 引號 |
| © | 版權@符號 |
| ® | 注冊商標 |
## 圖片
> 網頁中能用的圖片類型: jpg/jpeg, gif, png,bmp, 類型之間區別css課程會講解! 不能插入的圖片類型 *.psd, ai
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上,語法:
- 語法
```
<img src="圖片路徑" alt="錯誤提示" >
```
img 是英文`image` 圖片的簡寫
src 是應為`source` 資源的簡寫, 千萬那別寫成 scr
src是 img標簽的屬性, 雙引號中是屬性的值!
這個標簽和我們之前學的，都不一樣，因為這個標簽不是“對兒”。自封閉標簽，也稱為單標簽。
為什么？原因很簡單，如果是對兒，里面就要有內容，表示給這個內容增加語義。比如
```
<h1>哈哈哈哈，我是主標題啦！！！</h1>
```
圖片就是一個圖片，不需要給什么文字增加語義，所以就是自己一個人活得挺好!
- alt 屬性
alt是英語alternate“替代”的意思，就表示不管因為什么原因，當這個圖片無法被顯示的時候，出現的替代文字。
- 相對路徑
HTML中插入圖片，所以現在有兩個文件，一個html文件，一個是jpg文件。
我們關心的就是這兩個文件的相對位置。即使這個網站項目，被用u盤拷給了別人，只要相對路徑不變。圖片一定能夠正常顯示。
當圖片在文件夾里面的時候
```
<img src="images/baby.jpg" alt="巴黎結婚照" />
```
如果在很深的文件夾中，也不怕，可以一直羅列下去：
```
<img src="images/jiehunzhao/baby.jpg" alt="巴黎結婚照" />
```
如果情況變得復雜，我們的圖片在淺一層的文件夾中：
```
<img src="../3.jpg" alt="" />
../ 標示上層目錄
```
如果是上兩級：
```
<img src="../../3.jpg" alt=""
```
相對路徑不會出現這種情況：
```
aaa/../bbb/1.jpg
../要么不寫，要么就寫在開頭。
```
```
標準答案：
<img src="../../photo/1.png" />
```
解釋:
現在document是最大的文件夾，里面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾里面有index.html。 所以index.html在myweb文件夾里面，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當做一個中轉站，進入photo文件夾，看到了1.png。
表示一個區域!
## 超連接
>一個網站，是由很多html網頁組成的，html網頁之間能夠通過超級鏈接互相跳轉，從而形成了“網”。
```
<a href="頁面地址" title='標題' target='目標打開位置'>圖片或/文字</a>
<a href="1.html">結婚照</a>
```
效果圖,字體顏色變色,自動添加下劃線,鼠標滑過變小手
a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。
href是英語hypertext reference超文本地址的縮寫。讀作“喝瑞夫”，不要讀作“喝夫”。
- 屬性 title
```
title是懸停文本,相當于圖片標題
<a href="09_img.html" title="很好看哦">結婚照</a>
```
- 屬性 target
```
target 是否在新窗口中打開
target實際上是“目標”的意思。
blank就是“空白”的意思，就表示新建一個空白窗口。為毛有一個_ ，就是規定，沒啥好解釋的。
<a href="09_img.html" title="很好看哦" target="_blank/_self">結婚照</a>
```
也就是說，如果不寫target=”_blank”或 "_self "那么就是在當前窗口打開，如果寫了，就是在新的空白標簽頁中打開。
清楚img和a標簽的各自的屬性：
```
<img src="1.jpg" />
<a href="1.html"></a>
```
- 網頁內的錨點
頁面當中可以有錨點，所謂的錨點，就是一個小標記，這個小標記是用戶不可察覺的，用戶不知道這里有一個標記。 相當于頁面之間定位!!!網頁太長時用!
錨點用name屬性來設置，一個a標簽如果name屬性（或者id屬性），那么就是頁面的一個錨點。
```
<a name="錨點名">我的作品</a>
或者：
<a id="錨點名">我的作品</a>
使用:
網頁名#錨點名
```
如果有一個超級鏈接，指向頁面中的錨點，那么就是：
```
<a href="#wdzp">點擊我就查看我的作品</a>
```
- a 是一個文本級標簽
比如一個段落中的所有文字都能夠被點擊，那么應該：
```
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
```
a的語義要小于p，a就是可以當做文本來處理，所以p里面相當于放的就是純文字。
## 有序列表
## 無序列表
## 自定義列表
# 如何豐富標簽效果?
> 標簽的核心是搭建網頁結構 "語義化"內容, 無豐富的效果! 真實網站效果是非常豐富的!我們通過屬性或 樣式 關鍵字來控制表情的效果!
## 屬性概念
屬性概念源于生活! 生活物體(學名叫對象),的名詞或形容詞的描述叫"對象"
比如: 人: 姓名,性別,年齡, 生日,身高,體重等....
網頁編程時,每個標簽都可以當初一個物體.也有自己的屬性!
比如: 圖片: 寬 width,高 height ,字體顏色:,字體大小等
## 屬性語法
```
<起始標簽 屬性1="值1" 屬性2="值2" ...></結束標簽>
不同屬性之間通過空格隔開, 屬性值用""引起來
```
案例:
```
圖片控制寬高
<img src="路徑" width="100px" height="100%"/>
div控制寬高
<div width="100px" height="200px"></div>
<h1 align="left/center/right">靜夜色</h1>
`````
注意: 屬性控制的樣式是有限的,能力的方式是使用 樣式關鍵字: style (風格/樣式)
```
就不起作用!
<h1 color="red">靜夜思</h1>
```
## style關鍵字
屬性寫在style關鍵字中! 屬性和值之間用 冒號隔開,
多個之間用分號隔開! 這個是萬能的!后期工作寫法略微變化!
```
<起始標簽 style="屬性1:值1;屬性2:值2;..."></結束標簽>
```
案例:
```
<div style="width:100px;height:100px;background-color:red;">快1</div>
// margin:0 auto; div居中
<div style="width:100px;height:100px;background-color:red; margin: 0 auto;">快2</div>
//字體居中
<div style="width:100px;height:100px;background-color:red; text-align:center">快2</div>
<img style="width:100px;height:100px"/>
//行標簽 字形,大小,粗細
歡迎
<span style="color:red;font-size:30px;font-family:'宋體';font-width:'bold';">
張局長</span> 來視察
```
## 標簽常用屬性
以下是常用的屬性,可以完成我們網頁80%的工作流 ,可先記住
| 常用屬性 | 說明 |
| --- | --- |
| width | 寬度 單位 %或px |
| height | 高度 |
| border | 邊框 broder:1px solid red |
| color | 字體顏色 |
| background-color | 背景顏色 |
| font-size | 字體大小 |
| align/text-align/margin:0 auto; | 居中屬性 |
| float | 浮動 |
# 編程規范
1. HTML內容結構要求符合語義化
1. 標簽必須被正確地嵌套。
2. 標簽必須被關閉。
3. 標簽名必須用小寫字母。
4. 屬性值必須用引號擴起來
5. 要注意縮進,提高可度性
# 總結:
1. 基本環境
2. 標簽能為頁面添加效果
3. 常用標簽
4. 屬性和style控制外觀
5. 常用屬性
6. 規范
難點: 標簽,為表情添加樣式
