前端複習筆記--1.html標籤複習速查

時間 2019-12-07

標籤前端複習筆記 1.html html 標籤速查欄目 HTML 简体版

原文原文鏈接

概覽

文檔章節

<body>
<header>
<nav> 導航
<aside> 表示和主要內容不相關的區域
<article> 表示一個獨立的、可重複的結構
<section> 表示一組內容，相鄰的section之間的內容是有相關性的，相鄰的article標籤之間是獨立的
<footer>
<hx>

標題

文本

a標籤建立指向另外一個文檔的連接；建立指向另外一個文檔內部的錨點；連接到email地址；css

//href 屬性，連接地址
   //target 跳轉方式
   //_self:當前窗口顯示；
   //_blank:新開一個窗口顯示；
   //也但是一個名稱name，在名爲name的iframe中打開連接
   <a href="mailto:zhangweihang_amy@qq.com">給阿航發郵件</a>
   <a href="tel:10010">給聯通打電話</a>
   
  //?cc抄送
  //subject 主題

更多不是特別經常使用的標籤html

<em></em> //表示強調
   <strong></strong>  //粗體強調
   <br> 換行，在內容中換行 
   <cite></cite> //斜體，用在文章標題處；
   <q></q> //表示引用，會加引號「」；
   <code></code> //放代碼
   <b></b> //粗體，關鍵詞
   <i></i> //斜體，關鍵字

組合內容

分區
div：自己沒有任何的語義，主要用來做爲分區,h5以前沒有header這種語義化的標籤，
段落
p：段落

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

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

ol：有序列表 （排行榜）git

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

dl：自定義列表 github

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

pre:把code標籤的內容放到pre標籤中，能夠保留code內容中的換行
blockquote:大塊的引用web

嵌入資源

<img> 圖片canvas

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

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

//在type屬性中指定插件類型，插件的參數能夠放在param標籤中，
   //播放器的地址也能夠寫在object的data屬性上面，ie8如下不兼容data屬性
   <object data="" type="application/x-shockwaveflash">
       <param name="movie" value="http://pdfReader.swf">
       <param name="flashvars" value="http://book.pdf">
   </object>

<embed src="http://pdfReader.swf" type="application/x-shockwaveflash">

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

<!--由於不一樣的瀏覽器對視頻的支持格式不同，-->
   <!--因此要準備多個視頻文件，放在source的標籤中，若是隻有一個視頻文件，能夠直接放在video標籤的src裏面-->
   <!--瀏覽器會選擇一個它支持的文件視頻類型來播放-->
   <video src="" controls="controls" poster="海報地址" autoplay>
       <source src="movie.mp4" type="video/mp4">
       <source src="movie.webm" type="video/webm">
       <source src="movie.ogg" type="video/ogg">
       <track kind="subtitles" src="video.srt" label="English">
       您的瀏覽器不支持video標籤
   </video>
  
   <!--經過controls，顯示控制條-->
   <!--poster用來指定封面，若是沒有指定，則顯示視頻的第一幀；-->
   <!--track屬性用來引入字幕-->
   <!--autoplay屬性用來設置爲自動播放-->
   <!--loop屬性，循環播放,沒有指定，則播放完畢後顯示視頻的最後一幀-->

<audio></audio> 和video標籤很相似
<canvas> （圖）基於像素的，有不少圖形函數，能夠在js中進行繪製；適合用來處理比較複雜的，實時性比較高的，好比遊戲；
<svg> （圖）是矢量的，適合用來處理高保真的、靜態的圖形圖像
<map> (熱點區域）

<area> (熱點區域）

<!--coords,區域-->
   <!--shape,形狀-->
   <img src="圖片地址" alt="圖片名稱" width="1090" height="995" usemap="#Map2">
   <map name="Map2">
       <area shape="rect" coords="669,75,1075,682" href="xiupin.com/..." target="_blank">
       <area shape="rect" coords="26,93,391,337" href="xiupin.com/..." target="_blank">
   </map>

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

表格

table

<table>
       <caption>照片沖印價格詳情</caption>
       <thead>
           <tr>
               <!--表頭單元格用th表示-->
               <th>照片尺寸</th>
               <th>富士</th>
               <th>科達</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>6寸</th>
               <!--普通單元格用td表示-->
               <td>0.45</td>
               <td>0.6</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <!--跨列用colspan，跨行用rowspan-->
               <td colspan="3">運費8元每單，滿99免運費</td>
           </tr>
       </tfoot>
   </table>

表單

form

<!--action，接口；method，方式-->
   <form action="/login" method="post">
       <!--fieldset表示不一樣的區域-->
       <fieldset>
           <legend>照片選擇</legend>
           <!--input有兩個重要的屬性，name和value，name是向後臺傳值時的參數名，value是向後臺傳值時的參數值-->
           <input type="file" name="file">
       </fieldset>
   
       <fieldset>
           <legend>填寫信息</legend>
           <div>
               <!--多選-->
               <!--checked 表示默認選中-->
               <!--同一組單選框或者多選框的name的值是同樣的-->
               <input type="checkbox" value="香蕉" id="banana" checked><label for="banana">香蕉</label>
               <input type="checkbox" value="蘋果" id="apple"><label for="apple">蘋果</label>
           </div>
           <div>
               <!--單選-->
               <input type="radio" value="榨汁" id="1" name="how-to-eat" checked><label for="1">榨汁</label>
               <input type="radio" value="直接吃" id="2" name="how-to-eat"><label for="2">直接吃</label>
               <!--disabled屬性用來禁用某個選項-->
               <input type="radio" value="不吃了" id="3" name="how-to-eat" disabled><label for="2">不吃了</label>
           </div>
           <div>
               <!--文本-->
               <!--label爲表單作提示，for對應input、textarea、select的id-->
               <label for="name">姓名</label>
               <!--placeholder佔位符，默認展現的文字-->
               <!--readonly屬性，表示只讀-->
               <!--hidden屬性表示隱藏，頁面上不可見，可是向後臺傳值的時候是傳的-->
               <input type="text" id="name" placeholder="請輸入姓名" readonly>
               <input type="text" id="name2" placeholder="請輸入姓名" readonly hidden>
           </div>
           <div>
               <label for="more-info">備註</label>
               <!--多行文本框用textarea表示-->
               <textarea name="" id="more-info" cols="30" rows="10"></textarea>
           </div>
           <label for="delivery">delivery</label>
           <!--下拉框-->
           <select name="" id="delivery">
               <!--optgroup用來區分選項組-->
               <optgroup label="group1">
                   <option value="0">快遞</option>
                   <option value="1">平郵</option>
               </optgroup>
               <option value="2" selected>EMS</option>
           </select>
       </fieldset>
       <!--<div>-->
       <!--&lt;!&ndash;input也能夠用來作按鈕，可是，爲了更好地語義化，咱們一般使用button&ndash;&gt;-->
       <!--<input type="submit">-->
       <!--<input type="reset">-->
       <!--</div>-->
       <div>
           <button type="submit">提交</button>
           <button type="reset">重置</button>
       </div>
   </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 建立一個沒用的元素來解決，例如：<script>document.createElement("header");</script>，也可使用shiv來解決兼容性問題，詳情可參考HTML5 Shiv https://github.com/afarkas/ht...）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。