整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端大神總結的HTML標簽,真的是太全了-連載1

          TML

          本文,有很多很棘手的問題,例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁,可以群(526929231)使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用!很好用!很好用! SublimeText、Webstorm推薦這兩個編輯器

          HTML起源

          剛開始設計HTML語言是為了將文字圖像關聯在一起,用另一臺發送或接收

          HTML(HyperTextMark-up Language)超文本標記語言

          HTML 不是一種編程語言,而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)

          HTML標簽

          標簽是由尖括號 < > 把關鍵詞括起來,標簽通常是成對出現的

          Web瀏覽器

          讀取 HTML 文檔,使用標簽來解析頁面的內容,以網頁的形式現實,瀏覽器不會現實HTML標簽

          現在市場上主流五大瀏覽器

          每種瀏覽器都有自己的內核(引擎)(解析網頁的一個程序,io以什么方式去渲染它都要通過引擎去執行)

          目前主流的瀏覽器分為五種

          • Chrome谷歌瀏覽器 (Webkit內核,V8 js引擎)

          • Firefox火狐瀏覽器 (Gecko內核)

          • Internet Explorer IE瀏覽器( Trident內核)

          • Opera 歐朋瀏覽器 (Presto內核) 主要市場:移動端

          • Safari 蘋果瀏覽器 (Webkit內核,但JS引擎為Nitro)

            不需要去記,簡單了解下

          標簽使用規范

          1. 標簽必須閉合

          2. 所有標簽名一律小寫

          3. 代碼縮進,使閱讀代碼更加易懂

          4. 特殊符號規范使用

          5. 命名規范,見名之意

          PS: 所有的標記符號都是半角英文

          編輯器

          眾說紛紜編輯器太多,最終只是一個工具,希望同學們能從萬千世界中找到適合自己的編輯器伙伴

          編輯器描述
          EditPlus手寫模式,適合初學手寫,無代碼提示(有IE調試視圖)
          Sublime 插件特別多,占用內存小,啟動速度快,打開大項目較慢,管理文件方式有些缺陷
          webstorm集成插件特別多,啟動較慢,占用內存大,開發和管理視圖都很方便
          Dreamweaver 適合初學,主要代碼提示和代碼插入功能強大,主要偏向于設計(有設計視圖)

          Sublime插件列表

          插件名描述詳情請戳
          emmet前端自動補全,提供快捷補全方式
          ColorPicker調色板,顏色選擇器
          SublimeTmplsublime模板,可以快速創建一個HTML模板
          view in browser用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁)
          LiveReload實時刷新HTML(編輯器里按下保存ctrl+s的時候,已經打開的HTMl會自動刷新)谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載
          Color HighlighterCSS顏色代碼高亮及顏色預覽提示
          CSS3CSS3的代碼高亮提示還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮
          JavaScript Completions原生js 代碼提示
          Sublime-Better-Completion可自選開啟代碼提示,支持jQ、js、bootstrap、php、sql ...倉庫地址此插件只能通過Github克隆下載安裝安裝方法

          注:Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法,還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~

          模板的配置

          配置描述
          !DOCTYPE html不是標簽,主要用于文檔類型的聲明
          charset="utf-8"聲明字符編碼集
          http-equiv="Content-Type"把Content屬性關聯到HTTP頭部(協議頭)

          HTML模板

          簡單了解,并不需要熟練掌握

          HTML樹狀結構

          Dom節點樹

          HTML網頁擴展名

          .html .htm這兩種是比較常見的

          在早期系統中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm

          現在通常使用.html作為擴展名


          標簽的學習

          接下來所有的標簽元素學習都在body標簽里面去敲打實現、

          H標簽

          為了突出標題,字體大小和加粗發生相應的改變

          <h1>我是大主題</h1>
          <h2>我是大主題</h2>
          <h3>我是大主題</h3>
          <h4>我是大主題</h4>
          <h5>我是大主題</h5>
          <h6>我是大主題</h6>
          <!doctype html><!-- 讓瀏覽器使用html5的標準解析 -->
          <html>
           <head>
           <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 -->
           <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
           <meta name="keywords" content="SEO搜索引擎,關鍵詞,多個請用逗號分開" />
           <meta name="description" content="網頁描述,八十字內" />
           <title>瀏覽器標簽頁上的網頁標題</title>
           </head>
           <body> <!-- 所有的標簽學習都在這body里面去敲,上面head元素里面的內容做個了解就可以了 -->
           
           <h1>我是大標題</h1>
           <h2>我是主題2</h2>
           <h3>我是主題3</h3>
           <h4>我是主題4</h4>
           <h5>我是主題5</h5>
           <h6>我是主題6</h6>
           
           </body>
          </html>

          可以發現h標簽從h1到h6會隨著數值越小字越小,并且都是會加粗和各占一行的狀態(前后的元素都會被換行)

          h1標簽一般一個頁面里面只會寫一次,為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優化)

          p段落標簽

          <p>
           冬著一身素衣,緩緩而來,季節沒有了往日的姹紫嫣紅,卻用簡單的線條,勾勒出一幅潔白的畫,純潔通透,輕盈自然。
          </p>

          特殊符號

          剛我們了解到了瀏覽器是識別尖括號的,如果要在頁面中顯示html標記那要怎么做呢?這時候就需要特殊符號的表示來顯示

          符號描述
          空格&nbsp;
          小于&lt;
          大于&gt;
          引號&quot;
          版權&copy;
          ×叉&times;
          &&amp;

          加粗標簽

          符號描述
          B標簽物理加粗,頁面呈現加粗狀態.
          Strong標簽不僅能加粗,還利于搜索引擎優化
          <b>物理加粗,頁面呈現加粗狀態.</b>
          
          <strong>不僅能加粗,還利于搜索引擎優化,就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優化顯示網頁的排名</strong>

          可以根據word文檔上面發現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽

          <i>我是傾斜</i> <u>我加了下劃線</u>

          A標簽

          • 鏈接一個頁面,點擊則會跳轉這個鏈接頁面

          • 使用錨點滾動到設定的位置

          <a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面
          
          
          <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部)
          
          
          <a href="javascript: void(0);"></a> 死鏈接,不會跳轉,一般用于js特效
          
          
          <a href="#name">錨點到一個標簽上所對應的ID名字,點擊則跳到那個標簽位置</a>
          
          
          <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協議不能少

          點擊#flag的a標簽的時候會跳到到上面h2標簽

          只有擁有name屬性的

          a標簽

          才能錨點,還有一種方式是通過ID標識唯一元素,也可以跳轉(不僅僅是a標簽)

          補充標簽

          描述標簽
          滾動標簽marquee
          字體標簽font
          定義水平線hr

          滾動標簽

          marquee

          屬性描述
          direction滾動方向
          behivior行為

          behivior

          描述
          alternate交替滾動
          scroll滾動
          slide滑落

          Font標簽

          屬性描述
          color顏色
          size0-7
          face字體

          hr水平線

          與font相似,擁有color和size屬性

          hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標簽,不加也能夠正確顯示,但是養成一個良好的習慣確實重要,比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、


          練習一、

          結合今天所學,寫一個簡單的網頁

          內容如下:

          • 寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫,網上一大把哈哈,可以自己寫下,鍛煉下思維

          • 需要包括h、p、a、加粗

          • 題材不限,至少200字

          練習二、

          在習題一的文章底部,使用滾動標簽進行滾動方向為45°

          可以在頭部找到我,如有勘誤、錯別字、盡情見諒很用心的檢查了 碼了這么久

          TTP/1.1 GET Request

          HTTP / 1.1服務器支持所謂的虛擬主機。也就是說,相同的物理服務器可以容納多個虛擬主機,具有不同的主機名(例如,www.nowhere123.com和www.test909.com)以及它們自己的專用文檔根目錄。因此,在HTTP / 1.1 GET請求中,必須包括一個名為“Host”的請求頭,以選擇其中一個虛擬主機。

          GET /index.html HTTP/1.1
          Host: 127.0.0.1
          (blank line)
          
          HTTP/1.1 200 OK
          Date: Sun, 18 Oct 2009 12:10:12 GMT
          Server: Apache/2.2.14 (Win32)
          Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT
          ETag: "10000000565a5-2c-3e94b66c2e680"
          Accept-Ranges: bytes
          Content-Length: 44
          Content-Type: text/html
           
          <html><body><h1>It works!</h1></body></html>
          

          Example: HTTP/1.1 Missing Host Header

          以下示例顯示HTTP / 1.1請求中的“Host”標頭是必需的。如果缺少“Host”標頭,則服務器返回錯誤“400 Bad Request”。

          GET /index.html HTTP/1.1
          (blank line)
          HTTP/1.1 400 Bad Request
          Date: Sun, 18 Oct 2009 12:13:46 GMT
          Server: Apache/2.2.14 (Win32)
          Content-Length: 226
          Connection: close
          Content-Type: text/html; charset=iso-8859-1
           
          <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
          <html><head>
          <title>400 Bad Request</title>
          </head><body>
          <h1>Bad Request</h1>
          <p>Your browser sent a request that this server could not understand.<br />
          </p>
          </body></html>
          

          有條件的GET請求

          在前面的所有示例中,如果可以滿足請求(即無條件),則服務器返回整個文檔。您可以使用其他請求標頭來發出“條件請求”。例如,要根據上次修改日期請求文檔(以便決定是否使用本地緩存副本),或者要求提供文檔(或范圍)的一部分而不是整個文檔(對于下載大文件)。

          條件請求標頭包括:

          • If-Modified-Since (check for response status code "304 Not Modified").
          • If-Unmodified-Since
          • If-Match
          • If-None-Match
          • If-Range

          Request Headers

          本節介紹一些常用的請求標頭。

          有關更多詳細信息,請參閱HTTP規范。

          標題名稱的語法是使用短劃線( - )連接的初始標題的單詞,例如,Content-Length,If-Modified-Since。

          Host: domain-name HTTP / 1.1支持虛擬主機。多個DNS名稱(例如,www.nowhere123.com和www.nowhere456.com)可以駐留在同一物理服務器上,具有自己的文檔根目錄。HTTP / 1.1中必須使用主機頭來選擇其中一個主機。

          如果服務器,客戶端可以使用以下標頭進行內容協商,以請求服務器提供文檔的首選類型(就媒體類型而言,例如JPEG與GIF,或使用的語言,例如英語與法語)維護同一文檔的多個版本。

          Accept: mime-type-1, mime-type-2, ...客戶端可以使用Accept標頭告訴服務器它可以處理的MIME類型,它更喜歡。如果服務器具有所請求文檔的多個版本(例如,GIF和PNG中的圖像,或TXT和PDF中的文檔),則它可以檢查該標題以決定將哪個版本傳遞給客戶端。(例如,PNG比GIF更先進,但并非所有瀏覽器都支持PNG。)此過程稱為內容類型協商。

          Accept-Language: language-1, language-2, ... 客戶端可以使用Accept-Language標頭告訴服務器它可以處理或更喜歡的語言。如果服務器具有所請求文檔的多個版本(例如,英語,中文,法語),則它可以檢查該標題以決定返回哪個版本。此過程稱為語言協商。

          Accept-Charset: Charset-1, Charset-2, ...對于字符集協商,客戶端可以使用此標頭告訴服務器它可以處理或更喜歡哪些字符集。字符集的示例是ISO-8859-1,ISO-8859-2,ISO-8859-5,BIG5,UCS2,UCS4,UTF8。

          Accept-Encoding: encoding-method-1, encoding-method-2, ... 客戶端可以使用此標頭告訴服務器它支持的編碼類型。如果服務器具有所請求文檔的編碼(或壓縮)版本,則它可以返回客戶端支持的編碼版本。服務器還可以在返回客戶端之前選擇對文檔進行編碼,以減少傳輸時間。服務器必須設置響應頭“Content-Encoding”以通知客戶端返回的文檔已編碼。常見的編碼方法是“x-gzip(.gz,.tgz)”和“x-compress(.Z)”。

          Connection: Close|Keep-Alive -客戶端可以使用此標頭告知服務器在此請求之后是否關閉連接,或者為另一個請求保持連接活動。HTTP / 1.1默認使用持久(保持活動)連接。HTTP / 1.0默認關閉連接。

          Referer: referer-URL - 客戶端可以使用此標頭指示此請求的引用者。如果您點擊網頁1中的鏈接訪問網頁2,則網頁1是請求網頁2的推薦人。所有主要瀏覽器都設置此標題,可用于跟蹤請求的來源(用于網絡廣告),或內容定制)。盡管如此,這個標題不可靠并且很容易被欺騙。請注意,推薦人拼錯為“Referer”(不幸的是,您也必須遵循)。

          User-Agent: browser-type - 確定用于發出請求的瀏覽器類型。服務器可以根據瀏覽器的類型使用此信息返回不同的文檔。

          Content-Length: number-of-bytes -由POST請求使用,以通知服務器請求正文的長度。

          Content-Type: mime-type -由POST請求使用,以通知服務器請求正文的媒體類型。

          Cache-Control: no-cache|... -客戶端可以使用此標頭指定代理服務器如何緩存頁面。“no-cache”要求代理從原始服務器獲取新副本,即使本地緩存副本可用。(HTTP / 1.0服務器無法識別“Cache-Control:no-cache”。而是使用“Pragma:no-cache”。如果您不確定服務器的版本,則包括兩個請求標頭。)

          Authorization: 客戶端使用它來提供其憑據(用戶名/密碼)以訪問受保護資源。

          Cookie: cookie-name-1=cookie-value-1, cookie-name-2=cookie-value-2, ... - 客戶端使用此標頭將cookie返回給服務器,該服務器之前由此服務器設置用于狀態管理。

          If-Modified-Since: date -告訴服務器僅在特定日期之后修改了頁面。

          GET Request for Directory

          假設文檔基目錄“htdocs”中存在名為“testdir”的目錄。

          如果客戶端向“/ testdir /”發出GET請求(即,在目錄中)。

          1. 如果目錄包含“index.html”文件,服務器將返回“/testdir/index.html”。
          2. 否則,如果在服務器配置中啟用了目錄列表,則服務器返回目錄列表
          3. 否則,服務器返回“404找不到頁面”。

          有趣的是,如果客戶端向“/ testdir”發出GET請求(未指定目錄路徑“/”),則服務器返回“301 Move Permanently”,其新“Location”為“/ testdir /“。

          大多數瀏覽器將跟進另一個“/ testdir /”請求。例如,如果您從瀏覽器發出不帶尾隨“/”的http://127.0.0.1:8000/testdir,您可能會注意到在給出響應后,地址中添加了一個尾隨的“/”。所以應該在目錄請求中包含“/”以保存額外的GET請求。

          URL and URI

          URL (Uniform Resource Locator)

          RFC 2396中定義的URL(統一資源定位符)用于通過Web唯一標識資源。 URL具有以下語法:

          protocol://hostname:port/path-and-file-name
          

          URL中有4個部分:

          1. Protocol:客戶端和服務器使用的應用層協議,例如HTTP,FTP和telnet。
          2. Hostname: 服務器的DNS域名(例如,www.nowhere123.com)或IP地址(例如192.128.1.2)。
          3. Port:服務器正在偵聽來自客戶端的傳入請求的TCP端口號。
          4. Path-and-file-name: 服務器文檔基目錄下所請求資源的名稱和位置。

          Encoded URL

          URL不能包含特殊字符,例如空格或“?”。特殊字符以%xx的形式編碼,其中xx是ASCII十六進制代碼。例如,'?'編碼為%7e;'+'編碼為%2b。空白可以編碼為%20或'+'。編碼后的URL稱為編碼URL。

          URI (Uniform Resource Identifier)

          RFC3986中定義的URI(統一資源標識符)比URL更通用,URL甚至可以在資源中定位片段。

          HTTP協議的URI語法是:

          http://host:port/path?request-parameters#nameAnchor
          
          • 名稱=值對形式的請求參數通過“?”與URL分隔。名稱=值對由'&'分隔。
          • #nameAnchor標識HTML文檔中的片段,通過錨標簽<a name="anchorName"> ... </a>定義。
          • 用于會話管理的URL重寫,例如“...; sessionID = xxxxxx”。

          Character Set Negotiation

          客戶端可以使用請求標頭Accept-Charset與服務器協商它喜歡的字符集。

          Accept-Charset: charset-1, charset-2, ...
          

          常見的字符集包括:ISO-8859-1(Latin-I),ISO-8859-2,ISO-8859-5,BIG5(繁體中文),GB2312(簡體中文),UCS2(2字節Unicode),UCS4(4字節Unicode),UTF8(編碼Unicode)等。

          Encoding Negotiation

          客戶端可以使用Accept-Encoding標頭告訴服務器它支持的編碼類型。常見的編碼方案是:“x-gzip(.gz,.tgz)”和“x-compress(.Z)”。

          Accept-Encoding: encoding-method-1, encoding-method-2, ...
          

          類似地,AddEncoding指令用于將文件擴展名與編碼方案相關聯。

          例如:

          AddEncoding x-compress .Z
          AddEncoding x-gzip .gz .tgz
          

          Persistent (or Keep-alive) Connections

          在HTTP / 1.0中,服務器在默認情況下傳遞響應后關閉TCP連接(連接:關閉)。也就是說,每個TCP連接只服務一個請求。這不是效率,因為許多HTML頁面包含超鏈接(通過<a href="url">標記)到其他資源(例如圖像,腳本 - 本地或遠程服務器)。如果下載包含5個內聯圖像的頁面,則瀏覽器必須與同一服務器建立6次TCP連接。

          客戶端可以與服務器協商并要求服務器在傳遞響應后不關閉連接,以便可以通過同一連接發送另一個請求。這稱為持久連接(或保持連接)。持久連接極大地提高了網絡的效率。對于HTTP / 1.0,默認連接是非持久性的。要請求持久連接,客戶端必須在請求消息中包含請求標頭“Connection:Keep-alive”以與服務器協商。

          對于HTTP / 1.1,默認連接是持久的。客戶端不必發送“Connection:Keep-alive”標頭。相反,客戶端可能希望發送標題“Connection:Close”以要求服務器在傳遞響應后關閉連接。

          持久連接對于具有許多小內聯圖像和其他相關數據的網頁非常有用,因為所有這些都可以使用相同的連接下載。

          持久連接的好處是:

          1. 在客戶端,代理,網關和源服務器中打開和關閉TCP連接時的CPU時間和資源節省。
          2. 請求可以“pipelined”。也就是說,客戶端可以在不等待每個響應的情況下發出多個請求,從而更有效地使用網絡。
          3. 響應更快,因為沒有時間執行TCP的連接打開握手。

          KeepAlive指令決定是否支持持久連接。這取值為On或Off。

          KeepAlive On|Off
          

          MaxKeepAliveRequests指令設置可以通過持久連接發送的最大請求數。您可以設置為0以允許無限數量的請求。建議設置較高的數字以獲得更好的性能和網絡效率。

          MaxKeepAliveRequests 200
          

          KeepAliveTimeOut指令設置持久連接等待下一個請求的超時時間(以秒為單位)。

          KeepAliveTimeout 10
          

          本文版權歸是三僡然所有,轉載請標明出處。歡迎轉載,歡迎評論,歡迎分享。如果你有文章想分享可以聯系我。

          1. 超鏈接標簽的作用是什么?
          2. 頁面間如何進行跳轉?
          3. 快速定位的錨鏈接的使用?

          超鏈接標簽的作用

          網頁必定會存在跳轉不同網頁的功能,幾乎可以在所有的網頁中找到鏈接,點擊鏈接可以從一個網頁跳轉到另一個網頁。

          跳轉到百度

          超鏈接標簽的語法

          1、標簽

          <a />
          

          2、屬性

          Href:要跳轉到的地址

          Target:跳轉的網頁在哪個窗口打開

          Target常用的值有兩個,_self表示在自身網頁中打開,_blank表示新打開一個窗口。默認是_self。

          3、示例

          <a  target="_blank">我要跳轉到百度</a>
          

          錨鏈接

          超鏈接標簽除了有跳轉網頁的功能以外,還有一個功能,就是書簽功能,經常會用在小說網站或者文檔網站。

          跳轉到書簽位置

          綜合運用

          超鏈接標簽本身是具有跳轉功能,再結合書簽功能,就能達到跳轉到其他頁面的書簽位置。用法都一樣,只不過書簽是定在其他網頁,然后本頁面的超鏈接標簽的href的值,是跳轉路徑+#+書簽標簽。以下示例:

          1、在目標網頁里定好書簽

          在目標網頁里定好書簽

          2、本網頁的超鏈接標簽對接好目標地址以及目標書簽.

          對接目標地址以及目標書簽

          跳轉到目標網頁并定位到書簽位置


          總結

          超鏈接標簽知識體系


          主站蜘蛛池模板: 韩国资源视频一区二区三区| 国产韩国精品一区二区三区| 亚洲欧美成人一区二区三区| 国产乱人伦精品一区二区| tom影院亚洲国产一区二区| 午夜福利无码一区二区| 精品天海翼一区二区| 久久99精品国产一区二区三区| 国产高清一区二区三区| 日本精品夜色视频一区二区| 久久se精品动漫一区二区三区| 国产一区二区草草影院| 国产福利电影一区二区三区久久久久成人精品综合 | 中文字幕aⅴ人妻一区二区| 精品性影院一区二区三区内射| 国产欧美一区二区精品仙草咪| av无码一区二区三区| 国产精品福利一区二区| 视频在线一区二区三区| 久久久精品人妻一区二区三区蜜桃| 在线日韩麻豆一区| 久久久一区二区三区| 日本精品视频一区二区三区| 日本不卡一区二区三区视频| 日韩a无吗一区二区三区| 亚洲国产精品自在线一区二区 | 三上悠亚精品一区二区久久| 国产精品日韩欧美一区二区三区 | 国产免费播放一区二区| 精品香蕉一区二区三区| 手机看片一区二区| 精品福利一区3d动漫| 中文字幕一区视频| 国产一区二区三区91| 一区二区三区波多野结衣 | 相泽亚洲一区中文字幕| 国产微拍精品一区二区| 精品永久久福利一区二区| 日韩人妻无码一区二区三区 | 亚洲一区精品中文字幕| 丰满人妻一区二区三区免费视频|