來源：許晨先生 發(fā)布時間：2018-11-22 14:09:49 閱讀量：1498
學習目標:
了解常用瀏覽器
掌握WEB標準
理解標簽語義化
掌握常用的排版標簽
掌握常用的文本格式化圖像鏈接等標簽
掌握三種列表標簽
掌握表格標簽
掌握表格標簽
HTML 第一天目標
能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片、各種標簽和鏈接）
開發(fā)工具
我們主要用的 開發(fā)工具有 chrome 、 sublime 、 photoshop
瀏覽器（顯示）
瀏覽器是網(wǎng)頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、
谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。
1
2
編輯工具
普通青年 Dreamweaver
文藝青年 sublime
高手和傻子 用記事本
photo協(xié)助工具
PS 工具是我們使用頻率比較高的軟件之一， 我們學習PS目的不是為了設計海報做電商和UI的，而是要求：
熟練的切圖
能和網(wǎng)站美工美眉有共同話題。。。。。
常見瀏覽器內(nèi)核介紹
瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計
算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，
所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執(zhí)行 javascript語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引
擎。有一個網(wǎng)頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內(nèi)核的種類很多，如加上
沒什么人使用的非商業(yè)的免費內(nèi)核，可能會有10多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident、
Gecko、Blink、Webkit。
1
2
3
4
5
6
7
8
9
10
移動端的不同
移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機而言，使用率最高的就是Webkit內(nèi)核，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。
iOS以及WP7平臺上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的。
# Web標準（重點）
通過以上瀏覽器的內(nèi)核不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別
Web 標準的好處
1、讓Web的發(fā)展前景更廣闊 2、內(nèi)容能被更廣泛的設備訪問 3、更容易被搜尋引擎搜索 4、降低網(wǎng)站流量費用 5、使網(wǎng)站更易于維護 6、提高頁面瀏覽速度
Web 標準構成
Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。
主要包括結構（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個方面。
結構標準：結構用于對網(wǎng)頁元素進行整理和分類，咱們主要學的是HTML。最重要
表現(xiàn)標準：表現(xiàn)用于設置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網(wǎng)頁模型的定義及交互的編寫，咱們主要學的是 Javascript
1
2
3
理想狀態(tài)我們的源碼： .HTML .css .js
總結WEB標準
結構標準：決定你是否有個好天然身體
表現(xiàn)標準：決定你是否打扮的美麗外觀
行為標準：決定你是否有吸引人的行為
HTML 初識
一般先學習HTML+CSS， 這里我們先定一個小目標，先學HTML,后學習CSS。
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”。是用來描述網(wǎng)頁的一種語言。
所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體等內(nèi)容，不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機的文件連接。
總結： HTML 作用就是用標記標簽來描述網(wǎng)頁，把網(wǎng)頁內(nèi)容在瀏覽器中展示出來。
1
2
書寫我們的第一個HTML 頁面！
1 HTML標簽：
作用所有HTML中標簽的一個根節(jié)點。 最大的標簽 根標簽
2 head標簽： 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。
絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
注意在head標簽中我們必須要設置的標簽是title
3.title標簽： 文檔的標題
作用：讓頁面擁有一個屬于自己的標題。
4.body標簽：文檔的主體 以后我們的頁面內(nèi)容 基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等。）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
HTML標簽分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <HTML>、<head>、<body>都是HTML骨架結構標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素。
1.雙標簽
html
<標簽名> 內(nèi)容
HTML標簽關系
標簽的相互關系就分為兩種：
1.嵌套關系
<head> <title> </title> </head>
1
2.并列關系
<head></head>
<body></body>
1
2
倡議： 如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位。如果是并列關系，最好上下對齊。
文檔類型
<!DOCTYPE html>
同學你用啥手機？你咋回答？
這句話就是告訴我們使用哪個html版本？ 我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。
標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規(guī)范，必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。
注意： 一些老網(wǎng)站可能用的還是老版本的文檔類型比如 XHTML之類的，但是我們學的是HTML5,而且HTML5的文檔類型兼容很好(向下兼容的原則)，所以大家放心的使用HTML5的文檔類型就好了。
字符集
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。
gb2312 簡單中文 包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK包含全部中文字符 是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則包含全世界所有國家需要用到的字符
記住一點，以后我們統(tǒng)統(tǒng)使用UTF-8 字符集, 這樣就避免出現(xiàn)字符集不統(tǒng)一而引起亂碼的情況了。
1
HTML標簽的語義化
白話： 所謂標簽語義化，就是指標簽的含義。
為什么要有語義化標簽
方便代碼的閱讀和維護
同時讓瀏覽器或是網(wǎng)絡爬蟲可以很好地解析，從而更好分析其中的內(nèi)容
使用語義化標簽會具有更好地搜索引擎優(yōu)化
核心：合適的地方給一個最為合理的標簽。
語義是否良好： 當我們?nèi)サ鬋SS之后，網(wǎng)頁結構依然組織有序，并且有良好的可讀性。
白話，一眼看去，就知道那個是重點，結構是什么，知道每塊的內(nèi)容是干啥的。
遵循的原則：先確定語義的HTML ，再選合適的CSS。
HTML常用標簽
首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了。 不會再給結構標簽指定樣式了。
HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。
排版標簽
排版標簽主要和css搭配使用，顯示網(wǎng)頁結構的標簽，是網(wǎng)頁布局最常用的標簽。
標題標簽 (熟記)
單詞縮寫： head 頭部. 標題 title 文檔標題
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
段落標簽( 熟記)
單詞縮寫： paragraph 段落 [?p?r?gr?f] 無須記這個單詞
在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標簽就是
<p> 文本內(nèi)容 </p>
是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
水平線標簽(認識)
單詞縮寫： horizontal 橫線 [?h?r??zɑntl] 同上
在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標簽來完成，
就是創(chuàng)建橫跨網(wǎng)頁水平線的標簽。其基本語法格式如下：
<hr />是單標簽，hr后面寫上一個空格。
1
在網(wǎng)頁中顯示默認樣式的水平線。
練習： 新聞頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>40.6攝氏度：上海創(chuàng)出140年氣象史上高溫新紀錄</h1>
2020年07月27日
<p>10:58:26來源：新華網(wǎng)</p>
<hr />
<p>
新華網(wǎng)上海７月２６日電（記者李榮）２６日１３時３６分至４７分這一時間段，上海徐家匯氣象觀測站測得當日最高溫達４０．６攝氏度。這是上海有氣象記錄以來１４０年的高溫新紀錄，打破了此前１９３４年創(chuàng)下的４０．２攝氏度的歷史極值。</p>
<p>上海已經(jīng)連續(xù)２天發(fā)出了最高等級的紅色高溫警報。上海中心氣象臺首席服務官滿莉萍說，今年副熱帶高壓強度特別強，對上海及江南地區(qū)的控制“實在太穩(wěn)定了”，整個７月份基本上都處在它的勢力范圍之內(nèi)。２５日上海已出現(xiàn)了氣象史上７月份“第四高”的高溫值，這使得２６日的“基礎”氣溫就很高，超過了３０攝氏度，然后不斷地升溫。此外，２６日白天風小，又吹的是西南風，特別是在中午之后這一個最易出現(xiàn)高溫的時段，光照又比較強，所以氣溫“直線飆升”，一舉沖破歷史極值，出現(xiàn)了“創(chuàng)紀錄”的極端酷暑天。</p>
<p>在上海歷史上，出現(xiàn)４０攝氏度以上極端高溫的幾率并不大。根據(jù)相關資料，中心城區(qū)徐家匯觀測站 １４０年來僅出現(xiàn)了５次記錄，除了這一次的新紀錄，還有就是１９３４年７月１２日的４０．２攝氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０攝氏度。</p>
<p>由于氣溫實在太高，上海２６日下午不少地區(qū)出現(xiàn)了熱對流天氣。氣象臺說，首先是浦東地區(qū)，下起了熱雷雨。到１５時０５分，全市大部分地區(qū)出現(xiàn)了分散性的雷電活動和熱雷雨，中心城區(qū)徐家匯等地都響起了隆隆的雷聲。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
換行標簽(熟記)
單詞縮寫： break 打斷 ,換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽
<br />
1
div span標簽(重點)
div span 是沒有語義的 是我們網(wǎng)頁布局主要的2個盒子 css+div
div 就是 division 的縮寫 分割， 分區(qū)的意思 其實有很多div 來組合網(wǎng)頁。
div可以獨占一行，span一行可以存在多個。
span, 跨度，跨距；范圍
語法：<div> 這是頭部 </div> <span>今日價格</span>
文本格式化標簽(熟記)
在網(wǎng)頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調(diào)的意思 strong em del ins 語義更強烈
圖像標簽img (重點)
單詞縮寫： image 圖像
HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽，要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽以及和他相關的屬性。其基本語法格式如下：
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
<img src="圖像URL" />
1
鏈接標簽(重點)
單詞縮寫： anchor 的縮寫 [???k?(r)] ?；窘忉?錨, 鐵錨 的
在HTML中創(chuàng)建超鏈接非常簡單，只需用標簽環(huán)繞需要被鏈接的對象即可，其基本語法格式如下：
<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>
1
href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，_blank為在新窗口中打開方式。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內(nèi)部鏈接 直接鏈接內(nèi)部頁面名稱即可 比如 < a href=”index.html”> 首頁
3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href=”#”)，表示該鏈接暫時為一個空鏈接。
4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
錨點定位 （難點）
通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。
創(chuàng)建錨點鏈接分為兩步：
~~~html
1.使用“a href=”#id名>“鏈接文本”創(chuàng)建鏈接文本（被點擊的）
2.使用相應的id名標注跳轉(zhuǎn)目標的位置。
<h3 id=”two”>第2集</h3>
~~~
base 標簽 基本的
base 可以設置整體鏈接的打開狀態(tài)
base 寫到 <head> </head> 之間
把所有的連接 都默認添加 target=”_blank”。
<base target="_blank" />
1
特殊字符標簽 （理解）
注釋標簽
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：
<!-- 注釋語句 --> ctrl + / 或者 ctrl +shift + /
1
多寫注釋是很好的寫代碼習慣，團隊協(xié)作更加順暢。
注釋是寫給隊友看的，瀏覽器是不執(zhí)行的。
路徑(重點、難點)
實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
路徑可以分為： 相對路徑和絕對路徑
相對路徑
以引用文件之網(wǎng)頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網(wǎng)頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。
圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src=”logo.gif” />。
圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src=”img/img01/logo.gif” />。
圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如<img src=”../logo.gif” />。
絕對路徑
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的。絕對路徑很少使用。
“D:\web\img\logo.gif”，或完整的網(wǎng)絡地址，例如“http://www.itcast.cn/images/logo.gif”。
列表標簽
什么是列表？
把…制成表,以表顯示
容器里面裝載著文字或圖表的一種形式，叫列表。
列表最大的特點就是 整齊 、整潔、 有序
無序列表 ul （重點）
無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
1
2
3
4
5
6
比如下面這些，新聞是沒有順序的，不用排隊，先到先得，后發(fā)布先顯示。
手下留心：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
2. <li>與</li>之間相當于一個容器，可以容納所有元素。
3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！
1
2
3
有序列表 ol （了解）
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ol>
1
2
3
4
5
6
所有特性基本與ul 一致。
但是實際工作中， 較少用
## 自定義列表（理解）
定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：
html
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
自定義列表應用比較廣泛。
表格 table(會使用)
存在即是合理的。 表格的現(xiàn)在還是較為常用的一種標簽，但不是用來布局，常見處理、顯示表格式數(shù)據(jù)。
ps: 這些地方用表格，你會覺得生活還是那么美好。。。。
創(chuàng)建表格
在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關的標簽。創(chuàng)建表格的基本語法格式如下：
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
1
2
3
4
5
6
7
在上面的語法中包含三對HTML標簽，分別為 <table>
~~~
1.table用于定義一個表格。
2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。
3.td /td：用于定義表格中的單元格，必須嵌套在標簽中，一對 中包含幾對，就表示該行中有多少列（或多少個單元格）。
~~~
注意：
1. <tr></tr>中只能嵌套<td></td>
1
2. <td></td>標簽，他就像一個容器，可以容納所有的元素
1
表格屬性
約定習慣:三參為0 border cellpadding cellspacing 為 0
表頭標簽
表頭單元格一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽<th>
表格結構（了解）
在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體 如下所示：
<thead></thead>：用于定義表格的頭部。
必須位于<table></table> 標簽中，一般包含網(wǎng)頁的logo和導航等頭部信息。
<tbody></tbody>：用于定義表格的主體。
位于<table></table>標簽中，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。
1
2
3
4
5
6
7
8
9
10
表格標題
表格的標題： caption
定義和用法
caption 元素定義表格標題。
<table>
<caption>我是表格標題</caption>
</table>
1
2
3
caption 標簽必須緊隨 table 標簽之后。
只存在 表格里面
您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
---------------------
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
