著互聯(lián)網(wǎng)的不斷發(fā)展與前端開發(fā)技術(shù)的不斷進步,越來越多的人想在前端開發(fā)市場中分一杯羹,而HTML語言憑著它簡單易懂的特性成為了不少計算機萌新的入門語言。那么什么是HTML呢?
HTML,即超文本標記語言,是一種標識性的語言。它包括一系列標簽,通過這些標簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。
使用HTML語言,將所需要表達的信息按某種規(guī)則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件“翻譯”成可以識別的信息,即現(xiàn)在所見到的網(wǎng)頁。而HTML標簽是HTML語言中最基本的單位,是HTML最重要的組成部分。
標簽一般分為兩種:
1. 塊級標簽
占一整行的標簽。如<h>、<p>、<div>、<form>等
2. 行內(nèi)標簽
可以多個標簽共同占用一行的標簽。比如:<span>,<a>,<input>,<img>,<label>等
3. 塊級標簽特點
4. 行內(nèi)標簽特點
平時寫代碼很少用到HTML的特殊字符,最常用的可能是 (空格)了,但有時在移動端為了節(jié)省時間,可能會用這些字符實現(xiàn)某種特殊效果。
使用方法:
常用HTML特殊字符
作用:聲明文檔的解析類型(document .compatMode),避免瀏覽器的怪異模式。
瀏覽器有怪異模式(BackCompat)和標準模式(CSS1Compat)兩種模式,那么何為怪異模式和標準模式呢?
如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認就是BackCompat,,如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁面,即在不同的瀏覽器顯示不同的樣式。
但是如果你的頁面添加了<!DOCTYPE html>,那么就等同于開啟了標準模式,瀏覽器就得老老實實的按照W3C的標準解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
<meta>標簽用于提供關(guān)于 HTML 文檔的元數(shù)據(jù)(元數(shù)據(jù)是關(guān)于數(shù)據(jù)的信息),元數(shù)據(jù)不會顯示在頁面上,但是對于機器是可讀的。例如meta被用于設(shè)置關(guān)鍵字、設(shè)置頁面描述、設(shè)置作者、設(shè)置字符集、設(shè)置頁面定時跳轉(zhuǎn)等等。meta標簽放置在head標簽中,對meta的設(shè)置對搜索引擎注冊、搜索引擎優(yōu)化排名等有至關(guān)重要的作用。
<meta>有兩個屬性,分別是http-equiv屬性和name屬性,不同屬性有不同的參數(shù),這些不同的參數(shù)使得名,meta標簽有不同的功能:
http-equiv屬性
顧名思義,相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,與之對應(yīng)的屬性值為content,content中的內(nèi)容其實就是各個參數(shù)的變量值。
name屬性
name屬性主要用于描述網(wǎng)頁,與之對應(yīng)的屬性值為content,content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。
<title>開云見日</title>
link標簽有兩個作用:
1.設(shè)置標簽頁圖標:
2.外聯(lián)CSS文件:
用于存放或編寫css文件:
<style type="text/css"></style>
1.引進文件
<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>
2.寫js代碼
<script type="text/javascript">...</script>
屬性如下:
HTML還有很多標簽,像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動應(yīng)用開發(fā)大潮下,使用web技術(shù)進行移動應(yīng)用開發(fā)正變得越來越流行,慢慢會變成以HTML為核心的技術(shù)棧配合數(shù)據(jù)庫的天下。讓我們找準時代發(fā)展方向,努力學習,成為時代的弄潮兒吧!
abbr 全稱是 abbreviations,意思是縮寫。應(yīng)用場景也很簡單,為一些文章中的縮寫增加注釋。
以前在文章中對于縮寫的解釋經(jīng)常會這么做:
DAU(Daily Active User),日活躍用戶數(shù) ......
那我們用 abbr 標簽?zāi)兀?/span>
<abbr title="Daily Active User">
DAU
</abbr>
<span>,日活躍用戶數(shù) ......</span>
展示的效果如下:
這個標簽就可以把全稱隱藏掉,弱化信息量,讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思,這個在 markdown 里經(jīng)常會出現(xiàn)。
<mark/> 在 markdown 中也是很常用的,用于將包裹的文本高亮展示。
<mark>高亮文本</mark>
效果如下:
如果全文統(tǒng)一高亮樣式,可以專門對 mark 標簽進行樣式重置,這樣就不用對你用的每個 div 加一個 highlight 的類名了,又不語義化,又徒增文檔大小。
<sup/>和<sub/>分別表示上標和下標,在 markdown 中出現(xiàn)得也很頻繁,比如數(shù)學公式和引用。
<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>
效果如下:
上標和下標的樣式原理也比較簡單,主要就是利用了 vertical-align 的 top 和 sub 屬性值,然后將字號縮小,不過有現(xiàn)成的標簽,干嘛不用呢?
figure 是用于包裹其它標簽的內(nèi)容的,然后再利用另一個標簽 figcaption ,可以對包裹的內(nèi)容進行一個文本描述,例如:
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="大象">
<figcaption>這是一張大象的照片</figcaption>
</figure>
效果如下:
那要是圖片掛了呢?
再友好點處理,我們把 img 標簽的 alt 屬性去掉。
漂亮,終于把我一直厭煩的圖裂 icon 給干掉了,樣式還巨好看。
當然不止能包裹 img 標簽,其它任何都是可以的。
嘿嘿,給大家在本文來個實戰(zhàn),下面這個可以點擊,樣式也是利用了 figure 這個標簽。
我是figure標簽產(chǎn)生的
說到 <progress/> 這個標簽就很有意思了,去年有段時間我做的業(yè)務(wù)里涉及到了進度條,當時是前同事做的,然后有一些性能問題,我就在研究如何優(yōu)化,減少進度條改變帶來的性能問題。
雖然最后問題是解決了,但是也有幸收到了張鑫旭大佬的評論,他告訴我 progress 這個標簽就足夠了,既有語義化,又有進度條的功能,性能還好,兼容性也很不錯。后來經(jīng)過一番嘗試,還真是,當時是我孤陋寡聞了,也安利給大家。
<!-- 進度條最大值為100,當前進度為60,即60% -->
<progress max="100" value="60"/>
瀏覽器自帶的樣式就已經(jīng)很好看了,效果如下:
業(yè)務(wù)中我們也就可以通過控制 value 屬性,來改變進度條的進度了。
area 這個標簽也非常有意思,它的作用是為圖片提供點擊熱區(qū),可以自己規(guī)定一張圖的哪些區(qū)域可點擊,且點擊后跳轉(zhuǎn)的鏈接,也可以設(shè)置成點擊下載文件,我們來舉個例子:
<img src="example.png" width="100" height="100" alt="" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
<area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
</map>
area 一般要搭配 map 標簽一起使用,每個 area 標簽表示一個熱區(qū),例如上面代碼中,我們定義了兩個熱區(qū),熱區(qū)形狀都為rect(矩形),他們的熱區(qū)分別是:
我們都知道,默認的坐標軸是這樣的:
因此,我們劃分的兩個熱區(qū)就是:
最后再來看一下我們的實際效果:
i
details 字面意思是 "詳情",在 markdown 里也經(jīng)常用,用該標簽包裹了的內(nèi)容默認會被隱藏,只留下一個簡述的文字,我們點擊以后才會展示詳細的內(nèi)容。
<details>
<p>我是一段被隱藏的內(nèi)容</p>
</details>
效果如下:
這還沒有加任何一行的 js 代碼,我們點擊后,details 標簽上會多一個 open 的屬性,被隱藏的內(nèi)容就展示出來了。
默認情況下,簡要文字為 "詳情",想要修改這個文字,要搭配 summary 標簽來使用。
<details>
<summary>點擊查看更多</summary>
<p>我是一段被隱藏的內(nèi)容</p>
</details>
就搞定了!
瀏覽器自帶彈窗方法 alert、confirm、prompt,樣式固定且每個瀏覽器不同,同時還會阻塞頁面運行,除了這個還提供了一個 dialog 標簽,它的使用方式有點類似于現(xiàn)在各大組件庫的 Modal 組件了,瀏覽器還為該標簽提供了原生的 dom 方法:showModal、close,可以直接控制彈窗的展示和隱藏。
<dialog id="dialog">
<input type="text">
<button id="close">ok</button>
</dialog>
<button id="openBtn">打開彈框</button>
<script>
const dialog = document.getElementById('dialog')
const openBtn = document.getElementById('openBtn')
const closeBtn = document.getElementById('close')
openBtn.addEventListener('click', () => {
// 打開彈框
dialog.showModal()
})
closeBtn.addEventListener('click', () => {
// 隱藏彈框
dialog.close()
})
</script>
效果如下:
細心的你有沒有發(fā)現(xiàn),這原生的彈框還自帶背景蒙層,點擊是關(guān)閉不掉的,但起碼它不會阻塞頁面。
然后我們在彈窗展示時,也可以通過 esc 鍵來關(guān)閉彈窗。
datalist 是用于給輸入框提供可選值的一個列表標簽,類似咱們常用的 Select 組件。
我可以用其實現(xiàn)一個 "輸入聯(lián)想" 的功能。
<label> 輸入C開頭的英文單詞:</label>
<input list="c_words"/>
<datalist id="c_words">
<option value="China">
<option value="Click">
<option value="Close">
<option value="Const">
<option value="Count">
</datalist>
來試一試:
剛點擊時會把所有推薦的選項都列出來,然后根據(jù)后面輸入的內(nèi)容,會過濾掉不匹配的選項,比如我輸入 cl,會過濾掉不是 cl 開頭的單詞,最后只剩下 Click 和 Close 了。
最后我發(fā)現(xiàn),他這個下拉框有點好看啊?為啥這原生的 input 框默認樣式那么丑,啥時候改改。
fieldset 標簽是用于分組管理 form 表單內(nèi)的元素的,若 fieldset 設(shè)置了 disabled 屬性,則被其包裹的所有表單元素都會被禁用置灰,且不會隨著表單一起提交上去,是的就成了擺設(shè)。
什么意思呢?看個例子:
<form action="/example">
<fieldset disabled>
<legend>被禁用區(qū)域</legend>
<label>ID:</label>
<input type="text" name="id" value="1">
<label>郵箱:</label>
<input type="text" name="email" value="1234567@163.com">
</fieldset>
<label>名字:</label>
<input type="text" name="name">
<button type="submit">提交</button>
</form>
這里我們把 ID 和 郵箱 的表單包裹了起來,且設(shè)置了 disabled,只開放了一個 name 的輸入控件,此時界面如下:
可以看到除了 name 輸入框,其它的兩個輸入框都被禁用了,此時點提交會是什么樣子呢?
嗯,只提交了 name 字段。
這個標簽是在瀏覽器不支持或禁用了 javascript 時才展示的,大多用于對 js 強依賴的應(yīng)用,比如現(xiàn)在大部分的 SPA 頁面,一旦不支持 javascript,頁面基本上什么內(nèi)容都沒了,此時可以靠這個標簽做友好提示。
一般我們不需要特地去使用,大多都是在打包過程中自動插入到 html 靜態(tài)文件里去的,例如:
// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點擊出彈窗'
root.appendChild(button)
<!-- index.html -->
<script defer src="./init.js"></script>
<noscript>
不好意思,你的瀏覽器不支持或禁用了 JavaScript,請更換瀏覽器或啟用 JavaScript
</noscript>
<div id="root"></div>
未禁用 javascript 時,頁面是這樣的:
禁用了 javascript 時,是這樣的:
.標簽語義化
提到標簽,很多剛?cè)腴T前端開發(fā)的人,肯定都會很納悶,這么多HTML標簽我如何記住呢?我又應(yīng)該根據(jù)什么依據(jù)去正確使用它呢?其實這樣的問題,我剛開始和大家一樣苦悶,但是在我學習Web頁面開發(fā)的過程中,然后不斷的積累,不斷的總結(jié),發(fā)現(xiàn)要想記住HTML標簽以及怎樣更好的去使用這些標簽,需要做到以下三點:
第一點:不要死記硬背,沒意義,只需要記住常用的哪幾個足矣。
第二點:根據(jù)內(nèi)容選擇使用HTML標簽,什么意思呢?見下文分解。
第三點:遵循W3C的規(guī)范。
首先,第一點咱們就不用說,不讓死記硬背,就是要多寫頁面,多敲代碼,久而久之孰能生巧,巧能生花,慢慢的你就能記住這些標簽了,而且在開發(fā)頁面的過程中,你們會發(fā)現(xiàn),咱們最常用的也就是那么幾個而已。
其次,第二點根據(jù)內(nèi)容選擇使用HTML標簽,這一點非常關(guān)鍵,因為你掌握了這一點,你能很好地去使用HTML標簽,并且能讓頁面變得很優(yōu)質(zhì),這也會提高你網(wǎng)頁被搜索引擎收錄。
最后,也就是第三點,這一點自然不用懷疑,如果要想讓頁面更好的在不同的瀏覽器中呈現(xiàn)出一致的效果,那么必須遵循W3C的規(guī)范。
說了這么多,只是一些學習需要注意的問題,下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。
我們在使用標簽的過程中,大家會發(fā)現(xiàn)類似的標簽,比如標題標簽(h1-h6)、p(段落標簽)、a(超鏈接標簽)以及圖片標簽(img)等,通過這些標簽的名稱,咱們是不是不難理解吧,很直觀的就知道這些標簽該怎么,用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來,移動Web都是通過H5去開發(fā)頁面,而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。
那么什么是標簽語義化呢?所謂的標簽語義化,指的就是標簽所代表的含義。咱們可以通過標簽的含義,正確地去使用它。
標簽語義化的作用:
如下圖所示,通過使用語義化標簽和沒使用任何標簽,就能直觀感受到語義化標簽的好處。
普通的文本和使用語義化標簽后的效果對比圖
那么如何去判斷一個頁面中,語義化是否良好呢?很簡單,直接扒掉CSS這層漂亮的衣服,當我們把CSS去掉后,如果頁面中的結(jié)構(gòu)依然組織有序,并且有良好的可讀性,那么它就是非常良好的。
如何去使用這些標簽?zāi)兀渴紫雀鶕?jù)內(nèi)容確定語義化的標簽,其次再根據(jù)呈現(xiàn)需求,使用CSS樣式。因此HTML標簽并非通過死記硬背,而是通過在使用的過程中,利用HTML標簽的語義化去記憶。如下圖所示,通過使用語義化標簽,瞬間就能把普通的文本,以更清晰的結(jié)構(gòu)呈現(xiàn)出來。
使用語義化的普通文本,變得更為結(jié)構(gòu)清晰
2.常用標簽分類匯總
通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽,這些標簽又被統(tǒng)稱為排版標簽。
在開發(fā)中,排版標簽主要是和CSS搭配使用,主要是用于顯示網(wǎng)頁的整體結(jié)構(gòu),也是網(wǎng)頁布局中常用的標簽。下面我一一了解一下。
排版標簽:
【1】標題標簽(h1-h6)
標題標簽的使用
呈現(xiàn)的效果如下:
呈現(xiàn)的效果
一句話總結(jié):使用了標題標簽的文字會加粗,會根據(jù)級別顯示文字的大小,并且一行只能放一個標題。
【2】段落標簽(p)
p標簽語法格式
【3】水平線標簽(hr)
【4】換行標簽(br)
文本
呈現(xiàn)效果:
使用br標簽后的效果
【5】div和span標簽
最后給大家來一個完美的總結(jié):
排版標簽的匯總
難道這就完了嗎?咱們的標簽就只有這些常用的嗎?那當然不是,咱們接下來再看我們的文本格式化標簽。
文本格式化標簽
文本格式化標簽的作用:通常文本格式化標簽主要用于網(wǎng)頁中文字樣式的設(shè)置,比如字體加粗、斜體或下劃線等效果,當然后期也會通過CSS樣式來實現(xiàn),會更加完美。
常見的文本格式化標簽如下:
文本格式化標簽
它們分別的區(qū)別:
我么網(wǎng)頁中除了排版標簽、文本格式化標簽,當然還少不了圖片標簽(img),通過圖片的展示,會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。
圖片標簽(img)
img標簽屬性
標簽屬性的特點:
圖片標簽屬性使用
鏈接標簽
a標簽的常見屬性
提示:
內(nèi)部鏈接地址
注釋標簽
注釋標簽
好了,各位小伙伴,今天我就給大家分享到這兒了,希望我給大家總結(jié)的內(nèi)容,能幫到正在瀏覽我這篇內(nèi)容的前端開發(fā)者,也希望你們有所收獲。如果喜歡的,可以點擊關(guān)注,會繼續(xù)給大家分享更多的內(nèi)容。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。