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>有兩個重要的屬性,action和method,method又有兩種方式乍狐,get和post。
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>
"type = password":輸入東西的時候哑子,頁面默認使用圓點展示
請輸入密碼:<input type="password" >
"type = placeholder":輸入框提示
用戶名:<input type="text" placeholder = "請輸入用戶名" >
"type = radio": 單選按鈕舅列。
需要注意的是,單選按鈕必須設(shè)置相同的name屬性才可以卧蜓。
<input type="radio" >男
<input type="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">
<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>
按鈕
<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>