網(wǎng)頁(yè)設(shè)計(jì)HTML零基礎(chǔ)入門(mén)

、Html概述

Html是Hyper Text Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。

二、Html標(biāo)簽語(yǔ)法

Html中標(biāo)簽分為：成對(duì)標(biāo)簽和自閉合標(biāo)簽【空標(biāo)簽】

1、成對(duì)標(biāo)簽

成對(duì)出現(xiàn)，有開(kāi)始標(biāo)簽必須有結(jié)束標(biāo)簽，內(nèi)容包裹在兩個(gè)標(biāo)簽中，而且開(kāi)始標(biāo)簽名和結(jié)束標(biāo)簽名一致,并且結(jié)束標(biāo)簽必須以斜杠/開(kāi)頭

語(yǔ)法：

<font>內(nèi)容</font>

2、自閉合標(biāo)簽

只有一個(gè)標(biāo)簽，用斜杠結(jié)束，斜杠也可以省略

語(yǔ)法：

<br/>

注意事項(xiàng)：

成對(duì)標(biāo)簽中，結(jié)束標(biāo)簽必須以斜杠開(kāi)頭
成對(duì)標(biāo)簽與成對(duì)標(biāo)簽可以嵌套不能交叉
標(biāo)簽名不區(qū)分大小寫(xiě)，但是我們都必須小寫(xiě)

三、Html基本架構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文檔聲明，定義文檔類(lèi)型為html，并且告訴不同的瀏覽器用標(biāo)準(zhǔn)方式進(jìn)行解析html語(yǔ)言，如果不寫(xiě)的話，會(huì)產(chǎn)生怪異模式，所謂怪異模式，就是瀏覽器會(huì)用自己的方式進(jìn)行解析，不同的瀏覽器有各自的解析方式，從而會(huì)出現(xiàn)無(wú)效果、不兼容等問(wèn)題。
注意，html中有兩種聲明類(lèi)型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級(jí)版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>

2、html

html是html文檔的整體，也就是表示一個(gè)網(wǎng)頁(yè)。
html中的lang="en"是定義該文件語(yǔ)言是英文

3、head

head是html的第一層子元素【子標(biāo)簽】，負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁(yè)的編碼格式，外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄中。即title標(biāo)簽。

4、meta

meta是html語(yǔ)言head標(biāo)簽中的一個(gè)輔助性標(biāo)簽，該標(biāo)簽不包含任何內(nèi)容，但是該標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱(chēng)，比如：編碼

<meta charset="utf-8"></meta>

5、body

body也是html的第一層子元素，我們頁(yè)面中顯示的所有內(nèi)容全部都是編寫(xiě)在該標(biāo)簽體中。

四、Html文檔規(guī)范

html制定了文檔的編寫(xiě)規(guī)范，必須遵守。
所有的標(biāo)簽必須小寫(xiě)
所有的屬性必須用雙引號(hào)括起來(lái)

五、Html注釋

html文檔代碼中可以插入注釋?zhuān)⑨屖菍?duì)代碼的說(shuō)明和解釋?zhuān)⑨尩膬?nèi)容不會(huì)顯示在頁(yè)面上。
注釋的語(yǔ)法：


六、html基本屬性

注：屬性是標(biāo)簽的輔助作用。

屬性描述 bgcolor 設(shè)置網(wǎng)頁(yè)的背景顏色 background 設(shè)置網(wǎng)頁(yè)的背景圖片

1.bgcolor

設(shè)置網(wǎng)頁(yè)的背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路徑

我們?cè)陂_(kāi)發(fā)網(wǎng)頁(yè)時(shí)，需要經(jīng)常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個(gè)位置就是所謂的路徑

路徑分為：

相對(duì)路徑指目標(biāo)相對(duì)于當(dāng)前文件的路徑，網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)中多采用這種方式來(lái)表示目標(biāo)的路徑。相對(duì)路徑有多種表示方法，其表示的意義不盡相同。表示方法如下： ./ ：代表文件所在的目錄（可以省略不寫(xiě)）../ ：代表文件所在的父級(jí)目錄../../ ：代表文件所在的父級(jí)目錄的父級(jí)目錄/ ：代表文件所在的根目錄【/ ：可以理解為目標(biāo)文件的絕對(duì)路徑】
絕對(duì)路徑指目標(biāo)文件的完整路徑，從盤(pán)符開(kāi)始。

3.background

設(shè)置網(wǎng)頁(yè)的背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事項(xiàng)：
bgcolor和background不能同時(shí)使用
background不能指定絕對(duì)路徑

七、Html標(biāo)簽

1.網(wǎng)頁(yè)的組成

網(wǎng)頁(yè)的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

2、文本段落標(biāo)簽

標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n：取值范圍 1~6】 center 居中對(duì)齊 hr 水平線屬性（width：寬度 color：顏色 size：粗細(xì)） br 換行 p 段落

3、文本控制標(biāo)簽

標(biāo)簽 描述 font 設(shè)置字體，需要借助屬性設(shè)置

屬性描述 color 設(shè)置字體顏色 size 設(shè)置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認(rèn)值：3】 face 設(shè)置字體風(fēng)格

<font size="2" color="red" face="黑體"></font>

4、文本格式化標(biāo)簽

標(biāo)簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號(hào)字 strong 定義加重語(yǔ)氣 sub 定義下標(biāo)字 sup 定義上標(biāo)字 ins 定義插入字 del 定義刪除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化標(biāo)簽</title>
</head>
<body>

    <b>粗體文本</b>
    <i>傾斜文本</i>
    <em>著重文本</em>
    <small>小號(hào)字</small>
    <strong>加重語(yǔ)氣</strong>
    <sub>上標(biāo)</sub>
    <sup>下標(biāo)</sup>
    <ins>插入字</ins>
    <del>刪除字</del>
    
</body>
</html>

5、圖片標(biāo)簽

在Html中，圖像由
標(biāo)簽定義。
是空標(biāo)簽，意思是說(shuō)，它只包含屬性。
要在頁(yè)面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

標(biāo)簽 描述 img 圖片標(biāo)簽

屬性描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預(yù)備文本

注意事項(xiàng)：不建議設(shè)置圖片大小，容易失真

6、audio

在Html中，聲音由標(biāo)簽定義。

標(biāo)簽 描述 audio 聲音標(biāo)簽

屬性描述 src 指定聲音地址

<audio src="nice.mp3">對(duì)不起，您的瀏覽器不支持</audio>

7、video

在Html中，視頻由video標(biāo)簽定義

標(biāo)簽 描述 video 視頻標(biāo)簽

屬性描述 src 指定視頻地址

<video src="美女.mp4">對(duì)不起，您的瀏覽器不支持</video>

8、超鏈接

a標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。
a標(biāo)簽最重要的屬性是href，它指定鏈接的目標(biāo)。
在所有瀏覽器中，鏈接的默認(rèn)外觀如下：
未被訪問(wèn)的鏈接帶有下劃線而且是藍(lán)色的
已被訪問(wèn)的鏈接帶有下劃線而且是紫色的
活動(dòng)鏈接帶有下劃線而且是紅色的

語(yǔ)法：

<a href="鏈接目標(biāo)">點(diǎn)擊內(nèi)容</a>

屬性描述 href 指定鏈接目標(biāo) name 指定錨的名稱(chēng) download 指定下載鏈接 target 指定跳轉(zhuǎn)方式屬性值描述 _blank 新窗口打開(kāi)【常用】 _parent 在父窗口中打開(kāi)鏈接【了解】 _self 默認(rèn)，在當(dāng)前窗口打開(kāi)【了解】 _top 在當(dāng)前窗體打開(kāi)鏈接，并替換當(dāng)前的整個(gè)窗體【了解】 framename 到 iframe 在講【常用】

超鏈接分類(lèi)：

內(nèi)部鏈接鏈接目標(biāo)：本地頁(yè)面 <a href="demo.html">點(diǎn)擊內(nèi)容</a>
外部鏈接鏈接目標(biāo)：外部頁(yè)面 <a href="http://www.baidu.com">點(diǎn)擊內(nèi)容</a>
多媒體鏈接鏈接目標(biāo)：圖片、視頻等 <a href="images/美女.jpg">點(diǎn)擊內(nèi)容</a>
電子郵件鏈接鏈接目標(biāo)：電子郵件【系統(tǒng)自帶的電子郵件】 <a href="mailto:12345@qq.com">點(diǎn)擊內(nèi)容</a>
錨鏈接鏈接目標(biāo)：錨點(diǎn) 1.建立錨點(diǎn)
<a name="錨點(diǎn)名"></a>

2.跳轉(zhuǎn)
<a href="#錨點(diǎn)名">點(diǎn)擊內(nèi)容</a>

9、列表

列表的使用與word等軟件的列表概念相似，只不過(guò)是應(yīng)用在網(wǎng)頁(yè)展示中。

1.有序列表

有序列表是指有數(shù)字編號(hào)或字母的列表項(xiàng)，可以使用css定義更多樣式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ol>

屬性描述 type 設(shè)置符號(hào)類(lèi)型值：1 a A I i 默認(rèn)數(shù)字 start 從第幾個(gè)開(kāi)始【用于ol標(biāo)簽中】 value 從第幾個(gè)開(kāi)始【用于li標(biāo)簽中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新聞一</li>
        <li type="1" value="1">新聞二</li>
        <li>新聞三</li>
    </ol>

2、無(wú)序列表

無(wú)序列表是指沒(méi)有數(shù)字編號(hào)或字母的列表項(xiàng)，可以使用css定義更多樣式。

<!-- 無(wú)序列表 -->
<ul>
    <li>童裝</li>
    <li>男裝</li>
    <li>女裝</li>
</ul>

屬性描述 type 用于設(shè)置符號(hào)類(lèi)型，默認(rèn)：實(shí)心圓值：空心圓、正方形【用于ul、li】

<!-- 無(wú)序列表 -->
<ul type="square">
        <li>童裝</li>
        <li type="circle">男裝</li>
        <li>女裝</li>
    </ul>

3、描述列表

描述列表指每個(gè)列表項(xiàng)有單獨(dú)的標(biāo)題。

<!-- 描述列表 -->
    <dl>
        <dt>開(kāi)源產(chǎn)品</dt>
        <dd>Java封裝庫(kù)</dd>
        <dd>Web組件庫(kù)</dd>
        
        <dt>網(wǎng)站導(dǎo)航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在網(wǎng)頁(yè)開(kāi)發(fā)中使用頻率非常高，尤其是數(shù)據(jù)展示的時(shí)候。

10.1 基本使用

標(biāo)簽 描述 table 代表表格標(biāo)簽 caption 表格標(biāo)題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

屬性描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對(duì)齊方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測(cè)試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁(yè)：1 頁(yè)</td>
                <td>上一頁(yè)</td>
                <td>下一頁(yè)</td>
                <td>尾頁(yè)</td>
                <td>共 3 頁(yè)</td>
            </tr>
        </tfoot>
    </table>

10.2 單元格合并

屬性 說(shuō)明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測(cè)試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁(yè)：1 頁(yè)</td>
                <td>上一頁(yè)</td>
                <td>下一頁(yè)</td>
                <td>尾頁(yè)</td>
                <td>共 3 頁(yè)</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>測(cè)試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁(yè)：1 頁(yè)</td>
                <td>上一頁(yè)</td>
                <td>下一頁(yè)</td>
                <td>尾頁(yè)</td>
                <td>共 3 頁(yè)</td>
            </tr>
        </tfoot>
    </table>

11、表單

表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶(hù)在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。

11.1 基本使用

表單需要使用表單標(biāo)簽來(lái)設(shè)置：

<form>
input元素
</form>

11.2 GET&POST

屬性 說(shuō)明 action 后臺(tái)地址 method 提交方式GET或POST

GET和POST區(qū)別：

1.GET

數(shù)據(jù)會(huì)顯示在地址欄中，數(shù)據(jù)不安全
數(shù)據(jù)大小有限制
數(shù)據(jù)通過(guò)請(qǐng)求頭傳遞

2.POST

數(shù)據(jù)不會(huì)顯示在地址欄中，數(shù)據(jù)安全
數(shù)據(jù)對(duì)大小無(wú)限制
數(shù)據(jù)通過(guò)實(shí)體內(nèi)容傳遞

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表單標(biāo)題，當(dāng)點(diǎn)擊標(biāo)題后文本框會(huì)獲得焦點(diǎn)，需要保證使用的ID在頁(yè)面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用戶(hù)名</label>
        <input type="text" id="username">

        <label for="password">密碼</label>
        <input type="password" id="password">
</form>

也可以將文本框放在label標(biāo)簽內(nèi)部，這樣就不需要設(shè)置id與for屬性了。

11.4 INPUT

文本框用于輸入單行文本使用，下面是常用屬性與示例。

屬性 說(shuō)明 type 表單類(lèi)型,默認(rèn)為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認(rèn)指 maxlength 允許最大輸入字符數(shù) size 表單長(zhǎng)度,一般用css來(lái)控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類(lèi)型比如:.jpg capture 使用麥克風(fēng)\視頻或攝像頭哪種方式獲取手機(jī)上傳文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用戶(hù)名</label>
        <input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶(hù)名" maxlength="5" size="50" required>
</form>

11.4.2 調(diào)用攝像頭

當(dāng)input類(lèi)型為file時(shí)手機(jī)會(huì)讓用戶(hù)選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.

<form action="后端接口" method="POST">
        <label for="file">上傳文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他類(lèi)型

通過(guò)設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.

類(lèi)型 說(shuō)明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項(xiàng) tel 電話號(hào),移動(dòng)端會(huì)調(diào)出數(shù)字鍵盤(pán) search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

11.4.4 HIDDEN

隱藏表單用于提交后臺(tái)數(shù)據(jù),但在前臺(tái)內(nèi)容不顯示所以在其上做用樣式定義也沒(méi)有意義.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺(tái),有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.

a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會(huì)提交到后臺(tái),如果有多個(gè)表單項(xiàng)可以通過(guò)這些進(jìn)行判斷是哪個(gè)表單提交的.

<input type="submit" name="submit" value="提交表單">

b.使用button也可以提交,設(shè)置type屬性為submit或不設(shè)置都可以提交表單.

<button type="submit">提交表單</button>

11.4.6 禁用表單

通過(guò)為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端

<input type="text" value="數(shù)據(jù)" readonly>

11.4.7 PATTERN

表單可以通過(guò)設(shè)置pattern屬性指定正則驗(yàn)證.

屬性 說(shuō)明 pattern 正則表達(dá)式驗(yàn)證規(guī)則 oninvalid 輸入錯(cuò)誤時(shí)觸發(fā)的事件

<form action="">
        <label for="username">用戶(hù)名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請(qǐng)輸入5~20位字母的用戶(hù)名')">
        <button>提交表單</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.

屬性 說(shuō)明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)

<textarea cols="30" rows="3">請(qǐng)踩踩我......</textarea>

11.4.9 SELECT

下拉列表項(xiàng)可用于多個(gè)值中的選擇.

屬性 說(shuō)明 multiple 支持多選 size 列表框高度 optgroup 選項(xiàng)組 selected 選中狀態(tài) option 選項(xiàng)值

<form action="">
        <select multiple size="10">
            <option value="">選擇課程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

單選框指只能選擇一個(gè)選項(xiàng)的表單,如性別的選擇:男 , 女 , 保密只能選擇一個(gè).

屬性 說(shuō)明 checked 選中狀態(tài)

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

復(fù)選框指允許選擇多個(gè)值的表單

屬性 說(shuō)明 checked 選中狀態(tài)

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認(rèn)的上傳功能,只是上傳效果并不是很美觀.

屬性 說(shuō)明 multiple 支持多選 accept 允許上傳類(lèi)型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上傳">
    </form>

11.4.13 日期時(shí)間

屬性 說(shuō)明 min 最小時(shí)間 max 最大時(shí)間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期選擇

<h1>日期選擇</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周選擇

<h1>周選擇</h1>
    <input type="week" name="" id="">

c.月份選擇

<h1>月選擇</h1>
    <input type="month" name="" id="">

d.日期與時(shí)間

<h1>日期與時(shí)間</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表單的輸入值選項(xiàng)列表

<form action="">
        <label for="username">用戶(hù)名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后臺(tái)管理語(yǔ)言</option>
            <option value="CSS">美化網(wǎng)站頁(yè)面</option>
            <option value="MYSQL">掌握數(shù)據(jù)庫(kù)使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定義一個(gè)框架集。它被用來(lái)組織多個(gè)窗口（框架），每個(gè)框架存有獨(dú)立的文檔，在其最簡(jiǎn)單的應(yīng)用中，frameset元素僅僅會(huì)規(guī)定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。

注意事項(xiàng)：由于是分割原網(wǎng)頁(yè)，所以我們不能在body中進(jìn)行編寫(xiě)，在head中進(jìn)行分割。

標(biāo)簽 說(shuō)明 frameset 框架集 frame 框架

屬性 說(shuō)明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動(dòng)條

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 導(dǎo)航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野獸</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html動(dòng)物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html鏈接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女圖片</a>
    <a href="Html野獸.html" target="view">野獸圖片</a>
    <a href="Html動(dòng)物.html" target="view">動(dòng)物圖片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、內(nèi)聯(lián)框架

iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架。

屬性 說(shuō)明 align 對(duì)齊方式，后期采用css的方式進(jìn)行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱(chēng) scrolling 是否顯示滾動(dòng)條 frameborder 設(shè)置iframe的邊框

、選擇題（1-18題各3分19-36題各2分，共92分）

1.在HTML的<TD>標(biāo)簽中，align 屬性的取值是（　C　）

A. top ; B. middle ; C. center ; D. bottom

<tr>

</tr>

<tr>

</tr>

</table>

2. CSS樣式表根據(jù)所在網(wǎng)頁(yè)的位置，可分為（ B ）

A.行內(nèi)樣式表、內(nèi)嵌樣式表、混合樣式表; B.行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表;

C.外部樣式表、內(nèi)嵌樣式表、導(dǎo)入樣式表; D.外部樣式表、混合樣式表、導(dǎo)入樣式表

行內(nèi)樣式：

<html>

<body>

</body>

</html>

-----------------------------------------------------------------

內(nèi)嵌樣式：

<html>

<head>

#div{width:100px;height:100px;background:red;}

</style>

</head>

<body>

</body>

</html>

--------------------------------------------------------------

外部樣式：

<html>

<head>

</head>

<body>

</body>

</html>

---------------------

css文件

#div{width:100px;height:100px;background:red;}

#和.區(qū)別

.點(diǎn)是使用class引用的，多個(gè)控件可以同時(shí)使用一個(gè)class，一個(gè)控件上也可以使用多個(gè)class，比如

.tdRed{border:solid 1px red;}

.tdBKBlue{background-color:blue;}

而ID是在一個(gè)頁(yè)面中唯一的

總得來(lái)說(shuō)class表示泛性的，id表示個(gè)性的

比如你所有的按鈕都是一個(gè)顏色的

.normalButton{background-color:blue;border:solid 0px black;}

對(duì)于提交按鈕會(huì)要做的大一點(diǎn)

#submit{width:100px;height:100px;}

那么你的按鈕就是

普通的按鈕就是

3. 在插入圖片標(biāo)簽中，對(duì)插入的圖片進(jìn)行文字說(shuō)明使用的屬性是（　D　）

A.name; B.id; C.src; D. alt

4. 對(duì)于<FORM action=″URL″ method=*>標(biāo)簽，其中*代表GET或（　C　）

A.SET; B. PUT; C. POST ; D. INPUT

Get和post區(qū)別

安全性：POST比GET安全；

編碼方式：POST方式提交時(shí)可以通過(guò)HTML文檔中的<META>元素設(shè)置實(shí)體部分的編碼方式，而GET方式提交時(shí)URI默認(rèn)的編碼方式為ISO-8859-1，不可以在頁(yè)面中設(shè)置；

傳輸文件大小：POST方式提交文件放在實(shí)體部分傳輸，大小無(wú)上限，而GET方式提交文件內(nèi)容放在URI部分傳輸，最大為2KB;

請(qǐng)求速度：GET比POST快。

數(shù)據(jù)傳輸方式：GET：查詢(xún)字符串（名稱(chēng)/值對(duì)）是在 GET 請(qǐng)求的 URL 中發(fā)送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查詢(xún)字符串（名稱(chēng)/值對(duì)）是在 POST 請(qǐng)求的 HTTP 消息主體中發(fā)送的。

5. 下列標(biāo)簽可以不成對(duì)出現(xiàn)的是（　B　）

A.〈HTML〉〈/HTML〉 ; B.〈P〉〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

<p>是段落標(biāo)簽。

在HTML4.01中某些標(biāo)簽（<p><br>,<hr>,<img>, <input>,<link>等）允許不成對(duì)出現(xiàn)，但是不推薦。在現(xiàn)在的瀏覽器里，都會(huì)“兼容”這些單標(biāo)簽。瀏覽器解釋<p>標(biāo)簽后，碰到一個(gè)不對(duì)應(yīng)的標(biāo)簽時(shí)，會(huì)自動(dòng)填補(bǔ)</p>。所以<p>標(biāo)簽可以單標(biāo)簽使用，但不推薦。

在HTML5中規(guī)定了元素必須始終關(guān)閉，也就是標(biāo)簽必須成對(duì)出現(xiàn)。

6. 對(duì)于標(biāo)簽〈input type=*〉，如果希望實(shí)現(xiàn)密碼框效果，*值是（ C ）

A. hidden; B.text ; C. password ; D. submit

7. HTML代碼<select name=“name”></select>表示？（ D ）

A. 創(chuàng)建表格 ; <table>

B. 創(chuàng)建一個(gè)滾動(dòng)菜單; <marquee>

C. 設(shè)置每個(gè)表單項(xiàng)的內(nèi)容;

D.創(chuàng)建一個(gè)下拉菜單

8. BODY元素用于背景顏色的屬性是（　C　）

A. alink ; B. vlink ; C. bgcolor; D. background

9. 在表單中包含性別選項(xiàng)，且默認(rèn)狀態(tài)為“男”被選中，下列正確的是（　A　）

A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

C.<input type=checkbox name=sex checked>男；

D.nput type=checkbox name=sex enabled>男

性別(單選框)：<input type="radio" value="1" name="sex" checked="checked"/>男

<input type="radio" value="2" name="sex"/>女

角色（下拉框）：<select name="role">

</select>

10. 在CSS中下面哪種方法表示超鏈接文字在鼠標(biāo)經(jīng)過(guò)時(shí)，超鏈接文字無(wú)下劃線？（　B　）

A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

11. JavaScript代碼： 'abcdefg'.indexOf('D') 結(jié)果是（ B ）

A：0 B：-1 C：3 D：4

Js常用方法

1.substr

substr(start,length)表示從start位置開(kāi)始，截取length長(zhǎng)度的字符串。

var src="images/off_1.png";

alert(src.substr(7,3));

彈出值為：off

2.substring

substring(start,end)表示從start到end之間的字符串，包括start位置的字符但是不包括end位置的字符。

var src="images/off_1.png";

alert(src.substring(7,10));

彈出值為：off

3.indexOF

indexOf() 方法返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置（從左向右）。沒(méi)有匹配的則返回-1，否則返回首次出現(xiàn)位置的字符串的下標(biāo)值。

var src="images/off_1.png";

alert(src.indexOf('t'));

alert(src.indexOf('i'));

alert(src.indexOf('g'));

彈出值依次為：-1,0,3

4.lastIndexOf

lastIndexOf()方法返回從右向左出現(xiàn)某個(gè)字符或字符串的首個(gè)字符索引值（與indexOf相反）

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

彈出值依次為：6,15

5.split

將一個(gè)字符串分割為子字符串，然后將結(jié)果作為字符串?dāng)?shù)組返回。

以空格分割返回一個(gè)子字符串返回

var s, ss;

var s = "1,2,3,4";

ss = s.split(",");

alert(ss[0]);

alert(ss[1]);

12. <img src="name">的意思是？（ A ）

A. 圖像相對(duì)于周?chē)奈谋咀髮?duì)齊; B. 圖像相對(duì)于周?chē)奈谋居覍?duì)齊;

C. 圖像相對(duì)于周?chē)奈谋镜撞繉?duì)齊; D. 圖像相對(duì)于周?chē)奈谋卷敳繉?duì)齊

13. 點(diǎn)擊按鈕，在ID為“Link”的DIV標(biāo)簽內(nèi)顯示東軟實(shí)訓(xùn)超鏈接, 下面對(duì)該按鈕的onClick事件函數(shù)描述正確的是：C

A. Link.innerText='<a ;

B. Link.outerText='<a ;

C. Link.innerHTML='<a ;

D. Link.outerHTML='<a

innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的

HTML

outerHTML 設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式

innerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本

outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本

innerText和outerText在獲取時(shí)是相同效果，但在設(shè)置時(shí)，innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerText設(shè)置包括標(biāo)簽在內(nèi)的文本

14.(“24.7” + 2.3 ) 的計(jì)算結(jié)果是（ C ）

A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

15. （ B ）事件處理程序可用于在用戶(hù)單擊按鈕時(shí)執(zhí)行函數(shù)

A. onSubmit; B. onClick; C. onChange; D. onExit

屬性當(dāng)以下情況發(fā)生時(shí)，出現(xiàn)此事件onabort圖像加載被中斷onblur元素失去焦點(diǎn)onchange用戶(hù)改變域的內(nèi)容onclick鼠標(biāo)點(diǎn)擊某個(gè)對(duì)象ondblclick鼠標(biāo)雙擊某個(gè)對(duì)象onerror當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤onfocus元素獲得焦點(diǎn)onkeydown某個(gè)鍵盤(pán)的鍵被按下onkeypress某個(gè)鍵盤(pán)的鍵被按下或按住onkeyup某個(gè)鍵盤(pán)的鍵被松開(kāi)onload某個(gè)頁(yè)面或圖像被完成加載onmousedown某個(gè)鼠標(biāo)按鍵被按下onmousemove鼠標(biāo)被移動(dòng)onmouseout鼠標(biāo)從某元素移開(kāi)onmouseover鼠標(biāo)被移到某元素之上onmouseup某個(gè)鼠標(biāo)按鍵被松開(kāi)onreset重置按鈕被點(diǎn)擊onresize窗口或框架被調(diào)整尺寸onselect文本被選定onsubmit提交按鈕被點(diǎn)擊onunload用戶(hù)退出頁(yè)面

16. 用戶(hù)更改表單元素 Select 中的值時(shí)，就會(huì)調(diào)用（ D ）事件處理程序

A. onClick; B. onFocus; C. onMouseOver; D. onChange

17.onMouseUp 事件處理程序表示（ A ）

A. 鼠標(biāo)被釋放; B. 鼠標(biāo)按下; C. 鼠標(biāo)離開(kāi)某個(gè)區(qū)域; D. 鼠標(biāo)單擊

18. 下列哪一項(xiàng)表示的不是按鈕（ C ）

A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

19.下面哪一項(xiàng)是換行符標(biāo)簽？（ C ）

A. <body>; B. <font>; C. <br>; D. <p>

font規(guī)定文本字體、大小和顏色：

20. 下列哪一項(xiàng)是在新窗口中打開(kāi)網(wǎng)頁(yè)文檔。（ B ）

A. _self; B. _blank; C. _top; D. _parent

_blank在新窗口中打開(kāi)被鏈接文檔；

_self是指在本身這個(gè)網(wǎng)頁(yè)窗口來(lái)打開(kāi)新的網(wǎng)頁(yè)鏈接；

_top表示在頂層窗口打開(kāi)網(wǎng)頁(yè)鏈接，即在整個(gè)窗口中打開(kāi)被鏈接文檔；

_parent表示在父窗口打開(kāi)網(wǎng)頁(yè)鏈接；

<a target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"

21. 下面說(shuō)法錯(cuò)誤的是( D )

A. CSS樣式表可以將格式和結(jié)構(gòu)分離;

B. CSS樣式表可以控制頁(yè)面的布局;

C. CSS樣式表可以使許多網(wǎng)頁(yè)同時(shí)更新;

D. CSS樣式表不能制作體積更小下載更快的網(wǎng)頁(yè)

CSS樣式表能為我們實(shí)現(xiàn)些什么樣的功能?

1、你可以將格式和結(jié)構(gòu)分離。

2、你可以以前所未有的能力控制頁(yè)面布局。

3、你可以制作體積更小下載更快的網(wǎng)頁(yè)。

4、你可以將許多網(wǎng)頁(yè)同時(shí)更新，比以前更快更容易。

5、瀏覽器將成為你更友好的界面

將格式和結(jié)構(gòu)分離

HTML從來(lái)沒(méi)打算控制網(wǎng)頁(yè)的格式或外觀。這種語(yǔ)言定義了網(wǎng)頁(yè)的結(jié)構(gòu)和各要素的功能，而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示。但是網(wǎng)頁(yè)設(shè)計(jì)者要求的更多。所以當(dāng) Netscape推出新的可以控制網(wǎng)頁(yè)外觀的HTML標(biāo)簽時(shí)，網(wǎng)頁(yè)設(shè)計(jì)者無(wú)不歡呼雀躍。我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格產(chǎn)生一個(gè)20象素的邊距。一切都變得亂七八糟。編碼變得越來(lái)越臃腫不堪，要想將什么內(nèi)容迅速加到網(wǎng)頁(yè)中變得越來(lái)越難。串接樣式表通過(guò)將定義結(jié)構(gòu)的部分和定義格式的部分分離使我們能夠?qū)?yè)面的布局施加更多的控制。HTML仍可以保持簡(jiǎn)單明了的初衷。CSS代碼獨(dú)立出來(lái)從另一角度控制頁(yè)面外觀。

以前所未有的能力控制頁(yè)面的布局

<FONT SIZE>能使我們調(diào)整字號(hào)，表格標(biāo)簽幫助我們生成邊距，這都沒(méi)錯(cuò)。但是，我們對(duì)HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。但是現(xiàn)在，樣式表使這一切都成為可能。

可以制作出體積更小下載更快的網(wǎng)頁(yè)還有更好的消息：

樣式表只是簡(jiǎn)單的文本，就象HTML那樣。它不需要圖象，不需要執(zhí)行程序，不需要插件，不需要流式。它就象HTML指令那樣快。有了CSS之后，以前必須求助于GIF的事情現(xiàn)在通過(guò)CSS就可以實(shí)現(xiàn)。還有，正如我先前提到的，使用串接樣式表可以減少表格標(biāo)簽及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。

可以更快更容易地維護(hù)及更新大量的網(wǎng)頁(yè)

沒(méi)有樣式表時(shí)，如果我想更新整個(gè)站點(diǎn)中所有主體文本的字體，我必須一頁(yè)一頁(yè)地修改每張網(wǎng)頁(yè)。即便站點(diǎn)用數(shù)據(jù)庫(kù)提供服務(wù)，我仍然需要更新所有的模板，而且更新每一模板中每一個(gè)實(shí)例實(shí)例的 <FONT FACE>。樣式表的主旨就是將格式和結(jié)構(gòu)分離。利于樣式表，我可以將站點(diǎn)上所有的網(wǎng) 頁(yè)都指向單一的一個(gè)CSS文件，我只要修改CSS文件中某一行，那么整個(gè)站點(diǎn) 都會(huì)隨之發(fā)生變動(dòng)。

瀏覽器將成為你更友好的界面

不象其它的的網(wǎng)絡(luò)技術(shù)，樣式表的代碼有很好的兼容性，也就是說(shuō)，如果用戶(hù) 丟失了某個(gè)插件時(shí)不會(huì)發(fā)生中斷，或者使用老版本的瀏覽器時(shí)代碼不會(huì)出現(xiàn)雜亂無(wú)章的情況。只要是可以識(shí)別串接樣式表的瀏覽器就可以應(yīng)用它。

22. 要使表格的邊框不顯示，應(yīng)設(shè)置border的值是( B )

A. 1; B. 0; C. 2; D. 3

23. 如果要在表單里創(chuàng)建一個(gè)普通文本框，以下寫(xiě)法中正確的是( A )

A. <INPUT>; B. <INPUT type="password">;

C. <INPUT type="checkbox">; D. <INPUT type="radio">

24. 以下有關(guān)按鈕的說(shuō)法中，錯(cuò)誤的是( B )

A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;

C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。

function fangfa(){

document.formname.submit();

document.formname.reset();

}

、什么是前端

前端對(duì)于網(wǎng)站來(lái)說(shuō)，通常是指網(wǎng)頁(yè)，網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā)。

前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì)，比如 UI 設(shè)計(jì)；前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5、CSS3，以及SVG等。

前端開(kāi)發(fā)的核心部分主要是：HTML，CSS，JavaScript 三個(gè)部分。

HTMLHTML 是這三者中最基礎(chǔ)的部分，相當(dāng)于是網(wǎng)頁(yè)的骨架，也就是網(wǎng)頁(yè)的結(jié)構(gòu)； CSSCSS 部分是網(wǎng)頁(yè)的表現(xiàn)形式，也可以說(shuō)是網(wǎng)頁(yè)的美化，比如一個(gè)圖片的大小、位置，文字的大小顏色等； JavaScriptJavaScript 是一種動(dòng)態(tài)的腳本語(yǔ)言，負(fù)責(zé)與用戶(hù)進(jìn)行交互，增加用戶(hù)體驗(yàn)的作用。

2、網(wǎng)頁(yè)組成

一個(gè)網(wǎng)頁(yè)的組成部分主要包括下面幾個(gè)部分：文字、圖片、輸入框、視頻、音頻、超鏈接文字、圖片、輸入框、視頻、音頻、超鏈接等。

3、Web 標(biāo)準(zhǔn)

說(shuō)道 Web 標(biāo)準(zhǔn)，不能不說(shuō) W3C 組織（World Wide Web Consortium），全稱(chēng)為「萬(wàn)維網(wǎng)聯(lián)盟」。萬(wàn)維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。

W3C 最重要的工作是發(fā)展 Web 規(guī)范（稱(chēng)為推薦，Recommendations），這些規(guī)范描述了 Web 的通信協(xié)議（比如 HTML 和 XHTML）和其他的構(gòu)建模塊。簡(jiǎn)單的說(shuō)就是就是確定 Web 頁(yè)面的語(yǔ)法格式和規(guī)范的。

與之類(lèi)似的一個(gè)組織是「European Computer Manufacturers Association」（ECMA組織），這個(gè)組織制定了標(biāo)準(zhǔn)的腳本語(yǔ)言規(guī)范 ECMAScript ，而 JavaScript 就參照的這個(gè)規(guī)范。

那么 Web 標(biāo)準(zhǔn)規(guī)范了下面三個(gè)部分：

HTML 標(biāo)準(zhǔn)（結(jié)構(gòu)標(biāo)準(zhǔn) ），相當(dāng)人的骨架結(jié)構(gòu)。CSS 樣式（表現(xiàn)）標(biāo)準(zhǔn) ，相當(dāng)于給人化妝變得更漂亮。JavaScript 行為標(biāo)準(zhǔn) ，相當(dāng)于人在唱歌，頁(yè)面更靈動(dòng)。

4、瀏覽器內(nèi)核

瀏覽器內(nèi)核是一個(gè)瀏覽器的核心部分，也就是「渲染引擎渲染引擎」。它的主要作用是決定一個(gè)瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫(xiě)語(yǔ)法的解釋也有不同，因此同一網(wǎng)頁(yè)在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同。

這里涉及到一個(gè)「兼容性問(wèn)題兼容性問(wèn)題」，瀏覽器兼容性問(wèn)題又被稱(chēng)為網(wǎng)頁(yè)兼容性或網(wǎng)站兼容性問(wèn)題，指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁(yè)間的兼容問(wèn)題。所以我們?cè)诰帉?xiě)代碼的時(shí)候，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對(duì)于瀏覽器軟件的開(kāi)發(fā)和設(shè)計(jì)，瀏覽器對(duì)標(biāo)準(zhǔn)的更好兼容能夠給用戶(hù)更好的使用體驗(yàn)。

內(nèi)核和對(duì)應(yīng)的瀏覽器：內(nèi)核和對(duì)應(yīng)的瀏覽器：

trident : IE windows gecko : firefox 跨平臺(tái) webkit : safari/chrome presto : opera 渲染速度最快 blink : google/opera 共同開(kāi)發(fā)

5、認(rèn)識(shí) HTML

HTML 全稱(chēng)為：超文本標(biāo)記語(yǔ)言超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）。這里超文本就是超鏈接的意思，就是可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。

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

HTML 基本結(jié)構(gòu)如下：

<!doctype html> 聲明文檔類(lèi)型
<html> 根標(biāo)簽
  <head> 頭標(biāo)簽
    <title></title> 標(biāo)題標(biāo)簽
  </head>
  <body> 主體標(biāo)簽
  </body>
</html>

<!DOCTYPE html> 是告訴瀏覽器，以下文件用 HTML 哪個(gè)版本解析，這里是 HTML5 版本。<html></html> 標(biāo)簽是一個(gè)網(wǎng)頁(yè)的根標(biāo)簽，所有的標(biāo)簽都要寫(xiě)在這一對(duì)根標(biāo)簽里面。<head></head> 是頭標(biāo)簽，主要是定義文檔（網(wǎng)頁(yè)）的頭部，包括完檔的屬性和信息，文檔的標(biāo)題，還可以引入 JavaScript 腳本，CSS 格式等。<body></body> 是一個(gè)文檔的主題，里面包含文檔的所有內(nèi)容，比如文本，超鏈接，圖片，表格等內(nèi)容。

7、html 標(biāo)簽分類(lèi)

單標(biāo)簽 <! Doctype html> 雙標(biāo)簽 <html> </html> ，<head></head>， <title></title>

8、 html 標(biāo)簽關(guān)系分類(lèi)

包含（嵌套關(guān)系） <head><title></title></head> 父子關(guān)系并列關(guān)系 <head></head><body></body> 兄弟姐妹

9、開(kāi)發(fā)工具

前期學(xué)習(xí)一種語(yǔ)言的時(shí)候，開(kāi)發(fā)工具很重要。Web開(kāi)發(fā)工具有很多。最簡(jiǎn)單的一個(gè)開(kāi)發(fā)工具就是 Windows 系統(tǒng)自帶的記事本了，但是又難用又難看，沒(méi)有語(yǔ)法高亮、代碼補(bǔ)全等功能。

那么我推薦大家使用的是「Sublime Text 3」代碼編輯器，它雖小巧精致，但有著炫酷的界面，并且有大量的插件可以使用，大大提高了代碼的編寫(xiě)效率。

提到 Web 開(kāi)發(fā)工具不得不提到 JebBrain 全家桶的「 Webstorm 」軟件。目前已經(jīng)被廣大 Web 開(kāi)發(fā)者譽(yù)為"Web前端開(kāi)發(fā)神器"、"最強(qiáng)大的HTML5編輯器"、"最智能的JavaScript IDE"等。它令人稱(chēng)道的是它智能打代碼補(bǔ)全、代碼一鍵格式化、HTML 提示、聯(lián)想查詢(xún)、代碼重構(gòu)等強(qiáng)大功能。

還有近些年來(lái)崛起的【visual studio code】，已經(jīng)成為前端開(kāi)發(fā)的主流工具。

建議初學(xué)者初期使用Sublime等文本編輯器，太過(guò)于智能的編輯器確實(shí)會(huì)帶給我們極大的便利，但是在帶給我們便利的同時(shí)，也會(huì)削弱我們對(duì)基礎(chǔ)知識(shí)的掌握，只有自己一個(gè)單詞一個(gè)單詞敲出來(lái)的代碼，才會(huì)讓我們記得更加牢固。

1、什么是前端
2、網(wǎng)頁(yè)組成
3、Web 標(biāo)準(zhǔn)
4、瀏覽器內(nèi)核
5、認(rèn)識(shí) HTML
6、HTML 結(jié)構(gòu)標(biāo)準(zhǔn)
7、html 標(biāo)簽分類(lèi)
8、html 標(biāo)簽關(guān)系分類(lèi)
9、開(kāi)發(fā)工具

學(xué)習(xí)了解更多前端、互聯(lián)網(wǎng)內(nèi)容，點(diǎn)贊關(guān)注我。私信獲取完整前端學(xué)習(xí)資料。

在線咨詢(xún)

上一篇：為HTML頁(yè)面添加視頻、音頻的方法-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：從0開(kāi)始通過(guò)一個(gè)商城實(shí)例手把手教你學(xué)習(xí)網(wǎng)站開(kāi)發(fā)第2章HTML基礎(chǔ)

您的項(xiàng)目需求

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

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

網(wǎng)頁(yè)設(shè)計(jì)HTML零基礎(chǔ)入門(mén)

、Html概述

二、Html標(biāo)簽語(yǔ)法

1、成對(duì)標(biāo)簽

2、自閉合標(biāo)簽

三、Html基本架構(gòu)

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標(biāo)簽

1.網(wǎng)頁(yè)的組成

2、文本段落標(biāo)簽

3、文本控制標(biāo)簽

4、文本格式化標(biāo)簽

5、圖片標(biāo)簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無(wú)序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調(diào)用攝像頭

11.4.3 其他類(lèi)型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時(shí)間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導(dǎo)航框架

13、內(nèi)聯(lián)框架

、什么是前端

2、網(wǎng)頁(yè)組成

3、Web 標(biāo)準(zhǔn)

4、瀏覽器內(nèi)核

5、認(rèn)識(shí) HTML

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

7、html 標(biāo)簽分類(lèi)

8、 html 標(biāo)簽關(guān)系分類(lèi)

9、開(kāi)發(fā)工具

您的項(xiàng)目需求