HTML簡介
什么是HTML
HTML 是用來描述網(wǎng)頁的一種語言奠涌。
- HTML 指的是超文本標記語言:
Hyper Text Markup Language - HTML 不是一種編程語言，而是一種標記語言
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網(wǎng)頁
- HTML 文檔包含了HTML 標簽及文本內(nèi)容
- HTML文檔也叫做 web 頁面
HTML標簽(語法)
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)磷杏。
- HTML 標簽是由尖括號包圍的關鍵詞溜畅，比如 <html>
- HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
- 標簽對中的第一個標簽是開始標簽极祸，第二個標簽是結(jié)束標簽
- 開始和結(jié)束標簽也被稱為開放標簽和閉合標簽
- 標簽放在尖括號里 <>
- 標簽都是閉合的
- 一個或多個屬性值
- 可嵌套
- 注釋
- 書寫規(guī)范
- 小寫
- 屬性值雙引號
- 嵌套縮進
HTML實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML實例</title>
</head>
<body>
<h1>我是標題標簽</h1>
<p>我是段落標簽</p>
</body>
</html>
<!-- 解釋-->
<!DOCTYPE html> — 文檔類型慈格，寫成 <!doctype html> 也行。
<html></html> — <html>包含整個頁面的內(nèi)容遥金。
<head></head>—<head>包含頁面描述浴捆，CSS樣式等，但不會被用戶看到稿械。
<body></body>—<body>包含了你想被用戶看到的內(nèi)容选泻。
<meta charset="utf-8"> — 指定文檔的字符編碼為 UTF-8。
<title></title> — 設置頁面的標題美莫，顯示在瀏覽器標簽頁上页眯。
<!DOCTYPE> 聲明
- 首行 頂格
doctype 聲明是不區(qū)分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
HTML文檔頭部
<head>
<meta charset="UTF-8"> <!-- 定義文檔的字符編碼 -->
<title>title</title> <!-- 文檔標題 -->
<meta name="keywordss" content="音樂..."> <!-- 描述文檔的基本信息 -->
<meta name="description" content="...">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico"> <!-- 引入字體圖標 -->
<link rel="stylesheet" href="../css/style.css"> <!-- 引入css樣式 -->
<style>
p{
color: #999; /*樣式寫在style里*/
}
</style>
</head>
HTML標簽總結(jié)(常用)
文檔章節(jié)標簽
-
body呈現(xiàn)給用戶 -
header頭部 -
nav導航 -
aside和主要內(nèi)容不相關的區(qū)域 -
article相鄰獨立可重復主體 -
section文檔中的區(qū)域 -
footer尾部 -
hxh1-h6 標題
文本標簽
-
<a></a>超鏈接- 創(chuàng)建指向另一個文檔的鏈接
- 創(chuàng)建一個文檔內(nèi)部的錨點
- 鏈接到Email地址
-
emstrongstrong比em更強調(diào) -
span無語義 -
br換行 單閉合標簽 -
citeq引用- cite引用的出處
- q簡短的一段文字
-
bi格式化- 粗體但不想強調(diào)
b標簽 - 斜體 技術術語等
i標簽
- 粗體但不想強調(diào)
組標簽
-
div分區(qū)(其他標簽的容器) -
p段落 -
uloldl列表- 無序列表
ulli - 有序列表
olli - 自定義列表
dldtdd
- 無序列表
-
pre經(jīng)過格式化的內(nèi)容(保留空格和換行) -
blockquote大段引用
資源標簽
-
img嵌入圖片(自閉合圖片)
<img src="../cover.jpg" alt="封面"
-
iframe嵌入頁面(例如第三方廣告)
<iframe src="http://www.163.com"></iframe>
-
objectembed嵌入外部資源
嵌入一個flash插件
<object data="" type="application/x-shockwave-flash">
<param name="movie" value="http://pdfReader.swf">
<param name="flashvars" value="http://book.pdf">
</object>
<embed src="http://pdfReader.swf" type="application/x-shockwave-flash">
-
videoaudio視頻 音頻
<video controls poster="./res/poster.jpg" >
<source src="./res/video.mp4" type="video/mp4">
<track kind="subtitles" src="./res/video.vtt" srclang="cn" label="cn">
Your browser does not support the video tag.
</video>
可以自己在mdn 查看video屬性
主流瀏覽器都兼容HTML5的新標簽茂嗓，對于 IE8 及以下版本不認識 HTML5的新元素餐茵，可以使用 JavaScript 創(chuàng)建一個沒用的元素來解決，例如：
<script>document.createElement("header");</script>述吸，也可以使用shiv來解決兼容性問題忿族，詳情可參考HTML5 Shiv。
-
canvassvg圖- 基于像素的
canvas - 矢量的
svg
- 基于像素的
-
maparea熱點區(qū)域
表格標簽
跨行:
<table>
<caption>照片沖印價格詳情</caption>
<thead>
<tr><th>相片尺寸</th><th>富士</th><th>柯達</th></tr>
</thead>
<tbody>
<tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>
<tr><th>全景6寸</th><td>0.45</td><td>0.6</td></tr>
<tr><th>7寸</th><td>0.89</td><td>1</td></tr>
<tr><th>8寸</th><td>1.69</td><td>2</td></tr>
<tr><th>10寸</th><td>3.89</td><td>5</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">運費8元/單蝌矛，滿99元免運費</td></tr>
</tfoot>
</table>
跨列:
<table class="table">
<thead>
<tr><th>區(qū)域</th><th>寄達地</th><th>首重（元/1000g)</th><th>續(xù)重（元/1000g)</th></tr>
</thead>
<tbody>
<tr><th rowspan="2">一區(qū)</th><td>浙江道批、上海、江蘇</td><td>6</td><td>1</td></tr>
<tr><td>江西入撒、安徽</td><td>7</td><td>1</td></tr>
<tr><th>二區(qū)</th><td>北京隆豹、天津、河北</td><td>9</td><td>4</td></tr>
<tr><th>三區(qū)</th><td>遼寧茅逮、甘肅璃赡、四川</td><td>10</td><td>4</td></tr>
<tr><th>四區(qū)</th><td>吉林判哥、黑龍江、云南</td><td>10</td><td>6</td></tr>
<tr><th>五區(qū)</th><td>新疆碉考、西藏</td><td>15</td><td>10</td></tr>
</tbody>
</table>
表單標簽
form表單標簽的應用:
<form action="/login" method="post" class="m-form">
<fieldset>
<legend>照片選擇</legend>
<label for="file">選擇照片</label><input type="file" id="file">
</fieldset>
<fieldset>
<legend>綜合設置</legend>
<div>選擇尺寸：</div>
<div>
<input class="cb" type="checkbox" name="size" id="cb_0" value="5"><label for="cb_0" checked>5寸</label>
<input class="cb" type="checkbox" name="size" id="cb_1" value="6"><label for="cb_1">6寸</label>
</div>
<div>選擇相紙：</div>
<div>
<input class="rd" type="radio" name="material" id="rd_0" value="fushi"><label for="rd_0" >富士</label>
<input class="rd" type="radio" name="material" id="rd_1" value="keda"><label for="rd_1" >柯達</label>
</div>
<div>
<label for="delivery">配送方式：</label>
<select id="delivery">
<option value="0">快遞</option>
<option value="1">EMS</option>
<option value="2" selected>平郵</option>
</select>
</div>
<div>
<label for="description">商品描述：</label>
<input class="txt" type="text" id="description" placeholder="描述">
</div>
<div>
<label for="feedback">意見反饋：</label>
<textarea name="feedback" rows="4" id="feedback"></textarea>
</div>
</fieldset>
<div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
屬性及全局屬性
所有標簽（包括 <html>） 都有的屬性,請自行學習此教程
- accesskey
- class
- contenteditable
- data-*
- draggable
- hidden
- id
- spellcheck
- style
- tabindex
- title
...
實體字符
實體字符表示
- &entity_name;
- &#entity_number;
- 有名字的 HTML 實體塌计，用 &名字; 表示
- 沒有名字的 HTML 實體，用 &#十進制; 表示
- 沒有名字的 HTML 實體侯谁，還可以用 &#x十六進制; 表示
- 空格
- 引號
"" - 大于號
>> - 小于號
<< - 版權號
?? - &
&&
參考:
聲明：本文章版權歸饑人谷和YM_雨蒙所有锌仅，轉(zhuǎn)載需經(jīng)作者同意
