柚子快報(bào)邀請(qǐng)碼778899分享:網(wǎng)絡(luò)安全 HTML 基礎(chǔ)
柚子快報(bào)邀請(qǐng)碼778899分享:網(wǎng)絡(luò)安全 HTML 基礎(chǔ)
參考:https://github.com/qianguyihao/Web/tree/master/01-HTML
1)HTML 基礎(chǔ)介紹
1.1)Web 萬(wàn)維網(wǎng)
Web(World Wide Web)即全球廣域網(wǎng),也稱為萬(wàn)維網(wǎng)。 我們常說的 Web端 就是網(wǎng)頁(yè)端。
網(wǎng)頁(yè) 是構(gòu)成網(wǎng)站的基本元素。網(wǎng)頁(yè)主要由文字、圖像和超鏈接等元素構(gòu)成。當(dāng)然,除了這些元素,網(wǎng)頁(yè)中還可以包含音頻、視頻以及Flash等。 我們?cè)跒g覽器上輸入網(wǎng)址后,打開的任何一個(gè)頁(yè)面,都是屬于網(wǎng)頁(yè)。
瀏覽器 是網(wǎng)頁(yè)運(yùn)行的平臺(tái),常見的瀏覽器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera 等。
1.2)W3C 組織
W3C:World Wide Web Consortium,萬(wàn)維網(wǎng)聯(lián)盟組織,用來制定web標(biāo)準(zhǔn)的機(jī)構(gòu)(組織)。 W3C 萬(wàn)維網(wǎng)聯(lián)盟是國(guó)際最著名的標(biāo)準(zhǔn)化組織。1994年成立后,至今已發(fā)布近百項(xiàng)相關(guān)萬(wàn)維網(wǎng)的標(biāo)準(zhǔn),對(duì)萬(wàn)維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。 W3C 組織就類似于現(xiàn)實(shí)世界中的聯(lián)合國(guó)。 為什么要遵循WEB標(biāo)準(zhǔn)呢?因?yàn)楹芏酁g覽器的瀏覽器內(nèi)核不同,導(dǎo)致頁(yè)面解析出來的效果可能會(huì)有差異,給開發(fā)者增加無(wú)謂的工作量。因此需要指定統(tǒng)一的標(biāo)準(zhǔn)。
:::info **注意:**我們?cè)?**安全方面 **一般僅關(guān)注 HTML 與 JS 即可,CSS 不存在安全風(fēng)險(xiǎn)。因此不太關(guān)注。 ::: Web 標(biāo)準(zhǔn):制作網(wǎng)頁(yè)要遵循的規(guī)范。 **Web 標(biāo)準(zhǔn):**不是某一個(gè)標(biāo)準(zhǔn),而是由 W3C 組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。 1、Web 標(biāo)準(zhǔn)包括三個(gè)方面:
結(jié)構(gòu)標(biāo)準(zhǔn)(HTML):用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類。表現(xiàn)標(biāo)準(zhǔn)(CSS):用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式。行為標(biāo)準(zhǔn)(JS):用于定義網(wǎng)頁(yè)的交互和行為。
根據(jù)上面的 Web 標(biāo)準(zhǔn),可以將 Web 前端分為三層,如下。
2、Web前端分三層:
HTML( HyperText Markup Language ):超文本標(biāo)記語(yǔ)言。從語(yǔ)義的角度描述頁(yè)面的結(jié)構(gòu)。相當(dāng)于人的身體組織結(jié)構(gòu)。CSS( Cascading Style Sheets ):層疊樣式表。從審美的角度美化頁(yè)面的樣式。相當(dāng)于人的衣服和打扮。JavaScript( 簡(jiǎn)稱 JS ):從交互的角度描述頁(yè)面的行為,實(shí)現(xiàn)業(yè)務(wù)邏輯和頁(yè)面控制。相當(dāng)于人的動(dòng)作,讓人有生命力。
3、打個(gè)比方:(拿黃渤舉例) HTML 相當(dāng)于人的身體組織結(jié)構(gòu):
CSS 相當(dāng)于人的衣服和打扮:
JS 相當(dāng)于人的行為:
:::info HTML( HyperText Markup Language ):超文本標(biāo)記語(yǔ)言。從語(yǔ)義的角度 描述頁(yè)面的結(jié)構(gòu)。相當(dāng)于人的身體組織結(jié)構(gòu)。 CSS( Cascading Style Sheets ):層疊樣式表。從審美的角度 美化頁(yè)面的樣式。相當(dāng)于人的衣服和打扮。 JS:JavaScript。從交互的角度 描述頁(yè)面的行為。相當(dāng)于人的動(dòng)作,讓人有生命力。 :::
:::info JS:JavaScript 一種腳本語(yǔ)言,可以用來創(chuàng)建動(dòng)態(tài)更新的內(nèi)容,控制多媒體,制作圖像動(dòng)畫,還有很多。( 好吧,雖然它不是萬(wàn)能的,但可以通過簡(jiǎn)短的代碼來實(shí)現(xiàn)神奇的功能。 ) 比如:通過 JS 限制用戶在網(wǎng)頁(yè)上復(fù)制內(nèi)容等等操作。 :::
1.3)介紹瀏覽器
瀏覽器是網(wǎng)頁(yè)運(yùn)行的平臺(tái),常見的瀏覽器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。如下圖所示:
**瀏覽器的組成:**瀏覽器分為兩部分
渲染引擎( 瀏覽器內(nèi)核 )JS 引擎 :::info 瀏覽器所采用的「渲染引擎」也稱之為「瀏覽器內(nèi)核」,用于解析 HTML 和 CSS、布局、渲染 等工作。渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。 渲染引擎 是瀏覽器兼容性問題出現(xiàn)的根本原因。 :::
:::info 渲染引擎的英文叫做 Rendering Engine。通俗來說,它的作用就是:讀取網(wǎng)頁(yè)內(nèi)容,計(jì)算網(wǎng)頁(yè)的顯示方式并顯示在頁(yè)面上。 :::
瀏覽器內(nèi)核chromeBlink歐鵬Blink360安全瀏覽器Blink360極速瀏覽器BlinkSafariWebkitFirefox 火狐GeckoIETrident
**備注:**360的瀏覽器,以前使用的IE瀏覽器的Trident內(nèi)核,但是現(xiàn)在已經(jīng)改為使用 chrome 瀏覽器的 Blink內(nèi)核。
:::info JS 引擎 也稱為 JS 解釋器。 用來解析網(wǎng)頁(yè)中的 JavaScript 代碼,對(duì)其處理后再運(yùn)行。 瀏覽器本身并不會(huì)執(zhí)行 JS 代碼,而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 。JS 引擎執(zhí)行代碼時(shí)會(huì)逐行解釋每一句源碼(轉(zhuǎn)換為機(jī)器語(yǔ)言),然后由計(jì)算機(jī)去執(zhí)行。所以 JavaScript 語(yǔ)言歸為腳本語(yǔ)言,會(huì)逐行解釋執(zhí)行。 :::
常見瀏覽器的 JS 引擎如下:
瀏覽器JS 引擎chrome、歐鵬V8Mozilla Firefox 火狐SpiderMonkey(1.0-3.0)/ TraceMonkey(3.5-3.6)/ JaegerMonkey(4.0-)SafariJavaScriptCore,也稱為Nitro,是 WebKit 引擎的一部分IETridentEdgeChakra。此外,ChakraCore是Chakra的開源版本,可以在不同的平臺(tái)上使用。OperaLinear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-)
補(bǔ)充說明: 1、SpiderMonkey 是第一款 JavaScript 引擎,由 JS 語(yǔ)言的作者 Brendan Eich 開發(fā)。 2、先以 WebKit 為例,WebKit 上由兩部分組成:
WebCore:負(fù)責(zé)解析 HTML 和 CSS、布局、渲染等工作。JavaScriptCore:負(fù)責(zé)解析和執(zhí)行 JavaScript 代碼。
1.4)HTML 概念
HTML 全稱為 HyperText Markup Language,譯為超文本標(biāo)記語(yǔ)言。 HTML 不是一種編程語(yǔ)言,是一種描述性的標(biāo)記語(yǔ)言。 作用:HTML是負(fù)責(zé)描述文檔語(yǔ)義的語(yǔ)言。
超文本 所謂的超文本,有兩層含義: (1)圖片、音頻、視頻、動(dòng)畫、多媒體等內(nèi)容,被稱為超文本,因?yàn)樗鼈兂隽宋谋镜南拗啤?(2)不僅如此,它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件,與世界各地主機(jī)的文件進(jìn)行連接。即:超級(jí)鏈接文本。
標(biāo)記語(yǔ)言 HTML 不是一種編程語(yǔ)言,是一種描述性的標(biāo)記語(yǔ)言。這主要有兩層含義: (1)標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽。比如:標(biāo)簽 表示超鏈接、標(biāo)簽 表示圖片、標(biāo)簽
表示一級(jí)標(biāo)題等等,它們都是屬于 HTML 標(biāo)簽。 說的通俗一點(diǎn)就是:網(wǎng)頁(yè)是由網(wǎng)頁(yè)元素組成的,這些元素是由 HTML 標(biāo)簽描述出來,然后通過瀏覽器解析,就可以顯示給用戶看了。 (2)編程語(yǔ)言是有編譯過程的,而標(biāo)記語(yǔ)言沒有編譯過程,HTML標(biāo)簽是直接由瀏覽器解析執(zhí)行。
:::info HTML 是負(fù)責(zé)描述文檔語(yǔ)義的語(yǔ)言 HTML 格式的文件是一個(gè)純本文文件(就是用 txt 文件改名而成),用一些標(biāo)簽來描述語(yǔ)義,這些標(biāo)簽在瀏覽器頁(yè)面上是無(wú)法直觀看到的,所以稱之為“超文本標(biāo)記語(yǔ)言”。 接下來,我們需要學(xué)習(xí) HTML 中的很多“標(biāo)簽對(duì)兒”,這些“標(biāo)簽對(duì)兒”能夠給文本不同的語(yǔ)義。 比如,面試的時(shí)候問你,
標(biāo)簽有什么作用?
正確答案:給文本增加主標(biāo)題的語(yǔ)義。錯(cuò)誤答案:給文字加粗、加黑、變大。
關(guān)乎“語(yǔ)義”的更深刻理解,等接下來我們學(xué)習(xí)了各種標(biāo)簽,就明白了。 :::
HTML 的歷史
HTML 的專有名詞
1.5)書寫第一個(gè) HTML 頁(yè)面
上面的內(nèi)容,就是 HTML 頁(yè)面的骨架。我們?cè)诖嘶A(chǔ)之上,新增幾個(gè)標(biāo)簽,完整代碼如下:( 內(nèi)容編寫在 body 標(biāo)簽以內(nèi) )
標(biāo)簽寫完之后,我們 用 Chrome 瀏覽器打開上面這個(gè) test.html 文件( 或者 Open With Live Server ) 看看頁(yè)面效果:到此,第一個(gè)簡(jiǎn)單的 HTML 頁(yè)面就寫完了。是不是很有成就感?
1.6)案例展示
:::info **案例:**通過 a 標(biāo)簽編寫暗鏈,引流提升 SEO ::: :::info 暗鏈 是 SEO 手法中相當(dāng)普遍的一種手段,籠統(tǒng)地說,它就是指一些人用非正常的手段獲取的其它網(wǎng)站的反向鏈接,最常見的黑鏈就是通過各種網(wǎng)站程序漏洞獲取搜索引擎權(quán)重或者 PR 較高的網(wǎng)站的 webshell,進(jìn)而在被黑網(wǎng)站上鏈接自己的網(wǎng)站,其性質(zhì)與明鏈一致,都是屬于為高效率提升排名,而使用的作弊手法。 :::
瀏覽器內(nèi)核會(huì)解析該標(biāo)簽,從而達(dá)到引流提升 SEO 的效果
:::info 典型的網(wǎng)絡(luò)黑色產(chǎn)業(yè)鏈有哪些? 類型 2:在線博彩平臺(tái)。隨著在線支付和智能手機(jī)的普及,地下賭場(chǎng)已經(jīng)迅速完成互聯(lián)網(wǎng)“轉(zhuǎn)型”,變?yōu)榫邆渫暾夹g(shù)鏈條的在線博彩平臺(tái)。制作團(tuán)隊(duì)專門負(fù)責(zé)快速開發(fā)賭博游戲 App;運(yùn)維團(tuán)隊(duì)大量租用境外服務(wù)器保證賭博游戲持續(xù)在線;資金團(tuán)隊(duì)在境內(nèi)開設(shè)大量空殼公司和金融賬戶收取并轉(zhuǎn)移賭資;營(yíng)銷團(tuán)隊(duì)雇傭黑客入侵正規(guī)網(wǎng)站植入賭博暗鏈,以此提高賭博網(wǎng)站的搜索引擎排名。 ::: :::info 防護(hù)方法:
網(wǎng)頁(yè)目錄監(jiān)控漏洞掃描( DevSecOps )企業(yè)藍(lán)軍( 第三方藍(lán)軍 )外圍防護(hù)( 網(wǎng)頁(yè)防篡改,WAF,應(yīng)用防火墻 ) :::
1.7)HTML 結(jié)構(gòu)詳解
HTML 標(biāo)簽通常是 **成對(duì)出現(xiàn) **的(雙邊標(biāo)記),比如
和
;也有
少部分單標(biāo)簽(
單邊標(biāo)記),如:
、
和
等。
屬性與標(biāo)記之間、各屬性之間需要以空格隔開。屬性值以雙引號(hào)括起來。
:::info HTML 骨架標(biāo)簽 :::
標(biāo)簽名定義說明HTML 標(biāo)簽頁(yè)面中最大的標(biāo)簽,我們成為根標(biāo)簽
文檔的頭部注意在 head 標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是 title:::info 快速生成 HTML 的骨架 :::
方式1:在 VS Code 中新建 html 文件,輸入html:5,按 Tab 鍵后,自動(dòng)生成的代碼如下:
參考:https://www.yuque.com/blogking/xiaodi/ftgcms8ge47z0psa
:::info
文檔聲明頭( DOCTYPE )
任何一個(gè)標(biāo)準(zhǔn)的 HTML 頁(yè)面,第一行一定是一個(gè)以 開頭的語(yǔ)句。這一行,就是文檔聲明頭,即 DocType Declaration,簡(jiǎn)稱 DTD。 :::
:::info
頁(yè)面語(yǔ)言( Lang )
下面這行標(biāo)簽,用于指定頁(yè)面的語(yǔ)言類型: :::
:::info
頭標(biāo)簽( Head )
字符集:charset - 字符集編碼方式視口:viewport - 表示視口寬度等于屏幕寬度關(guān)鍵字:Keywords - 這些關(guān)鍵詞,就是告訴搜索引擎,這個(gè)網(wǎng)頁(yè)是干嘛的,能夠提高搜索命中率。讓別人能夠找到你,搜索到你頁(yè)面描述:Description - 只要設(shè)置 Description 頁(yè)面描述,那么百度搜索結(jié)果,就能夠顯示這些語(yǔ)句,這個(gè)技術(shù)叫做 SEO(search engine optimization,搜索引擎優(yōu)化) :::
我是個(gè)三級(jí)標(biāo)簽
:::danger
meta 標(biāo)簽 - 頁(yè)面跳轉(zhuǎn)( http-equiv 屬性 )
上面這個(gè)標(biāo)簽的意思是說,1 秒之后,自動(dòng)跳轉(zhuǎn)到馬哥教育頁(yè)面。 :::
:::danger
body 標(biāo)簽( 屬性 ) - 填寫在標(biāo)簽中body 標(biāo)簽( 元素 )- 填寫在標(biāo)簽內(nèi)部 :::
# 屬性: 填寫在標(biāo)簽中我是個(gè)三級(jí)標(biāo)簽
# 內(nèi)容: 填寫在標(biāo)簽內(nèi)部百度# 內(nèi)容: 填寫在標(biāo)簽內(nèi)部
1.8)計(jì)算機(jī)編碼介紹
:::info 參考:https://www.yuque.com/blogking/xiaodi/vg8dky0kl8a9qgn0 :::
計(jì)算機(jī),不能直接存儲(chǔ)文字,存儲(chǔ)的是編碼。 計(jì)算機(jī)只能處理二進(jìn)制的數(shù)據(jù),其它數(shù)據(jù),比如:0-9、a-z、A-Z,這些字符
:::info 中文能夠使用的字符集兩種:
第一種:UTF-8。UTF-8 是國(guó)際通用字庫(kù),里面涵蓋了所有地球上所有人類的語(yǔ)言文字,比如阿拉伯文、漢語(yǔ)、鳥語(yǔ)……第二種:GBK(對(duì)GB2312進(jìn)行了擴(kuò)展)。gb2312 是國(guó)標(biāo),是中國(guó)的字庫(kù),里面僅涵蓋了漢字和一些常用外文,比如日文片假名,和常見的符號(hào)。
字庫(kù)規(guī)模: UTF-8(字很全) > gb2312(只有漢字) ::: :::info **重點(diǎn) 1:**避免亂碼 我們用 meta 標(biāo)簽聲明的當(dāng)前這個(gè) html 文檔的字庫(kù),一定要和保存的文件編碼類型一樣,否則亂碼(重點(diǎn))。拿 sublime 編輯器舉例,當(dāng)我們不設(shè)置的時(shí)候,sublime 默認(rèn)類型就是 UTF-8。而一旦更改為 gb2312 的時(shí)候,就一定要記得設(shè)置一下 sublime 的保存類型: 文件 → set File Encoding to → Chinese Simplified(GBK) 。VS Code 的道理一樣。 ::: :::info **重點(diǎn) 2:**UTF-8 和 gb2312 的比較 保存大?。篣TF-8(更臃腫、加載更慢)> gb2312 (更小巧,加載更快) 總結(jié):
UTF-8:字多,有各種國(guó)家的語(yǔ)言,但是保存尺寸大,文件臃腫;gb2312:字少,只用中文和少數(shù)外語(yǔ)和符號(hào),但是尺寸小,文件小巧。 :::
列出 2 個(gè)使用情形: 1)某公司是做日本動(dòng)漫的,經(jīng)常出現(xiàn)一些日語(yǔ)動(dòng)漫的名字,網(wǎng)頁(yè)要使用 UTF-8。如果用 gb2312 將無(wú)法顯示日語(yǔ)。 2)某公司就是中文網(wǎng)頁(yè),極度的追求網(wǎng)頁(yè)的顯示速度,要使用 gb2312。如果使用 UTF-8 將每個(gè)漢字多一個(gè) byte,所以 5000 個(gè)漢字,多 5kb。
:::danger 我們是怎么查看網(wǎng)頁(yè)的編碼方式的呢?在瀏覽器中打開網(wǎng)頁(yè),右鍵,選擇 “查看網(wǎng)頁(yè)源代碼”,找到 meta 標(biāo)簽中的 charset 屬性即可。 :::
2)HTML 排版標(biāo)簽
參考:HTML標(biāo)簽:排版標(biāo)簽.md
02-HTML標(biāo)簽:排版標(biāo)簽.pdf
2.1)標(biāo)題標(biāo)簽
標(biāo)題使用
至
標(biāo)簽進(jìn)行定義。
定義最大的標(biāo)題,
定義最小的標(biāo)題。 具有 align 屬性,屬性值可以是:left、center、right。
H1:馬哥教育
H2:馬哥教育
H3:馬哥教育
H4:馬哥教育
H5:馬哥教育
H6:馬哥教育
2.2)HTML 注釋
HTML 注釋的格式如下( VSCode 快捷鍵:Ctrl + / )
2.3)段落標(biāo)簽
段落,是英語(yǔ) paragraph 縮寫。 作用:可以把 HTML 文檔分割為若干段落。在網(wǎng)頁(yè)中如果要把文字有條理地顯示出來,離不開段落標(biāo)簽。就如同我們平常寫文章一樣,整個(gè)網(wǎng)頁(yè)也可以分為若干個(gè)段落。
This is a paragraph
This is another paragraph
:::info **屬性:**align=“屬性值” :對(duì)齊方式。屬性值包括 left center right。 :::
This is a paragraph
This is another paragraph
參考:https://blog.csdn.net/qq_36213140/article/details/121169952
**注意:**HTML 標(biāo)簽是分等級(jí)的,HTML 將所有的標(biāo)簽分為兩種:
**文本級(jí)標(biāo)簽:**p、span、a、b、i、u、em。文本級(jí)標(biāo)簽里只能放 文字、圖片、表單元素。( a 標(biāo)簽里不能放 a 和 input )**容器級(jí)標(biāo)簽:**div、h 系列、li、dt、dd。容器級(jí)標(biāo)簽里可以放置任何東西。
從學(xué)習(xí) p 的第一天開始,就要牢牢記?。?*p 標(biāo)簽是一個(gè)文本級(jí)標(biāo)簽,p 里面只能放文字、圖片、表單元素。**其他的一律不能放。
錯(cuò)誤寫法:(嘗試把 h 放到 p 里)
我是一個(gè)小段落
我是一級(jí)標(biāo)題
上圖顯示,瀏覽器不允許你這么做,我們使用 Chrome 的 F12 審查元素發(fā)現(xiàn),瀏覽器自己把 p 封閉掉了,不讓你去包裹 h1。 **PS:**Chrome 瀏覽器是 HTML5 支持度最好的瀏覽器。提供了非常好的開發(fā)工具,非常適合我們開發(fā)人員使用。審查元素功能的快捷鍵是 F12。
2.4)水平線標(biāo)簽
水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個(gè)部分。在網(wǎng)頁(yè)中常常看到一些水平線將段落與段落之間隔開,使得文檔結(jié)構(gòu)清晰,層次分明。
馬哥教育
網(wǎng)絡(luò)安全
屬性介紹:
align="屬性值":設(shè)定線條置放位置。屬性值可選擇:left right center。size="2":設(shè)定線條粗細(xì)。以像素為單位,內(nèi)定為 2。width="500"或width="70%":設(shè)定線條長(zhǎng)度??梢允墙^對(duì)值(單位是像素)或相對(duì)值。如果設(shè)置為相對(duì)值的話,內(nèi)定為 100%。color="#0000FF":設(shè)置線條顏色。noshade:不要陰影,即設(shè)定線條為平面顯示。若沒有這個(gè)屬性則表明線條具陰影或立體。
馬哥教育
網(wǎng)絡(luò)安全
2.5)換行標(biāo)簽
如果希望某段文本強(qiáng)制換行顯示,就需要使用換行標(biāo)簽。
This
is a para
graph with line breaks
2.6)
與
標(biāo)簽
和
唯一的區(qū)別在于:
是不換行的,而
是換行的。
馬哥教育
2.7)內(nèi)容居中標(biāo)簽
此時(shí) center 代表是一個(gè)標(biāo)簽,而不是一個(gè)屬性值了。 只要是在這個(gè)標(biāo)簽里面的內(nèi)容,都會(huì)居于瀏覽器的中間。
到了 HTML5 里面,center 標(biāo)簽不建議使用,建議使用 css 布局來實(shí)現(xiàn)。
馬哥教育
網(wǎng)絡(luò)安全
3)HTML 字體標(biāo)簽
:::info 參考:HTML標(biāo)簽:字體標(biāo)簽和超鏈接.md ::: 03-HTML標(biāo)簽:字體標(biāo)簽和超鏈接.pdf
3.1)特殊字符\轉(zhuǎn)義字符( HTML 實(shí)體編碼 )
**案例:**比如說,你想把
作為一個(gè)文本在頁(yè)面上顯示,直接寫
是肯定不行的,因?yàn)檫@代表的是一個(gè)段落標(biāo)簽,所以這里需要用到 轉(zhuǎn)義字符。應(yīng)該這么寫:
這是一個(gè) HTML 語(yǔ)言的 <p> 標(biāo)簽
錯(cuò)誤的效果如下:
這是一個(gè) HTML 語(yǔ)言的
標(biāo)簽
來一張表格,方便需要的時(shí)候查詢
特殊字符描述字符的代碼空格符?<小于號(hào)<>大于號(hào)>&和號(hào)&¥人民幣¥?版權(quán)??注冊(cè)商標(biāo)?°攝氏度°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2平方2(上標(biāo)2)23立方3(上標(biāo)3)3
下劃線,中劃線,斜線
:下劃線標(biāo)記或:中劃線標(biāo)記(刪除線)或:斜體標(biāo)記
馬哥教育
馬哥教育
馬哥教育
3.2)超鏈接
超鏈接有三種形式,下面分別講講。
外部鏈接:鏈接到外部文件
當(dāng)然,我們也可以直接點(diǎn)進(jìn)鏈接,訪問一個(gè)網(wǎng)址。代碼舉例如下:
郵件鏈接
效果:點(diǎn)擊之后,會(huì)彈出 outlook,作用不大。
超鏈接 a 標(biāo)簽 的屬性
href( 目標(biāo) URL )title( 懸停文本 )name( 主要用于設(shè)置一個(gè)錨點(diǎn)的名稱 )target( 告訴瀏覽器用什么方式來打開目標(biāo)頁(yè)面 )
_self:在同一個(gè)網(wǎng)頁(yè)中顯示(默認(rèn)值)_blank:在新的窗口中打開_parent:在父窗口中顯示_top:在頂級(jí)窗口中顯示
title 屬性舉例:
target 屬性舉例:
:::info **備注 1:**分清楚 img 和 a 標(biāo)簽 各自的屬性 :::
:::info **備注 2:**a 是一個(gè)文本級(jí)的標(biāo)簽 :::
比如一個(gè)段落中的所有文字都能夠被點(diǎn)擊,那么應(yīng)該是 p 包裹 a:
而不是 a 包裹 p:
段落段落段落段落段落段落
a 的語(yǔ)義要小于 p,a 就是可以當(dāng)做文本來處理,所以 p 里面相當(dāng)于放的就是純文字。
4)HTML 圖片標(biāo)簽
:::info 參考:HTML標(biāo)簽:圖片標(biāo)簽.md ::: 04-HTML標(biāo)簽:圖片標(biāo)簽.pdf
4.1)img 標(biāo)簽介紹
img:英文全稱 image(圖像),代表的是一張圖片。 如果要想在網(wǎng)頁(yè)中顯示圖像,就可以使用 img 標(biāo)簽,它是一個(gè)單標(biāo)簽。語(yǔ)法如下:
能插入的圖片類型
能夠插入的圖片類型是:jpg(jpeg)、gif、png、bmp 等。不能往網(wǎng)頁(yè)中插入的圖片格式是:psd、ai 等。
**注意:**HTML 頁(yè)面不是直接插入圖片,而是插入圖片的引用地址,所以要先把圖片上傳到服務(wù)器上。
img 標(biāo)簽的 src 屬性 這里涉及到圖片的一個(gè)屬性:
src屬性:指圖片的路徑。英文名稱 source。
在寫 **圖片的路徑 **時(shí),有兩種寫法:相對(duì)路徑、絕對(duì)路徑
4.2)相對(duì)路徑與絕對(duì)路徑
:::info 寫法一:圖片的相對(duì)路徑 :::
相對(duì)當(dāng)前頁(yè)面所在的路徑。兩個(gè)標(biāo)記** . **和 **… **分別代表 當(dāng)前目錄 和 上一層目錄。
:::info 舉例 2: :::
上方代碼的意思是說,當(dāng)前 html 頁(yè)面有一個(gè)并列的 images 文件夾,在文件夾 images 中存放了一張圖片1.jpg。
:::info 寫法二:圖片的絕對(duì)路徑 :::
絕對(duì)路徑包括以下兩種:
以盤符開始的絕對(duì)路徑。舉例:
網(wǎng)絡(luò)路徑。舉例:
總結(jié):
相對(duì)路徑的好處:站點(diǎn)不管拷貝到哪里,文件和圖片的相對(duì)路徑關(guān)系都是不變的。相對(duì)路徑使用有一個(gè)前提,就是網(wǎng)頁(yè)文件和你的圖片,必須在一個(gè)服務(wù)器上。
無(wú)論是在 a 標(biāo)簽還是 img 標(biāo)簽上,如果要用路徑。只有兩種路徑能用,就是相對(duì)路徑和絕對(duì)路徑:
相對(duì)路徑從自己出發(fā),找到別人。絕對(duì)路徑,就是http://或者h(yuǎn)ttps://開頭的路徑。
4.3)img 標(biāo)簽的其他屬性
width:圖像的寬度。height:圖像的高度。
width 和 height,在 HTML5 中的單位是 CSS 像素,在 HTML 4 中既可以是像素,也可以是百分比??梢灾恢付?width 和 height 中的一個(gè)值,瀏覽器會(huì)根據(jù)原始圖像進(jìn)行縮放。 重要提示:如果要想保證圖片等比例縮放,請(qǐng)只設(shè)置 width 和 height 中其中一個(gè)。
# 將圖像寬度和高度分別設(shè)置為 500,800 像素
alt:當(dāng)圖片不可用(無(wú)法顯示)的時(shí)候,代替圖片顯示的內(nèi)容。alt 是英語(yǔ) alternate “替代” 的意思,代表替換資源。 :::info Alt 屬性效果演示: :::
如上圖所示:當(dāng)圖片 src 不可用的時(shí)候,顯示文字。 這樣做,至少能讓用戶知道,這個(gè)圖片大概是什么內(nèi)容。
title 屬性
title:提示性文本。鼠標(biāo)懸停時(shí)出現(xiàn)的文本。
title 元素的值一般作為 提示條(tooltip) 呈現(xiàn)給用戶,在光標(biāo)于圖片上停下后顯示出來。 盡管這確實(shí)能給用戶提供更多的信息,您不該假定用戶真的能看到:用戶可能只有鍵盤或觸摸屏。如果要把特別重要的信息提供給用戶,可以選擇上面提供的一種方法將其內(nèi)聯(lián)顯示,而不是使用 title。
**案例:**點(diǎn)擊圖片跳轉(zhuǎn)鏈接
# 利用 a 標(biāo)簽包含 img 標(biāo)簽來實(shí)現(xiàn) - 點(diǎn)擊圖片跳轉(zhuǎn)鏈接
5)HTML 列表標(biāo)簽( 待完成 )
:::info 參考:HTML標(biāo)簽:列表標(biāo)簽.md ::: 05-HTML列表標(biāo)簽.pdf
5.1)無(wú)序列表
無(wú)序列表
,無(wú)序列表中的每一項(xiàng)是
英文單詞解釋如下:
ul:unordered list,無(wú)序列表 的意思。li:list item,列表項(xiàng) 的意思。
- 默認(rèn)1
- 默認(rèn)2
- 默認(rèn)3
注意:
li 不能單獨(dú)存在,必須包裹在 ul 里面;反過來說,ul 的“兒子”不能是別的東西,只能有 li。我們這里再次強(qiáng)調(diào),ul 的作用,并不是給文字增加小圓點(diǎn)的,而是增加無(wú)序列表的“語(yǔ)義”的。
屬性:
type=“屬性值”。屬性值可以選: disc(實(shí)心原點(diǎn),默認(rèn)),square(實(shí)心方點(diǎn)),circle(空心圓)。
不光是
標(biāo)簽有 type 屬性,
里面的
標(biāo)簽也有 type 屬性(雖然說這種寫法很少見)。 效果如下:
當(dāng)然了,列表之間是可以嵌套的。我們來舉個(gè)例子。代碼:
- 北京市
- 海淀區(qū)
- 朝陽(yáng)區(qū)
- 東城區(qū)
- 廣州市
- 天河區(qū)
- 越秀區(qū)
CSS 屬性:
list-style-position: inside /* 給 ul 設(shè)置這個(gè)屬性后,將小圓點(diǎn)包含在 li 元素的內(nèi)部 */
ul 標(biāo)簽實(shí)際應(yīng)用場(chǎng)景 場(chǎng)景1、導(dǎo)航條:
場(chǎng)景 2、li 里面放置的內(nèi)容可能很多:
聲明:ul 的兒子,只能是 li。但是 li 是一個(gè)容器級(jí)標(biāo)簽,li 里面什么都能放,甚至可以再放一個(gè) ul。
5.2)有序列表
有序列表
,里面的每一項(xiàng)是
英文單詞:Ordered List。
- 呵呵噠1
- 呵呵噠2
- 呵呵噠3
屬性:
type="屬性值"。屬性值可以是:1(阿拉伯?dāng)?shù)字,默認(rèn))、a、A、i、I。結(jié)合start屬性表示從幾開始。
- 呵呵
- 呵呵
- 呵呵
- 嘿嘿
- 嘿嘿
- 呵呵
- 哈哈
- 哈哈
- 哈哈
- 么么
- 么么
- 么么
和無(wú)序列表一樣,有序列表也是可以嵌套的哦,這里就不舉類似的例子了。 ol 和 ul 就是語(yǔ)義不一樣,怎么使用都是一樣的。ol 里面只能有 li,li 必須被 ol 包裹。li 是容器級(jí)。
ol 這個(gè)東西用的不多,如果想表達(dá)順序,大家一般也用 ul。舉例如下:
- 1. 小蘋果
- 2. 月亮之上
- 3. 最炫民族風(fēng)
5.3)定義列表
定義列表的作用非常大。
- 英文單詞:definition list,沒有屬性。dl 的子元素只能是 dt 和 dd。
- :definition title 列表的標(biāo)題,這個(gè)標(biāo)簽是必須的
- :definition description 列表的列表項(xiàng),如果不需要它,可以不加。
備注:dt、dd 只能在 dl 里面;dl 里面只能有 dt、dd。
- 第一條
- 你若是覺得你有實(shí)力和我玩,良辰不介意奉陪到底
- 我會(huì)讓你明白,我從不說空話
- 我是本地的,我有一百種方式讓你呆不下去;而你,無(wú)可奈何
- 第二條
- 良辰最喜歡對(duì)那些自認(rèn)能力出眾的人出手
- 你可以繼續(xù)我行我素,不過,你的日子不會(huì)很舒心
- 你只要記住,我叫葉良辰
- 不介意陪你玩玩
- 良辰必有重謝
上圖可以看出,定義列表表達(dá)的語(yǔ)義是兩層:
(1)是一個(gè)列表,列出了幾個(gè) dd 項(xiàng)目(2)每一個(gè)詞兒都有自己的描述項(xiàng)。
備注:dd 是描述 dt 的。
定義列表用法非常靈活,可以一個(gè) dt 配很多 dd:
- 北京
- 國(guó)家首都,政治文化中心
- 污染很嚴(yán)重,PM2.0天天報(bào)表
- 上海
- 魔都,有外灘、東方明珠塔、黃浦江
- 廣州
- 中國(guó)南大門,有珠江、小蠻腰
還可以拆開,讓每一個(gè) dl 里面只有一個(gè) dt 和 dd,這樣子感覺清晰一些:
- 北京
- 國(guó)家首都, 政治文化中心
- 污染很嚴(yán)重, PM2.0天天報(bào)表
- 上海
- 魔都, 有外灘, 東方明珠塔, 黃浦江
- 廣州
- 中國(guó)南大門, 有珠江, 小蠻腰
真實(shí)案例:(京東最下方)
上圖中的結(jié)構(gòu)如下:
京東商品分類如下: dt、dd 都是容器級(jí)標(biāo)簽,想放什么都可以。所以,現(xiàn)在就應(yīng)該更加清晰的知道:用什么標(biāo)簽,不是根據(jù)樣子來決定,而是語(yǔ)義(語(yǔ)義本質(zhì)上是結(jié)構(gòu))。
5.4)表格標(biāo)簽
表格標(biāo)簽用 表示。一個(gè)表格
是由每行 組成的,每行是由每個(gè)單元格
組成的。所以我們要記住,一個(gè)表格是由行組成的( 行是由列組成的 ),而不是由行和列組成的。在以前,要想固定標(biāo)簽的位置,唯一的方法就是表格?,F(xiàn)在可以通過 CSS 定位的功能來實(shí)現(xiàn)。但是現(xiàn)在在做頁(yè)面的時(shí)候,表格作用還是有一些的。 例如,一行的單元格:
上面的表格中沒有加文字,所以在生成的網(wǎng)頁(yè)中什么都看不到。
例如,3 行(tr) 4 列(td)的單元格:
千古壹號(hào) 23 男 黃岡 許嵩 29 男 安徽 鄧紫棋 23 女 香港 上圖中的表格好像沒看到邊框呀,不急,接下來看看 標(biāo)簽的 屬性。
**
**的屬性:
border:邊框。像素為單位。:?jiǎn)卧竦木€和表格的邊框線合并(表格的兩邊框合并為一條)width:寬度。像素為單位。height:高度。像素為單位。bordercolor:表格的邊框顏色。align:**表格 **的水平對(duì)齊方式。屬性值可以填:left right center。 注意:這里不是設(shè)置表格里內(nèi)容的對(duì)齊方式,如果想設(shè)置內(nèi)容的對(duì)齊方式,要對(duì)單元格標(biāo)簽
進(jìn)行設(shè)置)cellpadding:?jiǎn)卧駜?nèi)容到邊的距離,像素為單位。默認(rèn)情況下,文字是緊挨著左邊那條線的,即默認(rèn)情況下的值為 0。 注意不是單元格內(nèi)容到四條邊的距離哈,而是到一條邊的距離,默認(rèn)是與左邊那條線的距離。如果設(shè)置屬性dir="rtl",那就指的是內(nèi)容到右邊那條線的距離。cellspacing:?jiǎn)卧窈蛦卧裰g的距離(外邊距),像素為單位。默認(rèn)情況下的值為0bgcolor="#99cc66":表格的背景顏色。background="路徑src/...":背景圖片。 背景圖片的優(yōu)先級(jí)大于背景顏色。bordercolorlight:表格的上、左邊框,以及單元格的右、下邊框的顏色bordercolordark:表格的右、下邊框,以及單元格的上、左的邊框的顏色 這兩個(gè)屬性的目的是為了設(shè)置3D的效果。dir:公有屬性,單元格內(nèi)容的排列方式(direction)。 可以 取值:ltr:從左到右(left to right,默認(rèn)),rtl:從右到左(right to left) 既然說dir是共有屬性,如果把這個(gè)屬性放在任意標(biāo)簽中,那表明這個(gè)標(biāo)簽的位置可能會(huì)從右開始排列。
單元格帶邊框的效果:
千古壹號(hào) 23 男 黃岡 許嵩 29 男 安徽 鄧紫棋 23 女 香港 5.5)內(nèi)嵌框架
內(nèi)嵌框架用 表示。 是 的子標(biāo)記。 內(nèi)嵌框架 inner frame:嵌入在一個(gè)頁(yè)面上的框架 屬性:
src="subframe/the_second.html":內(nèi)嵌的那個(gè)頁(yè)面width=800:寬度height=“150:高度scrolling="no":是否需要滾動(dòng)條。默認(rèn)值是true。name="mainFrame":窗口名稱。公有屬性。
內(nèi)嵌框架舉例:在內(nèi)嵌頁(yè)面中切換顯示不同的頁(yè)面
效果展示:在內(nèi)嵌頁(yè)面中切換顯示不同的頁(yè)面.mp4
我是文字頁(yè)面
千古壹號(hào) 23 男 黃岡 許嵩 29 男 安徽 鄧紫棋 23 女 香港 5.6)表單標(biāo)簽
表單標(biāo)簽用 表示,用于與服務(wù)器的交互。 表單就是收集用戶信息的,就是讓用戶填寫的、選擇的。 屬性:
name:表單的名稱,用于 JS 來操作或控制表單時(shí)使用;id:表單的名稱,用于 JS 來操作或控制表單時(shí)使用;action:指定表單數(shù)據(jù)的處理程序,一般是 PHP,如:action=“l(fā)ogin.php”method:表單數(shù)據(jù)的提交方式,一般取值:get (默認(rèn)) 和 post。
**注意:**表單和表格嵌套時(shí),是在