什么是HTML苍匆?
- HTML 是用來描述網(wǎng)頁的一種語言茵典。
- HTML 指的是超文本標(biāo)記語言:HyperTextMarkupLanguage
- HTML 不是一種編程語言,而是一種標(biāo)記語言
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽(markup tag)
- HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
- HTML 文檔包含了HTML標(biāo)簽及文本內(nèi)容
- HTML文檔也叫做web 頁面
HTML版本
<!DOCTYPE> 聲明
網(wǎng)絡(luò)上有很多不同的文件午磁,如果能夠正確聲明HTML的版本掰烟,瀏覽器就能正確顯示網(wǎng)頁內(nèi)容伴嗡。
常見的DOCTYPE聲明
HTML 5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文編碼
目前在大部分瀏覽器中急波,直接?輸出中文會出現(xiàn)中文亂碼的情況,這時候我們就需要在頭部將字符聲明為 UTF-8瘪校。
<meta charset="UTF-8">
HTML常用編輯器
- Notepad++:https://notepad-plus-plus.org/
- Sublime Text:http://www.sublimetext.com/
- HBuilder:http://www.dcloud.io/
HTML 標(biāo)簽參考手冊 | HTML 標(biāo)準(zhǔn)屬性參考手冊.
語義化
標(biāo)簽語義化可以給我們帶來什么樣的好處呢澄暮?
- 更容易被搜索引擎收錄。
- 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容阱扬。
HTML頭部
使用 <title> 標(biāo)簽定義HTML文檔的標(biāo)題
使用 <base> 定義頁面中所有鏈接默認(rèn)的鏈接目標(biāo)地址泣懊。
<base target="_blank">
使用 <meta> 元素來描述HTML文檔的描述,關(guān)鍵詞麻惶,作者馍刮,字符集等。
<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系窃蹋。<link> 標(biāo)簽通常用于鏈接到樣式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址.
<style type="text/css"></style>
<meta>標(biāo)簽描述了一些基本的元數(shù)據(jù)卡啰。
<meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上,但會被瀏覽器解析警没。
META元素通常用于指定網(wǎng)頁的描述匈辱,關(guān)鍵詞,文件的最后修改時間杀迹,作者亡脸,和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞)浅碾,或其他Web服務(wù)大州。
<meta>一般放置于 <head>區(qū)域
為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定義網(wǎng)頁作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">
<script>標(biāo)簽用于加載腳本文件,如: JavaScript及穗。
<javascript src="" type="text/javascripe"></javascript>
HTML CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
- 內(nèi)聯(lián)樣式- 在HTML元素中使用"style"屬性
- 內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style>元素來包含CSS
- 外部引用 - 使用外部 CSS文件
最好的方式是通過外部引用CSS文件.
已棄用的標(biāo)簽和屬性
在HTML 4, 原來支持定義HTML元素樣式的標(biāo)簽和屬性已被棄用摧茴。這些標(biāo)簽將不支持新版本的HTML標(biāo)簽。
不建議使用的標(biāo)簽有: <font>, <center>, <strike/>埂陆;
不建議使用的屬性: color 和 bgcolor.
大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素苛白。
- 塊級元素在瀏覽器顯示時,通常會以新行來開始(和結(jié)束)焚虱。
- 內(nèi)聯(lián)元素在顯示時通常不會以新行開始购裙。
1. <strong>和<em>標(biāo)簽,加入強調(diào)語氣
但兩者在強調(diào)的語氣上有區(qū)別:<em> 表示強調(diào)鹃栽,<strong> 表示更強烈的強調(diào)躏率。
并且在瀏覽器中<em> 默認(rèn)用 斜體 表示,<strong> 用 粗體 表示民鼓。
2. <blockquote> 標(biāo)簽薇芝,長文本引用。
作用也是引用別人的文本丰嘉。但它是對 長文本 的引用夯到,如在文章中引入大段某知名作家的文字,
這時需要這個標(biāo)簽饮亏。
3. <br> 標(biāo)簽分行顯示文本
4.
為你的網(wǎng)頁中添加一些空格
5. <hr> 標(biāo)簽耍贾,添加水平橫線
6. <address> 標(biāo)簽,為網(wǎng)頁加入地址信息
7. <code> 標(biāo)簽路幸,加入一行代碼
8. <pre> 標(biāo)簽荐开,為你的網(wǎng)頁加入大段代碼
9. <a> 標(biāo)簽,在默認(rèn)情況下简肴,鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開诡右,有時我們需要在新的瀏覽器窗口中打開
<a href="目標(biāo)網(wǎng)址"**target="_blank"**>click here!</a>
使用mailto在網(wǎng)頁中鏈接Email地址
<a herf="mailto:yy@imooc.com?subject=觀了不起的蓋茨比有感&body=你好彻秆,對此評論有些想法讨韭。">對此影評有何感想祭芦,發(fā)送郵件給我</a>
10. 下拉列表框
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
11. form表單中的label標(biāo)簽
label標(biāo)簽不會向用戶呈現(xiàn)任何特殊效果,它的作用是為鼠標(biāo)用戶改進了可用性仍翰。如果你在 label 標(biāo)簽內(nèi)點擊文本赫粥,
就會觸發(fā)此控件。就是說予借,當(dāng)用戶單擊選中該label標(biāo)簽時越平,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上
(就自動選中和該label標(biāo)簽相關(guān)連的表單控件上)频蛔。
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
HTML框架
通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面秦叛。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 屬性用于定義iframe表示是否顯示邊框晦溪。
設(shè)置屬性值為 "0" 移除iframe的邊框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
HTML顏色
HTML實體
HTML URL
scheme://host.domain:port/path/filename
- scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
- host - 定義域主機(http 的默認(rèn)主機是 www)
- domain - 定義因特網(wǎng)域名挣跋,比如 runoob.com
- port - 定義主機上的端口號(http 的默認(rèn)端口號是 80)
- path - 定義服務(wù)器上的路徑(如果省略三圆,則文檔必須位于網(wǎng)站的根目錄中)。
- filename - 定義文檔/資源的名稱