前臺入門2-HTML標簽

摘要:本篇文章已受權微信公眾號 dasu_Android(大蘇)獨家發布公告本系列文章內容一律梳理自以下四個來源:《HTML5權威指南》《JavaScript權威指南》MDN web docsGithub:smyhvae/web作為一個前臺小白,入門跟著這四個來源學習,感謝作者的分享,在其基礎上,通過自己

本篇文章已受權微信公眾號 dasu_Android(大蘇)獨家發布

公告

本系列文章內容一律梳理自以下四個來源:

  • 《HTML5權威指南》
  • 《JavaScript權威指南》
  • MDN web docs
  • Github:smyhvae/web

作為一個前臺小白,入門跟著這四個來源學習,感謝作者的分享,在其基礎上,通過自己的了解,梳理出的知識點,或者許有遺漏,或者許有些了解是錯誤的,如有發現,歡迎指點下。

正文-HTML標簽

本文接著來學習 HTML 的基本標簽,下面是我自己對標簽進行的劃分,《HTML權威指南》中將標簽類別劃分成了很多種,比方:內容分組,文檔分節,表單七七八八等等。

但我按照自己個人的了解習慣,對總的標簽劃分成三類:修飾文檔結構的標簽、修飾文本內容標簽、容器類標簽。

修飾文檔結構的標簽大多用于表示一份標準、完整的HTML文檔的少量標簽,以及可放于<head> 內的少量標簽。

修飾文本內容標簽,大意是說,這些標簽是直接用于標記文本內容,賦予文本內容某些語義行為,比方 <a> 賦予超鏈接語義,<h1> 賦予了一級標題語義等等。這個類別有些相似于 Android 中表示某個 View 的標簽,淺顯來講,這些標簽可直接使用在文本內容上了。

容器類標簽,并不是真正意義上的容器,而是說,這類標簽主要的作用是用來包含其余標簽的,但并不是說,只能用來包含其余標簽,也可直接對文本內容標記。如 <nav>, <header> 這類表示某一塊區域的標簽。

我自己個人將其常用的標簽劃分成三大類,當然不是很精確,書中劃分得更細,但結合 Android 中少量共性的概念,我個人覺得劃分成這三類后,我較容易了解各個標簽用途:

1. 修飾文檔結構

首先來看份 HTML 的大體上的基本結構:

<!DOCTYPE html>   <!--公告這是一份H5文檔--><html >           <!--HTML文檔內容開始--><head>    <!--在<head>標簽中公告文檔的各種元數據-->    <!--該部分內容是給瀏覽器看的--> </head> <body>    <!--<body>標簽內為文檔的文本內容-->        <!--該部分內容是給客戶看的--></body></html>

所以,這些標簽用途基本就是用于構建一份基本的 HTML 文檔結構,下面看看具體詳情:

<!DOCTYPE>

精確的說,<!DOCTYPE> 并不是 HTML 標簽,它是公告 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

在 HTML 4.01 中,<!DOCTYPE> 公告引用 DTD,由于 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。

HTML5 不基于 SGML,所以不需要引用 DTD。

如 H5中用法:

<!DOCTYPE html>

HTML 4 中用法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

每一份 HTML 文檔內容的根節點,表示文檔內容的開始

文檔內容包括兩部分:頭部公告 <head> 和文本內容 <body>

<head>

HTML 文檔的頭部公告,用于公告該文檔的少量屬性,以及少量元數據,<head> 內部的內容是用于給瀏覽器看的,并不是用于給客戶看的,瀏覽器通過 <head> 信息,知曉這份文檔引用了哪些外部資源文件,使用的哪些屬性。

可在 <head> 中使用的標簽并不多:

<head><base href="http://www.dasu.">         <!--設置基準URL-->    <meta charset="UTF-8">             <!--公告文檔所使用的編碼-->    <title>Title</title>               <!--公告文檔的標題-->    <base href="http://www.baidu.com"> <!--公告文檔全局的基準URL-->    <style type="text/css"></style>    <!--公告內嵌類型的css樣式-->    <link type="text/css" rel="stylesheet" href="css/nms.css">   <!--外部css--><script></script>          <!--JavaScript腳本-->    <noscript></noscript>  <!--瀏覽器不支持JS情況下的解決--></head>

<body>

<body> 標簽用于公告文本內容,該標簽內的內容都是用于展現給客戶看的,所以基本所有標簽都可以在 <body> 內,瀏覽器解析相應的標簽,并根據 CSS 作用到每個對象上,生成網頁呈現給客戶。

<meta>

元數據標簽,可用于公告文檔所使用的少量元數據,用途蠻多,如下:

<meta charset="utf-8"/>       <!--公告文檔編碼格式--><meta http-equiv="refresh" content="5"/>   <!--往Http頭部中添加key-value--><meta http-equiv="content-type" content="text/html charset=UTF-8"/>  

<link>

<link> 標簽用于指定 HTML 文檔使用了哪些外部資源文件,可以是外部的 CSS 文件,或者者網頁圖標,或者者說明文檔等等,如下:

<link rel=”stylesheet” type=”text/css” href=”styles.css”/> --外部CSS<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”/>-網頁圖標<link rel=”prefetch” href=”/page2.html”> --預先加載page2.html文件…

2. 修飾文本內容

<a>

<a> 標簽的作用是引導客戶從一張頁面鏈接到另一張頁面,互聯網說究竟就是一張張網頁通過超鏈接 <a> 互相關聯起來的。

所以,只需不是單個頁面,只需頁面支持跳轉,那么 HTML 文檔中就一定有 <a> 標簽的存在,用于指定下個頁面的跳轉。

  • 用法
<a href="http://www.baidu.com">百度</a><a href="index.html">首頁</a><a href="#myId">標題5</a>

以上是 <a> 標簽的三種用法,指定絕對路徑的鏈接,指定相對路徑的鏈接,指定文檔內的鏈接。

也就是說,<a> 標簽既可以用于指定頁面間的跳轉關聯,也可以指定頁面內的跳轉。

<base> 標簽設置的基準 url 會影響到相對路徑的拼接,默認以當前 HTML 文檔的路徑作為基準路徑。

另外新頁面的打開方式也支持多種形式配置,如:

<a href="http://www.baidu.com" target="_blank">百度</a>

通過 target 屬性來公告新頁面的打開方式,target可以取值如下:

target含義
_blank在新頁面或者標簽頁中打開文檔
_parent在父窗框組(frameset)中打開文檔
_self在當前窗口中打開文檔(默認行為)
_top在頂層窗口打開文檔
<frame>在指定窗框中打開文檔

<b> & <wbr>

換行標簽

<br> :表示將后續內容轉移到新行上

<wbr> :H5 新添加的,表示當長度超過當前瀏覽器窗口的內容適合在此換行。

兩者都是換行,前者是強制換行,后者是建議在這里換行,但什么時候換行,由瀏覽器根據當前窗口大小決定,后者通常用于指定單詞的換行。

  • 用法
<p>    I am dasu, <wbr> and i am coding.<wbr>    <br/>    I am ...</p>

<p>

<p> 標簽用于表示段落,標簽圍起來的文本內容表示一個段落。

由于瀏覽器會忽略所有的空格、縮進、換行,最多只會解析成一個空格,所以,即便文本內容的段落結構很好,但經由瀏覽器解析出來后的文本內容一律都擠到一堆。

因而,<p> 段落標簽還是很有必要的。

可以用此來標記哪些文本內容作為一個段落。

用法見上例。

<pre> & <code>

<pre> 標簽用于保留源文檔中的格式。

<code> 標簽用于表示代碼塊。

因為瀏覽器會合并空白字符,忽略掉換行,導致假如文檔中含有代碼塊時顯示不符合開發工具下的代碼格式風格。

此時,可以借助 <pre> 標簽和 <code> 一起使用,來阻止瀏覽器合并空白字符,達到保留代碼格式的目的。

  • 用法
<pre><code>    protected final void setMeasuredDimension(int measuredWidth, int measuredHeight) {        boolean optical = isLayoutModeOptical(this);        if (optical != isLayoutModeOptical(mParent)) {            Insets insets = getOpticalInsets();            int opticalWidth  = insets.left + insets.right;            int opticalHeight = insets.top  + insets.bottom;            measuredWidth  += optical ? opticalWidth  : -opticalWidth;            measuredHeight += optical ? opticalHeight : -opticalHeight;        }        setMeasuredDimensionRaw(measuredWidth, measuredHeight);    }</code></pre>

<ol> & <li>

<ol> 標簽用于表示有序列表,<li> 標簽用于表示列表中的每一項。

  • 用法
ol1

既然是有序列表項,那么序號的起始以及樣式是支持通過屬性設定的,如下:

ol2

通過 start 屬性設置起始的編號,通過 type 屬性設置編號的樣式,能設置的 type 樣式如下 :

ol3

假如要實現編號是非連續的,那么可以借助 <li> 標簽的 value 屬性實現 :

ol4

注:每個 ol 列表項都是獨立存在,編號默認都從 0 開始,假如想實現不同列表項的編號連貫,或者者想以跨度 2 或者其余數遞增,那么只用標簽屬性實現局限很多。這時,可考慮通過 CSS 的 ::before 選擇器實現,具體實現后續再說。

<ul> & <li>

<ul> 標簽用于表示無序列表,<li> 標簽表示列表里的每一項.

  • 用法
ul

由于是無序列表,所以用法比起有序列表 <ol> 簡單很多,無需使用任何屬性,直接用無序標簽 <ul> 包含一系列子項 <li> 就可。

至于,每一項前的樣式,可通過 CSS 樣式,通過 list-style-type 屬性實現,以上樣式對應的 CSS:

ul { list-style-type: disc}

<h1> ~ <h6>

標題標簽,對應一級到六級標題。

p

至于每個標題具體字號樣式如何,取決于各個瀏覽器或者者網站。

<table>

表格標簽,但貌似現在不常用了。

HTML 文檔做一個表格挺復雜的,涉及的標簽很多,如 <thead>, <tfoot>, <tbody> 等等。

但根節點總是 <table>,一份表格無外乎就是各種單元格組成,而單元格標簽為 <td>,另外,瀏覽器解析表格文本時,是以行為單位來構建表格,并不是列,所以每個單元格都需要指定位于哪一行中,行標簽為 <tr>。而所有行的單元格都是表格的主要內容,因而都在 <tbody> 標簽中。

以上是表格的最基本要素,因而一張最簡單的表格,至少需要 <table>,<tbody>,<tr>,<td> 三種標簽。

table

有時候,寫表格標簽時,假如沒有其余表頭 <thead> 部分,或者者表腳 <tfoot> 時,會將 <tbody> 省略,但這并不是說即可以不用 <tbody> 標簽,而是很多瀏覽器會自動將 <tbody> 填補上,所以假如有省略 <tbody> 的場景下,使用 css 選擇器時得略微注意一下。

  • <tr> & <th> & <td>

因為瀏覽器是以行為單位構建表格,所以一個表格有多少行就是通過 <tr> 標簽來控制,哪些單元格屬于哪一行,就放在那一行的 <tr> 標簽中。

盡管說表格都是由一個個的單元格組成,但單元格之間還可以繼續劃分含義,有些單元格是表示內容,而有些單元格則是表示屬性值,或者者說列頭或者行頭。

通常來說,這些標題類型的表格都是在第一行或者第一列的單元格:

table1

這是一個很常見的二維表格,通過 <th> 和 <td> 來將表格的單元格含義區分開。

<th> :標簽用于表示單元格的表頭

<td> :標簽用于表格單元格的內容

既然是單元格,那么就會存在合并單元格的現象,淺顯的講也就是有些表格的大小并不是只占據一格,而是有可能多行多列。此時,可通過屬性來實現:

屬性含義
colspan單位數值,如1表示占據1列
rowspan單位數值,如2表示占據2行
  • <thead> & <tfoot> & <tbody>

相似于 HTML 文檔有少量專門用于表明文檔結構的標簽,表格同樣有少量用于指示表格結構的標簽。引入表格結構標簽,是為了更好的區分出各個單元格的含義。

比方,<th> 標簽用來表示表頭類型的單元格,但不論是第一行的表頭,還是第一列的表頭,用的都是 <th>,那假如還想繼續劃分這個表頭是屬于第一行或者者第一列時該怎樣做呢?

所以,引入了少量結構性標簽有便于對表格各個單元格更加具體的細分,以滿足各種復雜場景。

table2

<table> : 是表格的根節點

<thead> : 用來標記表格的標題行

<tfoot> : 用來標記組成腳的行。

不用 <thead>,表格最終效果也一樣,但用了 <thead> 之后,假如 CSS 想分別作用第一行,或者者第一列,這時即可以很容易的通過 thread th 以及 tbody th 來達到目的了。

所以,結合表格結構性標簽的使用,可以讓表格的結構更加明確。

  • <caption>

表格除了一張表格內容外,通常還會需要有表格的標題,此時用 <caption> 標簽來標記。

  • 完整示例
table示例
<table border="1">    <caption>工作記錄表</caption>    <thead>    <tr>        <th>日期</th><th>姓名</th><th>記錄</th>    </tr>    </thead>    <tbody>    <tr>        <th>2018-07-24</th><td rowspan="2">suxq</td><td>單元格</td>    </tr>    <tr>        <th>2018-07-25</th><td>單元格</td>    </tr>    </tbody></table>

<form>

表單標簽。

表單在網頁中的角色很重要,由于表單是用來接收客戶輸入的信息并提交發送給服務器的中間角色。

表單并不是說,流程器就呈現給客戶一張表單,反而通常呈現給客戶的只是各自輸入控件,比方輸入框,或者者勾選控件之類的。

表單,我的了解是,瀏覽器會將客戶輸入的這些數據收集起來生成一張表單提交給服務端。

<form> 標簽則是表單的根節點。

由于表單需要收集客戶輸入的信息,以及提交服務端的時機,因而,一般來說,表單還需要有 <input> 標簽以及<button> 標簽。

一份基本的表單如下:

form1

<form> 標簽的屬性 method 用來指明發送表單數據時使用哪種方式,有兩種 get, post。

action 屬性用于指明表單數據要發送到哪里,假如沒有設置,則默認發送到所在 HTML 文檔的地址。

  • <fieldset>

假如表單過于復雜,需要將各個 <input> 收集的信息進行歸類,可以使用 <fieldset> 標簽。而 <fieldset> 有個子標簽 <legend>,是用來對這個分組提供相關說明使用。

示例:

<form method="get">    <fieldset>        <legend>第一個</legend>        <p>name: <input name="name"/></p>        <p>city: <input name="city"/></p>    </fieldset>    <fieldset>        <legend>第二個</legend>        <p>name2: <input name="name1"/></p>        <p>city2: <input name="city1"/></p>    </fieldset>    <button>提交</button></form>
form2
  • <button>

<button> 標簽用來標記在表單中的按鈕,但按鈕的作用有三類,可通過屬性值 type 來設置。如下:

type屬性值含義
submit默認值,表示按鈕的用途是提交表單
reset表示按鈕用途是重置表單
button表示按鈕是一個普通的按鈕,沒有任何語義

假如 <button> 標簽不放在 <form> 標簽內,那么它就需要指定綁定的是哪個 <form> 表單,通過 form 屬性綁定 form 表單的 id,所以這種場景下,form 表單必需設置 id 屬性值。

  • <input>

<input> 標簽是用于收集客戶輸入的標簽,因而它的形態有各自各樣,可通過屬性 type 來設置。

另外,它有很多屬性,每個屬性都有各自的含義,少量基本的屬性需要理解一下。

name 屬性,用于設置該 <input> 的 key 值,value 值就是客戶的輸入,key 和 value 組合成表單中的一項用于發送給服務端。如 :

input

表明有兩個 <input> 控件,一個 key 值為 name,一個 key 值為 city,收集客戶輸入后組成表單上傳。

不同 type 的 <input> 作用不同,分別來看下:

  • type="text"

默認的 <input> 的 type 值,在瀏覽器中呈現一個單行文本輸入框。

這種類型下,還可以配合少量屬性使用,如

placeholder: 數據提醒,相似于 hint 功能

list: 結合 <datalist> 標簽使用,用于給出一系列輸入提醒

其余還有少量屬于用于設置 <input> 能否可用,能否聚焦,寬度,輸入最大長度等等。

示例:

input2
  • type="password"

這類型的 <input> 在瀏覽器上的呈現跟 type=”text” 類型一致,功能也基本一致,唯一的區別就是這是個密碼框,也就是當客戶輸入數據時,在瀏覽器上是以掩飾字符替換,如···

input3
  • type="submit"
  • type="reset"
  • type="button"

這三種類型的用途跟 <button> 標簽一樣,所以想要設置按鈕,用 <input> 也可以,唯一的區別就是,<input> 是虛元素,也就是它沒有標記任何文本內容,而 <button> 是可以標記文本內容的 。

input4
  • type="hidden"

該類型 <input> 瀏覽器會將其隱藏,不顯示在網頁上。通常是用于少量需要傳給服務端的數據,但又沒有必要讓客戶知道的場景下的使用。如:

<input type="hidden" name="name_id" value="123456"/>    <input name="name"/>

如上,客戶只要輸入名字信息,但提交給服務端時還需要一個 name_id 信息,這個數據沒必要讓客戶知道,此時可以通過 hidden 來實現。

  • type="image"

該類型的 <input> 其實就是個圖片按鈕。跟 <img> 標簽的區別也就是,這個是可點擊的,<img> 只是將圖片嵌入進來:

<input type="image" src="https://upload-images.jianshu.io/upload_images/5687349-d9d7ce1fec758d8c.png"/>
input5

當在 form 表單中有 type=”image” 類型的 <input> 時,點擊這張圖片,發送給服務端的信息是點擊的坐標點。

  • type="file"

該類型的 <input> 可以讓客戶選擇本地文件:

input6
  • type="checkbox"

復選框,示例:

input7
  • type="radio"

多選框,通常配合 <fieldset> 一起使用,將同類型的集合管理在一起。當然,不用也可以。

input8
  • type="number"
  • type="email"
  • type="tel"
  • type="url"
  • type="color"
  • ...

這類 type 的 <input>,用途只是用于限定客戶的輸入格式,比方 number,這個輸入框就只能輸入數字。

<iframe>

HTML 文檔中是可以嵌入其余 HTML 文檔的,通過 <iframe> 標簽標記。

<iframe src="index.html" width="500" height="500"></iframe>

通過src屬性設定目標HTML文檔地址,width,height設置區域大小。

<img>

基本每個網頁都會有圖片,在 HTML 中嵌入一張圖片用 <img> 標簽,跟 Android 中的 ImageView 控件很相似,同樣需要指定圖片來源,區域寬高。

<img src="https://upload-images.jianshu.io/upload_images/5687349-d9d7ce1fec758d8c.png" width="300" height="300">

3. 容器類

容器類標簽是我自行對其進行的劃分,并不是說,這類標簽只能用于當容器使用,只能用于包含其余標簽,而是說,常見的用法,這類標簽基本都是表示具備某種含義的某一塊區域,具體這塊區域內既可以包含各種標簽,也可以直接是文本內容。

<span> & <div>

都是通用標簽,沒什么具體的語義

<span> : 標簽通常用于標記段落中的某塊文本內容,而后通過該標簽,可以單獨為這塊文本內容添加 CSS 樣式

<div> : 標簽一般用于,將屏幕某塊區域劃分出來后,用該標簽標記后可通過選擇器作用自己設置的 CSS 樣式。

<section>

<section> 標簽用于表示文檔中的某一節,其實也就是某一塊區域,這塊區域有自己單獨獨立的含義。淺顯的了解,有些相似于第一節,第二節的概念。

每一節 <section> 都是相互獨立的,因而方便各節里面獨自使用 <headler> 和 <footer>。

section

<header> & <footer>

<header> : 標簽表示某一節的首部,像某些網頁通常會有少量 Logo 之類的首部信息。

<footer> : 標簽表示某一節的尾部,最常見的基本每個網頁尾部都會有版權信息,作者詳情,相關鏈接,免責公告等信息,這部分信息都適用于放在尾部標簽 <footer> 里。

例如:<header>

header

<footer>

footer

<nav>

<nav> 標簽表示文檔中某一個區域,它包含著到其余頁面或者者同一頁面的其余部分的鏈接。

直譯其實也就是導航的作用。

nav

小結

常見的標簽基本就這些了,當然,這里并沒有列出少量 HTML5 新添加的標簽,由于剛入門,對于那些標簽的使用場景也不熟習,總之,理解以上的標簽,基本足夠查看任意個網站的源代碼了。

另外,如有需要,再去查找具體標簽就可:

https://developer.mozilla.org/zh-CN/docs/Web/HTML


大家好,我是 dasu,歡迎關注我的公眾號(dasuAndroidTv),假如你覺得本篇內容有幫助到你,可以轉載但記得要關注,要標明原文哦,謝謝支持~


dasuAndroidTv2.png
  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
【系統環境|軟件環境】5分鐘談前臺面試,小伙伴都驚呆了(2019-12-04 14:23)
手機二維碼手機訪問領取大禮包
返回頂部
澳洲幸运10精准人工计划