眾所周知，前端三大支柱 HTML、CSS、JavaScript。所以，今天就來聊聊，你應(yīng)該知道的 HTML。
什么是HTML
HTML 是用來描述網(wǎng)頁的一種語言。
- HTML 指的是超文本標(biāo)記語言（Hyper Text Markup Language）
- HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
- HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 是什么樣的
簡單地來說，HTML的語法就是給文本加上表明文本含義的標(biāo)簽(Tag)，讓用戶（人或程序）能對文本得到更好的理解。
下面是一個最簡單的HTML文檔：
<html >
<head>
<title>first test</title>
</head>
<body>
<h1>My First HTML</h1>
<p>hello shiyanlou</p>
</body>
</html>
瀏覽器顯示如下圖：
瀏覽器顯示.png
所有的 HTML 文檔都應(yīng)該有一個 <html> 標(biāo)簽，<html> 標(biāo)簽可以包含兩個部分：<head> 和 <body>。
<head>標(biāo)簽用于包含整個文檔的一般信息，比如文檔的標(biāo)題（<title> 標(biāo)簽用于包含標(biāo)題），對整個文檔的描述，文檔的關(guān)鍵字等等。文檔的具體內(nèi)容就要放在 <body>標(biāo)簽里了。
HTML 標(biāo)簽
關(guān)于 HTML 標(biāo)簽參見此處（Ps：網(wǎng)上介紹的比較多，我就不多說了）
標(biāo)簽語法
- 雙標(biāo)記：<開始標(biāo)記>內(nèi)容</結(jié)束標(biāo)記>。
- 例 ：
<font>新華網(wǎng)</font>、<title>…</title>
- 單標(biāo)記：<標(biāo)記>。
- 例：
<hr>–加橫線、<br>–換行、<b>–加寬等。
- 標(biāo)記的屬性：<標(biāo)記 屬性1=參數(shù) 屬性2=參數(shù)…>內(nèi)容</標(biāo)記>。
- 例：
<font size=”5″ color=”red”><b>新華新聞</b></font>。
特殊標(biāo)簽(3個)：<!DOCTYPE>、<!– –>、<hr>
分類：
- 塊元素 ( block element )
-
div– 常用塊級主要標(biāo)簽 -
dl– 定義列表 -
form– 交互表單 -
h1-h6– 標(biāo)題 -
hr– 水平分隔線 -
ol , ul- 排序表單 ，非排序列表 -
p– 段落 -
pre– 格式化文本 -
table– 表格 -
blockquote– 塊引用
- 行元素 ( inline element )
-
a– 錨點 -
br– 換行 -
em– 強(qiáng)調(diào) -
i– 斜體 -
img– 圖片 -
input– 輸入框 -
label– 表格標(biāo)簽 -
q– 短引用 -
select– 項目選擇 -
span– 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊 -
textarea– 多行文本輸入框
Tips（BBS 中的兩個問題）
-
ul與ol
Q1：ul與ol之間的區(qū)別？
A：ul表示無序，ol表示有序序列。
Q2：什么時候用哪個？
A： 不明思議表示有序序列用ol，無序序列則使用ul。
<!-- ol -->
<ol>
<li></li>
<li></li>
</ol>
ol - 有序列表.png
<!-- ul -->
<ul>
<li></li>
<li></li>
</ul>
ul - 無序列表.png
-
div與span
Q1.div與span之間的區(qū)別？
A：div是塊級元素，不論大小默認(rèn)占一行，而且可以可以設(shè)置寬高以及外邊距。span是行內(nèi)元素，占它自身大小的位置，而且不能設(shè)置寬高以及外邊距。同時，div也可變?yōu)?span（display: inline），這樣div將變?yōu)樾袃?nèi)元素。span也可以變?yōu)?div（display: block），這樣span將變?yōu)閴K級元素，默認(rèn)占一行，而且可以設(shè)置寬高，同時，兩者要想實現(xiàn)既可以設(shè)置寬高、邊距，又可以不占一行，則display: inline-block。
Q2：什么時候用哪個？
A：在學(xué)習(xí)的過程中發(fā)現(xiàn)，div指定渲染 HTML 的容器。span指定內(nèi)嵌文本容器。因此，我認(rèn)為，div用于排版，span用于文字樣式
對于以上問題，僅是我的一家之談，如果你有更好的答案快來告訴我吧！
