HTML

簡介描述

HTML(超文本標記語言---HyperText Markup Language)
一種由不同元素組成的標記語言泡嘴,它可以應用于文本片段量愧,使文本在文檔中具有不同的含義。
“超文本”是指在單個網站內或網站之間將網頁彼此連接的鏈接辑畦。

HTML第一版由李爵士發(fā)明
自1996年起,HTML規(guī)范一直由萬維網聯盟(W3C)維護腿倚,并由商業(yè)軟件廠商出資

HTML標記包含標簽纯出、基于字符的數據類型、字符引用和實體引用等幾個關鍵部分
編寫HTML語言的關鍵,就是把標簽用對暂筝,使它能夠正確傳達語義信息箩言,不要使用無含義或錯誤含義的標簽
HTML是沒有塊級元素或者內聯元素的區(qū)別,
HTML不管樣式焕襟,只管內容陨收,它只定義這是一個什么東西

下面是一個經典的 "Hello World"程序的例子

<!DOCTYPE html>
 <html>
   <head>
     <title>這是標題</title>
   </head>
   <body>
     <p>Hello world!</p>
   </body>
 </html>

<html>和</html>之間的文本描述網頁,<body>和</body>之間的文本為可視頁面內容鸵赖。標記文本“<title>這是標題</title>“定義了瀏覽器的頁面標題务漩,如圖:


頁面標題

HTML文檔需要以文檔類型聲明,HTML 4及以前的版本非常復雜
例如HTML4的的聲明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
相比之下HTML5的更為簡短它褪,方便記憶菲饼!
<!DOCTYPE html>

標簽

HTML文檔由嵌套的HTML元素構成。它們用HTML標簽表示列赎,包含于尖括號中宏悦,如 <p>
一個元素由一對標簽表示:“開始標簽”<p>與“結束標簽”</p>。元素如果含有文本內容包吝,就被放置在這些標簽之間
在開始與結束標簽之間也可以封裝另外的標簽饼煞,包括標簽與文本的混合。

一個HTML元素的一般形式為:<標簽 屬性1="值1" 屬性2="值2">內容</標簽>诗越。
一些HTML元素被定義為空元素砖瞧,其形式為<標簽 屬性1="值1" 屬性2="值2">
空元素不能封裝任何內容黔漂。例如
標簽或<img>搁胆。一個HTML元素的名稱即為標簽使用的名稱。注意淹辞,結束標簽的名稱前面有一個斜杠“/”床未,空元素不需要也不允許結束標簽

常見的標簽:

iframe標簽

內嵌的窗口竭翠,嵌套的瀏覽上下文,有效地將另一個HTML頁面嵌入到當前頁面中
例如:
<iframe src="https://www.baidu.com" name="xxx"></iframe>

image.png

效果會在當前網頁中嵌入一個網址為百度的窗口

通常iframe標簽主要配合a標簽使用薇搁,比如:

<iframe name=xxx src="#" frameborder="0"></iframe>
<a target =xxx >baidu</a>
<a target =xxx >qq</a>

意思是我的a標簽要在name為xxx的ifram內嵌窗口中打開斋扰,點擊baidu或者QQ打開相應的頁面
frameborder="0"類似邊框 設為0就是消除邊框,設為1就會顯示邊框
實際如圖:

ifram

a標簽

錨點啃洋,可以創(chuàng)建一個到其他網頁传货、文件、同一頁面內的位置宏娄、電子郵件地址或任何其他URL的超鏈接问裕;開始標簽和結束標簽都不能省略;a標簽必須有href孵坚,如果沒有就會變成一個span粮宛。
如果href="" href為空就會刷新頁面跳轉到自身
示例:
<a >External Link</a>
鏈接到外部地址
<a href="#屬性"></a> "#屬性" 屬性需要改成當前頁面跳轉出名稱
鏈接到本頁的某個部分
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
創(chuàng)建一個email鏈接

download屬性:指示瀏覽器下載URL而不是導航到URL貌踏,因此將提示用戶將其保存為本地文件。
<a download>下載</a>

target屬性:該屬性指定在何處打開鏈接

<a  target="_black">111</a>
<a  target="_self">222</a>
<a  target="_parent">333</a>
<a  target="_top">444</a>
  • _blank 新窗口
  • _self 當前頁面
  • _parent 父級頁面
  • _top 進入頂層

javascript偽協(xié)議:它不是URL窟勃,當我們有一個a標簽需求的同時又不想它跳轉的時候祖乳,就可以用javascript偽協(xié)議 代碼如下:
<a href="javascript:;">111</a>

input標簽

用于為基于Web的表單創(chuàng)建交互式控件,<input> 標簽沒有結束標簽
它的type屬性包含很多可用的值秉氧,常見值如下:

  • submit:用于提交表單的按鈕眷昆,submit是唯一能夠確定這個from表單能不能點擊提交的按鈕
  • button:無缺省行為按鈕
    <button>button</button>如果沒寫type,button 會自動升級為提交按鈕汁咏,默認是一個submit按鈕
  • checkbox: 復選框
  • radio:單選按鈕
  • multiple:多選按鈕
  • select:下拉列表

更多詳見

form標簽

表示了文檔中的一個區(qū)域亚斋,這個區(qū)域包含有交互控制元件,用來向web服務器提交信息攘滩;
from標簽作用也是跳轉頁面帅刊,和a標簽不同的是:a標簽跳轉的時候發(fā)起的是GET請求; form標簽跳轉的時候發(fā)起的是POST請求

form action="users" method="POST">
   <input type="text" name="xx">
   <input type="password" name="yy">
   <input type="submit" value="提交">
</form>

提交的name會上傳到請求的第四部分

table標簽

表示表格數據
詳見

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末漂问,一起剝皮案震驚了整個濱河市赖瞒,隨后出現的幾起案子,更是在濱河造成了極大的恐慌蚤假,老刑警劉巖栏饮,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異磷仰,居然都是意外死亡袍嬉,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門灶平,熙熙樓的掌柜王于貴愁眉苦臉地迎上來伺通,“玉大人,你說我怎么就攤上這事逢享」藜啵” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵拼苍,是天一觀的道長笑诅。 經常有香客問我调缨,道長疮鲫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任弦叶,我火速辦了婚禮俊犯,結果婚禮上,老公的妹妹穿的比我還像新娘伤哺。我一直安慰自己燕侠,他們只是感情好者祖,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著绢彤,像睡著了一般七问。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上茫舶,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天械巡,我揣著相機與錄音,去河邊找鬼饶氏。 笑死讥耗,一個胖子當著我的面吹牛,可吹牛的內容都是我干的疹启。 我是一名探鬼主播古程,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼喊崖!你這毒婦竟也來了挣磨?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤荤懂,失蹤者是張志新(化名)和其女友劉穎趋急,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體势誊,經...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡呜达,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了粟耻。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片查近。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖挤忙,靈堂內的尸體忽然破棺而出霜威,到底是詐尸還是另有隱情,我是刑警寧澤册烈,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布戈泼,位于F島的核電站,受9級特大地震影響赏僧,放射性物質發(fā)生泄漏大猛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一淀零、第九天 我趴在偏房一處隱蔽的房頂上張望挽绩。 院中可真熱鬧,春花似錦驾中、人聲如沸唉堪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唠亚。三九已至链方,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間灶搜,已是汗流浹背侄柔。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留占调,地道東北人暂题。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像究珊,于是被迫代替她去往敵國和親薪者。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案剿涮? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • HTML標簽解釋大全 一言津、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評論 1 41
  • 學習HTML的最佳網站沒有之一http://www.w3school.com.cn/html/ 關于HTML/HT...
    Amyyy_閱讀 2,050評論 0 16
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS取试、java...
    廖少少閱讀 2,080評論 2 21
  • 不記得在哪里看到過這樣一個論斷——男讀王小波悬槽,女讀張愛玲。不去討論論斷本身瞬浓,因為看書是件很個人的事初婆,討論沒啥意義。...
    Ladpger閱讀 939評論 4 1