大超教你建網(wǎng)站：初學(xué)HTML

篇講了FTP服務(wù)器，如果你認(rèn)真實(shí)踐，應(yīng)該已經(jīng)掌握從自己電腦上傳文件到你的網(wǎng)站空間了。那上傳什么文件呢？先從靜態(tài)的HTML文件開(kāi)始吧。

HyperText Markup Language（超級(jí)文本標(biāo)記語(yǔ)言）的縮寫就是HTML，一般用.htm或者.html作為文件擴(kuò)展名

HTML5

經(jīng)常聽(tīng)到的H5是什么

H5顧名思義就是排行老五唄！看看HTML的發(fā)展歷程就知道了：

HTML 1.0——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）：
HTML 2.0——1995年11月發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)
HTML 3.2——1997年1月14日，W3C（萬(wàn)維網(wǎng)聯(lián)盟）推薦的標(biāo)準(zhǔn)
HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML 4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)
HTML 5——2014年10月29日，W3C淚流滿面地宣布，經(jīng)過(guò)幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成了，并已公開(kāi)發(fā)布。

既然H5是最新的標(biāo)準(zhǔn)，就直接學(xué)H5吧，其實(shí)語(yǔ)法跟它的4哥差不太多，基本語(yǔ)法都一樣。

HTML文件的基本結(jié)構(gòu)

<!DOCTYPE html>在第一行，聲明這是H5文件。
<html></html>成對(duì)出現(xiàn)，網(wǎng)頁(yè)的所有內(nèi)容都夾在它們中間。
<head></head>成對(duì)出現(xiàn)，網(wǎng)頁(yè)的頭部信息，下面的meta和title都要放在它們中間。
<meta>定義了HTML文檔中的元數(shù)據(jù)（編碼、關(guān)鍵詞等數(shù)據(jù)）。
<title></title>成對(duì)出現(xiàn)，網(wǎng)頁(yè)的標(biāo)題，就是你打開(kāi)一個(gè)網(wǎng)站時(shí)，瀏覽器最上面顯示的網(wǎng)站名稱。
<body></body>成對(duì)出現(xiàn)，從英文意思也能看出來(lái)就是網(wǎng)頁(yè)的主體了。

下面開(kāi)始實(shí)踐吧。

做第一個(gè)HTML文件

在你的電腦桌面上點(diǎn)擊鼠標(biāo)右鍵，新建一個(gè)txt文本文檔，在里面錄入以下信息：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個(gè)H5文件</title>
</head>
<body>
 <h1>我的第一個(gè)標(biāo)題</h1>
 <p>我的第一個(gè)段落。</p>
</body>
</html>

保存后，關(guān)閉，然后把它重命名（包含.txt）為H5.html。雙擊打開(kāi)它，恭喜你！你會(huì)做網(wǎng)頁(yè)了。你把它上傳到你的網(wǎng)站空間，然后用http://你的域名/H5.html就可以訪問(wèn)，還可以把它分享給你的朋友。

ntroduction

HTML 是一種描述網(wǎng)頁(yè)語(yǔ)言，指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)。其中，超文本指的是網(wǎng)頁(yè)上可以包含圖片，視頻，連接信息。標(biāo)記也叫做標(biāo)簽，所以標(biāo)簽書寫的是<內(nèi)容>。語(yǔ)言就是一種交流工具，HTML 是用戶與瀏覽器之間交互工具。

簡(jiǎn)單說(shuō)，HTML 是由瀏覽器解析執(zhí)行的，它不會(huì)將 HTML 標(biāo)簽展示出來(lái)，而是會(huì)解析 HTML 標(biāo)簽，以特定效果展示出來(lái)。

Syntax

HTML 可以直接使用文本編輯器來(lái)編寫
HTML 文件它的后綴名是 .htm 或 .html
<html> 標(biāo)簽它代表當(dāng)前頁(yè)面是一個(gè) HTML
<head> 標(biāo)簽中可以聲明 HTML 頁(yè)面的相關(guān)信息
<body> 標(biāo)簽中它主要是用于顯示頁(yè)面信息
標(biāo)簽要有開(kāi)始，有結(jié)束。開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽中的內(nèi)容是標(biāo)簽的內(nèi)容，如果沒(méi)有標(biāo)簽內(nèi)容，可以讓標(biāo)簽自關(guān)閉 <br/>。
大多數(shù)標(biāo)簽它具有屬性，屬性值要使用引號(hào)引起來(lái)。
HTML 本身是不區(qū)分大小寫的。

<html>
    <head>HEAD</head>
    <body>BODY</body>
</html>

Tools

可以使用 JetBrains WebStorm 或者 VS Code 進(jìn)行開(kāi)發(fā)。

HTML Tags

文件標(biāo)簽

<html> 代表當(dāng)前書寫的是一個(gè) HTML 文檔

<head> 存儲(chǔ)的本頁(yè)面的一些重要的信息，它不會(huì)顯示

標(biāo)簽下有一個(gè)子標(biāo)簽 <title> 它是用于定義頁(yè)面的標(biāo)題的

<body> 書寫的內(nèi)容會(huì)顯示出來(lái)，屬性：1. text 用于設(shè)置文字顏色；2. bgcolor 用于設(shè)置頁(yè)面的背景色；3. background 用于設(shè)置頁(yè)面的背景圖片

排版標(biāo)簽

HTML 注釋

<br/> 標(biāo)簽

br 標(biāo)簽就是一個(gè)換行功能標(biāo)簽

<p> 標(biāo)簽

在 p 標(biāo)簽中的內(nèi)容會(huì)在開(kāi)始與結(jié)束之間產(chǎn)生一個(gè)空白行并且它會(huì)自動(dòng)換行

常用屬性 align 的作用是設(shè)置段落中的內(nèi)容對(duì)齊方式，可取值有 left right center

<hr> 標(biāo)簽

hr 標(biāo)簽會(huì)在頁(yè)面上產(chǎn)生一個(gè)水平線

常用屬性：

align：可取值有 left right center 代表水平線位置

size：代表水平線高度（厚度）

width：代表水平線寬度

color：水平線的顏色

關(guān)于 HTML 中標(biāo)簽屬性

兩種方式:

直接設(shè)置值，默認(rèn)單位是 px （像素） <HR WIDTH="200">
可以設(shè)置百分比 <HR WIDTH="35%">

<div> 標(biāo)簽

Div 是一個(gè)塊標(biāo)簽

Div 與 CSS 結(jié)合，會(huì)更好對(duì)頁(yè)面進(jìn)行排版

<span> 標(biāo)簽

Span 標(biāo)簽也是一個(gè)塊標(biāo)簽Div 與 span 區(qū)別：Div 會(huì)自動(dòng)換行，我們也叫這樣的標(biāo)簽為行級(jí)元素Span 標(biāo)簽它不會(huì)自動(dòng)換行，我們也叫它為行內(nèi)元素

字體標(biāo)簽

<font> 標(biāo)簽

Font 標(biāo)簽可以設(shè)置字體，字的大小及顏色

常用屬性：

Face：用于設(shè)置字體，例如宋體隸書楷體

Size：用于設(shè)置字的大小

Color：用于設(shè)置字的顏色

我們所看到的屏幕上所有的顏色都是由紅、綠、藍(lán)這三種基色調(diào)混合而成的。每一種顏色的飽和度和透明度都是可以變化的，用 0～255 的數(shù)值來(lái)表示。如純紅色表示為 (255，0，0)，十六進(jìn)制表示為 #FF0000。按這種表達(dá)方式，理論上我們可以得到 256 * 256 *256=16777216 種顏色。

使用十六進(jìn)制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）。當(dāng)顏色值為 #cc3300 時(shí)，也可以使用 #c30 這種簡(jiǎn)化的方式來(lái)表示。
RGB 顏色表示法：RGB(x,y,z)，x、y、z 是 0 ～ 255 之間的整數(shù)。
在線顏色選擇器：http://www.86y.org/code/colorpicker/color.html

標(biāo)題標(biāo)記

<h1> 最大 <h6> 最小，它們代表的是標(biāo)題，可以使用 <b> <i> 對(duì)文字設(shè)置加粗或傾斜

注意：在 HTML 中允許標(biāo)簽進(jìn)行嵌套的，但是一般都包裹嵌套，而不可以進(jìn)行交叉嵌套

清單標(biāo)記（列表標(biāo)記）

有序清單：

<!-- 有序列表 I II III-->
<ol type="I" start="3">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
<!-- 無(wú)序列表 -->
<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

圖形標(biāo)簽

<img> 可以讓我們?cè)诰W(wǎng)頁(yè)引入一張圖片

常用屬性

src 代表的圖片的路徑
width 圖片的寬度
height 圖片的高度
border 用于設(shè)置圖片的邊框
alt 如果圖片不可以顯示時(shí)，默認(rèn)顯示的文本信息
align 圖片附件文字的對(duì)齊方式，取值有：left right middle top bottom

超連接標(biāo)簽

<a> 標(biāo)簽可以實(shí)現(xiàn)跳轉(zhuǎn)到其它頁(yè)面操作。超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息

常用屬性

href 代表的要跳轉(zhuǎn)的路徑
name 屬性可以在本頁(yè)面設(shè)置一個(gè)錨點(diǎn)
target 這個(gè)屬性規(guī)定在何處打開(kāi)這個(gè)鏈接文檔，可取值：_blank _self _parent _top framename

表格標(biāo)簽

<!-- 學(xué)習(xí)表格標(biāo)簽 -->
<table border="2" align="center" width="400px">
    <caption>學(xué)生成績(jī)單</caption>
    <tr>
        <th>姓名</th>
        <th>語(yǔ)文成績(jī)</th>
        <th>數(shù)學(xué)成績(jī)</th>
        <td colspan="2" align="center"><b>操作</b></td>
    </tr>
    <tr align="center">
        <td>張三</td>
        <td>99</td>
        <td>100</td>
        <td>修改</td>
        <td>刪除</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>90</td>
        <td>66</td>
        <td>修改</td>
        <td>刪除</td>
    </tr>
</table>

表單標(biāo)簽

通過(guò)表單可以將要提交的數(shù)據(jù)提交到指定的位置

<!-- 表單：用戶注冊(cè)案例 -->
<form name="form1" action="user/login" method="POST">
    <table border="1" width="64%" align="center">
        <tr>
            <td>用戶名：</td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td>密碼：</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <tr>
            <td>地址：</td>
            <td>
                <select name="province">
                    <option value="0">--請(qǐng)選擇省--</option>
                    <option value="10001">廣東</option>
                    <option value="10002">上海</option>
                    <option value="10003">山東</option>
                </select> 省
                <select name="city">
                    <option>--請(qǐng)選擇市--</option>
                    <option value="1000301">廣州市</option>
                    <option>深圳市</option>
                    <option>東莞市</option>
                </select> 市
            </td>
        </tr>
        <tr>
            <td>編程語(yǔ)言：</td>
            <td>
                <input type="checkbox" name="language" checked="checked">Java
                <input type="checkbox" name="language">Python
                <input type="checkbox" name="language">Go
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td>
                <input type="file" name="image">
            </td>
        </tr>
        <tr>
            <td>自我介紹：</td>
            <td>
                <textarea name="remark" rows="5" cols="100"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注冊(cè)"> 
                <input type="reset" value="取消"> 
            </td>
        </tr>
    </table>
</form>

框架標(biāo)簽

通過(guò)框架標(biāo)簽可以定制 HTML 頁(yè)面布局

在 HTML 頁(yè)面上去描述框架信息時(shí)，不可以將 <frameset> 寫在 <body> 標(biāo)簽中

framesetTest.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML 框架標(biāo)簽</title>
    </head>
    <!-- rows 定義了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
    <frameset rows="100, * , 100"> 
        <frame name="topModule" src="./top.html"></frame>
        <frameset cols="100, * ">
            <frame name="menuModule" src="./menu.html"></frame>
            <frame name="contentModule" src="./content.html"></frame>
        </frameset>
        <frame name="footModule" src="./foot.html"></frame>
    </frameset>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>top</title>
    </head>
    <body>
        <div>頭部信息</div>
    </body>
</html>

foot.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>footL</title>
    </head>
    <body>
        <div>底部信息</div>
    </body>
</html>

menu.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>menu</title>
    </head>
    <body>
        <div>菜單信息</div>
    </body>
</html>

content.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>content</title>
    </head>
    <body>
        <div>內(nèi)容顯示區(qū)</div>
    </body>
</html>

其它標(biāo)簽與特殊字符

<meta> 標(biāo)簽

它可以對(duì)頁(yè)面進(jìn)行描述及熱詞設(shè)置，可以方便搜索引擎查找頁(yè)面
通過(guò) meta 標(biāo)簽設(shè)置 http 響應(yīng)信息
通過(guò) meta 標(biāo)簽可以設(shè)置頁(yè)面的編碼，<meta http-equiv="Content-Type" content="text/html; charset=gbk">
通過(guò) meta 標(biāo)簽來(lái)設(shè)置頁(yè)面加載后在指定的時(shí)間后跳轉(zhuǎn)到指定的頁(yè)面，<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

<link>標(biāo)簽

使用 link 標(biāo)簽來(lái)導(dǎo)入 CSS

特殊字符

詳情查看菜鳥教程：https://www.runoob.com/charsets/ref-html-ascii.html

?HTML DOM

Introduction

DOM, Document Object Model -- 文檔對(duì)象模型，是 HTML 和 XML 文檔的編程接口，以樹結(jié)構(gòu)表達(dá) HTML 文檔。

DOM 是 W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。

DOM 定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)。

W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：

核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

DOM Node

DOM 是被視為節(jié)點(diǎn)樹的 HTML。

根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 元素是元素節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)

HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹。

節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。常用父（parent）、子（child）和同胞（sibling）等術(shù)語(yǔ)來(lái)描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（root）。
每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒(méi)有父節(jié)點(diǎn)）。
一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子節(jié)點(diǎn)。
同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)。

DOM 方法 & 屬性

HTML DOM 方法是可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作。

HTML DOM 屬性是可以在節(jié)點(diǎn)（HTML 元素）設(shè)置和修改的值。

可通過(guò) JavaScript （以及其他編程語(yǔ)言）對(duì) HTML DOM 進(jìn)行訪問(wèn)。所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。方法是能夠執(zhí)行的動(dòng)作（比如添加或修改元素）。屬性是能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM</title>
    </head>
    <body>
        <div id="div1">
            <p id="p1">Hello</p>
            <p id="p2">Hello</p>
        </div>
        <script>
            // 先獲取 P 元素
            var element = document.getElementById("p1")
            // 直接修改 p 元素的內(nèi)容
            element.innerHTML = "此時(shí)已是修改后的內(nèi)容"

            // 修改 p2 標(biāo)簽的樣式
            var ele = document.getElementById("p2")
            ele.style.color="blue"
            ele.style.fontFamily="宋體"
            ele.style.fontSize="larger"

            // 添加元素
            // 創(chuàng)建一個(gè)p元素
            var elementP = document.createElement("p")
            // 創(chuàng)建一個(gè)內(nèi)容
            var nodeText = document.createTextNode("新加的 P 元素")
            // 把文字內(nèi)容添加到p元素中
            elementP.appendChild(nodeText)
            // 把新創(chuàng)建的p元素添加div1元素中
            var div1 = document.getElementById("div1")
            div1.appendChild(elementP)

            // 插入添加新的元素
            // 創(chuàng)建一個(gè)新的元素
            var eleP = document.createElement("p")
            // 創(chuàng)建一個(gè)內(nèi)容
            var noText = document.createTextNode("在 P1 元素前添加的新元素")
            // 把文字內(nèi)容添加到 p 元素中
            eleP.appendChild(noText)
            // 把新創(chuàng)建的 p 元素添加 div 1 元素中
            var parentDiv1 = document.getElementById("div1")
            // 獲取指定被添加的元素
            var p1 = document.getElementById("p1")
            // 在元素前添加；參數(shù)說(shuō)明：1.要添加的元素；2.在那個(gè)元素之前添加（指定一個(gè)元素）
            parentDiv1.insertBefore(eleP, p1)

            // 刪除元素
            // 獲取父元素
            var pdiv1 = document.getElementById("div1")
            var removep1 = document.getElementById("p1")
            // 使用父元素刪除該元素
            pdiv1.removeChild(removep1)
        </script>
    </body>
</html>

DOM 事件

HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。當(dāng)事件發(fā)生時(shí)，可以執(zhí)行 JavaScript，比如發(fā)生用戶點(diǎn)擊一個(gè) HTML 元素的事件。

如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，可以把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript

HTML 事件的例子：

當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
當(dāng)網(wǎng)頁(yè)已加載時(shí)
當(dāng)圖片已加載時(shí)
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
當(dāng)輸入字段被改變時(shí)
當(dāng) HTML 表單被提交時(shí)
當(dāng)用戶觸發(fā)按鍵時(shí)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM 事件</title>
        <!-- JavaScript 代碼必須寫在 script 中 -->
        <script>
            function onLoadFun(){
                alert("已載入...");
            }
            // 文本框失去焦點(diǎn)事件
            function onBlurFun(){
                alert("此方法是文本框失去焦點(diǎn)事件，用來(lái)校驗(yàn)此文本框輸入數(shù)據(jù)的")
            }
            // 表單被提交時(shí)執(zhí)行事件
            function onSubmitFun(){
                alert("此表單已提交，這個(gè)方法也可以來(lái)作為數(shù)據(jù)校驗(yàn)的");
            }
            // 元素被改變時(shí)觸發(fā)事件
            function onChangeFun(){
                alert("文本框元素已輸入新的數(shù)據(jù)")
            }
            // 當(dāng)鼠標(biāo)懸停在某一個(gè)元素上時(shí)執(zhí)行的方法
            function onMouseOverFun(element){
                element.innerHTML = "鼠標(biāo)已停在H1元素上了"
            }
            // 當(dāng)鼠標(biāo)離開(kāi)某一個(gè)元素時(shí)執(zhí)行事件
            function onMouseOutFun(element){
                element.innerHTML = "鼠標(biāo)已離開(kāi)H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求：當(dāng)頁(yè)面被載入時(shí)，執(zhí)行一個(gè)代碼，彈框提示已載入 -->
    <body onload="onLoadFun()">
        <!-- 需求：在一個(gè)表單中有用戶名錄入的文本框，當(dāng)輸入完文本框的時(shí)候進(jìn)行名稱校驗(yàn)，提交的時(shí)候彈框顯示 -->
        <form onsubmit="onSubmitFun()">
            用戶名：<input id="username" name="username" onchange="onChangeFun()" >
            <br/>
            <button type="submit">提交</button>
        </form>
        <!-- 需求：有一個(gè) H1 標(biāo)簽元素，當(dāng)鼠標(biāo)移動(dòng)到 H1 元素上時(shí)，修改文字，當(dāng)鼠標(biāo)移出元素時(shí)執(zhí)行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個(gè)標(biāo)題</h1>
    </body>
</html>

想了解更多，歡迎關(guān)注我的微信公眾號(hào)：Renda_Zhang

tml有什么作用

html有什么作用？一、用戶體驗(yàn)，例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；二、有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。以下是html作用的更多內(nèi)容，歡迎參閱。

一、用戶體驗(yàn)，例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用;

二、有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重;

三、方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以意義的方式來(lái)渲染網(wǎng)頁(yè);

四、便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具有可讀性，下一步把網(wǎng)頁(yè)的重要?jiǎng)酉颍裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

html的特點(diǎn)

HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一，其主要特點(diǎn)如下：

1 簡(jiǎn)易性，HTML版本升級(jí)采用超集方式，從而更加靈活方便。

2 可擴(kuò)展性，HTML語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。

3 平臺(tái)無(wú)關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺(tái)上。

學(xué)習(xí)html有什么好處

1、很輕松的修改你的網(wǎng)站、博客的網(wǎng)頁(yè)結(jié)構(gòu)。

2、對(duì)SEO網(wǎng)站優(yōu)化很有用處。

3、拿來(lái)主義，通過(guò)保存其他網(wǎng)站頁(yè)面源代碼，適當(dāng)?shù)男薷模梢苑轮瞥瞿阆胍哪０濉?/p>

4、當(dāng)你有一張漂亮的PSD源文件圖片時(shí)，你可以很輕易的把圖片切割制作成網(wǎng)頁(yè)。

5、無(wú)論是PHP、ASP、.NET、JSP等網(wǎng)站編程語(yǔ)言，都要用到HTML。

6、可以輕松檢測(cè)出網(wǎng)站是否中了網(wǎng)頁(yè)木馬和預(yù)防網(wǎng)頁(yè)木馬。

7、可以向更高一層次進(jìn)階：DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)。

用什么可以編輯HTML

HTML其實(shí)是文本，它需要瀏覽器的解釋，HTML的編輯器大體可以分為三種，

1 基本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉懀?dāng)然，如果你用WPS來(lái)編寫，也可以。不過(guò)存盤是請(qǐng)使用.htm或.html作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。

2 半所見(jiàn)即所得軟件，這種軟件能大大提高開(kāi)發(fā)效率，它可以使你在很短的時(shí)間內(nèi)做出HOMEPAGE，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國(guó)產(chǎn)的軟件網(wǎng)頁(yè)作坊。

3 所見(jiàn)即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識(shí)就可以做出網(wǎng)頁(yè)，這類軟件主要有FRONTPAGE98，DREAMWEAVER。

點(diǎn)擊左下角了解更多課程資訊

在線咨詢

上一篇：關(guān)于重新發(fā)布湖南省2022年度考試錄用公務(wù)員筆試新冠肺炎疫情防控要求的公告
下一篇：用藍(lán)圖可視化拖拉配實(shí)現(xiàn)HTML5 WEB組態(tài)交互配置按藍(lán)圖

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商