柚子快報(bào)邀請(qǐng)碼778899分享:前端 大數(shù)據(jù) HTML
HTML(Hyper Text Markup Language),譯為“超文本標(biāo)簽語(yǔ)言”,主要通過(guò)HTML標(biāo)簽對(duì)網(wǎng)頁(yè)中的文本、圖片、聲音等內(nèi)容進(jìn)行描述。
1.?HTML骨架格式
2.HTML標(biāo)簽分類
(1)雙標(biāo)簽(大部分)
? ? ? ? “/”為關(guān)閉符號(hào)
例如:
內(nèi)容(2)單標(biāo)簽(個(gè)別)
? ? ? ?例如:
3.HTML標(biāo)簽的關(guān)系
標(biāo)簽的相互關(guān)系一般就兩種:
(1) 嵌套(父子關(guān)系)
例如:在骨架格式中,與
(2) 并列(兄弟關(guān)系)
例如:在骨架格式中,
與4.使用sublime
sublime快速生成骨架的方式:
輸入“html”,按tab
*字符集:
UTF-8? --->包括全世界所有國(guó)家需要的字符
gb2312 --->簡(jiǎn)單中文
BIG5 --->繁體中文
GBK --->包含所有中文字符
5.HTML標(biāo)簽語(yǔ)義化?
標(biāo)簽語(yǔ)義化,即標(biāo)簽的含義。
優(yōu)點(diǎn):方便閱讀與后期維護(hù)。
遵循原則:先確定語(yǔ)義的HTML,再選合適的CSS。
6.HTML標(biāo)簽
(1)排版標(biāo)簽
? ? ? ? 1.標(biāo)題標(biāo)簽(雙標(biāo)簽)head
? ? ? 例如:
,,,,,,六個(gè)等級(jí),逐步遞減。
,,,,六個(gè)等級(jí),逐步遞減。
,,六個(gè)等級(jí),逐步遞減。
2.段落標(biāo)簽(雙標(biāo)簽)paragraph
例如:
...
3.水平線標(biāo)簽 (單標(biāo)簽)horizontal
例如:
4.換行標(biāo)簽 (單標(biāo)簽)break
例如:
? ?---->強(qiáng)制換行
5.div 與 span(雙標(biāo)簽)division
兩個(gè)皆無(wú)語(yǔ)義,是布局網(wǎng)頁(yè)的標(biāo)簽,用來(lái)裝內(nèi)容的。
div --->分割,分區(qū)
span --->跨度,范圍
其語(yǔ)法格式為:
...
特點(diǎn):
?1.
?2.標(biāo)簽用來(lái)布局,一行可以放多個(gè),類比成一個(gè)小盒子。
例如:
(2)文本格式化標(biāo)簽
*以下均為雙標(biāo)簽:
(1)粗體:、?
(2)斜體:、
(3)加刪除線:、
(4)加下劃線:、
更推薦使用、、、,語(yǔ)義更加強(qiáng)烈,其它標(biāo)簽只是使用,并沒有強(qiáng)調(diào)。
(3)標(biāo)簽屬性
屬性,即特性,特點(diǎn)。
讓HTML標(biāo)簽提供更多信息 ------> 用HTML標(biāo)簽的屬性來(lái)設(shè)置。
<標(biāo)簽名 屬性1="屬性值1"? 屬性2=......> 。。。標(biāo)簽名>
例如:
(4)圖像標(biāo)簽(img)
屬性屬性值描述srcURL圖像的路徑alt文本圖像不能顯示時(shí)的替換文本title文本鼠標(biāo)懸停時(shí)顯示的內(nèi)容width像素設(shè)置圖像的寬度height像素設(shè)置圖像的高度border數(shù)字設(shè)置圖像邊框的寬度
?例如:
*注:上圖像與該html文件在同一目錄中
?(5)鏈接標(biāo)簽
anchor,錨,鐵錨。
href(Hypertext Reference,超文本引用):用于指定鏈接目標(biāo)的url地址
target:用于指定鏈接頁(yè)面的打開方式,有self(覆蓋自身)和blank(新開網(wǎng)頁(yè))兩種,self為默認(rèn)值。
*注:1.外部鏈接 需要添加 http:// ? ? ? ? ?2.內(nèi)部鏈接 需要添加鏈接內(nèi)部頁(yè)面名稱,例:首頁(yè) ? ? ? ? ?3.若暫時(shí)沒有確定的鏈接,則將 href定義一個(gè)"#",意思為鏈接暫時(shí)為一個(gè)空鏈接
例如:
1.錨點(diǎn)定位
通過(guò)創(chuàng)建錨點(diǎn)鏈接,用戶能夠快速定位到目標(biāo)內(nèi)容。
創(chuàng)建錨點(diǎn)鏈接有兩個(gè)步驟:
1.使用“鏈接文本”創(chuàng)建鏈接文本
2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)位置
例如:
2.base標(biāo)簽(單標(biāo)簽)
base可以設(shè)置整體鏈接的打開狀態(tài)。
例如:
base可以設(shè)置整體鏈接的打開狀態(tài)。
若鏈接過(guò)多,則需要寫多個(gè)target,過(guò)于繁瑣。
因此,直接在
里寫一個(gè)base標(biāo)簽即可。7.路徑
當(dāng)一個(gè)頁(yè)面需要用到圖片(文件),首先就是要找到圖片(文件),找圖片(文件)就需要有一定的路徑去找。路徑一般分為:絕對(duì)路徑和相對(duì)路徑。
(1)相對(duì)路徑
圖像文件與HTML文件位于同一文件夾:只需輸入圖像文件的名稱即可,例如:圖像文件位于HTML文件的下一級(jí)文件夾:輸入文件夾名和文件名,例如:
圖像文件位于HTML文件的上一級(jí)文件夾:在文件名之前加一個(gè)"../",如果是上兩級(jí),則需使用"../../",以此類推,例如:
(2)絕對(duì)路徑?
1.本地路徑,一般不使用
2.完整的網(wǎng)絡(luò)地址,例如
“https://tupian.qqw21.com/article/UploadPic/2020-8/20208522181570993.jpg”。
8.列表標(biāo)簽
容器里面裝載著文字或圖表的一種形式,叫列表。
列表的最大特點(diǎn):整齊、整潔、有序。
(1)無(wú)序列表ul
各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分,是并列的。
基本語(yǔ)法格式為:
- 列表項(xiàng)1
- 列表項(xiàng)2
- 列表項(xiàng)3
- 列表項(xiàng)4
......
例如:
*注:
- 標(biāo)簽只能放
- 標(biāo)簽,其他標(biāo)簽都不允許
? ? ? ?
- 標(biāo)簽相當(dāng)于一個(gè)容器,
- 標(biāo)簽里可以放其他標(biāo)簽,下面有序列表同理
(2)有序列表ol
各個(gè)列表項(xiàng)之間有順序級(jí)別之分,是有序的。
基本語(yǔ)法格式為:
- 列表項(xiàng)1
- 列表項(xiàng)2
- 列表項(xiàng)3
- 列表項(xiàng)4
......
例如:
(3)自定義列表
定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述,定義列表的列表前沒有任何項(xiàng)目符號(hào)。
其基本語(yǔ)法為:
- 名詞1
- 名詞1解釋1
- 名詞1解釋2
- 名詞2
- 名詞2解釋1
- 名詞2解釋2
...
...
例如:?
9.表格table
表格:常見處理、顯示表格式的數(shù)據(jù)。
(1)創(chuàng)建表格
創(chuàng)建表格的基本語(yǔ)法格式如下:
單元格內(nèi)的文字 ...
...
、
、 都是創(chuàng)建表格的基本標(biāo)簽,缺一不可。? *
--->用于定義一個(gè)表格 ?
--->用于定義表格的一行,在 中有幾對(duì)
就有幾行表格 ? --->用于定義表格的單元格,必須嵌套在 中,一對(duì) 中有幾對(duì) 包起來(lái))。例如:,就表示該行有幾列 例如:?
*注: 格式固定,只有
標(biāo)簽可以放其他標(biāo)簽。表格里沒有列,只有單元格。 (2)表格屬性
屬性名含義常用屬性值border設(shè)置表格的邊框(默認(rèn)無(wú)邊框)像素值cellspacing設(shè)置單元格與單元格邊框之間的空白距離像素值( 默認(rèn)為2 )cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白距離像素值( 默認(rèn)為1)width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁(yè)中的水平對(duì)齊方式left、center、right
(3)表頭標(biāo)簽
表頭一般位于表格的第一行或第一列,其文本加粗居中。設(shè)置表頭僅需用表頭標(biāo)簽
替換相應(yīng)的單元格標(biāo)簽 即可。 例如:
(4)表格結(jié)構(gòu)
給表格劃分一下結(jié)構(gòu),一部分是表頭(用包起來(lái)),一部分是表體(用
(5)表格標(biāo)題標(biāo)簽
表格的標(biāo)題:caption
caption元素定義表格標(biāo)題。基本語(yǔ)法為:
...表格標(biāo)題... 例如:
*注:caption標(biāo)簽必須緊跟table標(biāo)簽,對(duì)每個(gè)表格只能定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中在表格之上。
(6)合并單元格
跨行合并:rowspan,用法為:rowspan="num"(num為合并的單元格數(shù)量)例如:
跨列合并:colspan,用法為:colspan="num"(num為合并的單元格數(shù)量)例如:
其思想:將多個(gè)內(nèi)容合并的時(shí)候,就會(huì)有多余的東西,把它刪掉。
公式:刪除的個(gè)數(shù) = 合并的個(gè)數(shù) -1
合并的順序:先上,先左
10.表單標(biāo)簽
在HTML中,一個(gè)完整的表單通常由表單控件、提示信息和表單域三個(gè)部分構(gòu)成。
表單,例如說(shuō)牛客平臺(tái)的登陸頁(yè)面。其目的是收集用戶信息。
(1)input控件
為單標(biāo)簽,其常用屬性如下:
屬性屬性值描述 type test單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選按鈕button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁(yè)面中的顯示寬度checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的 最多字符
例如:
(2)label標(biāo)簽
label標(biāo)簽為input元素定義標(biāo)簽。
label標(biāo)簽的使用:
1.直接用label包裹input,即
?2.如果label里有多個(gè)表單,想定位到某個(gè)表單可以通過(guò)for id的格式來(lái)實(shí)現(xiàn),即
(3)textarea控件(文本域)
若需要輸入大量的信息,就需要用到 textarea 控件了(主要用于做留言框)。其基本語(yǔ)法格式如下:
文本內(nèi)容
例如:
(4)下拉菜單
其基本格式為:
...
*注:
(5)表單域
表單域用
1. action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址 2. method用于設(shè)置表單數(shù)據(jù)的提交方式,其取值為get或post 3. name用于指定表單的名稱,以區(qū)分同一頁(yè)面中的多個(gè)表單
*注:每個(gè)表單都應(yīng)該有自己的表單域
11.datalist標(biāo)簽
*注:datalist里用id來(lái)和input進(jìn)行連接?
12.fieldset標(biāo)簽?
fieldset元素可將表單內(nèi)的相關(guān)元素分組、打包,與
?13.HTML5新增
(1)新增input的type屬性值
新增input的type屬性值
類型含義email輸入郵箱格式tel輸入手機(jī)號(hào)碼格式url ( 網(wǎng)址 )輸入url格式number輸入數(shù)字格式search搜索框(體現(xiàn)語(yǔ)義化)range自動(dòng)拖動(dòng)滑塊time小時(shí)分鐘date年月日datetime時(shí)間month月年week星期 年color生成一個(gè)顏色選擇表單
例如:?
(2)常用新屬性
常用新屬性
屬性用法含義placeholder占位符 當(dāng)用戶輸入時(shí),文本框里的文字消失autofocus規(guī)定當(dāng)頁(yè)面加載時(shí),input元素應(yīng)該自動(dòng)獲得焦點(diǎn)multiple多文件上傳autocomplete規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能,有兩個(gè)值,一個(gè)為on,一個(gè)為off,on代表記錄已經(jīng)輸入的值required必填項(xiàng)accesskey規(guī)定激活(使元素獲得焦點(diǎn))元素的快捷鍵,用 alt + 字母來(lái)的形式
*注:關(guān)于autocomplete的用法:1.需要提交按鈕 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.表單必須要有name屬性
14.多媒體標(biāo)簽
embed:標(biāo)簽定義嵌入內(nèi)容 先上傳到視頻平臺(tái),再點(diǎn)擊分享,獲得鏈接audio:播放音頻video:播放視頻
多媒體audio
其基本語(yǔ)法:
目前,
其屬性有:autoplay --- 自動(dòng)播放(Google瀏覽器可能禁用了自動(dòng)播放)controls --- 是否顯示默認(rèn)播放控件loop --- 循環(huán)播放(loop="-1"無(wú)限循環(huán)播放)
為了瀏覽器兼容,需要做三種聲音文件:ogg mp3 wav
考慮兼容性則需要以下代碼(由上至下運(yùn)行):
當(dāng)前MP3基本支持主流瀏覽器,在開發(fā)中一般寫一個(gè)MP3基本是夠用的。
多媒體video
?其基本語(yǔ)法:
?
其屬性有:autoplay --- 自動(dòng)播放(Google瀏覽器禁用了自動(dòng)播放,在后面加上 muted="muted" 可以解決)controls --- 是否顯示默認(rèn)播放控件loop --- 循環(huán)播放(loop="-1"無(wú)限循環(huán)播放)width --- 設(shè)置播放窗口寬度height --- 設(shè)置播放窗口高度muted --- 靜音播放preload --- auto預(yù)先加載,反之是 noneposter --- 其屬性值為 imgurl ,加載時(shí)等待的畫面圖片
為了瀏覽器兼容,需要做三種視頻格式:ogg、MPEG 4、WebM
考慮兼容性的做法,以下代碼(以下代碼由上至下運(yùn)行):
當(dāng)前MP4基本支持主流瀏覽器,在開發(fā)中一般寫一個(gè)MP4基本是夠用的。
柚子快報(bào)邀請(qǐng)碼778899分享:前端 大數(shù)據(jù) HTML
精彩文章
評(píng)論可見,查看隱藏內(nèi)容本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明,如有侵權(quán),聯(lián)系刪除。
您暫未設(shè)置收款碼
請(qǐng)?jiān)谥黝}配置——文章設(shè)置里上傳
掃描二維碼手機(jī)訪問(wèn)
文章目錄