2. 程式人生 > >HTML學習筆記之標簽進階

HTML學習筆記之標簽進階

阿新 • • 發佈：2019-02-13
con 交互效果 asc 形式 -- pos 音頻 特殊 郵件地址

目錄

  • 1、框架
  • 2、表單
  • 3、音頻
  • 4、視頻
  • 5、文檔類型
  • 6、頭部元素
  • 7、樣式
  • 8、腳本
  • 9、實體

1、框架

使用框架允許我們在同一個瀏覽器窗口中顯示多個頁面，其中每份 HTML 文檔稱為一個框架，並且每個框架之間都是獨立的

<frameset> 標簽定義如何將窗口分割為框架，rows/columns 屬性規定每行或每列占據屏幕的面積

<frame> 標簽定義放置在每個框架中的 HTML 文檔，src 屬性規定 HTML 文檔的地址

<noframes> 標簽定義在 <frame> 標簽不能正常顯示時的提示信息

<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">
    <noframes>
        <body>Your browser does not support the frame tag.</body>           </noframes>
</frameset>

<iframe> 屬性定義內聯框架，用於在網頁內顯示網頁，常用的屬性如下：

  • name：規定 iframe 的名稱，用於被 target 屬性引用
  • src：規定在 iframe 中顯示的文檔的 URL

  • srcdoc：規定在 iframe 中顯示的 HTML 內容

  • height：規定 iframe 的高度
  • width：規定 iframe 的寬度
  • marginheight：規定 iframe 頂部和底部的邊距
  • marginwidth：規定 iframe 的左側和右側的邊距

  • frameborder：規定是否顯示 iframe 的邊框

2、表單

可以使用 <form> 標簽

定義表單，用於接受不同類型的用戶輸入，具有以下屬性：

屬性 描述
name 規定識別表單的名稱，對於 DOM 使用：document.forms.name
accept-charset 規定在被提交表單中使用的字符集，默認為頁面字符集
enctype 規定被提交數據的編碼，默認為 url-encoded
action 規定在提交表單時執行的動作
target 規定 action 屬性中地址的目標，默認為 _self
method 規定在提交表單時使用的 HTTP 方法，默認為 GET
autocomplete HTML5 新增屬性，規定瀏覽器是否自動完成表單，默認為開啟
novalidate HTML5 新增屬性，規定瀏覽器不驗證表單

在 <form> 標簽下，包括在 HTML5 中新增的 3 個表單元素，共有 7 個表單元素

（1）<input>

<input> 元素可以定義不同的輸入類型，常用的屬性如下：

屬性 描述
name 重要屬性，如果希望正確提交，每個輸入字段必須設置 name 屬性
type 重要屬性，定義不同的輸入類型
value 規定輸入字段的默認值
placeholder HTML5 新增屬性，規定用以描述輸入字段預期值的提示
checked 規定輸入字段的默認值
disabled 規定輸入字段被禁用
readonly 規定輸入字段無法修改
required HTML5 新增屬性，規定輸入字段必需填寫
min HTML5 新增屬性，規定輸入字段的最小值
max HTML5 新增屬性，規定輸入字段的最大值
maxlength 規定輸入字段的最大字符數
size 規定輸入字段的寬度（以字符計）
step HTML5 新增屬性，規定輸入字段的合法數字間隔
pattern HTML5 新增屬性，規定輸入字段滿足的正則表達式

type 屬性是 <input> 元素中的一個重要屬性，它決定著 <input> 元素的類型，常用的值如下：

可選值 描述
text 定義單行文本輸入字段
password 定義密碼輸入字段
submit 定義表單數據提交按鈕
radio 定義單選按鈕
checkbox 定義復選按鈕
button 定義按鈕
number 定義包含數字的輸入字段
date 定義包含日期的輸入字段
color 定義包含顏色的輸入字段
range 定義包含一定範圍內的值的輸入字段
email 定義包含郵件地址的輸入字段
tel 定義包含電話號碼的輸入字段
url 定義包含 URL 地址的輸入字段
search 定義搜索字段，類似於常規文本字段
month 允許用戶選擇月份和年份
week 允許用戶選擇周和年份
time 允許用戶選擇時間（無時區）
datetime 允許用戶選擇日期和時間（有時區）
datetime-local 允許用戶選擇日期和時間（無時區） 
<form>
    First name:<br/>
    <input type="text" name="firstname" /><br/>
    Last name:<br/>
    <input type="text" name="lastname" /><br/>
</form>

（2）<select>

<select> 元素用於定義下拉列表

（3）<textarea>

<textarea> 元素用於定義多行文本輸入字段

（4）<button>

<button> 元素用於定義按鈕

（5）<datalist>

<datalist> 元素是 HTML5 中新增的表單元素，用於定義選項列表

（6）<keygen>

<keygen> 元素是 HTML5 中新增的表單元素，用於定義表單的密鑰對生成器字段

（7）<output>

<output> 元素是 HTML5 中新增的表單元素，用於定義不同類型的輸出，例如腳本輸出

3、音頻

為了確保音頻文件在所有瀏覽器中和所有硬件上都能夠播放，我們可以使用以下標簽：

  • <object>

<object> 定義內嵌對象，是 HTML 4.01 多媒體標簽

<object height="100" width="100" data="song.mp3"></object>
  • <embed>

<embed> 定義嵌入內容，是 HTML 5 多媒體標簽

<embed height="100" width="100" src="song.mp3" />
  • <audio>

<audio> 定義聲音，是 HTML 5 多媒體標簽，其屬性及值列舉如下：

屬性 值 描述
autoplay autoplay 就緒後馬上播放
controls controls 顯示播放控件
loop loop 循環播放
muted muted 靜音播放
preload preload 就緒後等待播放，若設置 autoplay，則忽略 preload
src url 指定待播放音頻的 URL 
<audio controls="controls">
    <!-- mp3格式在 Internet Explorer、Chrome、Safari 中有效 -->
    <source src="song.mp3" type="audio/mp3" />
    <!-- ogg格式在 Firefox、Opera 中有效 -->
    <source src="song.ogg" type="audio/ogg" />
    <!-- 如果失敗，顯示錯誤信息 -->
    Your browser does not support the audio tag.
</audio>
  • 最佳解決方案

先嘗試使用 <audio> 以 mp3 或 ogg 格式播放音頻，如果失敗，將再嘗試使用 <embed> 播放音頻

<audio controls="controls">
    <source src="song.mp3" type="audio/mp3" />
    <source src="song.ogg" type="audio/ogg" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

4、視頻

為了確保視頻文件在所有瀏覽器中和所有硬件上都能夠播放，我們可以使用以下標簽：

  • <object>

<object> 定義內嵌對象，是 HTML 4.01 多媒體標簽

<object data="movie.swf" width="320" height="240"/>
  • <embed>

<embed> 定義嵌入內容，是 HTML 5 多媒體標簽

<embed src="movie.swf" width="320" height="240"/>
  • <video>

<audio> 定義視頻，是 HTML 5 多媒體標簽，其屬性及值列舉如下：

屬性 值 描述
autoplay autoplay 就緒後馬上播放
controls controls 顯示播放控件
loop loop 循環播放
muted muted 靜音播放
preload preload 就緒後等待播放，若設置 autoplay，則忽略 preload
src url 指定待播放視頻的 URL
poster url 指定點擊播放按鈕前或進行視頻下載時顯示的圖像
width pixels 設置視頻播放器的寬度
height pixels 設置視頻播放器的高度 
<video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>
  • 最佳解決方案

先嘗試使用 <video> 以 mp4、ogg 或 webm 格式播放視頻，如果失敗，再嘗試使用 <embed> 播放

<video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />
    <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240" />
    </object>
</video>

5、文檔類型

<!DOCTYPE> 聲明 必須位於 HTML 文檔的第一行，它不是 HTML 標簽，但是卻為瀏覽器提供一項聲明，說明頁面是使用哪個 HTML 版本編寫的，以下是幾個常用的 <!DOCTYPE> 聲明：

  • HTML5
<!DOCTYPE html>
  • HTML 4.01 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素，不允許框架集

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

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素，但不允許框架集

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

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素，並且允許框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
  • XHTML 1.0 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素，不允許框架集，且必須以格式正確的 XML 來編寫標記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.0 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素，但不允許框架集，且必須以格式正確的 XML 來編寫標記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素，並且允許框架集，且必須以格式正確的 XML 來編寫標記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

6、頭部元素

<head> 元素 是所有頭部元素的容器，以下標簽都可以添加到 <head> 中：

  • <title>

<title> 標簽用於定義文檔標題，它在所有的 HTML/XHTML 文檔中都是必需的

<head>
    <title>Title of the document</title>
</head>
  • <base>

<base> 標簽用於為頁面上所有鏈接規定默認地址

<head>
    <base href="......" />
    <base target="_blank" />
</head>
  • <meta>

<meta> 標簽提供關於 HTML 文檔的元數據，元數據不會顯示在頁面上，但是對於機器是可讀的，常用於規定頁面的描述、關鍵詞、作者、最後修改時間等

<meta name="keywords" content="HTML, XHTML, HTML5" />
  • <link>

<link> 標簽定義文檔與外部資源之間的關系，常用於連接樣式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • <style>

<style> 標簽定義文檔樣式信息

<head>
    <style type="text/css">
        <!-- 這裏定義樣式 -->
    </style>
</head>
  • <script>

<script> 標簽定義客戶端腳本

<head>
    <script type="text/javascript" src="myscripts.js"></script>
</head>

7、樣式

樣式 可以規定 HTML 元素的表現形式，將內容與表現分離

當樣式需要被應用到很多頁面的時候，外部樣式表 將是理想的選擇，外部樣式表在 CSS 文件中定義，在 <link> 標簽中引用，<link> 標簽被包含在 <head> 標簽中

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

當單個文件需要特別樣式時，就可以使用 內部樣式表，內部樣式表在 <style> 標簽中定義，<style> 標簽被包含在 <head> 標簽中

<head>
    <style type="text/css">
        ......
    </style>
</head>

當需要應用特殊樣式到個別元素時，就可以使用 內聯樣式，內聯樣式在 style 屬性中定義，style 屬性被包含在幾乎所有元素的屬性中

<div style="......"></div>

8、腳本

腳本 使得 HTML 頁面具有更強的動態和交互效果

<script> 標簽 用於定義客戶端腳本，既可以在標簽中包含腳本語句，也可以通過 src 屬性引用外部腳本文件

<script type="text/javascript">
    document.write("Hello World")
</script>

<noscript> 標簽 通常配合 <script> 標簽使用，提供無法使用腳本時的替代內容，當瀏覽器禁用腳本或瀏覽器不支持客戶端腳本時發揮作用

<script type="text/javascript">
    document.write("Hello World")
</script>
<noscript>
    Your browser does not support JavaScript!
</noscript>

9、實體

在 HTML 中，某些字符是預留的，不能直接使用，如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體，一些常用的字符實體列舉如下：

字符名稱 字符顯示 實體名稱 實體編號
空格 &nbsp; &#160;
左單引號 ‘ &lsquo; &#8216;
右單引號 ’ &rsquo; &#8217;
左雙引號 “ &ldquo; &#8220;
右雙引號 ” &rdquo; &#8221;
引號 " &quot; &#34;
撇號 ‘ &apos; &#39;
lambda λ &lambda; &#923;
alpha α &alpha; &#945;
beta β &beta; &#946;
gamma γ &gamma; &#947;
delta δ &delta; &#948;
epsilon ε &epsilon; &#949;
zeta ζ &zeta; &#950;
eta η &eta; &#951;
theta θ &theta; &#952;
sigma σ &sigma; &#963;
phi φ &phi; &#966;
psi ψ &psi; &#968;
omega ω &omega; &#969;
less than < &lt; &#60;
greater than > &gt; &#62;
for all ? &forall; &#8704;
exists ? &exists; &#8706;
prod ∏ &prod; &#8719;
sum ∑ &sum; &#8721;
square root √ &radic; &#8730;
integral ∫ &int; &#8747;
not equal ≠ &ne; &#8800;
equivalent ≡ &equiv; &#8801;
less or equal ≤ &le; &#8804;
greater or equal ≥ &ge; &#8805;

HTML學習筆記之標簽進階

相關推薦

HTML學習筆記之標簽進階

con 交互效果 asc 形式 -- pos 音頻 特殊 郵件地址 目錄 1、框架 2、表單 3、音頻 4、視頻 5、文檔類型 6、頭部元素

HTML學習筆記之標簽基礎

ati out 換行 相同 單位 文本 寬度 baidu 斜杠 目錄 1、基本標簽 2、鏈接 3、圖像 4、表格 5、列表 6、塊與布局

HTML學習筆記 基礎標簽及css引用案例 第一節 （原創）參考使用表

set utf har del 文件 定義 .com eight head <!DOCTYPE html><!--頭文件 不是標簽 也沒有結束，這是聲明該文件為HTML5--><html lang="en"><!--表示網頁文字以什

Redis學習筆記（十）進階之訊息通知

任務佇列 使用LPUSH和RPOP命令操作列表來實現佇列 BLPOP key [key ...] timeout(s) BRPOP key [key ...] timeout(s) BLPOP/BRPOP是阻塞式，同時檢測多個鍵，如果所有鍵都沒有元素則阻塞，如果其中有一個鍵

HTML筆記之標簽

小號 插入 col itl 使用 span 筆記 charset body <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

HTML學習——表單標簽

com 選中 設置 value res 數據 align 後臺程序 radi 1、type: 當 type="radio" 時，控件為單選框 當 type="checkbox" 時，控件為復選框 2、value：提交數據到服務器的值（後臺程序PHP使用） 3、n

C#學習筆記第三發---進階特性

lose att 宏函數 入參 編程 發生 大寫 numbers 雙擊 一、異常處理機制 編寫的程序在編譯不報錯之後並不是就不會出錯了，在運行時由於邏輯問題或者別的原因還是可能出現各種異常，異常處理機制就是為了處理這種情況。異常處理中需要用到三個關鍵字，try、catch、

python學習筆記之四-多進程&多線程&異步非阻塞

running executor 服務器 RoCE 進行 break python buffer 創建 ProcessPoolExecutor對multiprocessing進行了高級抽象，暴露出簡單的統一接口。 異步非阻塞 爬蟲 對於異步IO請求的本質則是【非阻塞So

ggplot2學習筆記之標度scale

標度（scale），是將資料空間（標度的定義域）對映到圖形屬性空間（標度的值域） 的一個函式。 每一種圖形屬性都有一個預設的標度，當我們每一次使用這個圖形屬性時都會自動 新增到圖形中。 圖形屬性 離散型 連續型 顏色(co

HTML學習筆記之基本介紹

空元素 描述 ron 情況 學習筆記 基本 使用 第一個 出現 超文本標記語言 (Hyper Text Markup Language，HTML）不是一種編程語言，而是一種標記語言，用一套標記標簽描述網頁 HTML 標記標簽又被稱為 HTML 標簽（HTML Tag），它是

html學習之——標簽語義化

使用 標題 網站 省略符 顯示 del class itl tle html語義化在前端學習中會經常出現，下面對html語義化做個總結 一、什麽是HTML語義化 HTML語義化總的來說就是用正確的標簽做正確的事。圍繞著一些標簽展開，如h1-h6。把適當的標簽用在合適的地方

Python學習----第七模塊筆記（Web開發進階之Django數據庫操作）

long 機制 idt 4.5 gen git 表之間 protoc 小數 4、Django ORM 4.1、連接數據庫 創建Django工程後運行該工程，會在工程根目錄下創建db.sqlite3文件，為Django自帶的sqlite3數據庫（Django自帶的功能也需要數

React學習筆記之react進階篇（1）

ava 不能 success 字符 style 使用 -s 布爾 一次 1.組件的state（狀態） 1.選擇合適的state 　　state所代表的一個組件UI呈現的完整狀態集又可以分成兩類數據：用作渲染組件時使用到的數據的來源以及用作組件UI展現形式的判斷依據。 示

React學習筆記之react進階篇（2）

-s state ops category strong tro 服務 ive 周期 2.組件與服務器通信 　　組件的生命周期分為三個階段：掛載階段->更新階段->卸載階段，本文主要集中講述掛載和更新階段組件如何和服務器進行通信。 1.組件掛載階段通信 　

學習筆記之MongoDB進階（一）

MongoDB的條件操作符 MongoDB中條件操作符有： (>) 大於 - $gt (<) 小於 - $lt (>=) 大於等於 - $gte (<= ) 小於等於 - $lte $gt -------- greater than

Android基礎學習筆記之-ListView進階用法（item圓角效果實現）

今天簡單用快取優化方式實現了listview的功能，下面讓我們實現一下上篇文章留下來的改進方案：     1）.實現item佈局的圓角效果     2）.對listview的item進行監聽

ReactNative學習筆記之呼叫原生模組（進階）之Callback、Promise使用

前言 前文ReactNative學習筆記——呼叫原生模組（Android）簡單說了下ReactNative呼叫Android原生模組的基本用法，下面講解下呼叫原生模組經常會用到的Callback和Promise。 很多時候我們可能不僅僅是呼叫Native的方

5.4-全棧Java筆記:面向對象進階之對象的轉型 | FINAL關鍵字 |抽象方法和抽象類

java對象的轉型(casting)引用變量只能調用它編譯類型的方法，不能調用它運行類型的方法。這時，我們就需要進行類型的強制轉換！【示例1】對象的轉型public class TestCasting { public static void main(String[] args) {

Python學習之裝飾器進階

放大 python學習 else pen 裝飾 dap style pri aaa 函數知識回顧： 函數的參數分為：實參和形參。 實參：調用函數的時候傳入的參數； 形參：分為3種（位置參數、默認參數、動態傳參） 位置參數：必須傳值 def aaa(a,b): pr

Framework7新版學習筆記之 角標

點餐 post pre 內容 常用 包含 body style 添加 一：角標 F7提供了一種微型控件——角標，常用語消息條數顯示、點餐數量顯示等。 二：使用角標 在需要添加角標的標簽之間包含： ...<span class="badge c