前端學習筆記-HTML

HTML部分

瞭解HTML

一個簡單的html實例css

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
 </body>
</html>

各項說明html

  • 第一行標籤聲明該網頁使用html5編寫的
  • 第二行標籤:告訴瀏覽器我是一個html文檔,告訴搜索引擎頁面的內容是中文
  • 第三行標籤:用於給網頁添加一些配置信息,如指定網站的標題 / 指定網站的小圖片
  • 第四行標籤:指定字符集
  • 第五行標籤:網頁標題
  • 第七行標籤:專門用於定義HTML文檔中須要顯示給用戶查看的內容(文字/圖片/音頻/視頻),必定將要顯示的內容放在此處
  • 添加網站的SEO相關的信息(指定網站的關鍵字/指定網站的描述信息)
  • 外掛一些外部的css/js文件,
  • 添加一些瀏覽器適配相關的內容
    GBK(GB2312)和UTF-8區別?
  • GBK(GB2312)裏面存儲的字符比較少,僅僅存儲了漢字和一些經常使用外文,體積比較小
  • UTF-8裏面存儲的世界上全部的文字,提交比較大。
    GBK與utf-8怎麼選擇?
  • 若是網站僅僅包含中文, 那麼推薦使用GB2312, 由於它的體積更小, 訪問速度更快
  • 若是你的網站除了中文之外, 還包含了一些其它國家的語言 , 那麼推薦使用UTF-8
    如何網頁亂碼如何解決?
  • 在HTML文件中指定的字符集必須和保存這個文件的字符集一致, 不然仍是會出現亂碼
  • 因此僅僅指定字符集不必定能解決亂碼問題, 還須要保存文件的時候, 文件的保存格式必須和指定的字符集一致才能保證沒有亂碼問題
    一道面試題
    H1標籤它的做用是什麼?
    H1標籤的做用是用來告訴瀏覽器, 哪些文字是標題. 也就是H1標籤是專門用於給指定的文字添加標題語義的

基礎標籤

h1-h6標題標籤

<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題6</h6>
一共只有6級標題

hr水平線標籤

格式:
<hr/>效果:頁面顯示水平橫線html5

p標籤:段落標籤

格式:web

<p>我是一段文本</p>
<p>我是一段文本</p>
我是一段普通文本
我是一段普通文本

img標籤:圖片標籤

格式:面試

<img src="/i/eg_tulip.jpg"  
alt="上海鮮花港 - 鬱金香" 
title="你好"  
width="300" height="478"/>
解釋:
src:圖片的路徑
alt:圖書沒法顯示時,替換的文字
title:鼠標放到圖片上顯示的文字
width:圖片的寬度
height:圖片的高度
同時修改高度和寬度會致使圖片變形,可選擇其中一個設置,系統會自動進行比列調整

圖片標籤中的路徑問題
其實想給src屬性賦值有兩種方式
經過相對路徑賦值(掌握)
相對路徑就是每次都從.html文件所在的文件夾開始查找, 咱們稱之爲相對路徑
    同級瀏覽器

  • 同級就是"圖片"和".html文件"存儲在同一個文件夾中
  • 格式: src="QRCode.jpg"
  • 含義: 在.html文件所在的文件夾中查找名稱叫作QRCode.jpg的圖片
    下級
  • 下級就是"存儲圖片的文件夾"和".html文件"在同一個文件夾中
  • 格式: src="images/QRCode.jpg"
  • 含義: 在.html文件所在的文件夾中找到名稱叫作images的文件夾,而後再在images文件夾中找到名稱叫作QRCode.jpg的圖片
    上級
  • 上級就是"存儲圖片的位置"和存"儲代碼的文件夾"在同一個文件夾中
  • 格式: src="../QRCode.jpg"
  • 含義:在.html文件所在的文件夾中找到這個文件夾的上一級文件夾, 而後再在上一級文件夾中找到名稱叫作QRCode.jpg
  • 其中../表明找到當前文件夾的上一級文件夾
    經過絕對路徑賦值(瞭解)
  • 絕對路徑就是每次都從指定的盤符開始查找
  • 格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基礎\QRCode.jpg"
  • 含義: 在C盤下找到Users文件夾, 而後在Users文件夾中找到Jonathan_Lee文件夾, 而後在Jonathan_Lee文件夾中找到Desktop文件夾, 而後在Desktop文件夾中找到HTML基礎文件夾, 而後在HTML基礎文件夾中找到名稱叫作QRCode.jpg的圖片
    注意:
  • 路徑中不要出現中文, 不然可能出現未知問題
  • 若是是經過"相對路徑"來指定圖片, 不能跨盤符
  • 例如.html文件在C盤, 那麼不能去查找D盤圖片

br標籤:換行標籤

a標籤:超連接標籤

  • 做用:控制頁面與頁面之間的跳轉
  • a標籤的格式:
<a href="指定須要跳轉的目標界面">須要展示給用戶查看的內容</a>

a標籤中有一個叫作target屬性, 這個屬性的做用就是專門用於控制如何跳轉服務器

  • _self: 用於在當前選項卡中跳轉, 也就是不新建界面跳轉. 默認就是_self
  • _blank: 用於在新的選項卡中跳轉, 也就是新建界面跳轉
  • a標籤中還有一個屬性, 叫作title. a標籤中的title和img標籤中的title同樣, 都是用來控制鼠標懸停時顯示的提示文本的
    注意點
  • a標籤不只可讓文字能夠點擊, 還可讓圖片也可以被點擊
  • 一個a標籤必須有一個href屬性, 不然a標籤不知道要跳轉到什麼地方
  • 若是經過a標籤的href屬性指定一個URL地址, 那麼必須在地址前面加上http://或https://
  • a標籤的href屬性除了能夠指定一個網絡地址之外, 還能夠指定一個本地地址
    base標籤:統一超連接標籤打開網頁方式
    base標籤就是專門用來統一的指定當前網頁中全部的超連接(a標籤)須要如何打開
    注意點:
  • base標籤必須寫在head標籤的開始標籤和結束標籤之間
  • 若是既在base中指定了target又在a標籤中指定了target,那麼瀏覽器會按照a標籤中指定的來執行
    瞄點
  • 要想經過a標籤跳轉到指定的位置, 那麼必須告訴a標籤一個獨一無二的身份證號碼, 這樣a標籤才能在當前界面中找到須要跳轉到的目標位置
  • 若是和HTML中的標籤綁定一個獨一無二的身份證號碼呢?
    在HTML中, 每個標籤都有一個名稱叫作id的屬性, 這個屬性就是用來給標籤指定一個獨一無二的身份證號碼的
    因此要想實現經過a標籤跳轉到指定的位置分爲兩步
  • 給目標位置的標籤添加一個id屬性, 而後指定一個獨一無二的值
  • 告訴a標籤你須要跳轉到的目標標籤對應的獨一無二的身份證號碼是多少
    格式:
<a href="#center">跳轉到中部</a>`
`<h2 id="center">我是中部</h2>

注意點:網絡

  • 經過咱們的a標籤跳轉到指定的位置, 是沒有過分動畫的, 是直接一會兒就跳轉到了指定位置
  • a標籤除了能夠跳轉到當前界面的指定位置之外, 還能夠在跳轉到其它界面的時候直接跳轉到其它界面的指定位置
    格式:
<a href="13-錨點測試界面.html#bottom" target="_blank">跳轉到錨點測試界面</a>
<h2 id="bottom">我是錨點測試界面33333</h2>

列表標籤

什麼是列表標籤?app

  • 列表標籤的做用: 給一堆數據添加列表語義, 也就是告訴搜索引擎告訴瀏覽器這一堆數據是一個總體
    HTML中列表標籤的分類
  • 無序列表(最多)(unordered list)
  • 有序列表(最少)(ordered list)
  • 定義列表(其次)(definition list)

無序列表

格式:框架

<ul>
<li>須要顯示的條目</li>
</ul>

li實際上是英文list item的縮寫

  • list是列表的意思
  • item是條目的意思
    因此結合起來就是 列表條目的意思
    無序列表做用:
  • 給一堆數據添加列表語義, 而且這一堆數據中全部的數據都沒有前後之分
    什麼叫有前後之分?
  • 例如: 排行榜
    什麼叫沒有前後之分?
  • 例如: 中國有哪些城市
    注意點:
  • 1.必定要記住ul標籤是用來給一堆數據添加列表語義的, 而不是用來給他們添加小圓點的
  • 2.ul標籤和li標籤是一個總體, 是一個組合. 因此通常狀況下ul標籤和li標籤都是一塊兒出現, 不會單個出現. 也就是說不會單獨使用一個ul標籤或者單獨使用一個li 標籤, 都是結合在一塊兒使用
  • 3.因爲ul標籤和li標籤是一個組合, 因此ul標籤中不推薦包含其它標籤, 也就是說之後你在ul標籤中只會看到li標籤
  • 無序列表應用場景:
    1.新聞列表
    2.商品列表
    3.導航條

有序列表

  • 有序列表做用:給一堆數據添加列表語義, 而且這一堆數據中全部的數據都有前後之分
    有序列表格式:
<ol>
<li></li>
</ol>

定義列表

  • 定義列表的做用:給一堆數據添加列表語義
    *先經過dt標籤訂義列表中的全部標題, 而後再經過dd標籤給每一個標題添加描述信息
    定義列表的格式:
<dl>
<dt></dt>
<dd></dd>
</dl>
  • dt是英文definition title的縮寫, 因此dt的含義就是用來定義列表中的標題
  • dd是英文definition description的縮寫, 因此dd的含義就是用來定義標題對應的描述
    定義列表的應用場景:
  • 1.作網站尾部的相關信息
  • 2.作圖文混排
    注意點
  • 1.和ul/ol同樣, dl和dt/dd是一個總體, 因此他們通常狀況下不會單獨出現, 都是一塊兒出現
  • 2.和ul/ol同樣, 因爲dl和dt/dd是一個組合標籤, 因此dl中建議只放dt和dd標籤
  • 3.一個dt能夠沒有對應的dd,也能夠有多個對應的dd, 可是不管有或者沒有dd都不推薦使用.
  • 4.推薦使用一個dt對應一個dd,和li標籤同樣, 當須要豐富界面時, 咱們能夠在dt和dd標籤中繼續添加其它標籤

表格標籤

什麼是表格標籤?

  • 其實表格是一種數據的展示形式, 當數據量很是大的時候, 表格這種展示形式被認爲是最爲清晰的一種展示形式
  • 表格標籤做用: 用來給一堆數據添加表格語義
    格式:
<table>
<tr>
<td>須要顯示的內容</td>
</tr>
</table>
  • 其中表格標籤中的table表明整個表格, 也就是一堆table標籤就是一個表格
  • 其中表格標籤中的tr標籤表明整個表格中的一行數據, 也就是說一對tr標籤就是表格中的一行
  • 其中表格標籤中的td標籤表明表格中一行中的一個單元格, 也就是說一對td標籤就是一行中的一個單元格
    注意點
  • 表格標籤有一個邊框屬性, 這個屬性決定了邊框的寬度. 默認狀況下這個屬性的值是0, 因此看不到邊框
  • 表格標籤和列表標籤同樣, 它是一個組合標籤, 因此table/tr/td要麼一塊兒出現, 要麼一塊兒不出現, 不會單個出現
    表格標籤屬性:
  • border: 默認狀況下表格的邊框寬度爲0看不到, 經過border屬性給表格指定邊框寬度
  • width: 默認狀況下表格的寬度是由內容自動計算出來的, 能夠經過width屬性指定表格的寬度
  • height:默認狀況下表格的高度是由內容自動計算出來的, 能夠經過height屬性指定表格的高度
  • cellspacing: 外邊距. 默認狀況下單元格之間有2個像素的間隙, 能夠經過cellpadding指定表格之間的間隙
  • cellpadding: 內邊距. 默認狀況下單元格邊緣距離內容有1個像素的內邊距, 能夠經過cellpadding屬性指定單元格邊緣和內容之間的內邊距
  • align: 規定表格相對周圍元素的對齊方式, 它的取值有center、left、right
    給table設置align屬性, 是讓表格在瀏覽器中居左/居右/居中
  • 給tr設置align屬性, 是讓當前行中全部內容居左/居右/居中
  • 給td設置align屬性,是讓當前單元格中全部內容居左/居右/居中
  • 該屬性僅僅做爲了解, 企業開發中用css代替, 由於HTML僅僅用於說明語義
  • 若是td中設置了align屬性, tr中也設置了align屬性, 那麼單元格中的內容會按照td中設置的來對齊
    valign: 規定表格相對周圍元素的對齊方式, 它的取值有top、middle、bottom
  • 給table設置valign屬性, 無效
  • 給tr設置valign屬性, 是讓當前行中全部內容居上/居中/居下
  • 給td設置valign屬性,是讓當前單元格中全部內容居上/居中/居下
  • 若是td中設置了valign屬性, tr中也設置了valign屬性, 那麼單元格中的內容會按照td中設置的來對齊
    bgcolor:規定表格的背景顏色
  • 給table設置bgcolor屬性, 是給整個表格設置背景顏色
  • 給tr設置bgcolor屬性, 是給當前行設置背景顏色
  • 給td設置bgcolor屬性, 是給當前單元格設置背景顏色
  • 該屬性僅僅做爲了解, 企業開發中用css代替, 由於HTML僅僅用於說明語義
    表格中其它的標籤
    表單中有兩種類型的單元格, 一種是標準單元格td, 一種是表頭單元格th
  • th標籤: 給每一列設置標題, 單元格中的內容會自動加粗,居中
  • caption標籤:給整個表格設置標題
    必定要嵌套在talbe標籤內部纔有效
    表格的結構
  • thead標籤:用來存放當前列的表頭, 若是沒有加css頁面默認將表頭中的高度設置變小
  • tbody標籤:通常用來存放頁面中的主體數據, 若是不寫會自動加上
  • tfoot標籤:用來存放表格的頁腳(腳註或表注), 若是沒有加css頁面默認將表頭中的高度設置變小, 通常不會出現
    表格合併
    1.水平方向上的單元格合併
    能夠給td標籤添加一個colspan屬性, 來指定把某一個單元格當作多個單元格來看待(水平方向)
    例如:
<td colspan="2"></td>

含義: 把當前單元格當作兩個單元格來看待
注意點:

  • 因爲把某一個單元格當作了多個單元格來看到, 因此就會多出一些單元格, 因此須要刪掉一些單元格才能正常顯示
    必定要記住單元格合併永遠都是向後或者向下合併, 而不能向前或者向上合併
    2.垂直方向上的單元格合併
  • 能夠給td標籤設置一個rowspan屬性, 來指定把某一個單元格當作多個單元格來看待(垂直方向)
    例如:
<td rowspan="2"></td>

含義: 把當前單元格當作兩個單元格來看待

表單標籤

格式:

<form>
表單元素
</form>

常見的表單元素
1.input標籤:input標籤有一個type屬性, 這個屬性有不少類型的取值, 取值的不一樣就決定了input標籤的功能和外觀不一樣

<form>
<!--明文輸入框-->
帳號:<input type="text"><br>
<!--暗文輸入框-->
密碼:<input type="password"><br>
<!--給輸入框設置默認值-->
帳號:<input type="text" value="lnj"><br>
密碼:<input type="password" value="123"><br>
<!--
單選框
注意點:
1.默認狀況下單選框不會互斥, 要想單選框互斥那麼必須給每個單選框標籤都設置一個name屬性, 而後name屬性還必須設置相同的值
2.要想讓單選框默認選中某一個框子, 那麼能夠給input標籤添加一個checked屬性
3.在HTML中若是屬性的取值和屬性的名稱同樣, 能夠只寫一個. 可是在XHTML中必須寫上取值, 因此在企業開發中咱們推薦你們不要省略取值
-->

性別:
<input type="radio" name="xx" checked>
<input type="radio" name="xx">
<input type="radio" name="xx" >保密<br>
<!--多選框-->
愛好:
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
</form>

2.按鈕標籤button

定義一個普通按鈕
做用:配合JS完成一些操做
<input type="button" value="我是按鈕" onclick="alert('lnj')">
定義一個圖片按鈕
做用:配合JS完成一些操做
<input type="image" src="images/register.jpg" onclick="alert('lnj')">
定義重置按鈕
做用:清空表單中的數據
注意點:
重置按鈕有默認的按鈕標題, 默認叫作 重置
也能夠經過value屬性來修改默認標題
<input type="reset" value="清空">
定義提交按鈕
<input type="submit">
做用:將表單中的數據提交到遠程服務器
注意點:
要想把表單中的數據提交到遠程服務器,必須知足兩個條件
1.告訴表單須要提交到哪一個服務器
能夠經過form標籤的action屬性來告訴表單,須要提交到那個服務器
2.告訴表單,表單中的哪些數據須要提交
隱藏域
做用: 用於悄悄咪咪的收集用戶的一些數據, 隱藏域是不會出如今界面中的
<input type="hidden" name="cc" value="it666">

3.Label標籤

1.默認狀況下文字和輸入框是沒有關聯關係的, 也就是說點擊文字輸入框不會聚焦, 若是想點擊文字時讓對應的輸入框聚焦, 那麼就須要讓文字和輸入框進行綁定
2.要想讓輸入框和文字綁定在一塊兒, 那麼咱們可使用Label標籤
3.綁定的格式:
3.1將文字利用label標籤包裹起來
3.2給輸入框添加一個id屬性
3.3在label標籤中經過for屬性和輸入框中的id進行綁定便可
  <label for="account">帳號:</label><input type="text" id="account">

4.Datalist標籤
做用: 給輸入框綁定待選項
datalist格式:

<datalist>
<option>待選項內容</option>
</datalist>

如何給輸入框綁定待選列表

  • 搞一個輸入框
  • 搞一個datalist列表
  • 給datalist列表標籤添加一個id
  • 給輸入框添加一個list屬性,將datalist的id對應的值賦值給list屬性便可
請輸入你的車型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>

5.select標籤
做用: 用於定義下拉列表
格式:

<select>
<optgroup label="分組名稱">
<option>列表數據</option>
</optgroup>
</select>

注意點:

  • 下拉列表不能輸入內容, 可是能夠直接在列表中選擇內容
  • 能夠經過給option標籤添加一個selected屬性來指定列表的默認值
  • 能夠經過給option標籤包裹一層optgroup標籤來給下拉列表中的數據分類
<select>
   <option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>廣西</option>
<option selected="selected">武漢</option>
</select>

6.textarea標籤
做用: 定義一個多行輸入框
格式:

<textarea>
11111
</textarea>

注意點:

  • 默認狀況下輸入框能夠無限換行
  • 默認狀況下輸入框有本身的寬度和高度
  • 能夠經過cols和rows來指定輸入框的寬度和高度, 可是雖然指定了列數和行數, 可是仍是能夠無限往下輸入
  • 默認狀況下輸入框是能夠手動拉伸的
    7.表單標籤-h5補充
placeholder
<input type="text" placeholder="請輸入用戶名">
用於指定input輸入框的佔位符號, 特色: 用戶輸入數據以後佔位符號會自動消失
autofocus
<input type="text" autofocus>
用於指定默認讓哪個輸入框獲取焦點, 特色: 不能同時讓多個輸入框獲取焦點
multiple
<input type="file" multiple>
type="file" 就是告訴瀏覽器, 當前的input輸入框是須要選擇文件
特色: 默認狀況下只能選擇一個文件
若是在input標籤中添加一個multiple屬性, 就可讓input同時選擇多個文件
autocomplete
<input type="text" autocomplete="off">
記錄用戶提交過的數據, 注意點: input輸入框必須有name屬性才能記錄, 而且只有提交以後才能記錄
required
<input type="text" required>
強制用戶輸入內容, 若是沒有輸入內容不能提交表單
accesskey
<input type="text" accesskey="s">
能夠經過配置快捷鍵讓輸入框獲取焦點
快捷鍵就是 Alt + 指定的符號

表單練習

<form action="http://www.baidu.com">
<fieldset>
<legend>註冊界面</legend>
<p>
帳號: <input type="text" name="account">
</p>
<p>
密碼: <input type="password" name="pwd">
</p>
<!--
在單選框和多選框中,全部的項目的name必須一致
在表單標籤中,除了按鈕標籤之外的標籤,均可以經過value來指定須要提交到服務器的數據
-->

<p>
性別:
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<input type="radio" checked="checked" name="gender" value="yao">保密
</p>
<p>
愛好:
<input type="checkbox" name="sport" value="basketball">籃球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" checked="checked" name="sport" value="crazy">足浴
</p>
<p>
簡介:
<textarea cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日:
<input type="date" name="birthday">
</p>
<p>
郵箱:
<input type="email" name="email">
</p>
<p>
電話:
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="註冊">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="清空">
</p>
</fieldset>
</form>

video標籤

什麼是video標籤?
做用: 播放視頻
格式:
<video src="">
</video>
video標籤的屬性
src: 用於告訴video標籤須要播放的視頻地址
autoplay: 用於告訴video標籤是否須要自動播放視頻
controls: 用於告訴video標籤是否須要顯示控制條
poster: 用於告訴video標籤視頻沒有播放以前顯示的佔位圖片
loop: 通常用於作廣告視頻, 用於告訴video標籤視頻播放完畢以後是否須要循環播放
preload: 預加載視頻, 可是須要注意preload和autoplay相沖, 若是設置了autoplay屬性, 那麼preload屬性就會失效
muted:靜音
width/height: 和img標籤中的如出一轍
第二種格式
格式:
<video>
<source src="" type="">
<source src="" type="">
</video>
第二種格式存在的意義:
因爲視頻數據很是很是的重要, 因此五大瀏覽器廠商都不肯意支持別人的視頻格式, 因此致使了沒有一種視頻格式是全部瀏覽器都支持的
這個時候W3C爲了解決這個問題, 因此推出了第二個video標籤的格式
video標籤的第二種格式存在的意義就是爲了解決瀏覽器適配問題
video 元素支持三種視頻格式, 咱們能夠把這三種格式都經過source標籤指定給video標籤, 那麼之後當瀏覽器播放視頻時它就會從這三種中選擇一種本身支持的格式來播放
注意點:
當前經過video標籤的第二種格式雖然可以指定全部瀏覽器都支持的視頻格式, 可是想讓全部瀏覽器都經過video標籤播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標籤, 不然一樣沒法播放
在過去的一些瀏覽器是不支持HTML5標籤的, 因此爲了讓過去的一些瀏覽器也可以經過video標籤來播放視頻, 那麼咱們之後能夠經過一個JS的框架叫作html5media來實現
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>

audio標籤

播放音頻
<audio src="">
</audio>
<audio>
<source src="" type="">
</audio>

注意點:

  • audio標籤的使用和video標籤的使用基本同樣, video中可以使用的屬性在audio標籤中大部分都可以使用, 而且功能都同樣
  • 只不過有3個屬性不能用, height/width/poster

詳情和概要標籤

做用:利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息
默認狀況下是摺疊展現, 想看見詳情必須點擊
格式:

<details>
<summary>概要信息</summary>
詳情信息
</details>

marquee標籤

做用: 跑馬燈
格式:
<marquee>內容</marquee>
屬性:

  • direction: 設置滾動方向 left/right/up/down
  • scrollamount: 設置滾動速度, 值越大就越快
  • loop: 設置滾動次數, 默認是-1, 也就是無限滾動
  • behavior: 設置滾動類型 slide滾動到邊界就中止, alternate滾動到邊界就彈回
    注意點:
  • marquee標籤不是W3C推薦的標籤, 在W3C官方文檔中也沒法查詢這個標籤, 可是各大瀏覽器對這個標籤的支持很是好

HTML中廢棄的標籤

爲何HTML中有一部分標籤會被廢棄?
由於當前的HTML中的標籤只有一個做用, 就是用來添加語義
而早期的HTML標籤中有一部分標籤是沒有語義的,
有一部分標籤是用來修改樣式的
因此這部分標籤就被淘汰了

<br> <hr> <font>
<b> <u> <i> <s>

以上標籤都是沒有語義的,都是用來修改樣式的

  • b(bold) 加粗文本, 沒有任何語義的
  • u(underline) 給文本天津下劃線, 沒有任何語義的
  • i(italic) 將文本傾斜, 沒有任何語義的
  • s(strikethourgh) 給文本添加刪除線, 沒有任何語義的
    注意點:
    之後在企業開發中, 不到萬不得已必定不要使用這些被廢棄掉的標籤
    若是必定要使用, 通常狀況下都是用來做爲CSS的鉤子來使用
  • strong == b
  • ins == u
  • em == i
  • del == s
  • strong語義: 定義重要性強調的文字
  • ins語義(inseted): 定義插入的文字
  • em語義(emphasized): 定義強調的文字
  • del語義(deleted): 定義被刪除的文字

字符實體標籤

什麼是字符實體?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來的, 那麼這些東西要想顯示出來就必須經過字符實體

&nbsp; 空格, 一個&nbsp;就是一個空格, 有多少個&nbsp;就有多少個空格
&lt; 小於符號 <
(less than)
&gt; 大於符號 >
(greater than)&copy; 版權符號
相關文章
相關標籤/搜索