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)