WEB标准认识HTMLHTML常用标签
typora-copy-images-to: media
第01階段.web基礎(chǔ)：html-day01筆記-01-前言&WEB標(biāo)準(zhǔn)&認(rèn)識(shí)HTML&HTML常用標(biāo)簽
一、前言
1. 基礎(chǔ)班學(xué)習(xí)目標(biāo)
目標(biāo)： 能根據(jù)psd文件（psd文件，其實(shí)就是一張類(lèi)似于圖片的格式，這個(gè)呢是用ps做的，也就叫做源文件）， 用HTML+CSS 布局出符合W3C規(guī)范的網(wǎng)頁(yè)（也就是說(shuō)，我們寫(xiě)的代碼，要符合標(biāo)準(zhǔn)）。
簡(jiǎn)單的說(shuō)，能根據(jù)美工給的圖，轉(zhuǎn)換成我們要的網(wǎng)頁(yè)代碼。
品優(yōu)購(gòu)項(xiàng)目：
網(wǎng)站首頁(yè)
網(wǎng)站首頁(yè)、列表頁(yè)、詳情頁(yè)、登錄頁(yè)、 注冊(cè)頁(yè)等等。。。。
2. 基礎(chǔ)班課程安排
HTML 第一天目標(biāo)
能夠?qū)懗龌镜膆tml頁(yè)面（里面包含圖片、鏈接、文字等網(wǎng)頁(yè)元素標(biāo)簽）
二、認(rèn)識(shí)WEB和WEB標(biāo)準(zhǔn)
1. 認(rèn)識(shí)網(wǎng)頁(yè)
網(wǎng)頁(yè)主要由文字、圖像和超鏈接等元素構(gòu)成。當(dāng)然，除了這些元素，網(wǎng)頁(yè)中還可以包含音頻、視頻以及Flash等。<img src=“media/mi.png"alt=”">
思考：
網(wǎng)頁(yè)是如何形成的呢?
總結(jié)
網(wǎng)頁(yè)有圖片、鏈接、文字等元素組成，我們后面的任務(wù)就是要把這部分網(wǎng)頁(yè)元素用代碼寫(xiě)出來(lái)。。。
2. 瀏覽器（顯示代碼）
瀏覽器是網(wǎng)頁(yè)顯示、運(yùn)行的平臺(tái)，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時(shí)稱(chēng)為五大瀏覽器。可能你最熟悉的是 IE瀏覽器，但是。。。
1) 查看瀏覽器占有的市場(chǎng)份額
查看網(wǎng)站： http://tongji.baidu.com/data/browser
2008年，大名鼎鼎的互聯(lián)網(wǎng)巨頭Google公司發(fā)布了它的首款瀏覽器Chrome瀏覽器。
跟王思聰一樣，沒(méi)辦法，生下來(lái)人家就是富二代官二代啊，后臺(tái)太強(qiáng)，而且確實(shí)先天能力得天獨(dú)厚。
2) 常見(jiàn)瀏覽器內(nèi)核（了解）
首先解釋一下瀏覽器內(nèi)核是什么東西。英文叫做：Rendering Engine，中文翻譯很多，排版引擎、解釋引擎、渲染引擎，現(xiàn)在流行稱(chēng)為瀏覽器內(nèi)核.
負(fù)責(zé)讀取網(wǎng)頁(yè)內(nèi)容，整理訊息，計(jì)算網(wǎng)頁(yè)的顯示方式并顯示頁(yè)面.因?yàn)闉g覽器太多啦， 但是現(xiàn)在主要流行的就是下面幾個(gè)：
| IE | Trident | IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| firefox | Gecko | 可惜這幾年已經(jīng)沒(méi)落了，打開(kāi)速度慢、升級(jí)頻繁、豬一樣的隊(duì)友flash、神一樣的對(duì)手chrome。 |
| Safari | webkit | 現(xiàn)在很多人錯(cuò)誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋(píng)果感覺(jué)像被別人搶了媳婦，都哭暈再廁所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 項(xiàng)目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。Blink 其實(shí)是 WebKit 的分支。大部分國(guó)產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開(kāi)發(fā) |
| Opera | blink | 現(xiàn)在跟隨chrome用blink內(nèi)核。 |
拓展閱讀：
移動(dòng)端的瀏覽器內(nèi)核主要說(shuō)的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，大部分國(guó)產(chǎn)瀏覽器宣稱(chēng)的自己的內(nèi)核，基本上也是屬于webkit二次開(kāi)發(fā)。iOS以及WP7平臺(tái)上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的3. Web標(biāo)準(zhǔn)（重點(diǎn)）
目標(biāo)
- 記憶
- 能說(shuō)出網(wǎng)頁(yè) 中 web 標(biāo)準(zhǔn)三層組成
- 理解
- 能結(jié)合人來(lái)表述web標(biāo)準(zhǔn)三層
Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是由W3C組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。
zW3C 萬(wàn)維網(wǎng)聯(lián)盟是國(guó)際最著名的標(biāo)準(zhǔn)化組織。1994年成立后，至今已發(fā)布近百項(xiàng)相關(guān)萬(wàn)維網(wǎng)的標(biāo)準(zhǔn)，對(duì)萬(wàn)維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。
w3c就類(lèi)似于現(xiàn)實(shí)世界中的聯(lián)合國(guó)。
1) 為什么要遵循WEB標(biāo)準(zhǔn)呢？
通過(guò)以上瀏覽器不同內(nèi)核不同，我們知道他們顯示頁(yè)面或者排版就有些許差異。
2) Web 標(biāo)準(zhǔn)的好處
遵循web標(biāo)準(zhǔn)可以讓不同我們寫(xiě)的頁(yè)面更標(biāo)準(zhǔn)更統(tǒng)一外，還有許多優(yōu)點(diǎn)
1、讓W(xué)eb的發(fā)展前景更廣闊
2、內(nèi)容能被更廣泛的設(shè)備訪問(wèn)
3、更容易被搜尋引擎搜索
4、降低網(wǎng)站流量費(fèi)用
5、使網(wǎng)站更易于維護(hù)
6、提高頁(yè)面瀏覽速度
3) Web 標(biāo)準(zhǔn)構(gòu)成
構(gòu)成： 主要包括結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個(gè)方面。
| 結(jié)構(gòu) | 結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi)，咱們主要學(xué)的是HTML。 | |
| 表現(xiàn) | 表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式，主要指的是CSS | |
| 行為 | 行為是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě)，咱們主要學(xué)的是 Javascript |
理想狀態(tài)我們的源碼： .HTML .css .js
結(jié)合人來(lái)記憶web標(biāo)準(zhǔn)：
-
結(jié)構(gòu)標(biāo)準(zhǔn)： 是你天然的身體
-
表現(xiàn)標(biāo)準(zhǔn)： 決定你是否打扮的美麗外觀(衣服？化妝？)
-
行為標(biāo)準(zhǔn)： 決定你是否有吸引人的行為(動(dòng)作)
web標(biāo)準(zhǔn)小結(jié)
- web標(biāo)準(zhǔn)有三層結(jié)構(gòu)，分別是結(jié)構(gòu)（html）、表現(xiàn)（css）和行為（javascript）
- 結(jié)構(gòu)類(lèi)似人的身體， 表現(xiàn)類(lèi)似人的著裝， 行為類(lèi)似人的行為動(dòng)作
- 理想狀態(tài)下，他們?nèi)龑佣际仟?dú)立的， 放到不同的文件里面
4. 拓展@
-
介紹一下你對(duì)瀏覽器內(nèi)核的理解？常見(jiàn)的瀏覽器內(nèi)核有哪些？
瀏覽器內(nèi)核包括兩部分，渲染引擎和js引擎。渲染引擎負(fù)責(zé)讀取網(wǎng)頁(yè)內(nèi)容，整理訊息，計(jì)算網(wǎng)頁(yè)的顯示方式并顯示頁(yè)面，js引擎是解析執(zhí)行js獲取網(wǎng)頁(yè)的動(dòng)態(tài)效果。 后來(lái) JS 引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
IE：Trident
firefox：Gecko
chrom、safari：webkit
Opera：Presto
Microsoft Edge：EdgeHTML深度閱讀：五大主流瀏覽器內(nèi)核的源起以及國(guó)內(nèi)各大瀏覽器內(nèi)核總結(jié)
三、認(rèn)識(shí)HTML
學(xué)習(xí)目標(biāo)
- 理解
- HTML的概念
- HTML標(biāo)簽的分類(lèi)
- HTML標(biāo)簽的關(guān)系
- HTML標(biāo)簽的語(yǔ)義化
- 應(yīng)用
- HTML骨架格式
- sublime基本使用
1. HTML 初識(shí)
- HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
- HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
pink老師 一句話(huà)說(shuō)出html作用:
網(wǎng)頁(yè)是由網(wǎng)頁(yè)元素組成的 ， 這些元素是利用html標(biāo)簽描述出來(lái)，然后通過(guò)瀏覽器解析，就可以顯示給用戶(hù)了。
所謂超文本，有2層含義：
門(mén)外漢眼中的效果頁(yè)面
我們要做的html頁(yè)面
html 總結(jié):
- html 是超文本標(biāo)記(標(biāo)簽)語(yǔ)言
- 我們學(xué)習(xí)html 主要學(xué)習(xí)html標(biāo)簽
- 我們用html標(biāo)簽描述網(wǎng)頁(yè)元素。 比如 圖片標(biāo)簽 、文字標(biāo)簽、鏈接標(biāo)簽等等
- 標(biāo)簽有自己的語(yǔ)法規(guī)范，所有的html標(biāo)簽都是用 <> 表示的
- H（很）T（甜）M（蜜）L（啦） 是很快樂(lè)的一件事情
1) HTML骨架標(biāo)簽
日常生活的書(shū)信，我們要遵循共同的約定。
同理：HTML 有自己的語(yǔ)言語(yǔ)法骨架格式：（要遵循，要專(zhuān)業(yè)） 要求務(wù)必非常流暢的默寫(xiě)下來(lái)。。
<html> <head> <title></title></head><body></body> </html>html骨架標(biāo)簽總結(jié)
| HTML標(biāo)簽 | 頁(yè)面中最大的標(biāo)簽，我們成為 根標(biāo)簽 | |
| 文檔的頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title | |
| 文檔的標(biāo)題 | 讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題 | |
| 文檔的主體 | 元素包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容 基本都是放到body里面的 |
**課堂練習(xí)1： **
書(shū)寫(xiě)我們的第一個(gè)HTML 頁(yè)面。
新建一個(gè) 01-html骨架標(biāo)簽 的 TXT 文件。
里面寫(xiě)入剛才的HTML 骨架。
把后綴名改為 .HTML。
右擊–谷歌瀏覽器打開(kāi)。
<html> <head> <title>我的第一個(gè)頁(yè)面</title></head><body>你我之間 黑馬洗練 月薪過(guò)萬(wàn) 一飛沖天 </body> </html>為了便于記憶，我們請(qǐng)出剛才要辭職回家養(yǎng)豬的二師兄來(lái)幫忙， 我稱(chēng)之為 豬八戒記憶法
團(tuán)隊(duì)約定大小寫(xiě)
HTML標(biāo)簽名、類(lèi)名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫(xiě)
推薦：
<head> <title>我的第一個(gè)頁(yè)面</title></head>不推薦：
<HEAD> <TITLE>我的第一個(gè)頁(yè)面</TITLE> </HEAD>2) HTML元素標(biāo)簽分類(lèi)
標(biāo)簽：
在HTML頁(yè)面中，帶有“< >”符號(hào)的元素被稱(chēng)為HTML標(biāo)簽，如上面提到的 <html>、<head>、<body>都是HTML骨架結(jié)構(gòu)標(biāo)簽。
分類(lèi)：
- 該語(yǔ)法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開(kāi)始，一般稱(chēng)為“開(kāi)始標(biāo)簽（start tag）”，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱(chēng)為“結(jié)束標(biāo)簽（end tag）”。
- 和開(kāi)始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個(gè)關(guān)閉符“/”。
- 我們以后接觸的基本都是雙標(biāo)簽
- 空元素 用單標(biāo)簽來(lái)表示， 簡(jiǎn)單點(diǎn)說(shuō)，就是里面不需要包含內(nèi)容， 只有一個(gè)開(kāi)始標(biāo)簽不需要關(guān)閉。
- 這種單身狗標(biāo)簽非常少，一共沒(méi)多少，我們多記憶就好
pink老師 一句話(huà)說(shuō)出他們:
世界上單身狗畢竟是少數(shù)的， 大部分還是喜歡成雙成對(duì)，不要拉下你的另外一半，對(duì)待一個(gè)雙標(biāo)簽要有始有終。
3) HTML標(biāo)簽關(guān)系
主要針對(duì)于雙標(biāo)簽 的相互關(guān)系分為兩種： 請(qǐng)大家務(wù)必熟悉記住這種標(biāo)簽關(guān)系，因?yàn)楹竺嫖覀儤?biāo)簽嵌套特別多，很容易弄混他們的關(guān)系。
2.并列關(guān)系
<head></head> <body></body>倡議：
如果兩個(gè)標(biāo)簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進(jìn)一個(gè)tab鍵的身位（一個(gè)tab是4個(gè)空格）。如果是并列關(guān)系，最好上下對(duì)齊。pink老師 一句話(huà)說(shuō)出他們:
html雙標(biāo)簽 可以分為 有 一種是 父子級(jí) 包含關(guān)系的標(biāo)簽 一種是 兄弟級(jí) 并列關(guān)系的標(biāo)簽
課堂一練
**請(qǐng)問(wèn)下列哪組標(biāo)簽關(guān)系是錯(cuò)誤的？ **
2. 代碼開(kāi)發(fā)工具（書(shū)寫(xiě)代碼）
-
為了提高我們的開(kāi)發(fā)效率
-
減少代碼的出錯(cuò)我們不提倡用記事本開(kāi)發(fā)，我們有更好的犀利哥。
-
Dreamweaver
-
SublimeText
-
WebStorm
-
HBuilder
-
VScode
有人說(shuō)：
普通青年 Dreamweaver
文藝青年 sublime
高手和傻子 用記事本
其實(shí)。。。。
感覺(jué)： 這個(gè)feel 倍兒爽 feel feel倍兒爽 爽爽爽爽！
sublime有非常多的優(yōu)點(diǎn)， 最開(kāi)心的就是非常輕量級(jí)，打開(kāi)速度超快，后面更高的功能，后面再接觸。
sublime生成html骨架小技巧
- 雙擊打開(kāi)軟件
- 新建文件（ctrl+n）
- 保存（ctrl+s）,保存為：文件名.html （ 注意 后綴名必須是 .html )
- 放大縮小代碼 按住 ctrl 在 滾動(dòng)鼠標(biāo)滾輪 或者 ctrl+ 加號(hào) 鍵 和 ctrl + 減號(hào)鍵
- 生成頁(yè)面骨架結(jié)構(gòu)
- html: 5 按下tab鍵 或者
- ! 按下tab鍵
- 在瀏覽器中預(yù)覽頁(yè)面
- 右鍵在 瀏覽器中打開(kāi)
3. 文檔類(lèi)型<!DOCTYPE>
用法：
<!DOCTYPE html>作用：
聲明位于文檔中的**最前面的位置**，處于 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
pink老師 一句話(huà)說(shuō)出他們:
就是告訴瀏覽器按照HTML5 規(guī)范解析頁(yè)面.團(tuán)隊(duì)約定：
HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明4. 頁(yè)面語(yǔ)言lang
<html lang="en"> 指定html 語(yǔ)言種類(lèi)最常見(jiàn)的2個(gè)：
pink老師 一句話(huà)說(shuō)出他們:
指定該html標(biāo)簽 內(nèi)容 所用的語(yǔ)言為中文團(tuán)隊(duì)約定：
考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值@拓展閱讀：
簡(jiǎn)單來(lái)說(shuō)，可能對(duì)于程序來(lái)說(shuō)沒(méi)有太大的作用，但是它可以告訴瀏覽器，搜索引擎，一些處理Html的程序?qū)?yè)面語(yǔ)言?xún)?nèi)容來(lái)做一些對(duì)應(yīng)的處理或者事情。
比如可以
- 根據(jù)根據(jù)lang屬性來(lái)設(shè)定不同語(yǔ)言的css樣式，或者字體
- 告訴搜索引擎做精確的識(shí)別
- 讓語(yǔ)法檢查程序做語(yǔ)言識(shí)別
- 幫助翻譯工具做識(shí)別
- 幫助網(wǎng)頁(yè)閱讀程序做識(shí)別
等等
5. 字符集
<meta charset="UTF-8" /> 字符集(Character set)是多個(gè)字符的集合。計(jì)算機(jī)要準(zhǔn)確的處理各種字符集文字，需要進(jìn)行字符編碼，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。
- gb2312 簡(jiǎn)單中文 包括6763個(gè)漢字 GUO BIAO
- BIG5 繁體中文 港澳臺(tái)等用
- GBK包含全部中文字符 是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312
- UTF-8則基本包含全世界所有國(guó)家需要用到的字符
- 這句代碼非常關(guān)鍵， 是必須要寫(xiě)的代碼，否則可能引起亂碼的情況。
pink老師 一句話(huà)說(shuō)出他們:
這句話(huà)是讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對(duì)應(yīng)的html內(nèi)容。
團(tuán)隊(duì)約定：
一般情況下統(tǒng)一使用 "UTF-8" 編碼, 請(qǐng)盡量統(tǒng)一寫(xiě)成標(biāo)準(zhǔn)的 "UTF-8"，不要寫(xiě)成 "utf-8" 或 "utf8" 或 "UTF8"。6. HTML標(biāo)簽的語(yǔ)義化
白話(huà)： 所謂標(biāo)簽語(yǔ)義化，就是指標(biāo)簽的含義。
pink老師 一句話(huà)說(shuō)出語(yǔ)義化目的:
根據(jù)標(biāo)簽的語(yǔ)義，在合適的地方給一個(gè)最為合理的標(biāo)簽，讓結(jié)構(gòu)更清晰。
語(yǔ)義是否良好： 當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁(yè)結(jié)構(gòu)依然組織有序，并且有良好的可讀性。( 裸奔起來(lái)一樣好看 )
遵循的原則：先確定語(yǔ)義的HTML ，再選合適的CSS。所以，我們接下來(lái)學(xué)習(xí)html標(biāo)簽，要根據(jù)語(yǔ)義去記憶。 HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽。
7. 拓展閱讀@
單身狗的由來(lái)
單身狗一詞最早是出自網(wǎng)絡(luò)社區(qū)，起源與大話(huà)西游有關(guān)。
大話(huà)西游之大圣娶親最后一幕“他好像一條狗”由來(lái)。
四、HTML常用標(biāo)簽（重點(diǎn)）
學(xué)習(xí)目標(biāo)
- 理解：
- 相對(duì)路徑三種形式
- 應(yīng)用
- 排版標(biāo)簽
- 文本格式化標(biāo)簽
- 圖像標(biāo)簽
- 鏈接
- 相對(duì)路徑，絕對(duì)路徑的使用
1. HTML常用標(biāo)簽
首先 HTML和CSS是兩種完全不同的語(yǔ)言，我們學(xué)的是結(jié)構(gòu)，就只寫(xiě)HTML標(biāo)簽，認(rèn)識(shí)標(biāo)簽就可以了。 不會(huì)再給結(jié)構(gòu)標(biāo)簽指定樣式了。
HTML標(biāo)簽有很多，這里我們學(xué)習(xí)最為常用的，后面有些較少用的，我們可以查下手冊(cè)就可以了。
1) 排版標(biāo)簽
排版標(biāo)簽主要和css搭配使用，顯示網(wǎng)頁(yè)結(jié)構(gòu)的標(biāo)簽，是網(wǎng)頁(yè)布局最常用的標(biāo)簽。
a. 標(biāo)題標(biāo)簽h (熟記)
單詞縮寫(xiě)： head 頭部. 標(biāo)題 title 文檔標(biāo)題
為了使網(wǎng)頁(yè)更具有語(yǔ)義化，我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的標(biāo)題，即
標(biāo)題標(biāo)簽語(yǔ)義： 作為標(biāo)題使用，并且依據(jù)重要性遞減
其基本語(yǔ)法格式如下：
<h1> 標(biāo)題文本 </h1> <h2> 標(biāo)題文本 </h2> <h3> 標(biāo)題文本 </h3> <h4> 標(biāo)題文本 </h4> <h5> 標(biāo)題文本 </h5> <h6> 標(biāo)題文本 </h6>顯示效果如下：
小結(jié) :
- 加了標(biāo)題的文字會(huì)變的加粗，字號(hào)也會(huì)依次變大
- 一行是只能放一個(gè)標(biāo)題的
b. 段落標(biāo)簽p ( 熟記)
單詞縮寫(xiě)： paragraph 段落 [?p?r?gr?f] 無(wú)須記這個(gè)單詞
作用語(yǔ)義：
可以把 HTML 文檔分割為若干段落
在網(wǎng)頁(yè)中要把文字有條理地顯示出來(lái)，離不開(kāi)段落標(biāo)簽，就如同我們平常寫(xiě)文章一樣，整個(gè)網(wǎng)頁(yè)也可以分為若干個(gè)段落，而段落的標(biāo)簽就是
<p> 文本內(nèi)容 </p>是HTML文檔中最常見(jiàn)的標(biāo)簽，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。
c. 水平線標(biāo)簽hr(認(rèn)識(shí))
單詞縮寫(xiě)： horizontal 橫線 [?h?r??zɑntl] 同上
在網(wǎng)頁(yè)中常常看到一些水平線將段落與段落之間隔開(kāi)，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過(guò)插入圖片實(shí)現(xiàn)，也可以簡(jiǎn)單地通過(guò)標(biāo)簽來(lái)完成，
就是創(chuàng)建橫跨網(wǎng)頁(yè)水平線的標(biāo)簽。其基本語(yǔ)法格式如下： <hr />是單標(biāo)簽
在網(wǎng)頁(yè)中顯示默認(rèn)樣式的水平線。
課堂練習(xí):新聞頁(yè)面
d. 換行標(biāo)簽br (熟記)
單詞縮寫(xiě)： break 打斷 ,換行
在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽
<br />這時(shí)如果還像在word中直接敲回車(chē)鍵換行就不起作用了。
此處有練習(xí)題
e. div 和 span標(biāo)簽(重點(diǎn))
div span 是沒(méi)有語(yǔ)義的 是我們網(wǎng)頁(yè)布局主要的2個(gè)盒子 想必你聽(tīng)過(guò) css+div
div 就是 division 的縮寫(xiě) 分割， 分區(qū)的意思 其實(shí)有很多div 來(lái)組合網(wǎng)頁(yè)。
span 跨度，跨距；范圍
語(yǔ)法格式：
<div> 這是頭部 </div> <span>今日價(jià)格</span>他們兩個(gè)都是盒子，用來(lái)裝我們網(wǎng)頁(yè)元素的， 只不過(guò)他們有區(qū)別，現(xiàn)在我們主要記住使用方法和特點(diǎn)就好了
- div標(biāo)簽 用來(lái)布局的，但是現(xiàn)在一行只能放一個(gè)div
- span標(biāo)簽 用來(lái)布局的，一行上可以放好多個(gè)span
后面后面講顯示模式的時(shí)候，會(huì)告訴大家
排版標(biāo)簽總結(jié)
| 標(biāo)題標(biāo)簽 | 作為標(biāo)題使用，且依據(jù)重要性遞減，h1到h6,一級(jí)標(biāo)題最大，六級(jí)標(biāo)題最小 | |
| 段落標(biāo)簽 | 可以把 HTML 文檔分割為若干段落 | |
| 水平線標(biāo)簽 | 沒(méi)啥可說(shuō)的，就是一條線 | |
| 換行標(biāo)簽 | ||
| div標(biāo)簽 | 用來(lái)布局的，但是現(xiàn)在一行只能放一個(gè)div | |
| span標(biāo)簽 | 用來(lái)布局的，一行上可以放好多個(gè)span |
2) 文本格式化標(biāo)簽(熟記)
在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。
區(qū)別：
b 只是加粗 strong 除了可以加粗還有 強(qiáng)調(diào)的意思， 語(yǔ)義更強(qiáng)烈。
剩下的同理…
請(qǐng)同學(xué)們重點(diǎn)記住 前兩組 加粗 和 傾斜 后面兩組沒(méi)記住回來(lái)查
3) 標(biāo)簽屬性
所謂屬性就是外在特性 比如 手機(jī)的顏色 手機(jī)的尺寸 ，總結(jié)就是手機(jī)的。。
- 手機(jī)的顏色是黑色
- 手機(jī)的尺寸是 8寸
- 水平線的長(zhǎng)度是 200
- 圖片的寬度 是 300
使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)簽提供更多的信息，可以使用HTML標(biāo)簽的屬性加以設(shè)置。其基本語(yǔ)法格式如下：
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名> <手機(jī) 顏色="紅色" 大小="5寸"> </手機(jī)>4) 圖像標(biāo)簽img (重點(diǎn))
單詞縮寫(xiě)： image 圖像
要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽，接下來(lái)將詳細(xì)介紹圖像標(biāo)簽以及和他相關(guān)的屬性。（它是一個(gè)單身狗）
語(yǔ)法如下：
<img src="圖像URL" />該語(yǔ)法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)簽的必需屬性。
border 后面我們會(huì)用css來(lái)做，這里童鞋們就記住這個(gè)border 單詞就好了
**標(biāo)簽的書(shū)寫(xiě)規(guī)范–注意: **
比如:
正常的<br /><img src="cz.jpg" width="300" height="300" /><br />帶有邊框的<br /><img src="cz.jpg" width="300" height="300" border="3" /><br />有提示文本的<br /><img src="cz.jpg" width="300" height="300" border="3" title="這是個(gè)小蒲公英" /><br />有替換文本的<br /><img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" />此處有練習(xí)題
重點(diǎn)掌握點(diǎn)：
- 請(qǐng)說(shuō)出 圖像標(biāo)簽?zāi)莻€(gè)屬性是必須要寫(xiě)的？
- 請(qǐng)說(shuō)出 圖像標(biāo)簽中 alt 和 title 屬性區(qū)別？
5) 鏈接標(biāo)簽(重點(diǎn))
單詞縮寫(xiě)： anchor 的縮寫(xiě) [???k??] 。基本解釋 錨, 鐵錨 的
在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽把文字包括起來(lái)就好。
語(yǔ)法格式：
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>| href | 用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能 |
| target | 用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，__blank為在新窗口中打開(kāi)方式。 |
注意：
重點(diǎn)掌握點(diǎn)：
- 請(qǐng)說(shuō)出 鏈接標(biāo)簽?zāi)莻€(gè)屬性是必須要寫(xiě)的？
- 請(qǐng)說(shuō)出 如何新窗口打開(kāi)這個(gè)一個(gè)鏈接網(wǎng)頁(yè)的？
6) 注釋標(biāo)簽
在HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁(yè)面中的注釋文字，就需要使用注釋標(biāo)簽。
簡(jiǎn)單解釋：
注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會(huì)被下載到用戶(hù)的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。
語(yǔ)法格式：
<!-- 注釋語(yǔ)句 --> 快捷鍵是： ctrl + / 或者 ctrl +shift + /注釋重要性：
pink老師 一句話(huà)說(shuō)出他們:
注釋是給人看的，目的是為了更好的解釋這部分代碼是干啥的， 程序是不執(zhí)行這個(gè)代碼的
團(tuán)隊(duì)約定
一般用于簡(jiǎn)單的描述，如某些狀態(tài)描述、屬性描述等
注釋內(nèi)容前后各一個(gè)空格字符，注釋位于要注釋代碼的上面，單獨(dú)占一行
推薦：
<!-- Comment Text --> <div>...</div>不推薦：
<div>...</div><!-- Comment Text --> <div><!-- Comment Text -->... </div>2. 路徑(重點(diǎn)、難點(diǎn))
實(shí)際工作中，我們的文件不能隨便亂放，否則用起來(lái)很難快速的找到他們，因此我們需要一個(gè)文件夾來(lái)管理他們。
**目錄文件夾： **
就是普通文件夾，里面只不過(guò)存放了我們做頁(yè)面所需要的 相關(guān)素材，比如 html文件， 圖片 等等。
**根目錄 **
打開(kāi)目錄文件夾的第一層 就是 根目錄
頁(yè)面中的圖片會(huì)非常多， 通常我們?cè)傩陆ㄒ粋€(gè)文件夾專(zhuān)門(mén)用于存放圖像文件（images），這時(shí)再插入圖像，就需要采用“路徑”的方式來(lái)指定圖像文件的位置。路徑可以分為： 相對(duì)路徑和絕對(duì)路徑
1) 相對(duì)路徑
以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱(chēng)之為相對(duì)路徑。
| 同一級(jí)路徑 | 只需輸入圖像文件的名稱(chēng)即可，如<img src=“baidu.gif” />。 | |
| 下一級(jí)路徑 | “/” | 圖像文件位于HTML文件同級(jí)文件夾下（例如文件夾名稱(chēng)為：images） 如<img src=“images/baidu.gif” />。 |
| 上一級(jí)路徑 | “…/” | 在文件名之前加入“…/” ，如果是上兩級(jí)，則需要使用 “…/ …/”，以此類(lèi)推， 如<img src="…/baidu.gif" />。 |
**pink老師 一句話(huà)說(shuō)出他們: **
相對(duì)路徑，是從代碼所在的這個(gè)文件出發(fā)， 去尋找我們的目標(biāo)文件的，而 我們所說(shuō)的 上一級(jí) 下一級(jí) 同一級(jí) 簡(jiǎn)單說(shuō)，就是 圖片 位于 HTML 頁(yè)面的位置
2) 絕對(duì)路徑
絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱(chēng)為絕對(duì)，意指當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的。
“D:\web\img\logo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/logo.gif”。
注意：
絕對(duì)路徑用的較少，我們理解下就可以了。 但是要注意，它的寫(xiě)法 特別是符號(hào) \ 并不是 相對(duì)路徑的 /
3. 今日總結(jié)
每一天都有一個(gè)主題 我們HTML第一天的主題就是 <認(rèn)識(shí)標(biāo)簽> 能用常用標(biāo)簽，寫(xiě)出最簡(jiǎn)單的頁(yè)面
學(xué)HTML 之前 覺(jué)得 很神秘
等你學(xué)完之后忽然發(fā)現(xiàn)
總結(jié)今天的思路貫穿線：
4. 綜合案例： 圣誕
五、@拓展閱讀
1. 錨點(diǎn)定位 （難點(diǎn)）
通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶(hù)能夠快速定位到目標(biāo)內(nèi)容。
創(chuàng)建錨點(diǎn)鏈接分為兩步：
1. 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (找目標(biāo))<h3 id="two">第2集</h3> 2. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點(diǎn)擊的） （拉關(guān)系） 我也有一個(gè)姓畢的姥爺..<a href="#two">快速記憶法：
好比找個(gè)人辦事， 首先找到他，然后拉關(guān)系，最后看效果。
2. base 標(biāo)簽
語(yǔ)法：
<base target="_blank" />**總結(jié)： **
pink老師 一句話(huà)說(shuō)出他們:
全體鏈接~ 到 ~ 全體集合 所有鏈接 以新窗口打開(kāi)頁(yè)面 ~ 是
3. 預(yù)格式化文本pre標(biāo)簽
標(biāo)簽可定義預(yù)格式化的文本。被包圍在 標(biāo)簽 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。```html 此例演示如何使用 pre 標(biāo)簽對(duì)空行和 空格進(jìn)行控制 **pink老師 一句話(huà)說(shuō)出他們:**> 所謂的預(yù)格式化文本就是 ，按照我們預(yù)先寫(xiě)好的文字格式來(lái)顯示頁(yè)面， 保留空格和換行等。 有了這個(gè)標(biāo)簽，里面的文字，會(huì)按照我們書(shū)寫(xiě)的模式顯示，不需要段落和換行標(biāo)簽了。但是，比較少用，因?yàn)椴缓谜w控制。## 4. 特殊字符 （理解）一些特殊的符號(hào)，我們?cè)賖tml 里面很難或者 不方便直接 使用， 我們此時(shí)可以使用下面的替代代碼。<img src="media/zifu.png" />**雖然有很多，但是我們平時(shí)用的比較較少， 大家重點(diǎn)記住 空格 大于號(hào) 小于號(hào) 就可以了，剩下的回來(lái)查閱。****總結(jié)：**1. 是以**運(yùn)算符**`&`開(kāi)頭,以**分號(hào)運(yùn)算符**`;`結(jié)尾。 2. 他們不是標(biāo)簽，而是符號(hào)。 3. HTML 中不能使用小于號(hào) “<” 和大于號(hào) “>”特殊字符，瀏覽器會(huì)將它們作為標(biāo)簽解析，若要正確顯示，在 HTML 源代碼中使用字符實(shí)體**團(tuán)隊(duì)約定***推薦：*more >>
*不推薦：*more >>
## 5. html5發(fā)展之路<img src="media/html5.png" width="600"/>## 6. 什么是XHTMLXHTML 是更嚴(yán)格更純凈的 HTML 代碼。- XHTML 指**可擴(kuò)展超文本標(biāo)簽語(yǔ)言**（EXtensible HyperText Markup Language）。 - XHTML 的目標(biāo)是取代 HTML。 - XHTML 與 HTML 4.01 幾乎是相同的。 - XHTML 是更嚴(yán)格更純凈的 HTML 版本。 - XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。 - XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)。## 7. HTML和 XHTML之間有什么區(qū)別?- XHTML 指的是可擴(kuò)展超文本標(biāo)記語(yǔ)言 - XHTML 與 HTML 4.01 幾乎是相同的 - XHTML 是更嚴(yán)格更純凈的 HTML 版本 - XHTML 是以 XML 應(yīng)用的方式定義的 HTML - XHTML 是 2001 年 1 月發(fā)布的 W3C 推薦標(biāo)準(zhǔn) - XHTML 得到所有主流瀏覽器的支持 - XHTML 元素是以 XML 格式編寫(xiě)的 HTML 元素。XHTML是嚴(yán)格版本的HTML，例如它要求標(biāo)簽必須小寫(xiě)，標(biāo)簽必須被正確關(guān)閉，標(biāo)簽順序必須正確排列，對(duì)于屬性都必須使用雙引號(hào)等。# 六、@深入閱讀（課外閱讀）[HTML5的崛起之路](http://www.chinaz.com/manage/2015/0720/424831.shtml)# 七、明天預(yù)習(xí)內(nèi)容- 表格標(biāo)簽- 能夠通過(guò)表格標(biāo)簽?zāi)軌驅(qū)懗鲆粋€(gè)簡(jiǎn)版表格數(shù)據(jù)展示 例如： <img src="media/qq.png" />總結(jié)
以上是生活随笔為你收集整理的WEB标准认识HTMLHTML常用标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 步态识别学习之路
- 下一篇： H5游戏前端支付参考处理方案