HTML5—HTML學(xué)習(xí)

HTML學(xué)習(xí)感想:

下面大致的記錄了一寫HTML的學(xué)習(xí)筆記

什么是HTML?

HTML 是HyperText Markup Language的縮寫, 超文本標(biāo)記語言拆座。

它是專門用來描述文本的語義的. 也就是說可以利用HTML來告訴瀏覽器哪些是標(biāo)題, 哪些是段落.

HTML標(biāo)簽

用于告訴瀏覽器這是一個(gè)網(wǎng)頁, 也就是說告訴瀏覽器是一個(gè)HTML文檔

title標(biāo)簽

專門用于指定網(wǎng)站的標(biāo)題, 并且這個(gè)指定的標(biāo)題將來還會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題

字符集

<mtea charset="GBK">和<meta charset="UTF-8">?

GBK(GB2312)和UTF-8區(qū)別:

GBK(GB2312)里面存儲的字符比較少, 僅僅存儲了漢字和一些常用外文 體積比較小

UTF-8里面存儲的世界上所有的文字 體積比較大

DTD文檔

<!doctype html>必須是 HTML 文檔的第一行仁连,位于? 標(biāo)簽之前抡笼。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范

H系列標(biāo)簽(Header 1~Header 6)

作用:用于給文本添加標(biāo)題語義

格式:<h1>xxxxxx</h1>

注意點(diǎn):1敏释、H標(biāo)簽是用來給文本添加標(biāo)題語義的, 而不是用來修改文本的樣式的

2字柠、H標(biāo)簽一共有6個(gè), 從H1~H6, 最多就只能到6, 超過6則無效

3到腥、被H系列標(biāo)簽包裹的內(nèi)容會(huì)獨(dú)占一行- 在H系列的標(biāo)簽中, H1最大, H6最小

4雁比、在實(shí)際開發(fā)中, 一定要慎用H系列的標(biāo)簽, 特別是H1標(biāo)簽. 在實(shí)際開發(fā)中一般情況下一個(gè)界面中只能出現(xiàn)一個(gè)H1標(biāo)簽(和SEO有關(guān))

P標(biāo)簽(Paragraph)

作用:告訴瀏覽器哪些文字是一個(gè)段落

格式:<p>xxxxxxxx</p>

注意點(diǎn): 在瀏覽器中會(huì)單獨(dú)占一行

Hr標(biāo)簽(Horizontal Rule)

作用: 在瀏覽器上顯示一條分割線

注意點(diǎn): 在瀏覽器中會(huì)單獨(dú)占一行

img標(biāo)簽

img標(biāo)簽中的src是英文source的縮寫

src:就是用來告訴img標(biāo)簽, 需要顯示的圖片名稱

width: 標(biāo)簽告訴圖片的寬度

height: 標(biāo)簽告訴圖片的高度

title: 用于告訴瀏覽器, 當(dāng)鼠標(biāo)懸停在圖片上時(shí), 需要彈出的描述框中顯示什么內(nèi)容

alt其實(shí)是英文alternate的縮寫, 它的作用就是用于告訴瀏覽器, 當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容

相對路徑和絕對路徑

為相對路徑就是每次都從.html文件所在的文件夾開始查找

絕對路徑就是每次都從指定的盤符開始查找

在實(shí)際開發(fā)中 通常用相對路徑,而很少用絕對路徑

a標(biāo)簽

a標(biāo)簽主要是控制頁面之間的跳轉(zhuǎn)

target屬性:_self: 用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn), 也就是不新建界面跳轉(zhuǎn). 默認(rèn)就是_self

_blank: 用于在新的選項(xiàng)卡中跳轉(zhuǎn), 也就是新建界面跳轉(zhuǎn)

title屬性:當(dāng)鼠標(biāo)懸停時(shí)顯示的提示文本的

base標(biāo)簽

base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接(a標(biāo)簽)需要如何打開侧蘸,在項(xiàng)目中使用較多

假鏈接

點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接我們稱之為假鏈接

假鏈接的格式:1.#:會(huì)自動(dòng)回到網(wǎng)頁的頂部

2.javascript:假鏈接不會(huì)自動(dòng)回到網(wǎng)頁頂部

列表標(biāo)簽

無序列表(unordered list)

ul>li? 給一堆數(shù)據(jù)添加列表語義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒有先后之分

有序列表(ordered list)?

ol>li? 給一堆數(shù)據(jù)添加列表語義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都有先后之分

定義列表(definition list)

dl>dt>dd? 給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個(gè)條目進(jìn)行相應(yīng)的描述dt英文definition title, 翻譯為定義標(biāo)題dd英文definition description, 翻譯為定義描述信息

表格標(biāo)簽

表格是一種數(shù)據(jù)的展現(xiàn)形式,在H5之前使用較多裁眯,現(xiàn)已廢棄

表單

表單就是專門用來收集用戶信息的作用,

<form><表單元素></form>

input標(biāo)簽

input標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同

明文輸入框type="text"????

暗文輸入框type="password"?

給輸入框設(shè)置默認(rèn)值value="我是默認(rèn)值"

單選框type="radio" 要想單選框互斥那么必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性讳癌,然后name屬性還必須設(shè)置相同的值穿稳,要想讓單選框默認(rèn)選中某一個(gè)框子, 那么可以給input標(biāo)簽添加一個(gè)checked屬性

datalist標(biāo)簽

作用: 給輸入框綁定待選項(xiàng)

<datalist><option>待選項(xiàng)內(nèi)容</option></datalist>

textarea標(biāo)簽

多行輸入框,可以指定寬度和高度晌坤,可以換行逢艘,默認(rèn)可以手動(dòng)拉伸

select標(biāo)簽

下拉列表,不能輸入內(nèi)容骤菠,可以設(shè)默認(rèn)值它改,可以選擇設(shè)定的值

video標(biāo)簽

播放視頻<video src=""></video?

src:video標(biāo)簽需要播放的視頻地址,autoplay: 是否需要自動(dòng)播放視頻

audio標(biāo)簽

播放音頻<audio><source src="" type=""></audio>

audio標(biāo)簽需要播放的音頻地址

詳情和概要標(biāo)簽

描述概要信息商乎,<details><summary>概要信息</summary詳情信息<details>

默認(rèn)情況下是折疊展示, 想看見詳情必須點(diǎn)擊

marquee標(biāo)簽

跑馬燈<marquee>內(nèi)容</marquee>

屬性:direction設(shè)置滾動(dòng)方向?

scrollamount滾動(dòng)速度

loop設(shè)置滾動(dòng)次數(shù)

背景顏色標(biāo)簽

background-color:屬性 , 設(shè)置背景顏色

background-image: url() 設(shè)置背景圖片 如果圖片的大小沒有標(biāo)簽的大小大, 那么會(huì)自動(dòng)在水平和垂直方向平鋪來填充

background-repeat屬性,設(shè)置平鋪方式央拖。 repeat 默認(rèn), 在水平和垂直都需要平鋪no-repeat 在水平和垂直都不需要平鋪repeat-x 只在水平方向平鋪repeat-y 只在垂直方向平鋪

background-position: 水平方向 垂直方向; 水平方向: left center right垂直方向: top center bottom 如果是具體距離,一定要加上單位px

背景關(guān)聯(lián)方式

attachment的屬性 scroll 默認(rèn)值鹉戚, 會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)fixed 不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鲜戒,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子抹凳,更是在濱河造成了極大的恐慌遏餐,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件却桶,死亡現(xiàn)場離奇詭異境输,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)颖系,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門嗅剖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嘁扼,你說我怎么就攤上這事信粮。” “怎么了趁啸?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵强缘,是天一觀的道長督惰。 經(jīng)常有香客問我,道長旅掂,這世上最難降的妖魔是什么赏胚? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮商虐,結(jié)果婚禮上觉阅,老公的妹妹穿的比我還像新娘。我一直安慰自己秘车,他們只是感情好典勇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著叮趴,像睡著了一般割笙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上眯亦,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天伤溉,我揣著相機(jī)與錄音,去河邊找鬼搔驼。 笑死谈火,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的舌涨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼扔字,長吁一口氣:“原來是場噩夢啊……” “哼囊嘉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起革为,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤扭粱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后震檩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體琢蛤,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年抛虏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了博其。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡迂猴,死狀恐怖慕淡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情沸毁,我是刑警寧澤峰髓,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布傻寂,位于F島的核電站,受9級特大地震影響携兵,放射性物質(zhì)發(fā)生泄漏疾掰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一徐紧、第九天 我趴在偏房一處隱蔽的房頂上張望静檬。 院中可真熱鬧,春花似錦浪汪、人聲如沸巴柿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽广恢。三九已至,卻和暖如春呀潭,著一層夾襖步出監(jiān)牢的瞬間钉迷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工钠署, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留糠聪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓谐鼎,卻偏偏與公主長得像舰蟆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子狸棍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

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