HTML 基礎內容(一)
一、單引號還是雙引號
html的屬性值,既可以使用單引號,也可以使用雙引號。選擇一種引號後,另一種引號可以放在值裡面。
<input type='text' value="i'm">
<input type="text" disabled="disabled">
二、display屬性,可以將值省略
<input type='text' disabled>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html>
上面是一個簡單的html
三、head元素的作用
3.1 整個document的標題;
3.2 是書籤的標題;
3.3 用於使用查詢;
四、<mate>元素
描述資料的資料。
4.1 用於定義文件字符集;
<meta charset="utf-8">
4.2 新增作者和描述資訊
<meta name="author" content="lf">
<meta name="description" content="The Web docs Learning area">
描述資訊,常用語搜尋引擎優化。
4.3 其他型別的元素資料
專門設計,用於提供給特定網站使用的。
<meta name="twitter:title" content="Mozilla Developer Network">
4.4 用於新增圖示
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4.5 設定文件的原始語言
<html lang="en-US">
如果設定了HTML文件語言,搜尋引擎將更有效的對其進行索引。
你能夠將文件的子部分設定成不同的語言,如:
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
五、相對路徑和絕對路徑
儘可能使用相對路徑。有兩個原因:
1. 相對路徑更容易審查程式碼;
2. 使用相對路徑更高效。絕對路徑需要先到DNS(Domain Name System)上查詢真正的地址,再根據地址到服務上查詢相應的檔案。相對路徑會直接到伺服器上查詢相應的檔案。
六、在下載連結上新增download屬性
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
download屬性為下載的內容提供一個預設的檔名字
七、email連線
使用<a>元素和“mailto:”的URL方案,能夠開啟一個新發送的電子郵件資訊。
例如: <a href="mailto:[email protected]">傳送Email給hefrankeleyn</a>
當點選連線的時候,開啟foxmail:
還可以新增抄送人、密送人、主題、內容
<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20Subject&body=The%20Email%20body">傳送</a>
點選上面連線,將開啟:
七、描述列表
除了順序列表<ol>,非順序列表<ul>,還有第三種列表描述列表。描述列表由三部分組成:最外層的包裹<dl>,描述列表的項,使用<dt>(description term)包裹,每個列表項可以有一個或多個描述,使用<dd>包裹。例如:
<dl>
<dt>aa</dt>
<dd>aa description</dd>
<dt>bb</dt>
<dd>bb description</dd>
<dd>bb description</dd>
<dt>cc</dt>
<dd>cc description</dd>
</dl>
展示的效果如下:
八、引用
8.1 塊級別的引用
如果一個塊級的內容(比如,段落、列表、多個段落等)是引用自某一個地方,就使用<blockquote>元素來包裹這個塊,並使用cite屬性包含一個url指向引用的源頭。瀏覽器預設為其新增縮排的樣式,如:
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.
</p>
</blockquote>
8.2 行內的引用
行內的引用和塊級的型別,除了使用<q>包裹。瀏覽器預設為行內引用新增引號:
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q>
</p>
8.3 <cite>元素
為了展示塊級引用<blockquote>和行內引用<q>中cite裡面的內容。可以使用<cite>元素。
<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>
<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">
<p>It does not matter how slowly you go as long as you do not stop.</p>
</blockquote>
<p>
I also love the concept of positive thinking, and <a href="http://www.affirmationsforpositivethinking.com/index.htm">
<cite>The Need To Eliminate Negative Self Talk</cite></a> <q cite="http://www.affirmationsforpositivethinking.com/index.htm">
(as mentioned in Affirmations for Positive Thinking.)</q>
</p>
九、縮寫(abbreviation)
使用<abbr>元素包裹在縮寫詞或首字母組成詞的外面,將縮寫詞的完整的展開含義放在title的屬性中。在頁面顯示的時候,當游標移動到縮略詞上面,會有一個提示框,顯示縮略詞的完整表達。例如:
<p>
We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents
</p>
十,標記聯絡詳情
用於標記文件的作者本人
<address>
<p>小明, 唐河, 下屯,南陽</p>
</address>
十一、上標和下標
上標(superscript)和下標(subscript)。使用<sup>標記上標,用<sub>標記下標。通過這兩個標籤可以讓時間、化學公式、資料方程式表示出正確的含義。
<p>
My birthday is on the 25<sup>th</sup> of Decomber 1993.
</p>
<p>
Ca<sub>2</sub>co<sub>3</sub>
</p>
十二、標記計算機的程式碼
<code>用於標記計算機程式碼的一般片段。用<code>包裹的程式碼如果有行首縮排,或者在文字中有多餘的空格,將會被忽略;
<pre>用於保留空格,通常用於程式碼塊,用<pre>包裹,頁面展示的內容將和文字編譯器上的完全相同;
<var>特意用來包裹變數;
<kbd>用於標記計算機的鍵盤(和其他型別的輸入);
<samp>用於標記計算機的輸出;
<code>var para = document.querySelector("p");</code>
<pre>
<code>
var p1 = document.querySelector("div01");
console.log(p1.value);
</code>
</pre>
<p>In above JavaScript example,<var>p1</var> represents a paragraph element.</p>
<p>Select all the text with <kbd>Ctrl</kbd>+<kbd>A</kbd>.</p>
<p>
<pre>
$<kbd>ping mozilla.org</kbd>
<samp>正在 Ping mozilla.org [63.245.208.195] 具有 32 位元組的資料:
來自 63.245.208.195 的回覆: 位元組=32 時間=161ms TTL=47
來自 63.245.208.195 的回覆: 位元組=32 時間=184ms TTL=47
來自 63.245.208.195 的回覆: 位元組=32 時間=196ms TTL=47
來自 63.245.208.195 的回覆: 位元組=32 時間=189ms TTL=47
63.245.208.195 的 Ping 統計資訊:
資料包: 已傳送 = 4,已接收 = 4,丟失 = 0 (0% 丟失),
往返行程的估計時間(以毫秒為單位):
最短 = 161ms,最長 = 196ms,平均 = 182ms</samp>
</pre>
</p>
十三、標記時間和日期
可以使用<time>繫結一個機器可讀的時間和日期,便於以後自動攫取時間。
<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>