初識HTML，什么是HTML?

eb標(biāo)準(zhǔn)：

由于不同瀏覽器解析出來的網(wǎng)頁效果可能不同，所以需要通過web標(biāo)準(zhǔn)對其進行約束使其一致，主要包括三個方面：

結(jié)構(gòu)標(biāo)準(zhǔn)：

結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類，主要指的是HTML。

表現(xiàn)標(biāo)準(zhǔn)：

表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

行為標(biāo)準(zhǔn)：

行為是指網(wǎng)頁模型的定義及交互的編寫，主要指的是 JavaScript。

初識HTML：

html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標(biāo)記語言” ，描述網(wǎng)頁的一種語言。

HTML發(fā)展：

XHTML 是一個 W3C 標(biāo)準(zhǔn)，可擴展超文本標(biāo)簽語言（EXtensible HyperText Markup Language），更嚴(yán)格更純凈的 HTML 版本，作為一種 XML 應(yīng)用被重新定義的 HTML。

HTML中的注釋：

 <!-- 注釋標(biāo)簽：注釋的內(nèi)容 -->

條件注釋：

條件注釋的作用是：定義只有Internet Explorer才執(zhí)行條件注釋中的html標(biāo)簽。


    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網(wǎng)頁的跟標(biāo)簽,lang=""用來設(shè)置網(wǎng)頁語言，其值還有zh-CN中文簡體、fr法語等，設(shè)置后當(dāng)系統(tǒng)設(shè)置語言和網(wǎng)頁語言發(fā)生沖突時會提示是否翻譯網(wǎng)頁 -->
    <head> <!-- 網(wǎng)頁的頭部 -->
        <meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有g(shù)bk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動端視口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設(shè)置iOS頂部通欄樣式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到數(shù)字不轉(zhuǎn)成電話號碼 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 網(wǎng)站搜索關(guān)鍵字 -->
        <meta name='description' content='this is description'> <!-- 描述網(wǎng)站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!--  網(wǎng)站的圖標(biāo)，如果圖標(biāo)是gif圖，則需要改：type="image/gif"，引入網(wǎng)站圖標(biāo)另一種方法：命名為favicon.ico文件放到網(wǎng)站根目錄下 -->
        <link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base標(biāo)簽，定義這個網(wǎng)頁中a鏈接打開窗口的方式，其值還有_self -->
        <title>標(biāo)題</title> <!-- 網(wǎng)站的標(biāo)題 -->
        <style type="text/CSS">  /* 用來寫CSS代碼，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 網(wǎng)頁的主體 -->
        <h1>標(biāo)題</h1> <!-- 標(biāo)題標(biāo)簽，共六個級，分別為：h1~h6,大小逐級遞減，h1在一個網(wǎng)頁中只允許出現(xiàn)一次。 -->
        <p>段落</p> <!-- 段落標(biāo)簽 -->
        <hr/> <!-- 單線標(biāo)簽,所有單標(biāo)簽后面的關(guān)閉符均可以省略 -->
        <br/> <!-- 換行標(biāo)簽 -->
        </div></div> <!-- 無語義化標(biāo)簽布局用,上面的標(biāo)簽是語義化標(biāo)簽 -->
        <span>span</span> <!-- 無語義化標(biāo)簽分割用 -->                
        <strong>加粗</strong> <!-- 加粗標(biāo)簽 -->
        <b>加粗</b> <!-- 加粗標(biāo)簽 -->
        <i>傾斜</i> <!-- 傾斜標(biāo)簽 -->
        <em>傾斜</em> <!-- 傾斜標(biāo)簽 -->
        <s>刪除線</s> <!-- 刪除標(biāo)簽 -->
        <del>刪除線</del> <!-- 刪除標(biāo)簽 -->
        <u>下劃線</u> <!-- 下劃線標(biāo)簽 -->
        <ins>下劃線</ins> <!-- 下劃線標(biāo)簽 -->
        <img src="圖片路徑" alt="圖片無法加載，提示文字" title="鼠標(biāo)懸停，提示文體" border="2"/> <!-- 圖像標(biāo)簽，border是邊框?qū)傩裕瑆idth和height屬性設(shè)置圖像的寬度和高度 -->
        <a href="跳轉(zhuǎn)目標(biāo)" target="_self">鏈接的命名</a> <!-- 鏈接標(biāo)簽，target屬性為鏈接頁面打開的方式，默認(rèn)值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁面只會打開一個;_top跳出框架-->
        <ul> <!-- 無序列表 -->
            <li>列表項1</li>
            <li>列表項2</li>
            <li>列表項3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,屬性type可以控制li序號的樣式，其屬性值有：1、A、a、I、i-->
            <li>中國</li>
            <li>美國</li>
            <li>英國</li>
        </ol>
        <dl> <!-- 自定義列表 -->
            <dt>分類1</dt> <!-- 分類名稱 -->
            <dd>分類1第1項</dd> <!-- 類的項 -->
            <dd>分類1第2項</dd>
            <dt>分類2</dt>
            <dd>分類2第1項</dd>
            <dd>分類2第2項</dd>
        </dl>
        <table> <!-- 定義表格，table標(biāo)簽實際就是一個四方塊框框，里面有單元格才會顯示出表格的樣子 -->
        <caption>信息表</caption> <!-- 表格標(biāo)題 -->
        <tr> <!-- 定義行 -->
            <th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr> <!-- 定義行 -->
            <td>小明</td> <!-- 定義單元格，表格里面沒有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

天我們來看下html中<a></a>的特點與功能

一 .a標(biāo)簽是超鏈接標(biāo)簽，首先我們說一下它的特點：

1.在網(wǎng)頁中默認(rèn)會有下劃線

2.不會繼承父級的顏色樣式

效果圖

詳細(xì)代碼

其中，自帶的下劃線不美觀，但我們可以用以下代碼解決，ctrl+s保存后，下劃線就沒有了

去掉下劃線

二 .下面我們來看看a標(biāo)簽的幾個功能：

1.跳轉(zhuǎn)頁面

href 屬性要跳轉(zhuǎn)頁面的地址（沒地址的情況下可以寫一個#）,即可以給網(wǎng)絡(luò)的地址也可以給本地的地址

target 屬性

值：_blank在新頁面打開

_self 在本頁面打開（默認(rèn)的）

跳轉(zhuǎn)頁面功能

2.錨點

作用：網(wǎng)頁太長時，通過點擊頁面某一個導(dǎo)航，頁面直接到達(dá)該內(nèi)容，網(wǎng)頁還是該網(wǎng)頁，只是向下自己滑動。

實現(xiàn)方法：在 href 的值里寫上#name,name對應(yīng)id的值

下面是一個簡單例子，點擊顏色就會跳轉(zhuǎn)到相應(yīng)顏色區(qū)域

錨點例子

3.下載

作用：實現(xiàn)網(wǎng)頁的下載功能

實現(xiàn)方法：在 href 里寫上文件的地址就可以了

注意：如果你要下載的文件瀏覽器能夠讀出來，那它就不會被下載，而是會被直接打開。如果就想讓瀏覽器下載所有文件，那就在a標(biāo)簽里添加一個屬性download（ h5 新增屬性，不兼容IE低版本），它的值寫上文件的名字加后綴名

下載功能

三.此外，介紹一下a標(biāo)簽的顏色，給a標(biāo)簽換顏色也是會經(jīng)常用到的，但是怎么改呢？

這里用到了“偽類”，偽類：針對元素的某種狀態(tài)添加的不同樣式

a :link 未訪問鏈接的（顏色）狀態(tài)

:visited訪問過的鏈接的（顏色）狀態(tài)

:hover鼠標(biāo)移入（懸停）（顏色）狀態(tài)

:active鼠標(biāo)按下不動時候的（顏色）狀態(tài)

改變a標(biāo)簽顏色

今天的a標(biāo)簽就介紹到這里，你學(xué)到了嗎？

標(biāo)

head標(biāo)簽的作用是什么？
head標(biāo)簽包含了哪些元素？
Meta標(biāo)簽包含哪兩個屬性？
Meta標(biāo)簽的name屬性有哪些常用的元素有哪些以及作用?
Meta標(biāo)簽的http-equiv屬性有哪些常用的元素有哪些以及作用?

head標(biāo)簽的作用是什么？

head標(biāo)簽處于html結(jié)構(gòu)里的第一層。

他的作用是記錄和設(shè)置了這個HTML文件的很多有用的信息，比如網(wǎng)頁標(biāo)題的設(shè)置、網(wǎng)頁的字符編碼，網(wǎng)頁是否啟用緩存，選擇啟用瀏覽器內(nèi)核等等，還可以引用腳本方式來減少代碼量。

head的位置

head標(biāo)簽包含了哪些元素？

Title元素設(shè)置網(wǎng)頁的標(biāo)題
Meta元素設(shè)置網(wǎng)頁的元數(shù)據(jù)，例如設(shè)置關(guān)鍵字、緩存時間、啟用瀏覽器內(nèi)核等等，是head標(biāo)簽最重要的元素。

Meta標(biāo)簽包含哪兩個屬性？

Meta標(biāo)簽的屬性分成兩個：name和http-equiv

Meta標(biāo)簽的name屬性

主要用于描述網(wǎng)頁，比如定義網(wǎng)頁的關(guān)鍵詞，關(guān)鍵敘述、標(biāo)注作者、標(biāo)注版權(quán)等。

基本語法：

name屬性基本語法

常用的屬性：

關(guān)鍵詞：keywords

說明：用于告訴搜索引擎，你網(wǎng)頁的關(guān)鍵字。

<meta name="keywords" content="我是前端旺">

網(wǎng)站內(nèi)容的描述：description.

說明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。

<meta name="description" content="前端旺，免費學(xué)習(xí)前端的好地方">

定義搜索引擎爬蟲的索引方式:robots

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。

<meta name="robots" content="none">

作者:author

說明：用于標(biāo)注網(wǎng)頁作者舉例

<meta name="author" content="前端旺,296699783@qq.com">

網(wǎng)頁制作軟件:generator

說明：用于標(biāo)明網(wǎng)頁是什么軟件做的舉例

<meta name="generator" content="Hbuilder">

版權(quán):copyright

說明：用于標(biāo)注版權(quán)信息舉例：

<meta name="copyright" content="前端旺">

雙核瀏覽器渲染方式:renderer

說明：renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面。比如說360瀏覽器。

<meta name="renderer" content="webkit"> //默認(rèn)webkit內(nèi)核
<meta name="renderer" content="ie-comp"> //默認(rèn)IE兼容模式
<meta name="renderer" content="ie-stand"> //默認(rèn)IE標(biāo)準(zhǔn)模式

Meta標(biāo)簽的http-equiv屬性

主要用于描述網(wǎng)頁，比如定義網(wǎng)頁的關(guān)鍵詞，關(guān)鍵敘述、標(biāo)注作者、標(biāo)注版權(quán)等。

基本語法：

http-equiv屬性基本語法

常用的屬性：

設(shè)定網(wǎng)頁字符集:content-Type

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦
<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁字符集的方式，推薦使用UTF-8

瀏覽器采取何種版本渲染當(dāng)前頁面: X-UA-Compatible

說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設(shè)置為最新模式）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁面

指定請求和響應(yīng)遵循的緩存機制:cache-control

說明：指導(dǎo)瀏覽器如何緩存某個響應(yīng)以及緩存多長時間。

<meta http-equiv="cache-control" content="no-cache">

cookie設(shè)定:Set-Cookie

<meta http-equiv="Set-Cookie" content="name, date"> //格式

思維導(dǎo)圖

head標(biāo)簽的作用

更多前端教程，敬請關(guān)注微信公眾號：前端旺

在線咨詢

上一篇：JS二進制：Blob、File、FileReader、ArrayBuffer、Base64
下一篇：[編程基礎(chǔ)] 常用html標(biāo)簽使用介紹

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商