HTML5-fishc 学习笔记
## meta標(biāo)簽
meta標(biāo)簽中的內(nèi)容不在界面顯示
更多meta標(biāo)簽的內(nèi)容參考網(wǎng)站:https://man.ilovefishc.com/pageHTML5/meta.html
## style標(biāo)簽
以上為style標(biāo)簽的普通使用,還可以為不同的顯示方式設(shè)置不同的顯示樣式。
## link標(biāo)簽
link樣式表
link圖標(biāo)
## base標(biāo)簽
指定相對(duì)URL的解析基準(zhǔn),點(diǎn)擊頁(yè)面上“第一個(gè)例子”時(shí),會(huì)跳轉(zhuǎn)到"http://demo.fishc.com/html5/lesson4/test1
## script標(biāo)簽
載入JavaScript腳本
defer屬性 延遲執(zhí)行腳本 等html全部解析完畢,才執(zhí)行腳本內(nèi)容
defer屬性只能用于外部腳本文件
異步執(zhí)行腳本 async屬性 只能用于獲取外部腳本文件
腳本獲取 html解析同時(shí)進(jìn)行
noscripe 用來(lái)向不支持JavaScript的瀏覽器顯示一些替代內(nèi)容
## 注釋
html:
CSS : /* */
Javascript: // 單行注釋 或者 /* 多行注釋 */
## 塊級(jí)元素和行內(nèi)元素
br元素: 換行
## HTML字符實(shí)體
在html中不能直接使用某些字體,需要特定符號(hào)進(jìn)行替換。例如“<”需用<; 替換
## pre標(biāo)簽
保留等寬字體
## code標(biāo)簽
顯示源代碼內(nèi)容
多行代碼用pre嵌入code表示
定義程序的變量:var
定義用戶的輸入:kbd
定義程序的輸出:samp
引用部分:
** q元素**
在引用內(nèi)容兩側(cè)加入引號(hào)
** blockquote元素**
cite元素-定義標(biāo)題
abbr元素
** dfn元素-術(shù)語(yǔ)
address元素-定義作者信息
ruby元素
效果:
bdo元素-指定文本排版方式 從左到右ltr 從右到左rtl
格式化部分:
strong元素-強(qiáng)調(diào)文本重要性,加粗
b元素-加粗顯示,表示粗體,無(wú)重要語(yǔ)義
em元素-表示強(qiáng)調(diào),斜體
i元素-表示斜體,無(wú)語(yǔ)義
del元素-元素內(nèi)內(nèi)容會(huì)加入刪除線
ins元素-所在內(nèi)容會(huì)加入下劃線
s元素-所在內(nèi)容會(huì)被劃掉
u元素-定義專有名詞
mark元素-標(biāo)記內(nèi)容,黃色底色
sup,sub元素-上下標(biāo),用于數(shù)學(xué)公式或化學(xué)公式
small元素-小字表示內(nèi)容
列表部分:
ul元素-無(wú)序列表
li元素-表格中每一項(xiàng)內(nèi)容
ol元素-有序列表 屬性:reverse start type
CSS樣式用于表格
列表嵌套
dl元素-定義列表 dt-項(xiàng)目?jī)?nèi)容 dd-項(xiàng)目?jī)?nèi)容所對(duì)應(yīng)的項(xiàng)目介紹
table 元素-表示表格,th表頭,td內(nèi)容,caption表頭· html5后,表格的權(quán)限得到限制,需要用CSS制作表格樣式。
thead tbody tfoot元素配合th td使用,優(yōu)化表格樣式
colgroup元素-對(duì)列進(jìn)行設(shè)置
form表單的屬性
form input button標(biāo)簽
表單提交方法:get post
autocomplete-自動(dòng)填充屬性 on/off 可單獨(dú)設(shè)置某一個(gè)input的屬性
target-指定目標(biāo)顯示位置 如:_blank 在新的頁(yè)面顯示
value-設(shè)置默認(rèn)值
autofocus-自動(dòng)聚焦
disable-禁用,不傳遞數(shù)據(jù)
readonly-禁止修改,傳遞數(shù)據(jù)
## label元素 用于文本內(nèi)容輸出,不會(huì)帶來(lái)樣式上的變化
fieldset標(biāo)簽-可以對(duì)內(nèi)容進(jìn)行分組并“包裹”起來(lái),清晰表達(dá)
legen屬性-fieldset的說(shuō)明信息
單選框 - select標(biāo)簽 option標(biāo)簽
下拉列表太長(zhǎng)時(shí)可對(duì)選項(xiàng)內(nèi)容進(jìn)行分組:
input標(biāo)簽的可用屬性:
1.text,password
2.submit button reset
3.radio-單選框
同一單選框中的內(nèi)容其 name要保持一致
4.checkbox-多選框
5.時(shí)間和日期:time data month week datetime-local(本地日期和時(shí)間)
百分號(hào)編碼(URL編碼):有些符號(hào)會(huì)引起歧義,制定規(guī)范進(jìn)行替換
6.search-搜索框
7.color-顏色控制器
8.image-圖片作為按鈕,可以獲取鼠標(biāo)點(diǎn)擊圖片的相對(duì)位置,做出不同的回應(yīng)。
9.hidden -輸入框在網(wǎng)頁(yè)顯示時(shí) 完全不顯示,但在瀏覽器的控制臺(tái)可以看到元素的存在
10.file-上傳文件 需要設(shè)置form中的enctype=multipart/form-data method=post,還可以設(shè)置文件的類型accept,設(shè)置長(zhǎng)傳尺寸 multiple屬性-同時(shí)長(zhǎng)傳多個(gè)文件
11.number-限定數(shù)字輸入,并用min max step 設(shè)置數(shù)字的范圍
12.range-數(shù)值滾動(dòng)條 value設(shè)置默認(rèn)值
13.email,tel,url-郵箱,電話,網(wǎng)址
此時(shí)的輸入限制還不是很符合要求,可增加pattern 根據(jù)正則表達(dá)式來(lái)限制輸入
14.placeholder-提示內(nèi)容
15.required-設(shè)置字段為必填
16.size-設(shè)置輸入框長(zhǎng)度
17.maxlength-限制輸入的最大字符數(shù)量
18.list datalist-設(shè)置內(nèi)容關(guān)聯(lián)
19.output-輸出計(jì)算結(jié)果
20.textarea-接收多行文本輸入 cols rows wrap屬性
網(wǎng)頁(yè)的架構(gòu)
div-塊級(jí)無(wú)語(yǔ)義元素
新元素替代div的布局結(jié)構(gòu),可用標(biāo)簽如下:
默認(rèn)為收起來(lái)的狀態(tài),可設(shè)置open屬性,將其設(shè)為默認(rèn)打開(kāi)的狀態(tài)
map,area元素 -實(shí)現(xiàn)同一圖片的不同點(diǎn)擊位置,跳轉(zhuǎn)到不同鏈接
picture,source元素-設(shè)置圖片的適配屬性不同的屏幕尺寸,顯示不同的圖片
figure,figcaption元素-將圖片標(biāo)記為插圖
在網(wǎng)頁(yè)中嵌入視頻-video
src-插入播放的視頻
controls - 控制條
autoplay-自動(dòng)播放(不同瀏覽器下效果不同)
muted-靜音播放
preload-預(yù)加載(網(wǎng)頁(yè)加載完成后,自動(dòng)加載視頻,免除加載的時(shí)間,但會(huì)消耗流量,默認(rèn)為瀏覽器控制)
poster-視頻封面設(shè)置
loop-循環(huán)播放
在網(wǎng)頁(yè)中嵌入音頻-audio
src-插入播放的音頻
controls - 控制條
(其他元素與video相同)
字幕-track
添加WEBVTT文件,然后加載到track中
source-設(shè)置備用視頻源,依次嘗試多個(gè)視頻源,直到播放成功為止
iframe-嵌入其他網(wǎng)頁(yè)
也可嵌入地圖,并輸入位置坐標(biāo)
加入sandbox元素,保護(hù)本網(wǎng)頁(yè)免受嵌入網(wǎng)頁(yè)的影響
meter-一個(gè)范圍內(nèi)的值
progress-進(jìn)度條
a
總結(jié)
以上是生活随笔為你收集整理的HTML5-fishc 学习笔记的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: go mongodb排序查询_《Mong
- 下一篇: HTML,CSS的class与id命名规