34道常見的HTML+CSS面試題（附答案）

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

一、HTML

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

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

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

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

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

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<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 簡歷領取相關學習資料！

JavaScript

JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動電話。 JavaScript 被設計為向 HTML 頁面增加交互性。許多 HTML 開發者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。

JavaScript對大小寫敏感。

1.1 JavaScript的用法

HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。

腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

? <script> 標簽

如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽。

那些老舊的實例可能會在 <script> 標簽中使用 type="text/javascript"。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。

? <body> 中的 JavaScript

在本例中，JavaScript 會在頁面加載時向 HTML 的 <body> 寫文本：

1.2 JavaScript 數據類型

JavaScript 有多種數據類型：數字，字符串，數組，對象等等：

在 JavaScript 中有 5 種不同的數據類型：

l string

l number

l boolean

l object

l function

3 種對象類型：

l Object

l Date

l Array

2 個不包含任何值的數據類型：

l null

l undefined

你可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。

1.3 JavaScript函數

我們把一個 JavaScript 函數放置到 HTML 頁面的 <head> 部分：

我們把一個 JavaScript 函數放置到 HTML 頁面的 <body> 部分：

也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。

外部 JavaScript 文件的文件擴展名是 .js。

如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件：

1.4 JavaScript注釋

雙斜杠 // 后的內容將會被瀏覽器忽略。

1.5 JavaScript變量

在編程語言中，變量用于存儲數據值。

JavaScript 使用關鍵字 var 來定義變量，使用等號來為變量賦值：

1.6 JavaScript操作符

1.7 JavaScript關鍵字

和其他任何編程語言一樣，JavaScript 保留了一些標識符為自己所用。

JavaScript 保留了一些關鍵字，這些關鍵字在當前的語言版本中并沒有使用，但在以后 JavaScript 擴展中會用到。

JavaScript 標識符必須以字母、下劃線（_）或美元符（$）開始。

后續的字符可以是字母、數字、下劃線或美元符（數字是不允許作為首字符出現的，以便 JavaScript 可以輕易區分開標識符和數字）。

以下是 JavaScript 中最??重要的保留字（按字母順序）：

1.8 JavaScript If...Else 語句

通常在寫代碼時，總是需要為不同的決定來執行不同的動作。可以在代碼中使用條件語句來完成該任務。

在 JavaScript 中，我們可使用以下條件語句：

l if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼

l if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼

l JavaScript三目運算 - 當條件為true 時執行代碼，當條件為 false 時執行其他代碼

l if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行

l switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

1.9 JavaScript for循環

JavaScript 支持不同類型的循環：

l for - 循環代碼塊一定的次數

l for/in - 循環遍歷對象的屬性

l while - 當指定的條件為 true 時循環指定的代碼塊

l do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

1.10 JavaScript JSON

JSON 是用于存儲和傳輸數據的格式。

JSON 通常用于服務端向網頁傳遞數據。

什么是 JSON?

l JSON 英文全稱 JavaScript Object Notation

l JSON 是一種輕量級的數據交換格式。

l JSON是獨立的語言 *

l JSON 易于理解。

注：JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。文本可以被任何編程語言讀取及作為數據格式傳遞。

以下 JSON 語法定義了 employees 對象: 3 條員工記錄（對象）的數組:

{"employees":[

{"firstName":"John", "lastName":"Doe"},

{"firstName":"Anna","lastName":"Smith"},

{"firstName":"Peter", "lastName":"Jones"}

]}

JSON 語法規則:

l 數據為鍵/值對。

l 數據由逗號分隔。

l 大括號保存對象

l 方括號保存數組

JSON 字符串轉換為 JavaScript 對象（兩種方式）:

首先，創建 JavaScript 字符串，字符串為 JSON 格式的數據：

var text = '{ "employees" : [' +

'{ "firstName":"John" , "lastName":"Doe" },' +

'{ "firstName":"Anna" , "lastName":"Smith" },' +

'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

l 使用 JavaScript 內置函數 JSON.parse() 將字符串轉換為 JavaScript 對象:

var obj = JSON.parse(text);

l JavaScript 函數 eval() 可用于將 JSON 文本轉換為 JavaScript 對象。

var obj = eval ("(" + txt + ")");

eval() 函數使用的是 JavaScript 編譯器，可解析 JSON 文本，然后生成 JavaScript 對象。必須把文本包圍在小括號中，這樣才能避免語法錯誤。

eval() 函數可編譯并執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換為 JavaScript 對象是更安全的做法。JSON 解析器只能識別 JSON 文本，而不會編譯腳本。而且 JSON 解析器的速度更快。

最后，在頁面中使用新的 JavaScript 對象：

document.getElementById("demo").innerHTML =

obj.employees[1].firstName + " " + obj.employees[1].lastName;

</script>

使用JSON.stringify方法Javascript對象轉換為JSON字符串：

var str = {"name":"小牛學堂", "site":"http://www.edu360.cn"}

str_pretty1 = JSON.stringify(str)

alert(str_pretty1);

1.11 Javascript void

href="#"與href="javascript：void(0)"的區別：

l # 包含了一個位置信息，默認的錨是#top 也就是網頁的上端。

l 而javascript：void(0), 僅僅表示一個死鏈接。

l 在頁面很長的時候會使用 # 來定位頁面的具體位置，格式為：# + id。

l 如果你要定義一個死鏈接請使用 javascript：void(0) 。

<a href="javascript：void(0);">點我沒有反應的!</a>

<a href="#pos">點我定位到指定位置!</a>

<p id="pos">尾部定位點</p>

1.12 Javascript驗證表單

JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。

表單數據經常需要使用 JavaScript 來驗證其正確性：

l 驗證表單數據是否為空？

l 驗證輸入是否是一個正確的email地址？

l 驗證日期是否輸入正確？

l 驗證表單輸入內容是否為數字型？

必填（或必選）項目

下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，并且函數的返回值為 false，否則函數的返回值則為 true（意味著數據沒有問題）：

function validateForm()

{

var x=document.getElementById(“”).value;

if (x==null || x=="")

{

alert("姓名必須填寫");

return false;

}

……

姓名: <input type="text" name="fname">

</form>

E-mail 驗證：xxxx@asd.cc

下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。

意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點號：

function validateForm(){

var x=document.forms["myForm"]["email"].value;

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){

alert("不是一個有效的 e-mail 地址");

return false;

}

……

Email: <input type="text" name="email">

</form>

1.13 JavaScript正則表達式

正則表達式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式。

搜索模式可用于文本搜索和文本替換。

1) 什么是正則表達式？

正則表達式是由一個字符序列形成的搜索模式。

當你在文本中搜索數據時，你可以用搜索模式來描述你要查詢的內容。

正則表達式可以是一個簡單的字符，或一個更復雜的模式。

正則表達式可用于所有文本搜索和文本替換的操作。

2) 語法

/正則表達式主體/修飾符(可選)

3) 使用字符串方法

在 JavaScript 中，正則表達式通常用于兩個字符串方法 : search() 和 replace()。

search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

function myFunction() {

var str = "My Test!";

// var n = str.search("Test");

var n = str.search(/test/i);

alert(n);

var str = "My Test";

var txt = str.replace(/test/i,"Javascript");

alert(txt);

}

4) 正則表達式修飾符

修飾符可以在全局搜索中不區分大小寫:

i執行對大小寫不敏感的匹配。

g執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。

m執行多行匹配。

5) 正則表達式模式

l 方括號用于查找某個范圍內的字符：

[abc]查找方括號之間的任何字符。

[0-9]查找任何從 0 至 9 的數字。

(x|y)查找任何以 | 分隔的選項。

l 元字符是擁有特殊含義的字符：

\d查找數字。

\s查找空白字符。

\uxxxx查找以十六進制數 xxxx 規定的 Unicode 字符。

l 量詞:

n+匹配任何包含至少一個 n 的字符串。

n*匹配任何包含零個或多個 n 的字符串。

n?匹配任何包含零個或一個 n 的字符串。

6) 使用 RegExp 對象

在 JavaScript 中，RegExp 對象是一個預定義了屬性和方法的正則表達式對象。

test() 方法是一個正則表達式方法。

test() 方法用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。

Eg:

/\d/.test(“123”) 返回true。

/^1\d{10}$/

/^0\d{2,3}-?\d{7,8}$/

驗證郵箱的正則表達式：

function isEmail(str){

var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

return reg.test(str);

}

1.14 Javascript高級編程

1.14.1 Javascript對象

1) 創建 JavaScript 對象

通過 JavaScript，能夠定義并創建自己的對象。

創建新對象有兩種不同的方法：

l 定義并創建對象的實例

l 使用函數來定義對象，然后創建新的對象實例

var person=new Object();

person.firstname="John";

person.lastname="Doe";

person.age=50;

p={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

2) 使用對象構造器

使用函數來構造對象：

function person(firstname,lastname,age,eyecolor){

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

var myFather=new person("John","Doe",50,"blue");

alert(myFather.firstname + " is " + myFather.age + " years old.");

在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是指向該函數所屬的對象（運行時）。

1.14.2 Javascript Array(數組)對象

1) 什么是數組?

數組對象是使用單獨的變量名來存儲一系列的值。

2) 創建一個數組，

有三種方法, 下面代碼定義了一個名為 myCars的數組對象：

1: 常規方式:

var myCars=new Array();

myCars[0]="Saab";

myCars[1]="Volvo";

myCars[2]="BMW";

2: 簡潔方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

3) 訪問數組

通過指定數組名以及索引號碼，你可以訪問某個特定的元素。

以下實例可以訪問myCars數組的第一個值：

var name=myCars[0];

以下實例修改了數組 myCars 的第一個元素:

myCars[0]="Opel";

4) 在一個數組中你可以有不同的對象

所有的JavaScript變量都是對象。數組元素是對象。函數是對象。

因此，你可以在數組中有不同的變量類型。

可以在一個數組中包含對象元素、函數、數組：

myArray[0]=Date.now;

myArray[1]=myFunction;

myArray[2]=myCars;

數組方法和屬性

使用數組對象預定義屬性和方法：

var x=myCars.length // myCars 中元素的數量

var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值

5) 數組常用方法

合并數組 - concat()

刪除數組的最后一個元素 - pop()

數組的末尾添加新的元素 - push()

將一個數組中的元素的順序反轉排序 - reverse()

刪除數組的第一個元素 - shift()

從一個數組中選擇元素 - slice()

數組排序（按字母順序升序）- sort()

數字排序（按數字順序升序）- sort() eg:var arrs = [40,100,1,5,25,10]; arrs.sort(function(a,b){return a-b});

數字排序（按數字順序降序）- sort() eg:var arrs = [40,100,1,5,25,10]; arrs.sort(function(a,b){return b-a});

轉換數組到字符串 -toString()

TML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。

1 HTML骨架格式

日常生活的書信，我們要遵循共同的約定。

同理：HTML 有自己的語言語法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html結構：包括head body
html標簽是以尖括號包圍的關鍵字
html標簽通常是成對出現的，有開始就有結束，包含成對標簽、獨立標簽
html通常都有屬性，格式：屬性名＝“屬性值”(多個屬性之間空格隔開)
html標簽不區分大小寫,建議小寫

2 html基本標簽

HTML標簽

作用：所有HTML中標簽的一個根節點。

head標簽

作用：用于存放：title,meta,base,style,script,link

注意：在head標簽中我們必須要設置的標簽是title

title標簽

作用：讓頁面擁有一個屬于自己的標題。

body標簽

作用：頁面在的主體部分，用于存放所有的HTML標簽：p,h,a,b,u,i,s,em,del,ins,strong,img

3 顏色的表示方式

color:文本的顏色
bgcolor:背景色
background:背景圖片

第一種方式：使用顏色名稱: 僅僅有16種顏色名可用英文字母，其余的要用16進制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二種方式：RGB模式

第三種：十六進制

#000000 #ffffff #325687 #377405

4 文檔類型<!DOCTYPE>（重點）

<!DOCTYPE html>這句話就是告訴我們使用哪個html版本，我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。

標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范，必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。

5 HTML標簽的語義化（重點）

所謂標簽語義化，就是指標簽的含義。

為什么要有語義化標簽：方便代碼的閱讀和維護，同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容，使用語義化標簽會具有更好地搜索引擎優化

核心：合適的地方給一個最為合理的標簽。

語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性，不管是誰都能看懂這塊內容是什么。

遵循的原則：先確定語義的HTML ，再選合適的CSS。

6 總結：（重要知識點）

雙標簽

<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>

單標簽

<br>
<hr>
<img>
<input>
<param>
<meta>
<link>

排版標簽

1.注釋標簽：<!–注釋–>
-------------------------------------
2.換行標簽：<br/>
-------------------------------------
3.段落標簽：<p>文本文字
   特點：段與段之間有行高
   屬性：align對齊方式
           (left：左對齊 center：居中 right：右對齊)
-------------------------------------
4.水平線標簽:<hr/>
   屬性:
        width：水平線的長度(兩種:第一種:像素表示；第二種，百分比表示)
        size: 水平線的粗細 (像素表示，例如：10px)
        color: 水平線的顏色
        align:水平線的對齊方式(left：左對齊 center：居中 right：右對齊)
-------------------------------------
5.容器標簽（重點）
     <div>:塊級標簽，獨占一行，換行
     <span>:行級標簽，所有內容都在同一行作用
     <div>:主要是結合css頁面分塊布局
     <span>:進行友好提示信息

標題標簽 (熟記)

為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，隨著數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行；

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

列表標簽

容器里面裝載著文字或圖表的一種形式，叫列表。列表最大的特點就是整齊、整潔、有序

無序列表 ul （重點）

無序列表標簽： <ul></ul>
    屬性：type :三個值，分別為：
           circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
    列表項：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。

無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol

有序列表標簽：<ol>
      屬性：type：1、A、a、I、i（數字、字母、羅馬數字）
      列表項： <li></li>

定義列表dl

\dl>
<dt>名詞1
<dd>名詞1解釋1
<dd>名詞1解釋2
…
<dt>名詞2
<dd>名詞2解釋1
<dd>名詞2解釋2
…
</dl>

dl>
名詞1
名詞1解釋1
名詞1解釋2
... 名詞2
名詞2解釋1
名詞2解釋2
...

圖片標簽

獨立標簽

屬性:
src：圖片地址： 相對路徑 （同一個網站） 絕對路徑 （不同網站）
width:寬度height:高度border:邊框align:對齊方式，代表圖片與相鄰的文本的相當位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白，以免文字或其它圖片過于貼近

鏈接標簽

超鏈接可以是文本，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。（不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接）

屬性：
href:跳轉頁面的地址(跳轉到外網需要添加協議)；
name:名稱，錨點(回到錨點: 頂部，底部，中間)，在訪問錨點的書寫格式:#name的值
target:_self(自己) _blank(新頁面，之前頁面存在) _
__parent top 默認
self_search相等于給頁面起一個名字，如果再次打開時，如果頁面存在，則不再打開新的頁面。可以是任意名字。

如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

在線咨詢

上一篇：3個步驟為網站添加響應式
下一篇：Web前端：JavaScript與HTML—你應該知道的基本區別

您的項目需求

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

整合營銷服務商

34道常見的HTML+CSS面試題（附答案）

JavaScript

您的項目需求