HTML5學(xué)習(xí)心得總結(jié)(推薦)
Html學(xué)習(xí)總結(jié)
1.什么是html:HyperTextMarket language,超文本標(biāo)記語(yǔ)言,是用來(lái)描述網(wǎng)頁(yè)語(yǔ)言,html使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè),html不是編程語(yǔ)言,是一種標(biāo)記語(yǔ)言。
2.經(jīng)歷過(guò)得版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML5
3.H5新特性:
•用于繪畫的 canvas 元素
•用于媒介回放的 video 和 audio 元素
•對(duì)本地離線存儲(chǔ)的更好的支持
•新的特殊內(nèi)容元素,比如 article、footer、header、nav、section
•新的表單控件,比如 calendar、date、time、email、url、search
4.html都是由標(biāo)簽組成的
5.html的基本格式:
- <html>
- <head>
- 放置一些屬性信息,輔助信息。
- 引入一些外部的文件。(css,javascript)
- 它里面的內(nèi)容會(huì)先加載。
- meta:提供關(guān)于文檔的信息
- link:定義與外部資源的關(guān)系(css樣式)
- style:在文檔內(nèi)容定義樣式
- script:定義腳本程序,或者外聯(lián)腳本文檔
- noscript:包含瀏覽器禁用腳本,或不支持腳本時(shí)顯示的內(nèi)容
- </head>
- <body>
- 存放真正的數(shù)據(jù)。
- </body>
- </html>
- DOCTYPE:聲明文檔的版本
- meta:告訴瀏覽器一些關(guān)于該文檔的信息1.html注意事項(xiàng):
•多數(shù)標(biāo)簽都是有開始標(biāo)簽和結(jié)束標(biāo)簽,其中有個(gè)別標(biāo)簽因?yàn)橹挥袉我还δ?,或者沒有要修飾的內(nèi)容可以在標(biāo)簽內(nèi)結(jié)束。
•想要對(duì)被標(biāo)簽修飾的內(nèi)容進(jìn)行更豐富的操作,就用到了標(biāo)簽中的屬性,通過(guò)對(duì)屬性值的改變,增加了更多的效果選擇。
•屬性與屬性值之間用“=”連接,屬性值可以用雙引號(hào)或單引號(hào)或者不用引號(hào),一般都會(huì)用雙引號(hào)?;蚬疽?guī)定書寫規(guī)范。
h5全局屬性:

文本元素
- - br 換行
- - wbr 軟換行,在英文文章中,擴(kuò)大縮小瀏覽器的時(shí)候,遇到某一個(gè)長(zhǎng)單詞的時(shí)候,<wbr>可以規(guī)定這個(gè)單詞從哪里切開。
<a> 超鏈接,屬性:
- 1. href:url。
- 2. targert:頁(yè)面打開方式_blank新建頁(yè)面打開
- 3. 錨點(diǎn):也就是回到頂部那種。先在頂部定義一個(gè)id,然后在超鏈接中使用錨點(diǎn)跳去,href="#id";
- 4. 如果href中指定的協(xié)議,瀏覽器不能解析,就會(huì)調(diào)用應(yīng)用程序,可以解析的程序就可以打開。
•abrr 縮略語(yǔ)
•b 不帶任何強(qiáng)調(diào)意義的標(biāo)記一段文字,加粗
•strong 表示重要內(nèi)容,加粗
•em 表示著重強(qiáng)調(diào)一段文字,傾斜
•i 不帶任何強(qiáng)調(diào)意義的標(biāo)記一段文字,傾斜
•cite 表示作品標(biāo)題,將作品名傾斜
•del 表示從文檔中刪除的文字
•s 表示文字已經(jīng)不再準(zhǔn)確,也是刪除線
•u 不帶強(qiáng)調(diào)意義的給一段文字加下劃線
•ins 表示加入文檔的文字,也是下劃線
•small 表示小號(hào)字體
•sub 表示下標(biāo)文字
•sup 表示上標(biāo)文字
•q 表示引自其它的內(nèi)容,被q標(biāo)簽修飾的自己加了引號(hào)表示引用
•pre 表示格式化一段文字,也可以用來(lái)引入一段代碼
•span css中使用的添加樣式的模塊
•div會(huì)換行,span不會(huì)換行
•<!-- -->注釋
html實(shí)體
也就是在網(wǎng)頁(yè)中使用<,>,空格等。
<>
嵌入元素
1. 嵌入圖像
- img標(biāo)簽嵌入圖像
- src屬性:表示圖像的路徑
- alt屬性:表示圖像若顯示不出來(lái)顯示的內(nèi)容
- width/height屬性:設(shè)置圖像的寬和高
2. 嵌入一張網(wǎng)頁(yè)
- iframe標(biāo)簽表示嵌入一張網(wǎng)頁(yè)
- src屬性:表示超鏈接文檔的地址
- width/height:該區(qū)域的寬和高
- name:給iframe命名,方便以后a標(biāo)簽的target屬性調(diào)用<a href="shiti_test.html" target="iframe">進(jìn)入實(shí)體頁(yè)面</a>
3. 視頻/音頻 video/audio
- scr:路徑
- autoplay:自動(dòng)播放視頻
- controls:顯示播放控件
- loop:循環(huán)播放
- width/height
4. 進(jìn)度條
- progress標(biāo)簽
- max屬性:規(guī)定任務(wù)一共需要多少工作 100%
- value屬性:規(guī)定已經(jīng)完成了多少任務(wù) 80%分組元素
1. p 段落標(biāo)簽,在開始和結(jié)束的位置上都會(huì)留下一段空行
- 屬性:align,對(duì)齊方式
2. hr 分割線
- 屬性:width寬度 100px或者30%
- align:對(duì)齊方式
- size:粗細(xì)
- color:顏色
3. 有序列表ol li
- type:列表前的序標(biāo)號(hào)
- start:從第幾個(gè)開始
4. 無(wú)序列表ul li
5. 自定義列表
- dl:表示自定義列表
- dd:表示自定義列表項(xiàng)
- dt:表示自定義列表標(biāo)題
6. 區(qū)域
- div:聲明一塊區(qū)域
- span:聲明一塊區(qū)域 一般用于用戶名密碼之后的提示,例如:該用戶名已被注冊(cè)。
- div與span的區(qū)別:div一長(zhǎng)列,自動(dòng)換行,span一短列,不換行。
7. 圖片區(qū)域
- figure圖片區(qū)域,里邊套img標(biāo)簽和figcaption和a標(biāo)簽等
- figcaption:表示對(duì)圖片的描述<a href="http://item.jd.com/2600210.html" target="_blank"><figcaption><font size="2" color="red">華為P9:3999帶回家</font></figcaption></a>8. pre:格式化一段文字或者添加代碼表格元素(重要)
- 作用:格式化數(shù)據(jù)
- table 聲明一個(gè)表格屬性:
1.border 邊框 border=1
2.width 寬度
3.cellpadding 文字與內(nèi)邊框的距離 cellpadding=10
4.cellspacing 單元格間距 cellspacing=0
•tr 行
1.align:對(duì)齊方式
•td 列
1.width/height
2.colspan 合并列
3.rowspan 合并行
•th 表頭,會(huì)加粗,并且會(huì)居中
•caption 表格的標(biāo)題
•給表格劃分區(qū)域(不常用)
1.thead、tbody、tfoot
語(yǔ)義元素(不多用)
•h1~h6:表示標(biāo)題
•header:表示頭部
•nav:表示導(dǎo)航
•footer:表示尾部
•address:表示文檔或article的聯(lián)系信息
•aside:表示側(cè)邊欄
•section:表示主題區(qū)域
•article:表示一段獨(dú)立的內(nèi)容
- <article>
- <h3>Internet Explorer 9</h3>
- <p>Windows Internet Explorer 9(簡(jiǎn)稱 IE9)于 2011 年 3 月 14 日發(fā)布.....</p>
- </article>
- <!--header的使用方法-->
- <header>
- <h3>Welcome to my home page</h3>
- <p>My name is Luogg</p>
- </header>
- <!--section的使用方法-->
- <font color="blue" size="4">3.<section>的定義</font><br/>
- <section> 標(biāo)簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。<br/><br/>
- <!--footer的使用方法-->
- <font color="blue" size="4">4.<footer>的使用方法:</font>
- <footer>
- <p>作者 : Luogg</p>
- <p>聯(lián)系我 : <a href="http://www.cnblogs.com/luogg">luogg.blog.com</a></p>
- </footer>
- <!--新特性之nav導(dǎo)航標(biāo)簽的使用-->
- <nav>
- <a href="../right.html">回到主頁(yè)</a>
- </nav>
框架(就是在一個(gè)頁(yè)面中展示多個(gè)頁(yè)面),框架標(biāo)簽不能寫在body標(biāo)簽當(dāng)中或下面。不然瀏覽器無(wú)法解析。
•frameset:框架結(jié)構(gòu)
•ros:將頁(yè)面分為n行
•cols:將頁(yè)面分為n列
•frame:放在框架中的每個(gè)html文檔
- <frameset rows="20%,*">
- <frame src="top.html">
- <frameset cols="15%,*">
- <frame src="left.html">
- <frame src="right.html" name="right">
- </frameset>
- </frameset>
表單元素(重點(diǎn))
•作用:可以和服務(wù)器進(jìn)行交互
中的屬性:
1.action:定義一個(gè)URL,當(dāng)點(diǎn)擊提交按鈕時(shí),向這個(gè)URL發(fā)送數(shù)據(jù)
2.method(get/post):用于向action URL發(fā)送數(shù)據(jù)的HTTP方法。默認(rèn)是get。
get和post區(qū)別:
1)get方式表單封裝的數(shù)據(jù)直接顯示在url上。post方式數(shù)據(jù)不顯示在url上。
2)get方式安全級(jí)別較低,post級(jí)別較高。
3)get方式數(shù)據(jù)的長(zhǎng)度,post支持大數(shù)據(jù)。•input 標(biāo)簽:定義輸入字段,用戶可在其中輸入數(shù)據(jù)。
input 中 type屬性:
1)type=text 文本框
2)type=password 密碼
3)type=radio 單選按鈕 name屬性
4)type=checkbox 多選按鈕
單選和多選都有默認(rèn)值:checked="checked"
5)type=reset 重置按鈕
6)type=submit 提交按鈕
7)type=file 上傳文件的輸入項(xiàng)
8)type=button 按鈕
9)type=image 圖片(也是提交按鈕,)
10)type=hidden 隱藏標(biāo)簽(用戶不用看到的,但是咱們開發(fā)時(shí)必須要使用的,可以把數(shù)據(jù)封裝到隱藏標(biāo)簽中,和表單一起提交到后臺(tái))
選擇標(biāo)簽
select /select>選擇下拉框 option 表示內(nèi)容 /option
文本域textarea
textarea 文本內(nèi)容 /textareavalue屬性:
對(duì)于按鈕、重置按鈕和確認(rèn)按鈕:定義按鈕上的文本。
對(duì)于圖像按鈕:定義傳遞向某個(gè)腳本的此域的符號(hào)結(jié)果。
對(duì)于復(fù)選框和單選按鈕:定義 input 元素被點(diǎn)擊時(shí)的結(jié)果。
對(duì)于隱藏域、密碼域以及文本域:定義元素的默認(rèn)值。
注釋:不能與 type="file" 一同使用。
注釋:與 type="checkbox" 和 type="radio" 一同使用時(shí),此元素是必需的。•name屬性:為 input 元素定義唯一的名稱。
以上這篇HTML5學(xué)習(xí)心得總結(jié)(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/luogg/p/5649398.html
相關(guān)文章
html 隱藏滾動(dòng)條的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇html 隱藏滾動(dòng)條的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-10HTML基礎(chǔ)重點(diǎn)_一般標(biāo)簽、常用標(biāo)簽和表格
下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)重點(diǎn)_一般標(biāo)簽、常用標(biāo)簽和表格。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-09HTML制作個(gè)人簡(jiǎn)歷的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇HTML制作個(gè)人簡(jiǎn)歷的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-09- 在Web頁(yè)面上我們可以使用frame和rules來(lái)控制表格邊框是否可見,下面我們就來(lái)詳解HTML中table表格的frame和rules屬性,需要的朋友可以參考下2016-07-08
HTML的form表單標(biāo)簽用法學(xué)習(xí)教程
表單是Web頁(yè)面上負(fù)責(zé)用戶輸入與服務(wù)器端數(shù)據(jù)交互的最基礎(chǔ)方式,這里我們針對(duì)最基本的表單內(nèi)容顯示,來(lái)看一下HTML的form表單標(biāo)簽用法學(xué)習(xí)教程2016-07-08- 這篇文章主要介紹了HTML中的超鏈接標(biāo)簽使用教程,包括郵件鏈接的使用方法,需要的朋友可以參考下2016-07-08
HTML中table表格標(biāo)簽的基礎(chǔ)學(xué)習(xí)教程
用table標(biāo)簽在Web上顯示表格內(nèi)容是HTML所具有的最基本功能之一,這里我們就來(lái)看一下HTML中table表格標(biāo)簽的基礎(chǔ)學(xué)習(xí)教程,需要的朋友可以參考下2016-07-08HTML基礎(chǔ)必看---表單,圖片熱點(diǎn),網(wǎng)頁(yè)劃區(qū)和拼接詳解
下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)必看---表單,圖片熱點(diǎn),網(wǎng)頁(yè)劃區(qū)和拼接詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-10

