HTML筆記 1.基礎(chǔ)

HTML5備忘錄

超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

HTML、CSS、 JavaScript 的區(qū)別

  • HTML 元素負(fù)責(zé)文檔內(nèi)容的結(jié)構(gòu)和含義。
  • CSS (Cascading Style Sheets) 層疊樣式表，控制內(nèi)容呈現(xiàn)的樣式。
  • JavaScript 用來操縱HTML文檔的內(nèi)容以及響應(yīng)用戶的操作。

父元素、子元素、后代元素和兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <code>apples</code>
</body>
</html>
  • 包含另一個元素的元素是被包含元素的父元素。body元素是code元素的父元素。相反，code元素是body元素的子元素。
  • 子元素是關(guān)系最近的后代元素。html元素包含著body元素，而后者包含著code元素。body元素和code元素都是html元素的后代元素，但是二者中只有body元素是html元素的子元素。
  • 具有同一個父元素的幾個元素互為兄弟元素。head元素和body元素是兄弟元素。

元數(shù)據(jù)元素、流元素和短語元素。

  • 元數(shù)據(jù)元素（metadata element）：用來構(gòu)建HTML文檔的基本結(jié)構(gòu)，以及就如何處理文檔向瀏覽器提供信息和指示。
  • 短語元素(phrasing element)是HTML的基本成分。
  • 流元素是短語元素的超集。
  • 所有短語元素都是流元素，但并非所有流元素都是短語元素。

HTML 文檔結(jié)構(gòu)

image

只有 <body> 區(qū)域 (白色部分) 才會在瀏覽器中顯示。

實例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文檔的標(biāo)題</title>
    </head>
    <body>
        <h1>我是一個標(biāo)題</h1>
        <p>我是一個段落</p>
    </body>
</html>

實例解析：

  • <!DOCTYPE html> 告訴瀏覽器兩件事：1.它處理的是HTML文檔；2.標(biāo)記文檔內(nèi)容的HTML所屬的版本。

  • <html> 元素是 HTML 頁面的根元素，它表示文檔中HTML部分的開始。

  • <head> 元素包含文檔的元數(shù)據(jù)（meta）和文檔信息。

  • <meta charset="utf-8"> 對于中文網(wǎng)頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器會設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為 <meta charset="gbk">。

    【只有在MySQL中可以使用"utf-8"的別名"utf8"，但是在其他地方一律使用大寫"UTF-8"?！?/p>

  • <title> 元素描述了文檔的標(biāo)題。

  • <body> 元素包含了可見的頁面內(nèi)容。

  • <h1> 元素定義一個一級標(biāo)題。

  • <p> 元素定義一個段落。

文檔和元數(shù)據(jù)元素

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 設(shè)置文檔編碼類型 -->
    <meta charset="UTF-8">

    <!--使用 <title> 標(biāo)簽定義HTML文檔的標(biāo)題或名稱-->
    <title>Document</title>

    <!--    
        * base 標(biāo)簽用于設(shè)置一個基準(zhǔn)URL，讓HTML文檔中的相對鏈接在此基礎(chǔ)上進(jìn)行解析。
        * href（Hypertext Reference），超鏈接目標(biāo)URL。
        * target 屬性告訴瀏覽器鏈接的打開方式，target="_black" 表示在新窗口打開。
        * 如果HTML文檔中不設(shè)置base元素，或不用其href屬性設(shè)置一個基準(zhǔn)URL，
            那么瀏覽器會將當(dāng)前文檔的URL認(rèn)定為所有相對URL的解析基準(zhǔn)。
   -->
    <base  target="_black">

</head>

<body>
    <!--絕對鏈接地址-->
    <a >Visit Apress.com</a>

    <!--相對鏈接地址-->
    <a href="page2.html">Page 2</a>

    <!--圖片相對地址-->
    <img src="Coowl-icon.png!icon512" alt="Icon Image">

</body>

</html>

<meta>元素

meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。
<meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
<meta> 一般放置于 <head> 區(qū)域

MetaExtensions 元數(shù)據(jù)擴(kuò)展

<!--為網(wǎng)頁定義字符集-->
<meta charset="UTF-8">

<!--定義網(wǎng)頁作者-->
<meta name="author" content="作者">

<!--為網(wǎng)頁定義描述內(nèi)容-->
<meta name="description" content="描述信息">

<!--為搜索引擎定義關(guān)鍵詞-->
<meta name="keywords" content="關(guān)鍵字，逗號分開，用來描述頁面內(nèi)容">

<!--每30秒刷新當(dāng)前頁面-->
<meta http-equiv="refresh" content="30">

<!--模擬HTTP標(biāo)頭字段-->
<!--1.1 讓瀏覽器每隔5秒刷新一次-->
<meta http-equiv="refresh" content="5">
<!--1.2 讓瀏覽器5秒之后載入另一個URL頁面-->
<meta http-equiv="refresh" content="5; http://www.apress.com">
<!--2 指定頁面優(yōu)先使用的樣式表-->
<meta http-equiv="default-style" content="xxx.css">
<!--3 另一種聲明HTML頁面所用字符編碼的方法-->
<meta http-equiv="content-type" content="text/html charset=UTF-8">

<!--
noindex是谷歌發(fā)明的一個HTML標(biāo)簽，其作用是向搜索引擎聲明該網(wǎng)頁禁止被索引收錄。
noindex標(biāo)簽的作用有兩方面，簡單的說，一是不給鏈接投票，增加此鏈接的權(quán)重，二是使添加noindex的部分內(nèi)容不參與網(wǎng)站排名，便于集中網(wǎng)站權(quán)重。

nofollow標(biāo)簽是由谷歌領(lǐng)頭創(chuàng)新的一個“反垃圾鏈接”的標(biāo)簽，并被百度、yahoo等各大搜索引擎廣泛支持，引用nofollow標(biāo)簽的目的是：用于指示搜索引擎不要追蹤（即抓取）網(wǎng)頁上的帶有nofollow屬性的任何出站鏈接，以減少垃圾鏈接的分散網(wǎng)站權(quán)重！

noarchive 防止緩存版本
-->
<meta name="robots" content="noindex">

<head>元素

<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種 meta 信息。

可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<title>元素

<title> 標(biāo)簽定義了不同文檔的標(biāo)題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

  • 定義了瀏覽器工具欄的標(biāo)題
  • 當(dāng)網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標(biāo)題
  • 顯示在搜索引擎結(jié)果頁面的標(biāo)題

<base>元素

<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:

<link>元素

<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系。

  1. <link> 標(biāo)簽通常用于鏈接到CSS層疊樣式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
  1. 為頁面定義網(wǎng)站標(biāo)志：
<!--定義與頁面聯(lián)系在一起的32x32像素的圖標(biāo)-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  1. 要求瀏覽器預(yù)先獲取預(yù)計很快將會使用到的資源：
<!--預(yù)先獲取資源-->
<link rel="prefetch" href="/page2.html">
image

rel屬性最全面的介紹參考：http://iana.org/assignments/link-relations/link-relations.xml

image

<style>元素

<style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址。在<style> 元素中你也可以直接添加CSS樣式來渲染 HTML 文檔:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一個HTML頁面</title>
    <!--1. 渲染整個HTML文檔-->
    <style type="text/css">
        body {background-color:gray}
        p {color:red}
    </style>
</head>
<body>
    <!-- 2. 直接在元素身上定義CSS樣式-->
    <a  style="background: grey;color: white;padding: 10px;">Visit the Apress site</a>
</body>
</html>
指定樣式適用的媒體

media 屬性可以用來表明文檔在什么情況下應(yīng)該使用該元素中定義的樣式。

    <style media="screen" type="text/css">
        // 瀏覽器在屏幕上顯示文檔時使用該 <style> 中的樣式。
    </style>
    <style media="screen AND (max-width:500px)" type="text/css">
        // 瀏覽器窗口小于500像素時使用
    </style>
        <style media="screen AND (min-width:500px)" type="text/css">
        // 瀏覽器窗口大于500像素時使用
    </style>

image

以下特性還可以配合min-或者max-修飾，構(gòu)成閾值而不是精確值。
image

<script>元素 和<noscript> 元素

<script>標(biāo)簽用于加載腳本文件，如： JavaScript

  • script，用于定義腳本并控制其執(zhí)行過程。
  • noscript，用于規(guī)定在瀏覽器不支持或禁用了腳本的情況下的處理辦法。
script

script元素可以放在HTML文檔的任意位置，不過一般建議都集中放到文檔的head部分，這有助于查看腳本。

<!DOCTYPE html>
<html>
<head>
    <!--定義script腳本-->
    <script type="text/javascript">
        document.writeln("This is from the script");
    </script>

    <!--用src屬性載入外部腳本,設(shè)置src屬性的script元素不能含有任何內(nèi)容！即，不能既內(nèi)嵌腳本又引用外部腳本。-->
    <script src="simple1.js"></script>
    
    <!--推遲腳本的執(zhí)行-->
    <!--defer：告訴瀏覽器要等頁面載入和解析完畢之后才能執(zhí)行腳本。-->
    <!--defer 屬性只能用于外部腳本文件-->
    <script defer src="simple2.js"></script>

    <!--異步執(zhí)行腳本-->
    <script async src="simple3.js"></script>
</head>
<body>
</body>
</html>
image
noscript
<!DOCTYPE html>
<html>
<head>
    <!--定義noscript腳本-->
    <!--1.noscript元素可以用來向禁用了JavaScript或瀏覽器不支持JavaScript的用戶顯示一些內(nèi)容。-->
    <noscript>
        <h1>JavaScript is required!</h1>
        <p>You cannot use this page without JavaScript</p>
    </noscript>

    <!--2.用noscript元素重定向瀏覽器-->
    <noscript>
        <meta http-equiv="refresh" content="0; http://www.apress.com">
    </noscript>
</head>
<body>
</body>
</html>

文本元素

標(biāo)記文字

h1~h6 標(biāo)題

image
<!--請確保將 HTML 標(biāo)題標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題。-->
<!--搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。-->
<!--因為用戶可以通過標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。-->
<!--應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。-->
<!--提示：瀏覽器會自動在標(biāo)題前后添加空行-->

<h1>一級標(biāo)題</h1>
<font size="6">這是6號字體文本</font>

<h2>二級標(biāo)題</h2>
<font size="5">這是5號字體文本</font>

<h3>三級標(biāo)題</h3>
<font size="4">這是4號字體文本</font>

<h4>四級標(biāo)題</h4>
<font size="3">這是3號字體文本</font>

<h5>五級標(biāo)題</h5>
<font size="2">這是2號字體文本</font>

<h6>六級標(biāo)題</h6>
<font size="1">這是1號字體文本</font>
image

<p> 元素

<p>有時候陽光很好，有時候陽光很暗</p>

當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。

HTML鏈接 a

a = attributes，表示屬性標(biāo)簽。
默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

  • 一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。
  • 訪問過的鏈接顯示為紫色并帶有下劃線。
  • 點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。

image
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <base href="http://titan/listings">
</head>
<body>
    <!--生成指向外部的超鏈接-->
    <a href="http://www.itdecent.cn/u/84c5fadc7c18">我的主頁：獨木舟的木</a>

    <!--使用相對URL-->
    <a href="fruitlist.html">here</a>

    <!--配合使用id，生成內(nèi)部超鏈接-->
    <a href="#banana">Banana</a>

    <p id="banana">
    I also like bananas, mangoes, cherries, apricots, plums.
    </p>
</body>
</html>

HTML 鏈接 - target元素

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。


image
<!--html鏈接：在新窗口打開-->
<a  target="_blank">打開 Baidu</a>

<!--跳出框架-->
<a  target="_top">打開 Baidu</a>

<!--電子郵件-->
<!--注意：單詞之間空格使用 %20 代替，以確保瀏覽器可以正常顯示文本。-->
<p>
這是一個電子郵件
<a href=@"andywhm@qq.com?Subject=Hello%20World" target="_top">發(fā)送郵件</a>
</p>

id 屬性

作用：給元素分配一個唯一的標(biāo)識符。這種標(biāo)識符通常用來將CSS樣式應(yīng)用到元素上或在JavaScript程序中用來選擇元素。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

將CSS樣式應(yīng)用到元素上：

<!DOCTYPE html>
<html>
<head>
    <title>使用 id 屬性</title>
    <style type="text/css">
        #w3clink {
            background: grey;
            color: white;
            padding: 5px;
            border: thin solid black;
        }   
    </style>
</head>
<body>
    <a >Apress Web Site</a>
    <p></p>
    <a id="w3clink" >w3c web site</a>
</body>
</html>
image

導(dǎo)航到文檔中的特定位置：

<!--在HTML文檔中插入ID-->
<a id="tips">有用的提示部分</a>

<!--在HTML文檔中創(chuàng)建一個鏈接到“有用的提示部分（id=“tips”）”-->
<!--類似于導(dǎo)航功能-->
<a href="#tips">訪問有用的提示部分</a>

<!--或者。從另一個頁面創(chuàng)建一個鏈接到“有用的提示部分（id="tips"）”-->
<a href="example.html#tips">訪問有用的提示部分</a>

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.runoob.com/html"，就會向服務(wù)器產(chǎn)生兩次 HTTP 請求。這是因為服務(wù)器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：href="http://www.runoob.com/html/"。

自定義屬性

規(guī)定：自定義屬性的前綴為 data-。

Enter your name: <input type="text" name="name" disabled="true" data-purpose="collection">

HTML 鏈接 - 圖片鏈接

將圖片作為鏈接使用。

<!--圖片鏈接-->
<p>創(chuàng)建圖片鏈接
    <a >
        <img border="10" src="http://reeoo.qiniudn.com/Coowl-icon.png!icon180" alt="coowl" width="32" height="32">
    </a>
</p>

<p>無邊框的圖片鏈接
    <a >
        <img border="0" src="http://reeoo.qiniudn.com/Coowl-icon.png!icon180" alt="coowl" width="32" height="32">
    </a>
</p>
image

JPEG & GIF 圖片的區(qū)別

照片和復(fù)雜圖像使用JPEG格式 純色圖像、logo和幾何圖形使用GIF格式
可在連續(xù)調(diào)次（復(fù)制品中有中間層次，如照片）圖像中獲得最好效果 對于幾種純色組成的圖像、線條組成的圖像（如logo、剪貼畫）和含有小段文字的圖像，使用GIF比較合適
可以用1600萬種不同的顏色顯示圖像 用256種顏色顯示圖像
是一種“有損”格式，因為文件縮小時會丟失部分圖像信息 GIF同樣會壓縮文件來減小尺寸，但是不會丟失任何東西，是一種“無損”格式
不支持透明 允許8??背景顏色設(shè)置為透明的，圖像背景就可以穿透顯示

title 屬性

作用：提供元素的額外信息。瀏覽器通常用這些東西顯示工具提示。

示例：

<a title="Apress Publishing" >Visti the Apress site</a>

鼠標(biāo)停留后會顯示浮窗：


title 屬性

HTML 圖像 img

<img src="https://i.pinimg.com/564x/6c/77/9b/6c779b9f24ba0ec56dc62c7bbfaf004b.jpg" width="542" height="548">

使用實例

<!--<img> 是空標(biāo)簽，它只包含屬性，并且沒有閉合標(biāo)簽。-->
<!--src:圖像的存儲位置-->
<!--alt:為圖像定義一串預(yù)備的可替換的文本,圖像無法載入時，瀏覽器會顯示這個替換文本-->
<!--height、width：圖像的高和寬-->
<!--border:圖像的邊框-->
<img border="0" src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="linyuner" width="200" height="200">
<img src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="讓圖片浮動到文本的最左邊" style="float: left;">
<img src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="讓圖像浮動到文本的最右邊" style="float: right;">

圖像映射

<!--創(chuàng)建圖像映射：顯示如何創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。-->
<p>點擊同一張圖片的不同區(qū)域，打開的是不同的鏈接地址</p>

<img src="planets.gif" alt="planets" width="145" height="145" usemap="#planetmap">
<!--map:定義圖像地圖-->
<map name="planetmap">
    <!--area:定義圖像地圖中的可點擊區(qū)域-->
    <area shape="rect" coords="0.0.82,126" href="sun.html" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
    <area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
  
    <!--矩形：左上角頂點坐標(biāo)（x1,y1）,右下角頂點坐標(biāo)（x2,y2）-->
    <area shape="rect" coords="x1,y1,x2,y2" href="url">
    <!--圓形:圓心坐標(biāo)為（x1,y1）,半徑為r-->
    <area shape="circle" coords="x1,y1,r" href="url">
    <!--多邊形：各個頂點坐標(biāo)依次為：（x1,y1）、（x2,y2）...-->
    <area shape="poly" coords="x1,y1,x2,y2..." href="url">
</map>

使用插圖 figure

<figcaption>元素必須是<figure>元素的第一個或最后一個子元素。

<figure>
    <figcaption>插圖標(biāo)題</figcaption>
    <code>var fruits = ["apples", "oranges", "managoes", "cherries"];<br/>
    </code>
</figure>
image

HTML 換行

兩種換行方式：

  • br：強(qiáng)制換行。
  • wbr：建議換行。
<!--
    * 如果你希望在不產(chǎn)生新行的情況下進(jìn)行換行操作！就使用<br />元素
    * 在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。即使  <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠(yuǎn)的保障。
    * 注意到br 和 / 之間有空隔，這是為了保證HTML5之前的瀏覽器向上的兼容性
-->

<p>
    我是我命運的主宰<br />
    我是我靈魂的統(tǒng)帥<br />
</p>

<hr /> 主題分離

hr:表示主題的改變，呈現(xiàn)效果是在HTML文檔中顯示一條水平線。
<hr /> ,這種只能使用一個標(biāo)簽表示，在其中放置任何內(nèi)容都不符合HTML規(guī)范的元素稱之為虛元素。

<hr />

空元素、自閉合元素、虛元素

元素=開始標(biāo)簽 + 內(nèi)容 + 結(jié)束標(biāo)簽：<code>apples</code>

<!--空元素：元素的開始標(biāo)簽和結(jié)束標(biāo)簽之間沒有任何內(nèi)容。-->
<p></p>

<!--自閉合元素，將開始標(biāo)簽和結(jié)束標(biāo)簽合二為一，效果同上，寫法更簡潔-->
<p/>

<!--虛元素：本身只能用一個標(biāo)簽表示-->
<hr />

HTML 注釋

<!--注釋內(nèi)容-->

在 .css 文件中的注釋格式：/*注釋內(nèi)容*/

HTML 格式化文本

文本格式化

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    正常文本字體。<br/>

    <!--不附帶任何重要性含義地表示一段文本-->
    <b>b 元素：用來表示文章提要中的關(guān)鍵詞和產(chǎn)品評論中的產(chǎn)品名稱</b><br/>

    <!--加以強(qiáng)調(diào)-->
    <em>em 元素：表示對一段文字的強(qiáng)調(diào)</em><br/>

    <!--表示外文詞語或科技術(shù)語-->
    <i>i 元素：表示一段文字與周圍內(nèi)容有本質(zhì)區(qū)別，使用場景：外文詞語、科技術(shù)語、某人的想法</i><br/>

    <!--表示不準(zhǔn)確或校正-->
    <s>s 元素：表示一段文字不再正確或準(zhǔn)確</s><br/>

    <!--表示重要的文字-->
    <strong>string 元素：表示一段重要文字</strong><br/>

    <!--為文字添加下劃線-->
    <u>u 元素：讓一段文字從周圍內(nèi)容中凸現(xiàn)出來，但并不表示強(qiáng)調(diào)或重要性有所增加</u><br/>

    <!--添加小號字體內(nèi)容-->
    <small>small 元素：表示小號字體內(nèi)容，常用于免責(zé)聲明和澄清聲明</small><br/>

    <big>放大字體</big><br/>

    <!--添加上標(biāo)和下標(biāo)-->
    上標(biāo)：2<sup>100</sup>、x<sup>2</sup>、10<sup>th</sup>point<br/>

    下標(biāo)：A<sub>1</sub>、A<sub>2</sub><br/>

    <!--換行-->
    br元素會引起一次換行。其習(xí)慣樣式是將后續(xù)內(nèi)容轉(zhuǎn)移到新行上。<br/>
    br元素只宜用在換行也是內(nèi)容的一部分的情況，切勿用它創(chuàng)建段落或別的內(nèi)容組。<br/>

    <!--指明可以安全換行的建議位置-->
    ??wbr元素是HTML5新增的，用來表示長度超過當(dāng)前瀏覽器窗口的內(nèi)容適合在此換行。<wbr>究竟換不換行由瀏覽器決定。<wbr> wbr元素只不過是對恰當(dāng)?shù)膿Q行位置的建議而已。
    wbr元素可以讓瀏覽器將一個長單詞分為幾小截，
</body>
</html>
image

計算機(jī)的輸入和輸出

    code：表示計算機(jī)代碼片段:<br/>
    <code>for (var i = Things.length - 1; i >= 0; i--) {
            Things[i]
        }</code><br/>
    var：在編程語境中表示變量。也可表示一個供讀者在想象中插入一個指定值的占位符。<br/>
    <p>The variable in this examples is :<var>fruits</var></p>

    samp：表示程序或計算機(jī)系統(tǒng)的輸出<br/>
    <p>The out put from the code is:<samp>I like banana.</samp></p>

    kbd：表示用戶鍵盤輸入<br/>
    <p>When prompted for my favourite fruit,I type: <kbd>vherries</kbd></p>

    <tt>tt：打字機(jī)文本</tt>

    <!--使用預(yù)先編排好格式的內(nèi)容-->
    <!--pre元素可以改變?yōu)g覽器處理內(nèi)容的方式，阻止合并空白字符，讓源文檔中的格式得以保留）-->
    <!--（理解：默認(rèn)情況下瀏覽器會合并文本中的空格和換行，使用此元素可以保留文本中的編排格式。-->
    <pre>
    此例演示如何使用 pre 標(biāo)簽
    對空行和 空格 
    進(jìn)行控制
    </pre>
image

使用標(biāo)題引用、引文、定義和縮寫

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>

<body>
    使用標(biāo)題引用、引文、定義和縮寫<br/>

    <!--abbr元素用來表示縮寫-->
    The <abbr title="Florida Department of citrus">FDDC</abbr> regulates the Florida citrus industry.

    <!--dfn元素表示定義中的術(shù)語，title屬性的值=定義的術(shù)語-->
    <p>
        The <dfn title="apple">apple</dfn> is the. pomaceous fruit of the apple tree...
    </p>

    <!--
        * <q>元素表示引用來自他處的內(nèi)容，
        
        * <q>元素是簡短地“引用”現(xiàn)有文字中的一部分。
        * <q>元素是內(nèi)聯(lián)（inline）元素，內(nèi)聯(lián)元素總是在網(wǎng)頁中隨著文字流出現(xiàn)在“行內(nèi)”。
        * <blockquote>元素則是引用一大段文字并獨立顯示。
        * <blockquote>是塊（block）元素，塊元素前后都有換行符。
        * 記?。簤K元素特立獨行，內(nèi)聯(lián)元素隨波逐流。

    -->
    <q cite="http://en.wikoipedia.org">  All problems in computer science can be solved by another level of indirection.——Butler Lampson
    <br/>計算機(jī)科學(xué)領(lǐng)域的任何問題都可以通過增加一個間接的中間層來解決</q> <br> 《春》是現(xiàn)代散文家朱自清的作品。《春》是朱自清的散文名篇，最初發(fā)表于1933年7月，此后長期被中國中學(xué)語文教材選用。[1] 在該篇“貯滿詩意”的“春的贊歌”中，事實上飽含了作家特定時期的思想情緒、對人生及至人格的追求，表現(xiàn)了作家骨子里的傳統(tǒng)文化積淀和他對自由境界的向往。
    <blockquote>
        盼望著，盼望著，東風(fēng)來了，春天的腳步近了。一切都像剛睡醒的樣子，欣欣然張開了眼。山朗潤起來了，水漲起來了，太陽的臉紅起來了。
    </blockquote>
    小草偷偷地從土里鉆出來，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿是的。坐著，躺著，打兩個滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。風(fēng)輕悄悄的，草軟綿綿的。

    <!--cite元素，表示引用其他作品（如圖書、文章、電影和詩歌）的標(biāo)題-->
    <p>
        My favourite movie on fruit is <cite>這個殺手不太冷</cite>.
    </p>
</body>

</html>

塊引用

<!--塊引用,演示如何實現(xiàn)長短不一的引用語-->
<!--q:定義短的引用語-->
<p>WWF's goal is to:
    <q>Build a future where people live in a harmony with natrue.</q>
    We hope they succeed.
</p>

<!--blockquote:定義長的引用，通常用在需要引用的內(nèi)容更多的情況。-->
<p>不可屈服
    <blockquote>透過覆蓋著我的層層夜幕，黑暗層層無底，感謝萬能的上蒼，賜給我不可征服的靈魂，就算被地獄牢牢抓住，我不會畏縮也不會哭叫，任憑命運百般捉弄，我頭破血流但不低頭，在這充滿憤怒和眼淚的土地之上，恐怖陰影陰森的逼近，不過，即使歲月不?？謬槪鄬l(fā)現(xiàn)我毫不畏縮，無論大門何等狹窄，無論承受多么深重的責(zé)罰，我是我命運的主宰，我是我靈魂的統(tǒng)帥。</blockquote>
    ——By William henley
</p>
塊引用

使用語言元素

ruby、rt和rp
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    使用語言元素<br/>

    <!--ruby元素表示一段包含注音符號的文字-->
    <!--ruby元素需要與rt元素（標(biāo)記注音符號）和rp元素（供不支持注音符號的瀏覽器顯示在注音符號符號前后的括號）搭配使用-->
    <ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
    <ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby>
    <ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
    <ruby>魎<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
</body>
</html>
image
bdo元素

bdo元素可以用來撇開默認(rèn)的文字方向設(shè)置，明確地指定其內(nèi)容中文字的方向。

dir屬性值設(shè)置：

  • ltr：文字方向從左到右；
  • rtl：文字方向從右到左；
<!--文字方向-->
<p>該段落文字從左到右顯示</p>
<p><bdo dir="rtl">該段落文字從左到右顯示</bdo></p>
文字方向
bdi元素

bdi元素表示一段出于文字方向考慮而與其他內(nèi)容隔離開來的文字。
這個元素適用于欲顯示內(nèi)容的文字方向未知的情況（參考HTML5權(quán)威指南8.6.3）。

表示一般性的內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style type="text/css">
        .fruit {
            border: thin solid black;
            padding: 1px;
        }
    </style>
</head>
<body>
    <!--1.表示一段一般性的內(nèi)容-->
    <!--span元素本身沒有任何意義，它可以用來把一些全局屬性應(yīng)用到一段內(nèi)容上。-->
    I like <span class="fruit">oranges</span> and <span class="fruit">apples</span>.<br/>

    <!--2.突出顯示文本-->
    <!--mark元素用來表示因為與某段上下文相關(guān)而被突出顯示的一段文字-->
    今天你<mark>吃雞</mark>了嗎？<br/>

    <!--3.表示添加和刪除的內(nèi)容-->
    <!--ins元素和del元素可以分別用來表示文檔中添加和刪除的文字-->
    <p>
        <del>I can <mark>sea</mark> the <mark>see</mark></del>
        <ins>I can <mark>see</mark> the <mark>sea</mark></ins>
    </p>

    <!--4.表示時間和日期-->
    我在<time datetime="15:00">3 o'clock</time>購買了面包和牛奶
    日期是<time datetime="2018-02-02">2月2號</time>

</body>
</html>
image

縮寫和首字母縮寫

<!--文本和縮略-->
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title=@"World Wide Web">WWW</acronym>
<br />

<p>在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至縮略詞語上時，title 可用于展示表達(dá)的完整版本</p>
<p>僅對于 IE 5 中的 acronym 元素有效</p>
<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效</p>

文本顯示為單行,超過部分隱藏并使用省略號

div {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:120px;
}

HTML 區(qū)塊 <div>、<span>

  • <div> —— 塊（block）元素，定義了文檔的區(qū)域，會自動換行。
  • <span> —— 內(nèi)聯(lián)（inline）元素，用來組合文檔中的行內(nèi)元素，不會換行。

HTML 布局

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護(hù)。通過編輯單一的文件，就可以改變所有頁面的布局。

Tip: 由于創(chuàng)建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網(wǎng)站模板（您可以使用這些預(yù)先構(gòu)建好的網(wǎng)站布局，并優(yōu)化它們）。

使用 <div> 元素的網(wǎng)頁布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>
    <div id="container" style="width: 500px">

        <div id="header" style="background-color: #27AEE8">
            <h1 style="margin-bottom: 0;"> 主要的網(wǎng)頁標(biāo)題</h1>
        </div>

        <div id="menu" style="background-color: #313842h; height: 200px; width: 100px; float: left;">
            <b>導(dǎo)航欄</b><br />
            HTML<br />
            CSS<br />
            JavaScript<br />        
        </div>

        <div id="content" style="background-color: #C72F2E; height: 200px; width: 400px; float: left;">
            內(nèi)容在這里
        </div>

        <div id="footer" style="background-color: #bcbcbc; clear: both; text-align: center;">
            版權(quán)所有??? abc.com
        </div>
        
    </div>
</body>
</html>
image

使用 <table> 元素的網(wǎng)頁布局，不推薦的方式！

??雖然我們可以使用HTML table標(biāo)簽來設(shè)計出漂亮的布局，但是table標(biāo)簽是不建議作為布局工具使用的 - 表格不是布局工具。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>

    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color: #27AEE8">
                <h1>主要的網(wǎng)頁標(biāo)題</h1>
            </td>
        </tr>

        <tr>
            <td style="background-color: #313842h; width: 100px; vertical-align: top;">
                <b>導(dǎo)航欄</b><br>
                HTML<br>
                CSS<br>
                JavaScript<br>
            </td>
            <td style="background-color: #C72F2E; height: 200px; width: 400px; vertical-align: top;">
                內(nèi)容在這里
            </td>
        </tr>
        
        <tr>
            <td colspan="2" style="background-color: #bcbcbc; text-align: center;">
                版權(quán)所有??? abc.com
            </td>
        </tr>
    </table>
    
</body>
</html>
image

HTML 框架

HTML 框架語法：<iframe scr="URL"></iframe>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>
    <iframe src="URL" width="200" height="200"></iframe>

    <p>該 URL 指向不同的網(wǎng)頁</p>
    <p>一些舊的瀏覽器不支持 iframe。</p>
    <p>如果瀏覽器不支持 iframe 則不會顯示</p>

</body>
</html>

移除邊框

<iframe src="URL" frameborder="0"></iframe>

使用 iframe 來顯示目標(biāo)鏈接頁面

<iframe src="URL" name="iframe_a"></iframe>
<p><a  target="iframe_a">www.example.com</a></p>

HTML 顏色

HTML 顏色由紅色、綠色、藍(lán)色混合而成。

顏色值

HTML 顏色由一個十六進(jìn)制符號來定義，這個符號由紅色、綠色和藍(lán)色的值組成（RGB）。

<p style="background-color: #0e5f71">
    通過十六進(jìn)制設(shè)置背景顏色
</p>

<p style="background-color: rgb(255,255,0);">
    通過 rbg 值設(shè)置背景顏色
</p>

<p style="background-color: green">
    通過顏色名設(shè)置背景顏色 
</p>
HTML 顏色

三種顏色 紅，綠，藍(lán)的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。

HTML 顏色名

141個顏色名稱是在HTML和CSS顏色規(guī)范定義的（17標(biāo)準(zhǔn)顏色，再加124）。

Remark
提示: 17標(biāo)準(zhǔn)顏色：黑色，藍(lán)色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍(lán)綠色，黃色。點擊其中一個顏色名稱（或一個十六進(jìn)制值）就可以查看與不同文字顏色搭配的背景顏色。

HTML 腳本

JavaScript 使 HTML 頁面具有更強(qiáng)的動態(tài)和交互性。

HTML <script> 標(biāo)簽

<script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。

<script> 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。

JavaScript 最常用于圖片操作、表單驗證以及內(nèi)容動態(tài)更新。

下面的腳本會向瀏覽器輸出"Hello World!"：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>

    <p>JavaScript 能夠直接寫入 HTML 輸出流中</p>
    <script type="text/javascript">
        document.write("<h1>這是一個標(biāo)題</h1>");
        document.write("<p>這是一個段落。</p>");
    </script>

    <p>
        你只能在 HTML 輸出流中使用 <strong>document.write</strong><br />
        如果你在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個文檔。
    </p>

    <p id="demo">
        JavaScript 可以觸發(fā)事件，就像按鈕點擊。
    </p>
    <script type="text/javascript">
        function myFunction()
        {
            // 事件響應(yīng)
            document.getElementById("demo").innerHTML="Hello JavaScript"; 

            // 處理 HTML 樣式
            x=document.getElementById("demo") // 找到元素
            x.style.color = "#ff0000"; // 改變樣式
        }
    </script>

    <button type="button" onclick="myFunction()">點我</button>

</body>
</html>
HTML腳本

HTML 字符實體

如需顯示小于號，我們必須這樣寫： &lt； 或&#60； 或 &#060;

提示： 使用實體名而不是數(shù)字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實體名稱（對實體數(shù)字的支持卻很好）。

image

不間斷空格

HTML 中的常用字符實體是不間斷空格&nbsp;。

HTML 實體參考手冊：http://www.runoob.com/tags/ref-entities.html

HTTP 統(tǒng)一資源定位符 URL

scheme://host.domain:port/path/filename
  • scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
  • host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
  • domain - 定義因特網(wǎng)域名，比如 runoob.com
  • :port - 定義主機(jī)上的端口號（http 的默認(rèn)端口號是 80）
  • path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
  • filename - 定義文檔/資源的名稱

class 屬性

作用：將元素歸類；

  • 找出文檔中的某一類元素；
  • 為某一類元素應(yīng)用CSS樣式，可以減少重復(fù)設(shè)置；

應(yīng)用CSS樣式示例代碼：

<!DOCTYPE html>
<html>
<head>
    <title>使用 class 屬性將元素歸類</title>
    <style type="text/css">
        .class2 {
            background-color: grey;
            color: white;
            padding: 5px;
            margin: 2px;
        }
        .class1 {
            font-size: x-large;
        }
    </style>
</head>
<body>
    <a class="class1 class2" >Appress web site</a>
    <p/>
    <a class="class2 otherclass" >W3C web site</a>
</body>
</html>
應(yīng)用CSS樣式

在JS腳本中使用class屬性示例代碼：

<!DOCTYPE html>
<html>
<head>
    <title>使用 class 屬性將元素歸類</title>
</head>
<body>
    <a class="class1 class2" >Appress web site</a>
    <p/>
    <a class="class2 otherclass" >W3C web site</a>
    <script type="text/javascript">
        var elems = document.getElementsByClassName("otherclass");
        for (i = 0; i <= elems.length; i++) {
            var x = elems[i];
            x.style.border = "thin solid black";
            x.style.backgroundColor = "white";
            x.style.color = "black";
        }
    </script>
</body>
</html>

JS腳本的作用：找出所有屬于 otherclass 類的元素并對其設(shè)置一些樣式。


在腳本中使用class屬性

contenteditable 屬性

作用：讓用戶能夠修改頁面上的內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <title>使用 contenteditable 屬性</title>
</head>
<body>
    <p contenteditable="true">It is raining right now</p>
</body>
</html>

單擊改段文字后即可開始編輯：


contenteditable 屬性

contentmenu 屬性

作用：為元素設(shè)定快捷菜單。

draggable 屬性

作用：HTML5支持拖放操作的方式之一，用來表示元素是否可被拖放。

dropzone 屬性

作用：HTML5支持拖放操作的方式之一

hidden 屬性

作用：表示相關(guān)元素當(dāng)前毋需關(guān)注，瀏覽器會隱藏相關(guān)元素。

示例代碼：

<!DOCTYPE html>
<html>
<head>
    <!--hidden:表示當(dāng)前元素?zé)o需關(guān)注-->
    <title>使用 hidden 屬性</title>
    <!--JS函數(shù)的作用：如果當(dāng)前元素存在hidden屬性，則移除該屬性（顯示元素），否則添加該屬性（隱藏元素）。-->
    <script type="text/javascript">
        var toggleHidden = function() {
            var elem = document.getElementById("toggle")
            if (elem.hasAttribute("hidden")) {
                elem.removeAttribute("hidden");
            }else {
                elem.setAttribute("hidden","hidden");
            }
        }
    </script>
</head>
<body>
    <button onclick="toggleHidden()">Toggle</button>
    <table>
        <tr><th>Name</th><th>city</th></tr>
        <tr><td>Adam Freeman</td><td>London</td></tr>
        <tr id="toggle" hidden><td>Joe Simth</td><td>New Work</td></tr>
        <tr><td>Anne Jones</td><td>Paris</td></tr>
    </table>
</body>
</html>
hidden

lang 屬性

作用：用于說明元素內(nèi)容使用的語言。使用 lang 屬性的目的是讓瀏覽器調(diào)整其表達(dá)元素內(nèi)容的方式。比如說，改變使用的引號，在使用了文字朗讀器的情況下正確發(fā)音。
語言聲明規(guī)范說明參考：https://tools.ietf.org/html/bcp47

示例：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <p lang="en">Hello - how are yor?</p>
    <p lang="fr">Bonjour - comment ?a va-vous</p>
    <p lang="es">Hola - cómo estás</p>
</body>
</html>

參考資料

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,090評論 1贊 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,906評論 0贊 0
  • 文/周寒舟 1 程安歌有女朋友了！ 整個銷售部的全體職員既心照不宣，又?jǐn)D眉弄眼地相互交換著這一值得普天同慶的消息。...
    周寒舟閱讀 3,782評論 21贊 46
  • 三星作為昔日手機(jī)行業(yè)的高端力量，可以說是無人不知，尤其是當(dāng)年S4出來的時候感覺一度快要蓋過了蘋果。雖然今天不行了吧...
    寒陽198閱讀 244評論 0贊 3
  • 近十年來，文化創(chuàng)意產(chǎn)品晉升為小眾文藝市場的新寵。它們以隨處可見的生活用品為載體，披著個性鮮明的外衣與文案，展示著主...
    井田商學(xué)院閱讀 1,776評論 0贊 2

友情鏈接更多精彩內(nèi)容