HTML

html簡介

HTML的英文全稱是Hypertext Marked Language般婆,中文叫做“超文本標記語言”。一個HTML文件不僅包含文本內(nèi)容尺铣,還包含一些標簽颂暇,用來標記文檔內(nèi)容,以便在瀏覽器中正確顯示窗骑。

整個HTML文檔由以下個部分組成
<女责!doctypehtml>

文檔類型聲明 告訴瀏覽器使用的語法

<html></html> 

包含了整個頁面的內(nèi)容

<head></head>

包含頁面描述,css樣式等创译,但不會被用戶看到

<body></body>

包含整個文檔的內(nèi)容

<title></title>

設(shè)置頁面的標題抵知,顯示在瀏覽器標簽上

標簽

標簽分為三種:

  • 塊級元素
  • 行內(nèi)元素
  • 行內(nèi)塊元素
    這三種標簽可以相互轉(zhuǎn)換。

塊級元素

塊級元素占據(jù)一整行空間软族,瀏覽器會在塊級元素前后另起一行刷喜。

常用的塊級元素

1.div

含義:頁面內(nèi)容的一個獨立組成部分。
常見的用途有三種:1)劃分頁首立砸、頁尾掖疮、頁邊欄或?qū)Ш綑诘鹊龋?)表示頁面的分欄;3)將文章進一步分成幾個部分颗祝,比如正文浊闪、評論、文章的元數(shù)據(jù)等等螺戳。

<div>導(dǎo)航欄</div>

2.h1 - h6

HTML共有六級標題搁宾,從h1到h6,h1在一個頁面只能出現(xiàn)一次倔幼,其他可以出現(xiàn)多次盖腿。

<h1>標題</h1>

3.p

表示段落,p與div的區(qū)別是前者表示文本段落凤藏,后者表示更廣義的段落奸忽。

<p>這是段落</p>

4.表格元素 table

表格由 <table> 標簽來定義。表格的表頭使用 <th> 標簽進行定義揖庄。
每個表格均有若干行(由 <tr> 標簽定義)栗菜,每行被分割為若干單元格(由 <td> 標簽定義)。

<table>
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>女</td>
</tr>
效果

5.列表

列表分為有序列表蹄梢,無序列表疙筹,自定義列表富俄。

無序列表

是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記而咆。無序列表始于 <ul> 標簽霍比。每個列表項始于 <li>。

<ul>
<li>吃飯</li>
<li>睡覺</li>
</ul>
無序列表
有序列表

有序列表也是一列項目暴备,列表項目使用數(shù)字進行標記悠瞬。有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽涯捻。

<ol>
<li>吃飯</li>
<li>睡覺</li>
</ol>
有序列表
定義列表

自定義列表不僅僅是一列項目浅妆,而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始障癌。每個自定義列表項以 <dt> 開始凌外。每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>喜大普奔</dt>
<dd>喜大普奔(xǐ dà pǔ bēn)涛浙,也作“普大喜奔”康辑,網(wǎng)絡(luò)用語,是喜聞樂見轿亮、大快人心疮薇、普天同慶、奔走相告的縮略形式哀托。</dd>
</dl>
定義列表
常用的行內(nèi)元素

1.a

與href屬性搭配使用時惦辛,鏈接至外部鏈接劳秋,或者同一頁的某個錨點仓手。將href中內(nèi)容換成#,將會跳轉(zhuǎn)到頁面頂部玻淑。

<a href="www.baidu.com">百度</a>

同時鏈接也有幾個屬性
title
加入title屬性后鼠標放在鏈接上會顯示title的內(nèi)容嗽冒。

<a href="www.baidu.com" title = "最大的中文搜索引擎">百度</a>

target
target設(shè)置成_blank時,將會打開一個新的頁面。

<a href="www.baidu.com" title = "最大的中文搜索引擎" target = "_blank">百度</a>

要將鏈接定義到文檔內(nèi)部补履,<a>href 要對應(yīng)文檔內(nèi)某個元素的 id(id 的值在文檔內(nèi)要唯一)添坊。

<a href="#email鏈接">Email鏈接</a>

2.abbr

表示內(nèi)容是某個術(shù)語或短語的縮寫形式,它有一個title屬性箫锤,用來指明縮寫所代表的原始詞組贬蛙。

<abbr title="English">Eng</abbr>

3.em

表示強調(diào)

<em>強調(diào)</em>

4.strong

表示比em更強烈的強調(diào)

<strong>比em還強烈</strong>

5.span

用來標識其他標簽不適合表示的內(nèi)容,是一個通用型的行內(nèi)標簽谚攒。

6.img

在文檔中加入圖片阳准,圖片有兩個屬性,scr-圖片的出處野蝇,alt-替換文本,也就是當(dāng)圖片加載不出來時才能出現(xiàn)的文本內(nèi)容

<img scr = "圖片的出處" alt = "替換文本">

表單元素

HTML 表單用于搜集不同類型的用戶輸入绕沈。

<form>
........
</form>

<form>有兩個重要的屬性,actionmethod,method又有兩種方式乍狐,getpost
action
表單提交的地址
method
表單提交的方法
get:把表單里所有信息組裝起來浅蚪,拼接成url
post:url無變化
一般在取數(shù)據(jù)時用get,傳數(shù)據(jù)是用post掘鄙,post比get安全性高。
HTML 表單包含表單元素操漠。
表單元素指的是不同類型的 input 元素收津、復(fù)選框、單選按鈕浊伙、提交按鈕等等撞秋。

<input>元素

<input>有很多不同的形態(tài),根據(jù)type的屬性而定
“type = text" : 文本輸入框嚣鄙,可以輸入文字吻贿,并展示出來,是單行.

<form>
 First name:
<input type="text" name="firstname">
 Last name:
<input type="text" name="lastname">
</form> 
text

"type = password":輸入東西的時候哑子,頁面默認使用圓點展示

請輸入密碼:<input type="password" >
password

"type = placeholder":輸入框提示

用戶名:<input type="text" placeholder = "請輸入用戶名" >

placeholder

"type = radio": 單選按鈕舅列。
需要注意的是,單選按鈕必須設(shè)置相同的name屬性才可以卧蜓。

<input type="radio" >男
<input type="radio" >女

radio

type = checkbox:復(fù)選框
定義復(fù)選框帐要,如果要在后臺顯示哪個框被選中,需要設(shè)置value的值弥奸,value的值對應(yīng)選中的復(fù)選框榨惠,name的值為某類復(fù)選框的名稱。

<input type="checkbox" name="hobby" value="read">讀書
<input type="checkbox" name="hobby" value="sing">唱歌

type = file:上傳文件
有accept屬性盛霎,作用為規(guī)定上傳文件的格式赠橙。

<input type="file" accept="png">
file

<label>
<label> 標簽為 input 元素定義標注(標記)。label 元素不會向用戶呈現(xiàn)任何特殊效果愤炸。不過期揪,它為鼠標用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本摇幻,就會觸發(fā)此控件横侦。就是說挥萌,當(dāng)用戶選擇該標簽時,瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上枉侧。
<label> 標簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同引瀑。

<form>
<label for = "username">用戶名</label>
<input type="text" id = "username">
<label for = "password">密碼</label>
<input type="password" id = "password">
</form>
點擊文字描述就會選中對應(yīng)密碼框

按鈕
<input type="submit">定義用于向表單處理程序(form-handler)提交表單的按鈕。

<input type="submit">

下拉菜單
<select> 元素定義下拉列表榨馁,默認選擇的項目加上selected憨栽。

<select>
<select name="cars">
<option value="">寶馬</option>
<option value="">奔馳</option>
<option value="">五菱宏光</option>
</select>

<textarea> 元素
<textarea> 元素定義多行輸入字段(文本域):

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市翼虫,隨后出現(xiàn)的幾起案子屑柔,更是在濱河造成了極大的恐慌,老刑警劉巖掸宛,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件招拙,死亡現(xiàn)場離奇詭異,居然都是意外死亡饰序,警方通過查閱死者的電腦和手機求豫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門蝠嘉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來均唉,“玉大人,你說我怎么就攤上這事∥梅辏” “怎么了烙荷?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵终抽,是天一觀的道長桶至。 經(jīng)常有香客問我镣屹,道長价涝,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮居兆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘汹买。我一直安慰自己晦毙,他們只是感情好耙蔑,可當(dāng)我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布甸陌。 她就那樣靜靜地躺著,像睡著了一般耻卡。 火紅的嫁衣襯著肌膚如雪牲尺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天溃卡,我揣著相機與錄音蜒简,去河邊找鬼。 笑死犹赖,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的峻村。 我是一名探鬼主播,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼磕谅,長吁一口氣:“原來是場噩夢啊……” “哼雾棺!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起放刨,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤尸饺,失蹤者是張志新(化名)和其女友劉穎浪听,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掉分,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡酥郭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年不从,在試婚紗的時候發(fā)現(xiàn)自己被綠了犁跪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耘拇。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逞刷,到底是詐尸還是另有隱情,我是刑警寧澤仑最,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布警医,位于F島的核電站,受9級特大地震影響侈玄,放射性物質(zhì)發(fā)生泄漏吟温。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一潘悼、第九天 我趴在偏房一處隱蔽的房頂上張望治唤。 院中可真熱鬧糙申,春花似錦郭宝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锦爵。三九已至,卻和暖如春险掀,著一層夾襖步出監(jiān)牢的瞬間樟氢,已是汗流浹背侠鳄。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工伟恶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人博秫。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓挡育,卻偏偏與公主長得像畏线,于是被迫代替她去往敵國和親寝殴。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,652評論 2 354

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案市咽? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,751評論 1 92
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,240評論 1 41
  • HTML 指超文本標記語言(HyperText Markup Language)谷醉,是一種用于創(chuàng)建網(wǎng)頁的標準標記語言...
    神齊閱讀 1,945評論 0 3
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進行統(tǒng)一,系統(tǒng)功能實現(xiàn)集...
    liusong007閱讀 1,056評論 0 1
  • 學(xué)習(xí)HTML的最佳網(wǎng)站沒有之一http://www.w3school.com.cn/html/ 關(guān)于HTML/HT...
    Amyyy_閱讀 2,067評論 0 16