前端復習筆記--1.html標簽復習速查

番茄西紅柿發布于2019-08-01 18:42 / 733人閱讀

摘要：可讀性，提高代碼的可讀性，便于多人的修改維護，提高開發效率。主流瀏覽器都兼容的新標簽，對于及以下版本不認識的新元素，可以使用創建一個沒用的元素來解決，例如，也可以使用來解決兼容性問題，詳情可參考

概覽

文檔章節

導航

表示和主要內容不相關的區域

表示一個獨立的、可重復的結構

表示一組內容，相鄰的section之間的內容是有相關性的，相鄰的article標簽之間是獨立的

標題

文本

a標簽創建指向另一個文檔的鏈接；創建指向另一個文檔內部的錨點；鏈接到email地址；

   //href 屬性，鏈接地址
   //target 跳轉方式
   //_self:當前窗口顯示；
   //_blank:新開一個窗口顯示；
   //也可是一個名稱name，在名為name的iframe中打開鏈接
   給阿航發郵件
   給聯通打電話
   
  //?cc抄送
  //subject 主題

更多不是特別常用的標簽

    //表示強調
     //粗體強調
   
 換行，在內容中換行 
    //斜體，用在文章標題處；
    //表示引用，會加引號“”；
    //放代碼
    //粗體，關鍵詞
    //斜體，關鍵字

組合內容

分區
div：本身沒有任何的語義，主要用來作為分區,h5之前沒有header這種語義化的標簽，

段落
p：段落

列表，列表是可以嵌套的
ul：無序列表（導航，節目列表，用戶列表等都可以用無序列表來表示）

   //默認的li的樣式會有小圓點，可以用css來控制
   .class{
       list-style:none
   }

ol：有序列表 （排行榜）

   //適合做排行榜等有順序的列表，默認樣式會有序號123
   //序號可以用type屬性改變，start屬性用來改變起始序號；

dl：自定義列表

   //dt定義了列表項，dd定義了對列表項的描述，
   //每一項的dt只能有一個，對應的dd可以有多個，
   //dd會有一定縮進

pre:把code標簽的內容放到pre標簽中，可以保留code內容中的換行
blockquote:大塊的引用

嵌入資源

圖片

   //頁面中嵌入圖片，自閉和標簽
   //src圖片路徑
   //alt描述圖片的含義
   //如果網速慢等情況，導致圖片沒有加載出來，或者地址寫錯了導致無法加載圖片，
   //alt的內容就會替代圖片，顯示出來
   //一般都會要求寫上alt，改善用戶體驗

嵌入頁面

   //當前頁面的上下文（css，js）和嵌入頁面中的內容是隔離的，
   //在嵌入頁面中的操做并不影響當前頁面
   //比如頁面中的播放器，可以放在iframe中，這樣頁面的操作就不會影響播放器的操作

嵌入外部資源（可能是pdf等插件）

   //在type屬性中指定插件類型，插件的參數可以放在param標簽中，
   //播放器的地址也可以寫在object的data屬性上面，ie8以下不兼容data屬性

嵌入插件

在h5中可以使用video標簽來插入視頻，viedo標簽，只有高版本的瀏覽器才支持

和video標簽很類似

(熱點區域）

附錄
video文件兼容性 https://en.wikipedia.org/wiki...
audio文件兼容性https://en.wikipedia.org/wiki...

表格

table

   
       照片沖印價格詳情
       
           
               
               照片尺寸
               富士
               科達
           
       
       
           
               6寸
               
               0.45
               0.6
           
       
       
           
               
               運費8元每單，滿99免運費

表單

form

input

   //input的type屬性
   //email
   //url
   //number
   //tel
   //search
   //range 一定范圍內的數據
   //color 顏色的拾色器
   //date-picker （date，month，week，time，datetime，datetime-local）

語義化
什么是語義化呢？
了解每一種標簽的用途，用適當的標簽來描述頁面。
語義化的作用：1.便于SEO（Search Engine Optimization）優化，我們的頁面是給搜索引擎看的，搜索引擎的爬蟲呢會根據語義話的標簽來確定關鍵字的權重，這樣子我們的關鍵字能和用戶的關鍵字能更加的匹配；另外，搜索引擎也會給語義化的頁面一個更高的權重，這樣我們的頁面也會更早出現在用戶的搜索結果中。2.可訪問性，頁面也可能是給殘障人士看的，他們可以通過屏幕閱讀器來訪問頁面，屏幕閱讀器會對不同的標簽發出不同的聲音，使用更語義化的標簽能夠傳達不同信息的重要性，使他們能夠更好的理解頁面的內容。3.可讀性，提高代碼的可讀性，便于多人的修改維護，提高開發效率。
（ps：主流瀏覽器都兼容HTML5的新標簽，對于 IE8 及以下版本不認識 HTML5的新元素，可以使用 JavaScript 創建一個沒用的元素來解決，例如：，也可以使用shiv來解決兼容性問題，詳情可參考HTML5 Shiv https://github.com/afarkas/ht...）

云服務器 GPU云服務器復習計劃復習題數據倉庫復習匯編語言復習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52017.html

前端復習筆記

摘要：一基本結構設置字符編碼集格式網頁頭部二文本標記加粗傾斜下劃線刪除線上標下標三引用樣式表的方式內聯樣式在元素的開始標簽里，設置一個屬性，并設置對應的屬性名及屬性值例使用場景里，使用給元素添加樣式內部樣式表在標簽里加上一對標簽，并且在標簽設置對一、基本結構 //設置字符編碼集格式 // //網頁頭部二、文本標記1.加粗 b2...

yhaolpz 2019-04-23 11:46 評論0 收藏0
HTML+CSS復習之HTML基礎篇

摘要：規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。規定元素仍未或不再相關。規定是否對元素進行拼寫和語法檢查。規定元素的行內樣式。一些說明寫在前面：HTML和CSS，當你了解所有規則后，你應該多寫頁面并記錄你出現的問題，這才是學習HTML和CSS的最佳方法這是我學習一段時間之后，再次回顧HTML，希望大家也對HTML有不一樣的認識我把HTML標簽分成兩大類，重要的和不重要的，...

genefy 2019-08-29 12:35 評論0 收藏0
HTML+CSS復習之HTML基礎篇

摘要：規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。規定元素仍未或不再相關。規定是否對元素進行拼寫和語法檢查。規定元素的行內樣式。一些說明寫在前面：HTML和CSS，當你了解所有規則后，你應該多寫頁面并記錄你出現的問題，這才是學習HTML和CSS的最佳方法這是我學習一段時間之后，再次回顧HTML，希望大家也對HTML有不一樣的認識我把HTML標簽分成兩大類，重要的和不重要的，...

MrZONT 2019-08-01 16:51 評論0 收藏0