- 什么是HTML
- HTML基本語法
- 常用標簽及屬性
- 鏈接
- 文本標記
- 表格
- 列表
- 表單
- 結(jié)構(gòu)標記
什么是HTML
Hyper Text Markup Language诸蚕，超級文本標記語言
- 普通文本a:無特殊意義,超級文本<a>:超鏈接
- 超文本：文本具備特殊的功能
- 標記：超文本的組成形式<a>
- 語言：擁有自己的語法結(jié)構(gòu)
用該語言編寫的文件箫踩，以.html 或 .htm為后綴,用來設(shè)計網(wǎng)頁
由瀏覽器解釋運行遭垛，可以嵌入腳本語言編寫的程序片段，如JS
HTML基礎(chǔ)語法
1- 標記語法
標記以封閉類型劃分：
（1）封閉類型標記.也稱雙標記，必須成對出現(xiàn)
<標記>內(nèi)容</標記>
（2）非封閉類型的標記,也叫做空標記/單標記
<標記> 或 <標記/>
例如：
<a href=“www.baidu.com” id=“baidu-link”>標簽內(nèi)容</a>
其中：a為標簽名框冀，也叫元素；
href，id為屬性徐伐；
雙引號中的值為屬性值
1-1 元素
指尖括號及尖括號間所包圍的內(nèi)容部分
元素可以包含文本內(nèi)容和其他元素，也可以是空的
a.包含文本內(nèi)容：<p>這是一段文本</p>
b.元素嵌套：形成更為復雜的語法
<div>
<p></p>
</div>
注意:（1）嵌套順序募狂；（2）代碼縮進（保證代碼可讀性）
c.空標記<b></b>
1-2 屬性和值
屬性是用來修飾元素的
<標記 屬性="值" 屬性="值">
ex:<p align="center" id="p1"></p>
【常用的標準屬性】
id： 定義元素在頁面中的唯一標識
title：鼠標移入到元素上時提示的文本
class：樣式相關(guān)办素，定義元素引用的類選擇器
style：樣式相關(guān)，定義元素的行內(nèi)樣式
1-3 注釋
在源碼中編寫祸穷，但不會被瀏覽器所解釋的內(nèi)容性穿，成為注釋
可以將對代碼的解釋說明放在注釋中
語法：<!-- 注釋內(nèi)容 -->
2- 文檔結(jié)構(gòu)
（1）文檔類型聲明
指定HTML的版本和風格<!DOCTYPE html>
（2）HTML頁面
表示HTML頁面的開始與結(jié)束
語法：<html></html>
位于<!doctype html>之下
2-1 HTML頁面
包含頁面頭部和頁面主體兩部分
頁面頭部：定義頁面全局信息
<head></head>
緊跟在html之后，是html中的首個子元素
頭部所包含的內(nèi)容（子元素）
（1）網(wǎng)頁標題：<title>標題內(nèi)容</title>
（2）定義網(wǎng)頁的編碼格式,關(guān)鍵字雷滚，描述
網(wǎng)頁的編碼格式：<meta charset="utf-8">(utf-8:支持中英文需曾、標點、符號)
關(guān)鍵字：<meta name="keywords" content="關(guān)鍵字">
描述：<meta name="description" content="描述內(nèi)容">
（3）定義或引用javascript：<script></script>
（4）<style></style>定義內(nèi)部樣式
（5）<link>引入外部樣式
頁面主體：網(wǎng)頁顯示的主體內(nèi)容
<body></body>
【屬性】
text：表示文本顏色
bgcolor：表示網(wǎng)頁的背景顏色
簡單完整寫法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>頁面名稱</title>
<link rel=”stylesheet“ type="text/css" href="文件路徑"/>
<style>樣式</style>
<script>js腳本</script>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
常用標簽及屬性
1- 鏈接
又稱超鏈接祈远，設(shè)置頁面中允許被點擊的內(nèi)容呆万。
【標簽】<a></a>
【屬性】
href：鏈接地址（要跳轉(zhuǎn)到的頁面的地址）
target：目標，打開新網(wǎng)頁的形式
取值：
_blank：在新標簽頁中打開
_self：在自身頁面中打開（默認值）
title：鼠標放到鏈接上的提示
2- 文本標記
空格：
<: <
>: ?
?: ?
￥: ￥
斜體：<i></i>
粗體：<b></b>
刪除線：<s></s>
下劃線：<u></u>
上標：<sup></sup>
下標：<sub></sub>
以標題的形式來顯示文本內(nèi)容
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
【特點】
- 改變字號（一級最大车份，六級最心奔酢）
- 加粗顯示
- 上下有垂直的空白距離
- 獨立成行
【標簽】<p></p>
【特點】
- 默認文字大小
- 獨立成行
- 上下垂直空白
【標簽】<br>
【標簽】<hr>
【屬性】
size：尺寸，取值單位為 px（像素）躬充，可以省略
width：寬度逃顶，取值單位為px（像素）可以省略或百分比
color：顏色讨便，取值自然顏色值
align：水平對齊方式，取值：left/center/right
（1）塊分區(qū)元素：<div></div>
【特點】獨立成行
【作用】頁面布局
（2）行內(nèi)分區(qū)元素：<span></span>
【特點】多個元素在一行內(nèi)顯示
【作用】設(shè)置同一行文字內(nèi)的不同格式
（1）塊級元素（div 以政、p霸褒、h1~h6）
【特點】元素會獨占一行，即元素前后都會自動換行盈蛮，主要用于網(wǎng)頁布局
（2）废菱、行內(nèi)元素（ span、i抖誉、b殊轴、s、u袒炉、sub旁理、sup、img我磁、a）
【特點】不會換行孽文，多個元素會在一行內(nèi)顯示
3- 圖像
URL：Uniform Resource Locator（統(tǒng)一資源定位器，俗稱：路徑）
作用：標識網(wǎng)絡(luò)任何資源的位置
（1）絕對路徑：從文件所在的最高級目錄下開始查找資源文件所經(jīng)過的路徑
-包括網(wǎng)絡(luò)資源&本地資源（如：E:\mmper\練習\img\flower.jpg）
（2）相對路徑：從當前文件位置處開始夺艰，查找資源文件所經(jīng)過的路徑
- 同目錄芋哭，直接用， 直接通過資源文件名稱進行引用（a.jpg）
- 子目錄郁副，進入到子目錄中减牺，然后再對資源文件進行引用（img/a.jpg）
- 父目錄，返回到父級目錄再對資源文件進行引用（../a.jpg）
【標簽】<img>
【屬性】
src：圖片地址（絕對/相對）
width：圖像寬度
height：圖像高度
4- 表格
由<table>元素定義存谎。
【標簽】<table></table>
【屬性】
width ：設(shè)置表格的寬度
height：設(shè)置表格的高度
align：設(shè)置表格的對齊方式拔疚，取值: left/center/right
border：設(shè)置表格邊框?qū)挾? cellpadding：內(nèi)邊距（單元格邊框與內(nèi)容之間的距離）
cellspacing：外邊距（單元格之間的距離）
bgcolor：設(shè)置表格的背景顏色
<table></table>中包含的子元素：
【標簽】<tr></tr> （創(chuàng)建表行）
【屬性】
align：該行內(nèi)容水平對齊方式，取值: left/center/right
valign：該行內(nèi)容的垂直對齊方式愕贡，取值: top/middle/bottom
bgcolor：設(shè)置表格的背景顏色
【標簽】<td></td> （創(chuàng)建單元格）
【屬性】
align：內(nèi)容水平對齊方式
valign：內(nèi)容垂直對齊方式
width ：寬度
height ：高度
【標簽】<caption></caption> （表格標題）
【標簽】<th></th> （列標題）
行標題或列標題草雕，字體有加粗的效果，放在tr中
【標簽】<thead></thead> （表頭）
【標簽】<tbody></tbody> 表主體）
【標簽】<tfoot></tfoot> （表尾）
<caption>標題文本</caption>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
（1）不規(guī)則表格
- 跨列：從指定單元格位置處固以，橫向向右合并幾個（包含自己）單元格
屬性：colspan=值（數(shù)字墩虹，合并單元格的個數(shù)）;
- 跨行：從指定單元格位置處，縱向向下合并幾個（包含自己）單元格
屬性：rowspan=值（數(shù)字憨琳，合并單元格的個數(shù)）;
（2）表格的嵌套
在單元格中去嵌套另一個表格诫钓，但嵌套的表格必須要放在td中
5- 列表
將一組具有相似特征或者具有先后順序的內(nèi)容按照從上到下的順序排列在一起
<ol>
<li></li>
</ol>
【屬性】
type:指定列表項標志的類型，默認為數(shù)字排列
取值：1（默認值）/a/A/i/I
start:定義起始值(數(shù)字)篙螟，默認從1開始
取值：數(shù)字菌湃，如：start:1; start:i;等
<ul>
<li></li>
</ul>
【屬性】
type：指定無序列表的列表項標識
取值： disc,默認,實心圓/circle，空心圓/square遍略，實心矩形none惧所，不顯示標識
<dl>
<dt>列表中的標題內(nèi)容</dt>
<dd>列表中的數(shù)據(jù)</dd>
</dl>
使用場合：圖文混排時使用
6- 表單
由<form>定義骤坐，將用戶輸入的數(shù)據(jù)提交給后臺。
【常見屬性】
action：提交的服務(wù)器地址
method：表單數(shù)據(jù)提交的方式下愈，取值： get：明文提交/post：隱式提交
name：定義表單名稱纽绍，JS用到的比較多
id： 獨一無二的標識
如：<form action="url" method="get/post"> </form>
<input>元素
【主要屬性】
type：根據(jù)不同的type屬性值可以創(chuàng)建各種類型的輸入字段
value：最終提交給服務(wù)器的值
name：控件的名稱，提供給服務(wù)器使用势似，沒有name拌夏，控件則無法提交
id：唯一標識，只能在當前頁面使用履因，服務(wù)器不能用
disabled：禁用障簿，不能被提交
（1）文本框：<input type="text">
（2）密碼框：<input type="password">
【專有屬性】
maxlength：限制輸入的字符數(shù)，取值：數(shù)字
readonly：設(shè)置文本控件只讀
（3）單選按鈕：<input type="radio">
（4）復選框：<input type="checkbox">
【專有屬性】
checked栅迄，設(shè)置默認被選中
（5）提交按鈕：<input type="submit">
（6）重置按鈕：<input type="reset">
（7）普通按鈕：<input type="button">
（8）圖片按鈕：<input type="image" src="">
（9）隱藏域：<input type="hidden">
（10）文件選擇框：<input type="file">
按鈕（提交按鈕）
<button>內(nèi)容</button>
下拉選擇框select 和 option
<section name="">
<option value="" selected></option>
</section>
7- 結(jié)構(gòu)標記
HTML5所提供的結(jié)構(gòu)標記站故，專門用于表示常見的網(wǎng)頁結(jié)構(gòu)（即制作布局），提升布局代碼的語義性和可讀性
<header></header>：定義文檔的頁眉即頁面頂部信息
<nav></nav>：定義頁面的導航鏈接部分
<section></section>：定義文檔中的節(jié)毅舆，文檔中主體內(nèi)容
<article></article> ：定義獨立于文檔的其他部分內(nèi)容(章世蔗、節(jié)等)
<footer></footer>：定義某區(qū)域的腳注信息，頁面底部內(nèi)容等
<aside></aside>：多用于側(cè)邊欄和相關(guān)引用信息等
