【HTML】初識HTML

什么是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版本

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常用編輯器

HTML 標(biāo)簽參考手冊 | HTML 標(biāo)準(zhǔn)屬性參考手冊.

語義化

標(biāo)簽語義化可以給我們帶來什么樣的好處呢澄暮?

  1. 更容易被搜索引擎收錄。
  2. 更容易讓屏幕閱讀器讀出網(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.


頭部的一些標(biāo)簽
HTML 圖像標(biāo)簽
HTML表格標(biāo)簽
HTML列表標(biāo)簽

大多數(shù) HTML 元素被定義為塊級元素內(nèi)聯(lián)元素苛白。

  • 塊級元素在瀏覽器顯示時,通常會以新行來開始(和結(jié)束)焚虱。
  • 內(nèi)聯(lián)元素在顯示時通常不會以新行開始购裙。
HTML分組標(biāo)簽
HTML表單標(biāo)簽(HTML5)
HTML腳本標(biāo)簽
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 顏色名
HTML 顏色值

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 - 定義文檔/資源的名稱
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末避咆,一起剝皮案震驚了整個濱河市舟肉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌查库,老刑警劉巖路媚,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異樊销,居然都是意外死亡整慎,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門围苫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來裤园,“玉大人,你說我怎么就攤上這事剂府∨±浚” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵周循,是天一觀的道長强法。 經(jīng)常有香客問我万俗,道長湾笛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任闰歪,我火速辦了婚禮嚎研,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘库倘。我一直安慰自己临扮,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布教翩。 她就那樣靜靜地躺著杆勇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪饱亿。 梳的紋絲不亂的頭發(fā)上蚜退,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天闰靴,我揣著相機與錄音,去河邊找鬼钻注。 笑死蚂且,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的幅恋。 我是一名探鬼主播杏死,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼捆交!你這毒婦竟也來了淑翼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤品追,失蹤者是張志新(化名)和其女友劉穎窒舟,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诵盼,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡惠豺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了风宁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洁墙。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖戒财,靈堂內(nèi)的尸體忽然破棺而出热监,到底是詐尸還是另有隱情,我是刑警寧澤饮寞,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布孝扛,位于F島的核電站,受9級特大地震影響幽崩,放射性物質(zhì)發(fā)生泄漏苦始。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一慌申、第九天 我趴在偏房一處隱蔽的房頂上張望陌选。 院中可真熱鬧,春花似錦蹄溉、人聲如沸咨油。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽役电。三九已至,卻和暖如春棉胀,著一層夾襖步出監(jiān)牢的瞬間法瑟,已是汗流浹背囱晴。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瓢谢,地道東北人畸写。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像氓扛,于是被迫代替她去往敵國和親枯芬。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案采郎? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,742評論 1 92
  • 一:在制作一個Web應(yīng)用或Web站點的過程中千所,你是如何考慮他的UI、安全性蒜埋、高性能淫痰、SEO、可維護性以及技術(shù)因素的...
    Arno_z閱讀 1,141評論 0 1
  • 基本操作 簡單操作 數(shù)據(jù)導(dǎo)出 數(shù)據(jù)導(dǎo)入 高級操作 修改collection的字段類型mongo可以通過find(....
    Jlan閱讀 1,564評論 0 1
  • 2010年充滿朝氣的我步入了大學(xué)的校門,滿臉的欣喜和抑制不住的心花怒放胳搞,懵懂卸例,單純称杨,傻乎乎肌毅。 2010年9月...
    睬姑娘的小蘑菇閱讀 195評論 0 0
  • 第二十六天打卡 繪制流程很簡單,大家都可以畫畫哦姑原! 叫上好朋友一起畫吧悬而!(?????)
    趙縵纓閱讀 249評論 0 5