HTML大整合（上）

、HTML簡介

1.HTML是什么?

HTML:htper text markup language超文本標記(標簽)語言

由各種標簽組成，用來制作網頁，告訴瀏覽器如何顯示頁面

2.作用

制作網頁，控制網頁和內容的顯示
插入圖片、音樂、視頻、動畫等多媒體
通過鏈接來檢索信息
使用表單獲取用戶的信息，實現交互

3.版本

w3c:world wide web consortium萬維網聯盟，制定web技術相關標準和規范的組織，HTML技術hi由w3c制定的標準

兩個版本:HTML4.0.1、HTML5.0-----通常H5

官網：http://www.W3shcool.com.cn

4.擴展名

HTML文檔是以.html或.htm結尾

二、HTML文檔結構

1.基本結構

1.1簡介

HTML標簽是由尖括號括起來的關鍵詞，如,通常是成對出現的,如<html></html>
以 <html>為根標簽，包含： <head>頭部和<body>主體部分
頭部提供關于網頁的相關信息，如標題、文檔類型、字符編碼、關鍵字等摘要信息
主體部分提供網頁的顯示內容，真正顯示在頁面中的內容
合理地進行縮進
標簽名不區分大小寫，但是一般要用小寫

1.2.開發工具

記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等

使用步驟：

新建文件(cltr+N)，然后保存（ctrl+s）,指定擴展名為.html
編寫HTML代碼
在瀏覽器中打開文件

使用技巧：

先保存再寫代碼，否則代碼無顏色提示
創建一個文件夾，用于保存所有的網頁內容，將文件夾拖拽到sublime中，便于管理
顯示/隱藏側邊欄方式1:查看–>側邊欄–>顯示/隱藏側邊欄方式2:ctrl+K緊接著按B
顯示多欄方式1：查看–>布局–>列數：2列方式2：Alt+shift+2

1.3瀏覽器

常見的瀏覽器：IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果

瀏覽器的作用是讀取html文件，并以網頁的形式來顯示

瀏覽器不會直接顯示html標簽，而是使用標簽來解釋網頁的內容

2.標簽

2.1標簽的組成

一個完整的html標簽的組成：

<標簽名屬性名="屬性值">內容</標簽名>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>標簽</title>
	</head>
	<body  bgcolor="red" text="blue">
		html從入門到精通!
    </body>
</html>
12345678910

屬性值要用雙撇號括起來，一般用雙引號

2.2標簽的分類

根據標簽是否關閉，分為，關閉型和非關閉型

關閉型：有結束標簽，即標簽成對出現

<html></html>
<head></head>
<title></title>

非關閉型：沒有結束標簽

<meta>
<br>
<h1>....<h6>

根據標簽是否獨占一行，分為塊級標簽和行級標簽

塊級標簽：顯示為塊狀，獨占一行

<h1>大家好</h1>
<hr>

行級標簽：在行內顯示，可與其他內容在同一行顯示

2.3注釋

注釋在瀏覽器中不會顯示,是用來標注解釋html語句,但通過查看源代碼的方式可以看到

語法:

<--注釋內容-->

2.4實體字符

也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等

語法:

<&實體字符的名稱>

2.5文檔類型

在html文檔的第一行,使用<!DOCTYPE html>

聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規范

目前基本上最常用的html5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
12345678910

三\常用標簽

3.1基本標簽

塊級標簽\親啊后有明顯的間隔 |
| h1…h5 | 標題標簽 | 按照h1到h6逐漸變小.塊級標簽 |
| | | |
| | | |

三、常用標簽

1.基本標簽

1.1 有序列表
ol:ordered listli:list item默認使用阿拉伯數字、從1開始標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值；數字1（默認）、字母（a或A）、羅馬數字(i或I) · start屬性：設置起始值，值必須是數字
1.2 無序列表
ul:unodered list
li:list item
默認情況下使用實心圓表作為符號標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值：disc實心圓（默認）、circle空心圓、square正方形、none不顯示項目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標簽
hr:horizontal
常用屬性：
· color:顏色

兩種方式：

顏色名稱：如red、green、blue、white、black、pink、orange等

16進制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每種顏色的取值范值0-255，轉換為16 進制00-FF

如: #FF0000 紅色 #00FF00綠色 #0000FF藍色 #FFFFFF白色、#CCCCCC #FF7300桔色

· size:粗細，數值

· width寬度

兩種寫法：

? 像素：絕對值（固定值）

? 百分比：相對值，相對于水平線標簽所在父容器寬度的百分比

· align對齊

? 取值：center居中 left right
1.5圖像標簽
img:image
常見的圖片格式：.jpg .png .gif .bmp
常見的屬性：
· src:source指定圖片的路徑（來源），必選叁數

如果圖片與html源代碼在同一個文件夾中，可以直接在src中寫圖片名稱即可

習慣上，我們會將多個圖片與html代碼文檔分別放在同一個文件夾project中的不同目錄下，此時需要在src中指定圖片的路徑為相對路徑

路徑的分類：

? · 相對路徑

? 表示： ./當前路徑
…/當前位置的上一級文件夾

? 提示：…/image

? · alt:當圖片無法顯示時顯示的提示信息

? · title:當鼠標放到圖片上時顯示的提示信息

? · width和 height:設置圖片的寬度和高度
默認圖片以原始尺寸顯示

? 如果只設置其中一個，則另一個會按比例縮放

? 如果同時設置寬和高，可能導致圖片變形

? 兩種寫法：

? 像素：絕對值（固定值）

? 百分比：相對值，相對于父容器的尺寸的百分比
2.其他標簽

為了更好語義化
3.頭部標簽
· meta定義網頁的摘要信息，如字符編碼，關鍵詞，描述，作者等
· title定義網頁的標題
· style定義內容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎路徑
默認以當前頁面文件所在的位置為相對路徑參照
4.標簽嵌套
一個標簽中嵌套另外一個標簽
標簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時有所不同
chrome瀏覽器提供的開發工具：幫助開發人員查看和調試頁面的
如何打開：
· Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時內部的結構
· console:控制臺，顯示各種警告和錯誤信息
· network:查看網絡請求信息，瀏覽器向服務器請求了哪些資源，資源大小，
加載資源所消耗的時間

四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉到另外一個頁面，實現頁面之間導航
當鼠標移動到超鏈接文本或圖片時，鼠標箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接，跳轉到另一個頁面錨鏈接：鏈接到錨點（鏈接到同一個頁面的指定位置）功能鏈接：實現特殊功能(發郵件，下載)
2.基本用法
使用標簽來創建超鏈接
語法格式：

常用屬性：
href:鏈接地址或路徑,鏈接地址

world

鏈接文本或圖片

1 2 3 4 5 1 target:鏈接打開的位置,取值

路徑分類：
絕對路徑以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑相對于當前頁面文件所在的路徑,不是以根開始的路徑 ./ 當前路徑 …/ 當前位置上一級目錄

3.錨鏈接
3.1簡介
點擊鏈接后跳轉到某一個頁面的指定位置（錨點anchor）
錨鏈接的分類：
頁面內的錨鏈接頁面間的錨鏈接
3.2 頁面內的錨鏈接
步驟：

定義錨點（標記）
鏈接錨點
_self 自身，當前，默認值 _blank新的，空白的 _parent父層框架 _top頂層框架
目標位置
1 2 3 4
1

3.3 頁面間的錨鏈接

4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統一資源定位器,用來定位資源所在的位置，最常見的就是網址

5.2 組成
一個完整的URL由8個部分組成：
協議：prococol 如 http:超文本傳輸協議，用來訪問WEB網站Hyper text Transfer protocal https:更加安全的協議 SSL安全套接子層 ftp文件傳輸協議，用來訪問服務器上的文件，實現文件的上傳和下載File Transfer protocol file:文件協議，用來訪問本地文件主機名hostname服務器地址或服務器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口：port位于主機名的后面，使用冒號進行分隔不同的協議使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認端口，則端口可以省略如果使用的不是默認端口，則必須指定端口http://59.49.32.213:7070/ 路徑：path目標文件所在的路徑結構，如:www.baidu.com/img/ 資源resource要訪問的目標文件，如bd_logo1.png 查詢字符串：query string 也稱為參數在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔，多個之間用&分隔，如:name=tom&age=2&sex=male 錨點anchor，在資源后面使用#開頭的文本，如#6 身份認證authentication,指定身份信息，如：ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個規則的行列結構，每個表格是由若干行組成，每行由若干個單元格組成
table row column
2.基本結構
2.1 table標簽
用來定義表格
常用屬性：
border:表格邊框默認為0 width/height：寬度/高度 bordercolor:邊框的顏色 align:對齊方式，取值：left(默認) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距：單元格與單元格之間的距離 cellpadding邊距：單元格中的內容到邊界之間的距離
2.2 tr標簽
用來定義行：table row
常用屬性：
align:水平對齊取值：left(默認) center right valign垂直對齊取值：top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標簽
用來定義單元格，table data
常用屬性：align、valign、bgcolor、background
注意：表格必須是由行組成，行必須由單元格來組成，數據必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個屬性：
rowspan 設置單元格所跨的行數 colspan 設置單元格所跨的列數
步驟：

在跨越的單元格中設置rowspan/colspan屬性 2. 將被跨越的單元格刪除
必須要保證每行的實際列數是相同的，否則表格可能會出錯亂
4.高級標簽
4.1caption標簽
表格的標題標簽
4.2thead標簽
表格的頭部table head
4.3th標簽
表格的頭部標題table head title
一般用在thead中，設置頭部的標題，替代td標簽，與td的區別，th中的文本會加粗且居中顯示
4.4tbody標簽
表格的主體table body
4.5tfoot標簽
表格的底部table foot

六、表單
1.簡介
表單是一個包含若干個表單元素的區域，用于獲取瑣類型的用戶數據

表單元素是允許用戶在表單輸入信息的元素，如文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2.表單結構
2.1表單語法

2.2form標簽
用來定義表單，可以包含多個表單元素
常用屬性：
action:提交數據給誰處理，即處理數據的程序，默認為當前頁面 method:提交數據的方式或方法，取值：get(默認)，post get和post的區別： get:以查詢字符串的形式提交，在地址欄中能看到，長度有限制，不安全 post以表單數據組的形式進行提交，在地址欄中看不到，長度無限制，安全 enctype(encode type)編碼類型：提交數據的編碼，取值：application/X-www-form-urlencoded(默認)、multipart/form-data(文件上傳)
3.表單元素
大多數的表單元素都是使用標簽來定義的，通過設置屬性type來定義不同的表單元素

3.1單行文本框
常用屬性：
·name名稱，很重要，如果沒有定義name屬性，則該表單元素的數據是無法提交的

·value初始值

·size顯示寬度

·maxlength:大字符數，默認是沒有限制

·readonly只讀：readonly=“readonly”,可簡寫readonly,即只寫屬性名

·disabled禁用：disabled=“disabled”, 可簡寫disabled完全禁用

表單元素被提交的兩個條件，1.有name屬性2.非disabled

3.2 單選按鈕
常用屬性：

·name名稱：多個radio的name屬性必須相同，才能實現互斥（單選）

·value值

·checked:是否被選中，兩種狀態，選中，未選中 checked=“checked” 簡寫 checked

3.3 復選框
常用屬性與單選按鈕radio類似

3.4 文件選擇器
常用屬性：

·name:名稱

·accept設置可選擇的文件類型，用來限制上傳的文件類型

使用MIME格式字符串對資源類型進行限制

常見的MIME類型：

·純文本：text/plain text/xml text/html

· 圖像：image/png image/jpeg image/gif

4.特殊表單元素

4.1下拉列表

select常用屬性：

·name名稱

·size行數，同時顯示多個選項

·multiple允許同時選擇多個

option常用屬性：

·value選項值

·selected設置默認選中項

optgroup常用屬性：

·label分組的標簽

4.2文本域

·name名稱

·rows行數

·cols列數

5、其他標簽

5.1 label標簽

為表單元素提供標簽，當選中label標簽中的文本內容時會自動將光標切換到與之相關聯的表單元素。

常用屬性：

·for必須將該屬性值設置為與相關聯的表單元素的Id屬性值相同。

注：幾乎所有HTML標簽都具有id屬性，且id值必須唯一。

5.2 button標簽

也表示按鈕，與input按鈕類似

語法：

1按鈕文字或圖像

常用屬性：

·type按鈕的類型，取值: submit（默認）、reset、button

5.3 fieldset和legend標簽

fieldset標簽，對表單元素進行分組

legend標簽，對分組添加標題

七、內嵌框架
1、簡介

使用iframe可以在一個頁面中引用另一個頁面，實現復用、靈活

2、基本用法

語法：

常用屬性：

· src:引用的頁面

· width/height寬度/高度，像素或百分比

· frameborder是否顯示邊框，取值：1(yes) 0(no)—默認

· scrolling是否顯示滾動條，取值：yes no auto

· name屬性為框架定義名稱

3、在框架中打開鏈接

3鏈接的文本或圖像

八、HTML5簡介

1、發展

W3C于1992年12月發布了HTML4.0.1標準
W3C于2014年10月發布了HTML5標準

2、特點

· 取消了過時的標簽，如font、center等，它們僅具有展示外觀的功能

· 增加了一些更具有語義化的標簽，如header、footer、aside等

· 增加了一些新功能標簽，如canvas、audio、video

· 增加了一些表單控件，如email、date、time、url、search等

· 可以直接在瀏覽器中繪畫（canvas），無需flash

· 增加了本地存儲的支持

3、兼容性

http://caniuse.com

提供了各種瀏覽器版本對HTML5和CSS規范的支持度

九、HTML5新增內容
1、結構相關的標簽

用來進行頁面結構布局，本身無任何特殊樣式，需要使用CSS進行樣式設置

· article定義一個獨立的內容，完整的文章

· section定義文檔的章節、段落

· header文章的頭部、頁眉、標題

· footer文章的底部、頁腳、標注

· aside定義側邊欄

· figure圖片區域

· figcaption為圖片區域定義標題

· nav定義導航菜單

結構標簽只是表明各部分的角色，并無實際的外觀樣式，與普通div相同

2、語義相關的標簽
2.1 mark標簽
標注，用來突出顯示文本，默認添加黃色背景
2.2 time標簽
定義日期和時間，便于搜索引擎智能查找
2.3 details和 summary標簽
默認顯示summary中的內容，點擊后顯示details中的內容
注：并不是所有的瀏覽器都兼容，chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標簽
計數儀，表示度量
常用屬性：

· max定義大值，默認為1

· min定義小值，默認為0

· value定義當前值

· high定義限定為高的值

· low定義限定為低的值

· optimum定義佳值

規則：

如果optimum大于high，則表示值越大越好

當value大于high時為綠色

當value在low與high之間時為黃色

當value小于low時為紅色

如果optimum小于low，則表示值越小越好

當value小于low時為綠色

當value在low與high之間時為黃色

當value大于high時為紅色

當optimum介于low和high之間，則表示值在low和high之間好當value在low與high之間時顯示綠色，否則顯示黃色

2.5 progress標簽
進度條，表示運行中的進度
常用屬性：

· value定義當前值

· max定義完成的值

3.表單相關
3.1 新增表單元素
新增以下type類型：

· email接收郵箱

· url接收URL

· tel接收電話號碼，目前僅在移動設備上有效

· search搜索文框

· number/range接收數字/數字滑塊,包含min,max,step屬性

· date/month/week/time/datetime日期時間選擇器，兼容性不好

· color顏色拾取

作用：

· 具有格式校驗的功能

· 可以與移動設備的鍵盤相關聯

3.2新增表單屬性
form標簽的屬性：

· autocomplete是否啟動表單的自動完成功能，取值:on(默認)、o?

· novalidate提交表單時不進行校驗，默認會進行表單校驗

3.3 新增表單元素的屬性
新增表單元素屬性：input/select/textarea等

· placeholder提示文字

· required是否必填

· autocomplete是否啟用該表單元素的自動完成功能

· autofocus設置初始焦點元素

· pattern使用正則表達式（RegExp后面會講解），進行數據校驗

· list使文本元素具有下拉列表的功能，需要配合datalist和option標簽一起使用

· form可以將表單元素寫在form標簽外面，然后通過該屬性關聯指定的表單

4、多媒體標簽
4.1audio標簽
在頁面中插入音頻，不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性：

· src音頻文件的來源

· controls是否顯示控制面板，默認不顯示

· autoplay是否自動播放，默認不自動播放

· loop是否循環播放

· muted是否靜音

· preload是否預加載，取值：none不預加載、auto預加載（默認）、metadata只加載元數據

如果設置了autoplay屬性，則該屬性無效

可以結合source標簽使用，指定多個音頻文，瀏覽器會檢測并使用第一個可用的音頻文件

4.2 video標簽
在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣
用法與audio標簽基本相同，增加屬性：

· widht/height視頻播放器的寬度/高度

· poster在視頻加載前顯示的圖片

案例1hello.html

<html>
	<body>
		<tiele>HTML技術</tiele>
	</body>
	<body>
		大家好，歡迎學習html技術!
	</body>
</html>1234567

效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例1.png)]

案例2標簽的組成.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>標簽</title>
</head>
<body text="blue">
	標簽的組成
	<br>
	html從入門到精通！
	<hr>
	<h1>標簽的分類</h1>
	<hr>

	<h2>標簽的分類</h2>
	<hr>

	<h6>標簽的分類</h6>
	<hr>

	<span>哈哈</span>嘿嘿
	
</body>
</html>1234567891011121314151617181920212223

效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例2.png)]

案例3實體字符.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	圖書:<<HTML從入門到精通<<
	<hr>

	北京      上海      廣州
	<hr>

	在HTML中用<表示<小于號
	<hr>

	“HTML語言” 或 &qout;HTML語言&qout;
	<hr>

	版權所有? 2000-2020 高教培訓
	<hr>

	×關閉符號
</body>
</html>123456789101112131415161718192021222324

效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例3.png)]

（剩下的下期出）

原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出處：從CSDN

TML 顏色由紅色、綠色、藍色混合而成。

顏色值

HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。

種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。

這個表格給出了由三種顏色混合而成的具體效果：

顏色值

顏色(Color)	顏色十六進制(Color HEX)	顏色RGB(Color RGB)
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

1600萬種不同顏色

三種顏色紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。

在下面的顏色表中你會看到不同的結果，從0到255的紅色，同時設置綠色和藍色的值為0,隨著紅色的值變化，不同的值都顯示了不同的顏色。

Red Light	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

灰暗色調

以下展示了灰色到黑色的漸變

Gray Shades	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

Web安全色?

數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。

我們不確定如今這么做的意義有多大，因為越來越多的計算機有能力處理數百萬種顏色，不過做選擇還是你自己。

最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據區塊鏈測試 PPT JS(40g+300教程) HTML 簡歷領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：、

下標：

居中：<center>

字體：、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

7、HTML與XHTML——二者有什么區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區別？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據區塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

在線咨詢

上一篇：好用的H5頁面生成器
下一篇：產品觀察?- 抖音網頁版：強化橫屏和搜索，在中長視頻市場找增長

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML大整合（上）

、HTML簡介

1.HTML是什么?

2.作用

3.版本

4.擴展名

二、HTML文檔結構

1.基本結構

1.1簡介

1.2.開發工具

1.3瀏覽器

2.標簽

2.1標簽的組成

2.2標簽的分類

2.3注釋

2.4實體字符

2.5文檔類型

三\常用標簽

3.1基本標簽

案例1hello.html

案例2標簽的組成.html

案例3實體字符.html

您的項目需求