前端基礎小標籤2

時間 2019-11-30

標籤前端基礎標籤简体版

原文原文鏈接

第一部分

1、link標籤裏type 屬性規定被連接文檔的 MIME 類型。
MIME(Multipurpose Internet Mail Extensions)多用途互聯網郵件擴展類型。是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。

2、外聯樣式
     <link rel="stylesheet" type="text/css" href="outer.css"/>

3、
      <link href="../img/logo.png" rel="shortcut icon" type="image/x-icon"/>
實例：
對於不一樣的瀏覽器，方法是有差異的
1.對於IE或TT瀏覽器：把須要顯示的16x16像素的ICO圖標命名爲favicon.ICO放置在網站根目錄下，瀏覽器會自動檢索
2.這大概是全部瀏覽器通用的在標籤頁加入指定圖標的方法：
把favicon.ico圖標放到網站根目錄下，在網頁的<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

3.對於火狐瀏覽器：圖標格式沒有IE那麼嚴格，GIF和PNG格式的圖標也能夠顯示，圖標名稱也能夠不是favcion
4.把圖標放在根目錄後，在<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="gif_favicon.gif" type="image/gif" >
或
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="png_favicon.png" type=" image/png" >

5.最後，ICO格式的圖片能夠經過MagicICO這個小軟件製做，注意這個軟件只能識別PNG格式圖片
軟件下載地址：http://ishare.iask.sina.com.cn/f/9614427.html
6.連接在線的圖片的時候，可使用下面的方法（下面是CSDN圖標，能夠直接放在網頁的head標籤裏面去，這樣就能直接顯示）
<link href="http://csdnimg.cn/www/images/favicon.ico" rel="SHORTCUT ICON">

4、
<link rel="prefetch" type="text/html" href="../html/04_表格標籤.html"/>
涉及瀏覽器前端優化；詳情請看大佬指點：
https://blog.csdn.net/yzbben/article/details/53762586?utm_source=blogxgwz4
https://blog.csdn.net/jiegeng2233/article/details/54631495
值得學習

5、
base標籤是HTML語言中的基準網址標記，它是一個單標籤，位於網頁頭部文件的head標籤內，一個頁面最多隻能使用一個base元素，用來提供一個指定的默認目標，也算是一種表達路徑和鏈接網址的標記。
常見的url路徑形式分別有相對路徑與絕對路徑，若是base標籤指定了目標，瀏覽器將經過這個目標來解析當前文檔中的全部相對路徑，包括的標籤有（a、img、link、form），
也就是說，瀏覽器解析時會在路徑前加上base給的目標，而頁面中的相對路徑也都轉換成了絕對路徑。
使用了base標籤就應帶上href屬性和target屬性。
1.該元素必須是空元素
2.該元素除了能夠指定id屬性外,還能夠指定href和target
href: 指定全部連接的基準路徑
target: 指定超連接默認在哪一個窗口打開連接
能夠取值
_blank:新的空白窗口打開
_parent:父容器窗口打開
_self: 當前窗口打開
_top：在瀏覽器的整個窗口打開連接，忽略任何框架。
框架標籤的name值: 指定某個框架標籤打開
實例：
              <head>
       <base href="http://www.baidu.com" target="_blank" />
   </head>
   <body>
       
       <a href="index.html">測試1</a>

       
       <a href="demo.html">測試2</a>
               </body>

6、<nav> 標籤訂義導航連接的部分。

並非全部的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是做爲標註一個導航連接的區域。

在不一樣設備上（手機或者PC）能夠制定導航連接是否顯示，以適應不一樣屏幕的需求。

7、<section> 標籤訂義了文檔的某個區域。好比章節、頭部、底部或者文檔的其餘區域。

8、<meta>元數據（Metadata）是數據的數據信息。

<meta> 標籤提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，可是會被瀏覽器解析。

META元素一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者及其餘元數據。

元數據能夠被使用瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 Web 服務調用。
注意：<meta> 標籤一般位於 <head> 區域內。

注意：元數據一般以名稱/值對出現。

注意：若是沒有提供 name 屬性，那麼名稱/值對中的名稱會採用 http-equiv 屬性的值。
HTML5 不支持 scheme 屬性。
實例

實例 1 - 定義文檔關鍵詞，用於搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

實例 2 - 定義web頁面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

實例 3 - 定義頁面做者：
<meta name="author" content="Hege Refsnes">

實例 4 - 每30秒刷新頁面：
<meta http-equiv="refresh" content="30">


<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

還有一個 viewport 屬性，它用於移動端顯示優化的。
能夠參考這篇文章：viewport 深刻理解（https://www.runoob.com/w3cnote/viewport-deep-understanding.html）
還有一個屬性：minimal-ui，參考：

iOS 7.1 的 Safari 爲 meta 標籤新增 minimal-ui 屬性，在網頁加載時隱藏地址欄與導航欄（http://36kr.com/p/210516.html），這個在 iOS8 中已經廢棄了。
實例5：

                                <meta name="author" content="xyr"/>//說明：標註網站的做者,及做者的相關信息
       <meta name="website" content="http://www.baidu.com"/>
       <meta name="copyright" content="2001-2018 sxt.com"/>
       
       <meta name="keywords" content="Java技術大數據"/>keywords用來告訴搜索引擎你的網站關鍵字是什麼，容許多個關鍵字，中間用逗號隔開。
       <meta charset="utf-8"/>
       <meta name="description" content="html的meta學習,meta是html語言head區的一個輔助性標籤。"> 說明：description用來告訴搜索引擎你的網站主要內容。
                               <meta name="topic" content="your website's topic">
                               <meta name="subject" content="your website's subject">
                                說明：topic、subject用來告訴搜索引擎你的網站主旨、主題。

       

       
       <meta http-equiv="expires" content="Sat Sep 27 16:12:35 CST 2018"/>
       
       <meta http-equiv="Pragma" content="no-cache"/>
       
       
       <meta http-equiv="refresh" content="2"/>
       
       <meta http-equiv="refresh" content="4;URL=http://www.baidu.com"/>
       
       <meta http-equiv="set-cookie" content="name=value expires= Sat Sep 27 16:12:30 CST 2019, path=/" />
       
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name ="viewport" content ="width=device-width,initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

爲移動設備添加 viewport，content 參數：
              *   `width` viewport 寬度(數值/device-width)
              *   `height` viewport 高度(數值/device-height)
              *   `initial-scale` 初始縮放比例
              *   `maximum-scale` 最大縮放比例
              *   `minimum-scale` 最小縮放比例
              *   `user-scalable` 是否容許用戶縮放(yes/no)
大佬指點：https://www.cnblogs.com/lsongyang/p/10071052.html

9、<img>標籤訂義 HTML 頁面中的圖像。

<img> 標籤有兩個必需的屬性：src 和 alt。
一、圖片四要素
           src:圖片路徑
           alt:
               1.有利於seo優化
               2.若是圖片不存在會顯示對應的提示信息
               3.某些瀏覽器將鼠標放置在圖片上方，也會顯示，可是部分瀏覽器不支持，可使用
                                                title屬性
           height: 圖片的高
           width: 圖片的寬
二、img標籤的usemap屬性，usemap 屬性將圖像定義爲客戶端圖像映射。

圖像映射指的是帶有可點擊區域的圖像。

usemap 屬性與 <map> 元素的 name 或 id 屬性相關聯，以創建 <img> 與 <map> 之間的關係。

三、ismap 屬性和 usemap 屬性的應用差別：

地圖就是很好地應用 ismap 和 usemap 屬性的一個示例，例如，在瀏覽一家全國範圍的大公司網頁時，用戶可能會在地圖上單擊他們所居住的城市，以得到附近地區零售店的地址和電話號碼等。

usemap 客戶端處理圖像映射的好處是，它不要求有服務器或特殊的服務器軟件，與 ismap 機制不一樣，它能夠用在非 web （無網絡）環境中，例如在本地的文件或者 CD-ROM 中使用。

實例：
客戶器端圖像映射：

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

四、area標籤屬性：href跳轉地址，<area shape="rect" coords="x1, y1,x2,y2" href=url>表示設定熱點的形狀爲矩形，左上角頂點座標爲（X1,y1），右下角頂點座標爲（X2,y2）。
<area shape="circle" coords="x1, y1,r" href=url>表示設定熱點的形狀爲圓形，圓心座標爲（X1,y1），半徑爲r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設定熱點的形狀爲多邊形，各頂點座標依次爲（X1,y1）、（X2,y2）、（x3,y3） ......shape設置熱點的形狀，coords設置熱點的大小：

註釋：從技術上講，圖像並不會插入 HTML 頁面中，而是連接到 HTML 頁面上。<img> 標籤的做用是爲被引用的圖像建立佔位符。

提示：經過在 <a> 標籤中嵌套 <img> 標籤，給圖像添加到另外一個文檔的連接。
HTML5 中不支持如下屬性：align（規定如何根據周圍的文原本排列圖像）、border （規定圖像周圍的邊框）、hspace（規定圖像左側和右側的空白）、longdesc（指向包含長的圖像描述文檔的 URL）、vspace（規定圖像頂部和底部的空白）。

10、

       
11、


       <video controls="controls">
           <source src="../../video/07.員工管理系統完善.mp4" type="video/mp4"></source>
           <source src="../../video/07.員工管理系統完善.ogv" type="video/ogv"></source>
           <source src="../../video/07.員工管理系統完善.webm" type="video/webm"></source>
           當前瀏覽器不支持 video直接播放，點擊這裏下載視頻：
       </video>


   <audio src="../青藏高原.mp3" controls></audio>

12、



<frameset rows="150,*">
       <frame src="top/top.html"/>
       <frameset cols="150,*">
           <frame src="left/left.html"/>
           <frame name="myframe"/>
       </frameset>
</frameset>

注意: frameset標籤必須把body元素去掉

<iframe src="test04.html" width="500" height="400"></iframe>
<iframe src="test05.html" width="500" height="400"></iframe>
<iframe src="test06.html" width="500" height="400"></iframe>

<h3>導航欄</h3>
<a href="test03.html" target="mainFrame">test03</a>
<a href="test04.html" target="mainFrame">test04</a>
<a href="test05.html" target="mainFrame">test05</a>
<iframe name="mainFrame" width="800px" height="500px"></iframe>css

相關標籤/搜索

每日一句

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