資訊專欄INFORMATION COLUMN
摘要：注此文是在看過許多學(xué)習(xí)資料和視頻之后，加上自身理解拼湊而成，僅作學(xué)習(xí)之用。宋體無文檔聲明瀏覽器以怪異模式解析宋體標(biāo)簽宋體不使用宋體代碼來實(shí)現(xiàn)頁面表現(xiàn)宋體學(xué)習(xí)宋體重點(diǎn)在于語義性。
（注：此文是在看過許多學(xué)習(xí)資料和視頻之后，加上自身理解拼湊而成，僅作學(xué)習(xí)之用。若有版權(quán)問題，麻煩及時(shí)聯(lián)系）
標(biāo)準(zhǔn)頁面結(jié)構(gòu)：
?
?
?
Html發(fā)展歷史：?
?
注：每一種HTML需要有對應(yīng)的doctype聲明。?
H5 ?無文檔聲明瀏覽器以怪異模式解析html
??
?
Html標(biāo)簽：
?
不使用html代碼來實(shí)現(xiàn)頁面表現(xiàn)！！！！！！
學(xué)習(xí)html重點(diǎn)在于語義性。
用
中的meta標(biāo)簽選擇字符集：?
1、標(biāo)題標(biāo)簽:
在HTML中，一共有六級標(biāo)題標(biāo)簽h1 ~ h6
在顯示效果上h1最大，h6最小，但是文字的大小我們并不關(guān)心
使用HTML標(biāo)簽時(shí)，關(guān)心的是標(biāo)簽的語義，我們使用的標(biāo)簽都是語義化標(biāo)簽
6級標(biāo)題中，h1的最重要，表示一個(gè)網(wǎng)頁中的主要內(nèi)容，h2 ~ h6重要性依次降低
對于搜索引擎來說，h1的重要性僅次于title，搜索引擎檢索完title，會(huì)立即查看h1中的內(nèi)容
h1標(biāo)簽非常重要，它會(huì)影響到頁面在搜索引擎中的排名，頁面只能寫一個(gè)h1。
一般頁面中標(biāo)題標(biāo)簽只使用h1 h2 h3,h3以后的基本不使用
2、段落標(biāo)簽，
段落標(biāo)簽用于表示內(nèi)容中的一個(gè)自然段
使用
標(biāo)簽來表示一個(gè)段落
p標(biāo)簽中的文字，默認(rèn)會(huì)獨(dú)占一行，并且段與段之間會(huì)有一個(gè)間距
3、在HTML中，字符之間寫再多的空格，瀏覽器也會(huì)當(dāng)成一個(gè)空格解析，
換行也會(huì)當(dāng)成一個(gè)空格解析。
在頁面中可以使用
標(biāo)簽來表示一個(gè)換行，br標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽
4、轉(zhuǎn)義字符 ?在HTML中，一些如< >這種特殊字符是不能直接使用，需要使用一些特殊的符號來表示這些特殊字符，這些特殊符號我們稱為實(shí)體（轉(zhuǎn)義字符串）瀏覽器解析到實(shí)體時(shí)，會(huì)自動(dòng)將實(shí)體轉(zhuǎn)換為其對應(yīng)的字符
實(shí)體的語法：
&實(shí)體的名字;
< ?< ?lower it
1 < < 2 > > 3 © ? 4 [空格]
?
> ?> ?greater it
空格 ?? ?Non-Breaking Space
版權(quán)符號 ?
5、img
使用img標(biāo)簽來向網(wǎng)頁中引入一個(gè)外部圖片，
img標(biāo)簽也是一個(gè)自結(jié)束標(biāo)簽
屬性：
src：設(shè)置一個(gè)外部圖片的路徑
alt：可以用來設(shè)置在圖片不能顯示時(shí)，對圖片的描述
搜索引擎可以通過alt屬性來識別不同的圖片
如果不寫alt屬性，則搜索引擎不會(huì)對img中的圖片進(jìn)行收錄
width：可以用來修改圖片的寬度,一般使用px作為單位
height ：可以用來修改圖片的高度，一般使用px作為單位
寬度和高度兩個(gè)屬性如果指設(shè)置一個(gè)，另一個(gè)也會(huì)同時(shí)等比例調(diào)整大小。如果兩個(gè)值同時(shí)指定則按照你指定的值來設(shè)置
一般開發(fā)中除了自適應(yīng)的頁面，不建議設(shè)置width和height
src屬性配置的是圖片的路徑，目前我們所要使用的路徑全都是相對路徑。
相對路徑：
相對路徑指相對于當(dāng)前資源所在目錄的位置
<img src="abc/bcd/2.gif" alt="描述"/>
?
?
可以使用../來返回一級目錄,返回幾級目錄就寫幾個(gè)../
圖片的格式
JPEG(JPG)
- JPEG圖片支持的顏色比較多，圖片可以壓縮，但是不支持透明
- 一般使用JPEG來保存照片等顏色豐富的圖片 ??GIF
- GIF支持的顏色少，只支持簡單的透明，支持動(dòng)態(tài)圖
- 圖片顏色單一或者是動(dòng)態(tài)圖時(shí)可以使用gif
PNG
- PNG支持的顏色多，并且支持復(fù)雜的透明
- 可以用來顯示顏色復(fù)雜的透明的圖片
圖片的使用原則：
效果不一致，使用效果好的
效果一致，使用小的
6、使用meta標(biāo)簽還可以用來設(shè)置網(wǎng)頁的關(guān)鍵字
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
?
還可以用來指定網(wǎng)頁的描述
搜索引擎在檢索頁面時(shí)，會(huì)同時(shí)檢索頁面中的關(guān)鍵詞和描述，但是這兩個(gè)值不會(huì)影響頁面在搜索引擎中的排名
<meta name="description" content="發(fā)布h5、js等前端相關(guān)的信息" />使用meta可以用來做請求的重定向 <meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑" /> <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
?
7、1.HTML中不區(qū)分大小寫,但是我們一般都使用小寫
2.HTML中的注釋不能嵌套
3.HTML標(biāo)簽必須結(jié)構(gòu)完整，要么成對出現(xiàn)，要么自結(jié)束標(biāo)簽
瀏覽器盡最大的努力正確的解析頁面，你所有的不符合語法規(guī)范的內(nèi)容，瀏覽器都會(huì)為你自動(dòng)修正，但是有些情況會(huì)修正錯(cuò)誤
4.HTML標(biāo)簽可以嵌套，但是不能交叉嵌套
5.HTML標(biāo)簽中的屬性必須有值，且值必須加引號(雙引號單引號都可以)
8、iframe
<iframe src="demo02.html" name="tom">iframe>
?
使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁面
使用iframe來創(chuàng)建一個(gè)內(nèi)聯(lián)框架
屬性：
src ：指向一個(gè)外部頁面的路徑，可以使用相對路徑
width：
height：
name ：可以為內(nèi)聯(lián)框架指定一個(gè)name屬性
在現(xiàn)實(shí)開發(fā)中不推薦使用內(nèi)聯(lián)框架，因?yàn)閮?nèi)聯(lián)框架中的內(nèi)容不會(huì)被搜索引擎所檢索
9、超鏈接
使用超鏈接可以讓我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面
使用a標(biāo)簽來創(chuàng)建一個(gè)超鏈接
屬性：
href:指向鏈接跳轉(zhuǎn)的目標(biāo)地址,可以寫一個(gè)相對路徑也可以寫一個(gè)完整的地址
Target：a標(biāo)簽中的target屬性可以用來指定打開鏈接的位置
可選值：
_self，表示在當(dāng)前窗口中打開（默認(rèn)值）
_blank，在新的窗口中打開鏈接
可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值，鏈接將會(huì)在指定的內(nèi)聯(lián)框架中打開
10、超鏈接中的#
創(chuàng)建超鏈接時(shí)，如果地址不確定可以直接寫一個(gè)#作為占位符
如果將鏈接地址設(shè)置為#，則點(diǎn)擊超鏈接以后，會(huì)自動(dòng)跳轉(zhuǎn)到當(dāng)前頁面的頂部，跳轉(zhuǎn)到id為bottom的元素所在的位置，直接在href中寫 #id屬性值
11、id
html中有一個(gè)屬性，每一個(gè)元素都可以設(shè)置，該屬性可以作為標(biāo)簽的唯一標(biāo)識
這個(gè)屬性就是id，id屬性在同一個(gè)頁面中只能有一個(gè)不能重復(fù)
12、郵箱超鏈接
發(fā)送電子郵件的超鏈接，點(diǎn)擊鏈接以后可以自動(dòng)打開計(jì)算機(jī)中默認(rèn)的郵件客戶端href="mailto:郵件地址"
當(dāng)點(diǎn)擊這個(gè)超鏈接時(shí)，會(huì)默認(rèn)打開計(jì)算機(jī)的默認(rèn)電子郵件客戶端，并且將收件人設(shè)置mailto后的郵件地址
?
?
最后，因?yàn)?/span>ie8及更早之前的版本不支持H5，故
我們可以使用 Sjoerd Visscher 創(chuàng)建的 "HTML5 Enabling JavaScript", "?shiv" 來解決該問題:
國內(nèi)用戶請使用百度靜態(tài)資源庫（Google 資源庫在國內(nèi)不穩(wěn)定）
?
? ? ?文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1379.html
摘要：筆記說明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時(shí)間開的一個(gè)專欄，每天分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入的專欄學(xué)習(xí)原文有的語音，如有侵權(quán)請聯(lián)系我，郵箱。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以...
摘要：筆記說明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時(shí)間開的一個(gè)專欄，每天分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入的專欄學(xué)習(xí)原文有的語音，如有侵權(quán)請聯(lián)系我，郵箱。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以...
摘要：筆記說明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時(shí)間開的一個(gè)專欄，每天分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入的專欄學(xué)習(xí)原文有的語音，如有侵權(quán)請聯(lián)系我，郵箱。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以...
摘要：基本結(jié)構(gòu)語言中，一個(gè)頁面是由四個(gè)部分組成文檔聲明標(biāo)簽對標(biāo)簽對標(biāo)簽對圖示文檔聲明這是一個(gè)文檔聲明，表示這是一個(gè)頁面。標(biāo)簽標(biāo)簽表示頁面內(nèi)容的范圍。 HTML HTML ...
摘要：語義如何運(yùn)用語義類標(biāo)簽來呈現(xiàn)網(wǎng)頁通過網(wǎng)頁案例來學(xué)習(xí)語義類標(biāo)簽最初的設(shè)計(jì)場景就是超文本，早期工作組的專家都是出版界書籍排版的專家。標(biāo)記的部分有三個(gè)注記，它在文章中的作用就是額外的注釋，但是中并沒有相關(guān)的語義，這時(shí)可以使用標(biāo)簽進(jìn)行相關(guān)實(shí)現(xiàn)。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一...
閱讀 2100·2021-11-11 16:55
閱讀 3171·2021-10-11 10:58
閱讀 3038·2021-09-13 10:28
閱讀 3967·2021-07-26 23:57
閱讀 1005·2019-08-30 15:56
閱讀 1331·2019-08-29 13:15
閱讀 1258·2019-08-26 18:18
閱讀 1267·2019-08-26 13:44
