HTML拾遺

HTML拾遺

• 這篇博文用來記錄我在寫html的時候遇到的不清楚的、沒有理解的、未能察覺的、反覆使用搜索引擎查詢的點和一些總結性的知識。方便查閱。不按期更新。
• 這篇博文內容來源爲網絡，包含本身的理解總結，歡迎在評論區指出錯誤。
• 文章引用的內容版權歸原做者全部，侵權刪除。

W3C 簡介

萬維網聯盟（World Wide Web Consortium，W3C），又稱 W3C理事會，是萬維網的主要 國際標準組織。
萬維網聯盟（W3C）由蒂姆·伯納斯-李於1994年10月離開歐洲核子研究中心（CERN）後成立，該組織試圖經過 W3C制定的新標準來促進業界成員間的 兼容性和協議。聯盟試圖讓全部的供應商實施一套 W3C推薦標準。

爲解決網絡應用中不一樣平臺、技術和開發者帶來的不兼容問題，保障網絡信息的順利和完整流通，萬維網聯盟制定了一系列標準並督促網絡應用開發者和內容提供者遵循這些標準。標準的內容包括使用語言的規範，開發中使用的導則和解釋引擎的行爲等等。W3C也制定了包括XML和CSS等的衆多影響深遠的標準規範。

CSS：層疊樣式表
DOM：文檔對象模型
HTML：超文本標記語言
RDF：資源描述框架
SMIL：同步多媒體集成語言
SVG：可縮放向量圖形
XHTML：可擴展超文本標記語言
XML：可擴展標記語言
——維基百科

MDN 簡介

Mozilla 開發者社區（MDN）是一個完整的學習平臺，你能夠在這裏深刻學習Web技術以及可以驅動Web的軟件，包括：

• 網絡標準（例如：CSS、HTML 和 JavaScript）
• 開發開放網絡應用
• 開發 Firefox 附加組件

MDN的使命很簡單：提供給開發者們更輕易構建Web項目的信息。咱們致力於記錄互聯網上的開源技術。

關於MDN（官網）

HTML5 全部標籤列表

HTML5標籤列表(MDN)

這裏列出了 全部標準化的 HTML5 元素，使用起始標籤描述，按照功能分組。與列出全部標準化的、非標準化的、有效的、廢棄的標籤的
HTML 元素索引 不一樣的是，該頁只列出 有效的 HTML5 元素。 新網站應當只使用**這裏列出的元素。

符號 這個元素在 HTML5 中加入 表明該元素是在 HTML5
中新增的。另外注意，這裏列出的其餘元素可能在 HTML5 標準中獲得了擴充或通過修改。

HTML5(MND)

空標籤

空元素MDN

一個空元素（empty element）多是 HTML，SVG，或者 MathML
裏的一個不可能存在子節點（因此閉合標籤沒有意義）（例如內嵌的元素或者元素內的文本）的element。

在 HTML 中有如下這些空元素：

• <area>
• <br>
• <col>
• <colgroup> when the span is present
• <command>
• <embed>
• <hr>
• <img>
• <input>
• <keygen>
• <link>
• <meta>
• <param>
• <source>
• <track>
• <wbr>

可替換元素和不可替換元素

參考

可替換元素

可替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

CSS 裏，可替換元素（replaced element）的展示不是由CSS來控制的。這些元素是一類
外觀渲染獨立於CSS的外部對象。 典型的可替換元素有 <img>、 <object>、 <video> 和 表單元素，如<textarea>、 <input> 。

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(x)html代碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。
總的來講，就是元素被替換成了其餘內容。

例如<img src="xxx.png>瀏覽器下載src爲的xxx.png的圖片，而後替換這個img標籤因此叫可替換標籤，因此他的寬高是由原來的內容決定的。

可替換元素自帶寬高（自帶寬高是指默認有一個自己的寬高和屬性寬高），而後利用css能夠覆蓋他的自帶寬高。

而span不是可替換元素，自己沒有自帶寬高，span是由裏面的文字，裏面自己的內容決定的。

不可替換元素

(x)html 的大多數元素是不可替換元素，即其 內容直接表現給用戶端（例如瀏覽器）。

例如：<p>段落的內容</p> 段落<p>是一個不可替換元素，文字「段落的內容」全被顯示。

顯示元素--塊級元素和行內元素

塊級元素

在視覺上被格式化爲塊的元素，最明顯的特徵就是它默認在橫向充滿其父元素的內容區域（塊級元素的流體特性），並且在其左右兩邊沒有其餘元素，即塊級元素默認是獨佔一行的。

典型的塊級元素有：<div>、<p>、<h1>到<h6>、<table>，等等。
浮動元素以及display屬性爲block、list-item的元素都是塊級元素。

Div，divide，劃分，把頁面劃分爲幾塊。

行內元素

行內元素不造成新內容塊，即在其左右能夠有其餘元素，例如<a>、<span>、<strong>等，都是典型的行內級元素。
幾乎全部的可替換元素都是行內元素，例如 <img> 、 <input> 等等。

Span，在一行裏面橫向劃分

元素的高度

塊級元素的高度

塊級元素具備height width屬性，能夠經過他們直接設置寬和高

對於可替換的元素（行內元素）

替換元素通常有內在尺寸和寬高比(auto時起做用)，因此具備width和height，能夠設定。
例如你不指定img的width和height時，就按其默認內在尺寸顯示，也就是圖片被保存的時候的寬度和高度。
對於表單元素，瀏覽器也有默認的樣式，包括寬度和高度。

不可替換元素（行內元素）

例如<span>這是一個span</span>，經過line-height屬性來設置行高

行高

從上到下四條線分別是頂線、中線、基線、底線，vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。

行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。

a 標籤注意點

target屬性

_blank新窗口
_self本窗口
_parent父窗口
_top頂層窗口

download屬性

a標籤加了download屬性，就會下載本html頁面。
一個網頁以兩種方式處理頁面，一個是顯示，一個是下載。

若是返回的響應是

那麼瀏覽器就如下載的方式打開這個頁面，不是以展現的形式打開這個頁面。

herf屬性

• herf裏面的屬性不能寫<a href="qq.com"></a>，由於它會打開當前路徑下的qq.com文件，必須加上協議。<a href="http://qq.com"></a>
• 還有一種是 a標籤的無協議絕對地址<a href="//qq.com"></a>，打開時所用協議爲當前頁面的協議。
• 儘可能不要用用file協議。
  解決方法：安裝http-server

  
  在須要的有index預覽的目錄下面輸入hs –c-1，意思就是不要有緩存，而後打開本地服務器8080 端口，就能看到你的server了。
  這時候再打開<a href="//qq.com"></a>就是默認的http協議打開騰訊的真正網站了，而不是file協議了。

  因此herf支持無協議

• 下面兩個打開的都是本目錄下面的xxx.html

  <a href="xxx.html">qq1</a>
  <a href="./xxx.html">qq2</a>

• <a href="#mataotao">qq3</a> 錨點
• <a href="?name=mataotao"></a>添加查詢字符串會發起一個get請求，而寫#的時候是不發請求的，由於#錨點只是頁面內的跳轉。
• <a href="javascrip: alert(1);">"javascrip: alert(1);"</a>直接執行js代碼，javascript：假裝協議。

• <a href="javascrip:;">"javascrip:;"</a>做用：若是想寫一個a標籤，可是但願這個a標籤不要跳轉，就用這段話。緣由以下：

  • 若是直接寫的<a href="#">#</a>會出現問題，頁面會調回最頂部。
  • 若是不謝herf屬性，a標籤就和span沒有區別。不會有跳轉。
  • <a href="">#</a>會刷新頁面，也不行。
  • 因此最終僞協議<a href="javascrip:;">"javascrip:;"</a>不能不加分號，不加分號就會出現錯誤，由於herf會認爲javascrip:是一個協議，而協議後面若是沒有內容，就會出現錯誤，因此加了分號意思就是協議結束，且什麼都不作。

安裝http-server

-g的意思是全局安裝

目錄已經加入到path裏面了，因此能夠直接用hs或者http-server這個命令。

http-server做用就是當時寫的那個nodejs簡易服務器同樣，能夠不用寫代碼，直接將本地的8080端口做爲服務器端口，接受請求。

form 標籤注意事項

get請求是請求獲得頁面，post請求是請求提交數據

• a標籤發起的是get請求，form通常發起的是post請求，發get請求沒有意義。

• 除了post方法以外沒有別的方法能夠上傳第四部分的請求。

  請求四個部分：請求頭，keyvalue，回車，內容

• http協議，提交的內容都是明文的。加入中間有人截取內容，那麼就能被截取到。
• 全部不是英文的字符，在提交表單中，都會被轉義，每一個字節都會轉換爲UTF-8，且前面會加%號。
• 若是form表單使用的是get方法，那麼會把提交的內容放到查詢參數裏面，而post會把提交的內容放到第四部分。
• 也可讓post出現查詢參數，直接在action裏寫就會出現。
• 在form中，若是<button>沒有指定type，且只有一個button，那麼他會升級爲提交按鈕。
• label for id 獲取焦點，便可以跟input關聯起來。簡易寫法用label把input包起來。
• 多選checkbox使用方法：提交時name=value。（此處使用get方法是爲了方便在瀏覽器地址欄中查看查詢字符串）
• 單選radio使用方法使用方法也是name=value，可是name相同時只能選擇一個。

• select使用方法

  • 注意select的屬性multiple，意思是可多選多選。
  • 注意option兩個屬性，disabled，selected，不可選擇和默認選擇。

• 單行文本框和多行文本框必定要加上name。

  <form action="" method="get">
      <input type="text" name="inputTextTest">
      
      <textarea name="textareaTest" id="" cols="30" rows="10"></textarea>
      <input type="submit">
  </form>

  結果：文本框裏填寫的內容就是value的值

• form的action屬性做用是指定請求路徑。
• form的method屬性做用是指定請求動詞。

table 標籤注意事項

tr是「table row（表格行）」的縮寫，用於表示 一行的開始和結束。這也容易理解。
td是「table data（表格數據）」的縮寫，用於表示行中各個 單元格（cell）的開始和結束。

用法

去掉border之間空隙

布爾屬性

有時你會看到沒有值的屬性，它是合法的。這些屬性被稱爲布爾屬性，他們只能有跟它的屬性名同樣的屬性值（因此不須要寫屬性值）。例如 disabled 屬性，他們能夠標記表單輸入使之變爲不可用(變灰色)，此時用戶不能向他們輸入任何數據。

<input type="text" disabled="disabled">

採用以下簡寫更佳(下面一句爲可用可輸入數據的文本框，以做爲對比)：

<input type="text" disabled>

<input type="text">

轉義符（實體引用）

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它們是HTML語法自身的一部分, 那麼你如何將這些字符包含進你的文本中呢, 好比說若是你真的想要在文本中使用符號&或者小於號, 而不想讓它們被瀏覽器視爲代碼並被解釋?
咱們必須使用字符引用 —— 表示字符的特殊編碼, 它們能夠在那些狀況下使用. 每一個字符引用以符號&開始, 以分號;結束

<    &lt;
>    &gt;
"    &quot;
'    &apos;
&    &amp;

HTML中的空白

在HTML代碼中包含了不少的空格——這是沒有必要的；下面的兩個代碼片斷是等價的：

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

不管你用了多少空白(包括空白字符，包括換行), 當渲染這些代碼的時候，HTML解釋器會將連續出現的空白字符減小爲一個單獨的空格符.
那麼多的空白就是爲了代碼的可讀性。

元數據：<meta>元素

元數據就是描述數據的數據，而HTML有一個「官方的」方式來爲一個文檔添加元數據，—— <meta> 元素。

有不少不一樣種類的 <meta> 元素能夠被包含進你的頁面的<head>元素，例如指定你的文檔中字符的編碼<meta charset="utf-8">。這個元素簡單的指定了文檔的字符編碼 —— 在這個文檔中被容許使用的字符集。 utf-8 是一個通用的字符集，它包含了任何人類語言中的大部分的字符。 這意味着你的web頁面能夠顯示任意的語言。

utf-8是unicode字符集的一種編碼方式,unicode字符集可收錄的字符個數爲65536-2 1024+10241024=1112064.一百多萬個，但目前世界上全部文字符號加起來也沒這麼多，因此unicode字符集還有不少位置是沒有用上的。

雜亂的小點

HTML5標籤

• nav footer main
• 搜索框<input type="search">
• 滑動條<input type="range">
• 章節<section></section>

• dl dt dd 用法：
  描述， 描述標題，描述數據

  <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
      </dl>

iframe

noscript

若是用戶瀏覽器不支持script中的內容，則會顯示noscript中的內容。

小點記錄

• <em>表示語氣重，<strong>表示地位重
• <textarea>多行文本
• button能夠有子元素，input不能夠有子元素
• Css目前只支持橫向佈局，縱向佈局，這樣寫css最方便，由於全部佈局，不論是有誤內嵌，最終全都轉化爲這兩種佈局

英文釋義

display：展現
specifies指定
alternate備用audio音頻