前端基礎(chǔ)：HTML

ntroduction

HTML 是一種描述網(wǎng)頁(yè)語(yǔ)言，指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)。其中，超文本指的是網(wǎng)頁(yè)上可以包含圖片，視頻，連接信息。標(biāo)記也叫做標(biāo)簽，所以標(biāo)簽書(shū)寫(xiě)的是<內(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)編寫(xiě)
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ū)分大小寫(xiě)的。

<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)前書(shū)寫(xiě)的是一個(gè) HTML 文檔

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

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

<body> 書(shū)寫(xiě)的內(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è)置字體，例如宋體隸書(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> 寫(xiě)在 <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

特殊字符

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

?HTML DOM

Introduction

DOM, Document Object Model -- 文檔對(duì)象模型，是 HTML 和 XML 文檔的編程接口，以樹(shù)結(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)樹(shù)的 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 文檔視作樹(shù)結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹(shù)。

節(jié)點(diǎn)樹(shù)中的節(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)樹(shù)中，頂端節(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 代碼必須寫(xiě)在 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 簡(jiǎn)介

HTML 實(shí)例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合開(kāi)發(fā)(www.zixue365.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

嘗試一下 ?

實(shí)例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁(yè)面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見(jiàn)的頁(yè)面內(nèi)容
<h1> 元素定義一個(gè)大標(biāo)題
<p> 元素定義一個(gè)段落

什么是HTML?

HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。

HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁(yè)面

HTML 標(biāo)簽

HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>

HTML 元素

"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.

但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:

HTML 元素:

Web 瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁(yè)顯示。

瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶：

HTML 網(wǎng)頁(yè)結(jié)構(gòu)

下面是一個(gè)可視化的HTML頁(yè)面結(jié)構(gòu)：

<html>

<head>

</head>

<body>

<p>這是另外一個(gè)段落。</p>

</body>

</html>

HTML版本

從初期的網(wǎng)絡(luò)誕生后，已經(jīng)出現(xiàn)了許多HTML版本:

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

版本	發(fā)布時(shí)間
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。

網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。

doctype 聲明是不區(qū)分大小寫(xiě)的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用聲明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整網(wǎng)頁(yè)聲明類型 DOCTYPE 參考手冊(cè)。

中文編碼

目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。

HTML 實(shí)例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁(yè)面標(biāo)題</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

HTML 編輯器

HTML 編輯器推薦

可以使用專業(yè)的 HTML 編輯器來(lái)編輯 HTML，菜鳥(niǎo)教程為大家推薦幾款常用的編輯器：

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/

你可以從以上軟件的官網(wǎng)中下載對(duì)應(yīng)的軟件，按步驟安裝即可。

接下來(lái)我們將為大家演示如何使用Notepad++工具來(lái)創(chuàng)建 HTML 文件，其他兩個(gè)工具操作步驟類似。

Notepad++

Notepad++是 Windows操作系統(tǒng)下的一套文本編輯器(軟件版權(quán)許可證: GPL)，有完整的中文化接口及支持多國(guó)語(yǔ)言編寫(xiě)的功能(UTF8技術(shù))。

步驟 1: 新建 HTML 文件

在 Notepad++ 安裝完成后，選擇" 文件(F)->新建(N) "，在新建的文件中輸入以下代碼：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合開(kāi)發(fā)提供(www.zixue365.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

步驟 2: 另存為 HTML 文件

然后選擇" 文件(F)->另存為(A) "，文件名為 runoob.html:

當(dāng)您保存 HTML 文件時(shí)，既可以使用 .htm 也可以使用 .html 擴(kuò)展名。兩者沒(méi)有區(qū)別，完全根據(jù)您的喜好。

在一個(gè)容易記憶的文件夾中保存這個(gè)文件，比如h5混合開(kāi)發(fā)

步驟 3: 在瀏覽器中運(yùn)行這個(gè) HTML 文件

啟動(dòng)您的瀏覽器，然后選擇"文件"菜單的"打開(kāi)文件"命令，或者直接在文件夾中雙擊您的 HTML 文件,

運(yùn)行顯示結(jié)果類似如下:

Notepad++ 和 Sublime Text 還可以配合 Emmet 插件來(lái)提高編碼速度。
Emmet 官網(wǎng)：http://emmet.io/

HTML 基礎(chǔ)- 4個(gè)實(shí)例

不要擔(dān)心本章中您還沒(méi)有學(xué)過(guò)的例子，

您將在下面的章節(jié)中學(xué)到它們。

HTML 標(biāo)題

HTML 標(biāo)題（Heading）是通過(guò)<h1> - <h6> 標(biāo)簽來(lái)定義的.

實(shí)例

嘗試一下 ?

HTML 段落

HTML 段落是通過(guò)標(biāo)簽 <p> 來(lái)定義的.

實(shí)例

<p>這是一個(gè)段落。</p><p>這是另外一個(gè)段落。</p>

嘗試一下 ?

HTML 鏈接

HTML 鏈接是通過(guò)標(biāo)簽 <a> 來(lái)定義的.

實(shí)例

嘗試一下 ?

提示:在 href 屬性中指定鏈接的地址。

(您將在本教程稍后的章節(jié)中學(xué)習(xí)更多有關(guān)屬性的知識(shí)).

HTML 圖像

HTML 圖像是通過(guò)標(biāo)簽 <img> 來(lái)定義的.

實(shí)例

<imgsrc="/images/logo.png"width="258"height="39"/>

嘗試一下 ?

注意： 圖像的名稱和尺寸是以屬性的形式提供的。

HTML 元素

HTML 文檔由 HTML 元素定義。

HTML 元素

開(kāi)始標(biāo)簽 *	元素內(nèi)容	結(jié)束標(biāo)簽 *
<p>	這是一個(gè)段落	</p>
<a href="default.htm">	這是一個(gè)鏈接	</a>
<br>

*開(kāi)始標(biāo)簽常被稱為起始標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）。

HTML 元素語(yǔ)法

HTML 元素以開(kāi)始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開(kāi)始標(biāo)簽中進(jìn)行關(guān)閉（以開(kāi)始標(biāo)簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性

注釋: 您將在本教程的下一章中學(xué)習(xí)更多有關(guān)屬性的內(nèi)容。

嵌套的 HTML 元素

<p大多數(shù) html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">

HTML 文檔由嵌套的 HTML 元素構(gòu)成。

HTML 文檔實(shí)例

<!DOCTYPE html>

<html>

<body>

<p>這是第一個(gè)段落。</p>

</body>

</html>

以上實(shí)例包含了三個(gè) HTML 元素。

HTML 實(shí)例解析

<p> 元素:

<p>這是第一個(gè)段落。</p>

這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。

這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽 <p> 以及一個(gè)結(jié)束標(biāo)簽 </p>.

元素內(nèi)容是: 這是第一個(gè)段落。

<body> 元素:

<body>

<p>這是第一個(gè)段落。</p>

</body>

<body> 元素定義了 HTML 文檔的主體。

這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽 <body> 以及一個(gè)結(jié)束標(biāo)簽 </body>。

元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。

<html> 元素：

<html>

<body>

<p>這是第一個(gè)段落。</p>

</body>

</html>

<html> 元素定義了整個(gè) HTML 文檔。

這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽 <html> ，以及一個(gè)結(jié)束標(biāo)簽 </html>.

元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。

不要忘記結(jié)束標(biāo)簽

即使您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地顯示 HTML：

<p>這是一個(gè)段落

以上實(shí)例在瀏覽器中也能正常顯示，因?yàn)殛P(guān)閉標(biāo)簽是可選的。

但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。

HTML 空元素

沒(méi)有內(nèi)容的 HTML 元素被稱為空元素?？赵厥窃陂_(kāi)始標(biāo)簽中關(guān)閉的。

<br> 就是沒(méi)有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。

在 XHTML、XML 以及未來(lái)版本的 HTML 中，所有元素都必須被關(guān)閉。

在開(kāi)始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實(shí)是更長(zhǎng)遠(yuǎn)的保障。

HTML 提示：使用小寫(xiě)標(biāo)簽

HTML 標(biāo)簽對(duì)大小寫(xiě)不敏感：<P> 等同于 <p>。許多網(wǎng)站都使用大寫(xiě)的 HTML 標(biāo)簽。

h5混合開(kāi)發(fā)使用的是小寫(xiě)標(biāo)簽，因?yàn)槿f(wàn)維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫(xiě)，而在未來(lái) (X)HTML 版本中強(qiáng)制使用小寫(xiě)。

TML+CSS

Hyper Text Markup Language（超文本標(biāo)記語(yǔ)言）

超文本包括：文字、圖片、音頻、視頻、動(dòng)畫(huà)等

注釋格式：<!—內(nèi)容 –>

編碼與特殊符號(hào)

1.  (空格)

2.> (大于號(hào))

3.&lt；(小于號(hào))

4."(引號(hào))

5.©(版權(quán)號(hào)@)

路徑

1.相對(duì)路徑(Relative Path) 同一個(gè)目錄的文件引用如果源文件和引用文件在同一個(gè)目錄里，直接寫(xiě)引用文件名即可。

2.Web根目錄下建了一個(gè)目錄叫html_demo，然后在該目錄下放了一個(gè)文件index.html，

這個(gè)文件的絕對(duì)路徑:

http://127.0.0.1:8080/html_demo/index.html

表單（form）元素

1.單行文本框（text)

2.密碼框（password）

3.單選按鈕（radio) 選中的話checked=="true"

4.文件選擇框（file）

5.復(fù)選框（checkbox）

6.下拉列表（select）

7.提交按鈕（submit）

8.重置按鈕（reset）

9.文本域（textarea）

表單高級(jí)用法

1.關(guān)聯(lián)表單元素（label）

2.只讀屬性（readonly）

3.禁用屬性（disabled）

表格高級(jí)標(biāo)簽

1.表格標(biāo)題<caption>

2.頁(yè)眉<thead>

3.表頭<th>

4.數(shù)據(jù)主體<tbody>

5.頁(yè)腳<tfoot>

表格的跨行與跨列

1.跨列 colspan

2.跨行rowspan

文檔的內(nèi)聯(lián)框架

使用<iframe>標(biāo)簽嵌套另一個(gè)頁(yè)面

面試題：get方法和post方法區(qū)別

1.get方法提交參數(shù)在地址欄可見(jiàn)

2.post方法一般用于多數(shù)據(jù)、保密數(shù)據(jù)提交

CSS

Cascading Style Sheet 級(jí)聯(lián)樣式表

能控制頁(yè)面的樣式和布局，包括對(duì)字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位等設(shè)定

網(wǎng)頁(yè)文件與樣式文件相分離，提高開(kāi)發(fā)效率

應(yīng)寫(xiě)在<head>標(biāo)簽之間，加上 type="text/css"屬性

<div>和<span>提高網(wǎng)頁(yè)加載速度

1．常用塊元素div，p，ul，li //ul是定義無(wú)序列表的樣式 li是列表內(nèi)行的樣式 ol是有序 dl.dt是自定義列表

2．常用內(nèi)聯(lián)元素span，a，label //span定義一個(gè)區(qū)域 //label標(biāo)簽主要用于綁定一個(gè)表單元素

SEO搜索引擎優(yōu)化：在搜索時(shí)從搜索結(jié)果中獲取的訪問(wèn)量將更高

CSS手冊(cè)：http://www.w3school.com.cn/cssref/index.asp

注釋格式：/* 內(nèi)容 */

CSS屬性

1．CSS 背景屬性（Background）

background-color	背景色，取值如，red，#FF0000
background-image	背景圖片,如:background-image:url(“./images/bg.png”);
background-position	背景開(kāi)始位置,包括水平方向(X軸)和豎直方向(Y軸)的設(shè)置 X軸取值：left，center，right或像素值或百分比 Y軸取值：top，center，bottom或像素值或百分比
background-repeat	背景填充方式,取值：repeat-x\|repeat-y\|no-repeat

2．CSS 內(nèi)邊距屬性（Padding）

3．CSS 文本屬性（Text）

color	設(shè)置文本的顏色，如red，#FF0000
line-height	設(shè)置文本的行高
text-align	設(shè)置文本的對(duì)齊方式,如left、center、right
text-decoration	設(shè)置文本裝修，如underline、none、line-through

4．CSS 字體屬性（Font）

font-weight	設(shè)置字體粗細(xì)
font-size	設(shè)置字體的尺寸
font-family	設(shè)置字體系列

類選擇器（.class）

格式：.classname { font-size : 16px; }

注意：網(wǎng)頁(yè)中可給不同標(biāo)簽相同的class

ID選擇器（#id）

格式：#idname { font-size : 16px; }

注意：網(wǎng)頁(yè)中標(biāo)簽的ID 不能重復(fù),唯一存在

復(fù)合選擇器

1．并集選擇器

格式：p , #idname , .classname{ font-size : 16px; }

注意：多個(gè)選擇器之間必須用英文半角的逗號(hào)“,”隔開(kāi)

2．交集選擇器

格式：

input#idtest { font-size : 16px; }

p.classname{ font-size : 16px; }

注意：選擇器之間不能有空格

3．后代選擇器

格式：p a { color:red; }

注意：選擇器之間用空格隔開(kāi)；選擇器之間可以是多個(gè)不同或相同類型并有層級(jí)關(guān)系的。

CSS的引入方式

1．行內(nèi)樣式：

<h1 style="color:red; " >style行內(nèi)樣式的應(yīng)用</h1>

2．內(nèi)部樣式：（必須寫(xiě)在head標(biāo)簽中間）

h3{ color: red; }

</style>

3．外部樣式：

a) CSS代碼保存在擴(kuò)展名為.css的文件中

b) 引用擴(kuò)展名為.css文件的兩種方式：

i.鏈接式：

ii.導(dǎo)入式：

@import url("css/stylefile.css");

</style>

CSS中的優(yōu)先級(jí)

1.行內(nèi)樣式 > 內(nèi)部樣式表 > 外部樣式表（鏈接式 > 導(dǎo)入式）

2.ID選擇器 > 類選擇器 > 標(biāo)簽選擇器

/*樣式hover，文本修飾：下劃線*/

a:hover{

text-decoration:underline;

案例：北風(fēng)網(wǎng)新聞

1．制作北風(fēng)網(wǎng)網(wǎng)站信息展示頁(yè)面

2．使用外部樣式表創(chuàng)建頁(yè)面樣式

需求：

1．標(biāo)題字體大小18px，行高40px ，居中顯示

2．時(shí)間來(lái)源居中顯示，文字大小 12px，字體顏色 #666666

3．段落字體12px 行高20px

4．內(nèi)容中小標(biāo)題<h2>行高28px，字體大小12px

案例：利用盒子模型制作登錄頁(yè)面

需求：

1．盒子寬度width為300px；邊界margin為50px auto；盒子邊框border為實(shí)線1px，顏值#3a6587

2．設(shè)置標(biāo)題文字字體16px；高35px；左邊距20px；背景色同盒子邊框顏色#3a6587；字體白色；文字行高35px

3．設(shè)置表單上下距離30像素，左右距離20像素

4．設(shè)置表格中標(biāo)題的類選擇器text-align靠右；分別為表格中標(biāo)題配上類樣式

5．設(shè)置表格中內(nèi)容與提交按鈕的類選擇器，邊框border為實(shí)線1px顏值#ccc；分別配上類樣式

分析：

盒子模型總尺度：

border + padding + margin + content內(nèi)容

1、用div標(biāo)簽做盒子

2、設(shè)置標(biāo)題

3、設(shè)置表單

4、設(shè)置表格中標(biāo)題內(nèi)容“姓名、郵箱、聯(lián)系電話、登錄”；分別加入文本域

5、設(shè)置為內(nèi)部引用樣式

6、設(shè)置外邊距 (margin) 和內(nèi)邊距 (padding)

7、設(shè)置上述標(biāo)簽的ID選擇器和類選擇器

案例：為banner圖片加按鈕

案例：網(wǎng)頁(yè)基本布局

需求分析：

1.使用DIV標(biāo)簽

2.使用id選擇器

3.使用class選擇器

步驟：

1.設(shè)置div上中下；使用id選擇器

2.設(shè)置中間部分為div 左中右使用class選擇器

3.初始化邊界不留空白

4.設(shè)置id選擇器，div上中下共用： width960px，border1px實(shí)線加紅色

5.設(shè)置頭部id選擇器高度，height230px

6.設(shè)置中部id選擇器最小高度，min-height300px

7.設(shè)置底部id選擇器高度，height85px

8.設(shè)置中部div左中右，border1px實(shí)線加紅色藍(lán)色

案例：制作網(wǎng)頁(yè)自動(dòng)居中

需求分析：

1.元素必須為塊元素div

2.元素必須設(shè)定其寬度width

3.元素的上下邊距可自定義

步驟：

1.在上中下id選擇器中加入自動(dòng)居中margin-left和margin-right

案例：制作浮動(dòng)布局

步驟：

1.設(shè)置main區(qū)域水平3欄分布，float靠左，min-height300px

2.設(shè)置main區(qū)域左，width200px，background-color綠

3.設(shè)置main區(qū)域中，width500px，background-color藍(lán)

4.設(shè)置main區(qū)域右，width254px，background-color黃

案例：制作網(wǎng)頁(yè)導(dǎo)航

需求分析：

1.使用導(dǎo)入CSS樣式表

2.掌握CSS調(diào)試

步驟：

1.創(chuàng)建新的CSS文件

2.創(chuàng)建HTML文件

3.在HTML文件中使用外部引用樣式表

4.設(shè)置導(dǎo)航div類選擇器

5.設(shè)置菜單id選擇器

6.設(shè)置7個(gè)欄目的鏈接與類選擇器

7.在CSS文件中創(chuàng)建樣式：

a)設(shè)置body標(biāo)簽樣式，邊距去白；font-size12px；

b)設(shè)置鏈接標(biāo)簽a樣式，color黑色，文本的修飾none。

c)設(shè)置鼠標(biāo)移到a標(biāo)簽樣式hover，文本的修飾underline。

d)開(kāi)始設(shè)置頭部類選擇器，居中；width640px；左右兩側(cè)均不允許浮動(dòng)元素clear:both;

e)設(shè)置菜單id選擇器，圖像向左浮動(dòng)；背景圖片dd_head_bg_mid.gif；設(shè)置背景圖像的起始位置0px -63px;高27px；寬99%；行高28px；文本居中；顏值#FFF

f)設(shè)置導(dǎo)航欄目類選擇器，顏值白色#FFF；元素的 4 個(gè)內(nèi)邊距0px 4px 0px 4px （順序：上右下左）。

最近忙著搬磚，忘記更了，以后爭(zhēng)取每周都更一篇，好辣 ~周末來(lái)辣~大家浪起來(lái)~~~~~

在線咨詢

上一篇：有趣的CSS小示例：好看的皮囊千篇一律，有趣的靈魂萬(wàn)里挑一
下一篇：HTML中的定位

您的項(xiàng)目需求

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

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

前端基礎(chǔ)：HTML

ntroduction

Syntax

Tools

HTML Tags

文件標(biāo)簽

排版標(biāo)簽

HTML 注釋

<br/> 標(biāo)簽

<p> 標(biāo)簽

<hr> 標(biāo)簽

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

<div> 標(biāo)簽

<span> 標(biāo)簽

字體標(biāo)簽

<font> 標(biāo)簽

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

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

圖形標(biāo)簽

超連接標(biāo)簽

表格標(biāo)簽

表單標(biāo)簽

框架標(biāo)簽

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

<meta> 標(biāo)簽

<link>標(biāo)簽

特殊字符

?HTML DOM

Introduction

DOM Node

DOM 方法 & 屬性

DOM 事件

TML 簡(jiǎn)介

HTML 編輯器

HTML 基礎(chǔ)- 4個(gè)實(shí)例

HTML 元素

您的項(xiàng)目需求