學(xué)習(xí)編程入門必知：HTML 簡介—編輯器—基礎(chǔ)-4個(gè)實(shí)例—元素

TML 簡介

HTML 實(shí)例

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

嘗試一下 ?

實(shí)例解析

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

什么是HTML?

HTML 是用來描述網(wǎng)頁的一種語言。

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

HTML 標(biāo)簽

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

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

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

HTML 元素

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

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

HTML 元素:

Web 瀏覽器

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

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

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

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

<html>

<head>

</head>

<body>

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

</body>

</html>

HTML版本

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

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

版本	發(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)頁。

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

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

<!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)頁聲明類型 DOCTYPE 參考手冊。

中文編碼

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

HTML 實(shí)例

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

HTML 編輯器

HTML 編輯器推薦

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

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

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

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

Notepad++

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

步驟 1: 新建 HTML 文件

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

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合開發(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ò)展名。兩者沒有區(qū)別，完全根據(jù)您的喜好。

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

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

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

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

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

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

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

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

HTML 標(biāo)題

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

實(shí)例

嘗試一下 ?

HTML 段落

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

實(shí)例

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

嘗試一下 ?

HTML 鏈接

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

實(shí)例

嘗試一下 ?

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

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

HTML 圖像

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

實(shí)例

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

嘗試一下 ?

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

HTML 元素

HTML 文檔由 HTML 元素定義。

HTML 元素

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

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

HTML 元素語法

HTML 元素以開始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(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è)開始標(biāo)簽 <p> 以及一個(gè)結(jié)束標(biāo)簽 </p>.

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

<body> 元素:

<body>

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

</body>

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

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

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

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

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

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

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

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

HTML 空元素

沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。

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

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

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

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

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

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

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

、任務(wù)介紹：

高保真的完成下圖布局：

二、分析布局

首先要分析一下各個(gè)模塊的布局

我們依舊使用的盒子模型。

首先先分為兩個(gè)大盒子（紅色邊框）header 盒子和 content 盒子。

其中content中相對對來說比較簡單，就需要添加需要的內(nèi)容文字就好啦。

header相對于基本作業(yè)要復(fù)雜一些。

在header中首先要分為兩個(gè)盒子（綠色邊框）第一個(gè)盒子head裝的是標(biāo)題，下面的盒子info_box裝了三個(gè)盒子。包括信息盒子info、評論盒子comment_box評論盒子、分享盒子share_box。

評論盒子comment_box中分為 join div元素和 comment div元素

分享盒子share_box中分為sina （微博）qqzone（qq空間）wechat（微信）

大體的布局還是用div元素實(shí)現(xiàn)，其中信息盒子與評論盒子打算用p+span元素實(shí)現(xiàn)，分享盒子用div+“雪碧圖”實(shí)現(xiàn)。

標(biāo)題框和內(nèi)容框的距離為40px。

三、完成html代碼

根據(jù)我們上面對各個(gè)模塊布局的分析，我們接下來就可以寫html代碼啦～其中在header的info盒子，其中信息盒子與評論盒子打算用p+span元素實(shí)現(xiàn)（語義化更好一點(diǎn)），分享盒子用div+“雪碧圖”實(shí)現(xiàn)。

（這里還是有需要的改進(jìn)的地方，比如行前面的空格我是使用的空格鍵，應(yīng)該還有更好的方法，請大佬指教嘿嘿～）

代碼如下：

<html>

<head>
    <title>加分作業(yè)
    </title>

    <link rel="stylesheet" href="css/demo2.css">

</head>

<body>
    <div class="container">
        <div class="header">
            <p class="head">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
            <div class="info_box">
                <p class="info">
                    <span>2020年5月21日 08:38:23</span><br>
                    <span class="text">來源：</span>
                    <span class="sourse">蠟筆小新醬</span>
                    <span class="icon_1"> </span>
                </p>
                <div class="comment_box">
                    <p class="join"><span>0</span>人參與</p>
                    <p class="comment"><span>0</span>人評論</p>
                    </p>
                </div>
                <div class="share_box">
                    <div class="sina"></div>
                    <div class="qqzone"></div>
                    <div class="wechat"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <p><span>      我的名字是蠟筆小新，我今年五歲，我很快樂，我的媽媽是美牙，我的爸爸是廣治
            </span><br>我的朋友有</span><br/>      阿呆<br/>      風(fēng)間
                <br/>      正南<br/>      妮妮<br/>      小白<br/></p>

        </div>


    </div>
</body>

</html>

四、CSS美化

為了盡可能高保真，我們要測量一下各個(gè)模塊之間的距離。

標(biāo)題框和內(nèi)容框的距離為40px

在整個(gè)標(biāo)題盒子 header中，標(biāo)題head和信息盒子info_box之間的距離30px

在信息盒子中，來源盒子info和評論盒子comment_box的距離是228px

評論盒子comment_box和分享盒子share_box之間的像素是30px

其中來源盒子info中的時(shí)間和來源之間的像素是10px

在評論盒子中的參與和評論之間的像素為20px

在分享盒子中每個(gè)圖片之間的距離為10px

css代碼如下：

* {
    margin: 0px;
    padding: 0px;
}

.container {
    width: 670px;
    height: 800px;
    margin: auto;
}

.head {
    font: bold 24px Microsoft Yahei;
    margin-top: 40px;
}

.info {
    font: 12px Microsoft Yahei;
    color: #999;
    margin: 25px 0 5px 0;
    line-height: 20px;
    width: 350px;
}

.header {
    height: 142px;
    width: 655px;
    border-bottom: 1px solid #828181;
    display: flex;
    flex-direction: column;
}

.content p {
    line-height: 40px;
    font: Microsoft Yahei;
    color: #636363;
    margin-top: 40px;
}

.content p span {
    line-height: 15px;
}

.icon_1 {
    background: url("../img/icon_1.png") no-repeat 2px center;
    padding: 19px;
}

.info_box {
    display: flex;
}

.comment_box {
    display: flex;
    color: #999;
    margin: 40px 30px 5px 0;
}

.comment_box p {
    font: Microsoft Yahei;
    font-weight: lighter;
    font-size: 12px;
}

.share_box {
    display: flex;
    font-size: 12px;
    height: 40px;
    margin: 32px 0px 5px 0;
}

.join {
    margin: 0px 20px;
}

.qqzone {
    margin-left: 10px;
}

.wechat {
    margin-left: 10px;
}

.comment_box span {
    font-family: 'Georgia';
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: red;
}

.sina {
    background-position: 0px 0px !important;
}

.qqzone {
    background-position: 0px -32px !important;
}

.wechat {
    background-position: 0 -66px !important;
}

.share_box div {
    width: 40px;
    height: 30px;
    background: url(../img/icon_3.jpg);
}

五、CSS美化分析

1.使用行內(nèi)元素span標(biāo)簽。作為行內(nèi)元素span標(biāo)簽使用起來也很方便，作為一個(gè)小容器，可以把容器分為多個(gè)小容器，方便容器中個(gè)別部分應(yīng)用樣式，對于容器中其他部分實(shí)現(xiàn)特別的效果。其中在評論盒子中用到。如下圖。我們可以看到 0人參與 0人評論可以用p元素一行完成，但是有一個(gè)問題，“0”的字體和顏色和別的字不太一樣。我們在實(shí)現(xiàn)的過程中可以再多寫幾個(gè)div 然后重新布局但是那樣太麻煩了，直接使用行內(nèi)元素就可以搞定。

html代碼如下：

 <p class="join"><span>0</span>人參與</p>
 <p class="comment"><span>0</span>人評論</p>

css美化：

.comment_box {
    display: flex;
    color: #999;
    margin: 40px 30px 5px 0;
}
.comment_box span {
    font-family: 'Georgia';
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: red;
}

2.在分享盒子share_box中設(shè)置背景圖片的時(shí)候使用雪碧圖。

先來說一說雪碧圖是怎么回事

首先把網(wǎng)頁中一些背景圖片整合到一張圖片文件中（png格式）

再利用CSS的"background-image"引入圖片，配合"background- repeat"禁止平鋪

最后利用css的"background-position"進(jìn)行背景精確的定位出背景圖片的位置（默認(rèn)起始位置為background-position:0% 0%；如果background-position屬性值之設(shè)置一個(gè)，那么另一個(gè)默認(rèn)為center。

我們需要加載的圖片素材是這樣的

而我們最后要的效果是這樣的，是三張分開的圖片，但是都是上面圖片的一部分

此時(shí)我們就可以用雪碧圖啦～先設(shè)置 sina wechat qqzone 這三個(gè)盒子的大小并使這三個(gè)盒子都以這張雪碧圖為背景：

.share_box div {
    width: 40px;
    height: 30px;
    background: url(../img/icon_3.jpg);
}

后在各個(gè)div中使用background-position進(jìn)行定位。就是定位到我們想要的部分。

.sina {
    background-position: 0px 0px !important;
}
.qqzone {
    background-position: 0px -32px !important;
}
.wechat {
    background-position: 0 -66px !important;
}

特別要注意一點(diǎn) 在給div添加定位時(shí)，要寫！important提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。這樣才可以定位到不同圖片的坐標(biāo)。

使用雪碧圖的優(yōu)點(diǎn)：如果圖片來源于網(wǎng)頁的話，就可以減少http請求的次數(shù)，提高頁面加載速度。方便修改。

六、優(yōu)化

根據(jù)我們以上的效果，我們可以進(jìn)行一下優(yōu)化。比如添加背景圖片～或者添加鼠標(biāo)懸停的效果。

在這里，我（突發(fā)奇想）設(shè)計(jì)了此頁面的一個(gè)深色模式（其實(shí)就是把白底黑字換成暗底白色來）還有一些鼠標(biāo)懸停的效果。

添加背景圖片的css代碼如下：

.container {
    width: 670px;
    height: 500px;
    margin: auto;
    background-position: center;
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

添加鼠標(biāo)懸停效果css代碼如下：

.sourse:hover {
    color: red;
    cursor: pointer;
    text-decoration: underline;
}
.comment_box p:hover {
    cursor: pointer;
    text-decoration: underline;
    color: red;
}
.share_box div {
    cursor: pointer;
}

七：效果展示

高保真：

優(yōu)化圖：

總結(jié)和反思：

1，添加css時(shí)，一定要寫這句：

* {
    margin: 0px;
    padding: 0px;
}

否則會頁面的內(nèi)容不會貼頂，就是總是和頁面頂部有一些距離。

2，通過這次實(shí)驗(yàn)我更進(jìn)一步的體會到了盒子模型的一些特點(diǎn)，對boder margin padding 有了更深一步的理解。可以把盒子模型想成一個(gè)裝在快遞盒子里新手機(jī)盒。新手機(jī)是我們的內(nèi)容，手機(jī)和手機(jī)盒的泡沫就是padding（內(nèi)邊框），手機(jī)盒子的紙殼就是border（邊框），最后手機(jī)盒子和快遞盒子之間的距離就是margin（外邊距）。

ntroduction

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

簡單說，HTML 是由瀏覽器解析執(zhí)行的，它不會將 HTML 標(biāo)簽展示出來，而是會解析 HTML 標(biāo)簽，以特定效果展示出來。

Syntax

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

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

Tools

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

HTML Tags

文件標(biāo)簽

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

<head> 存儲的本頁面的一些重要的信息，它不會顯示

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

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

排版標(biāo)簽

HTML 注釋

<br/> 標(biāo)簽

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

<p> 標(biāo)簽

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

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

<hr> 標(biāo)簽

hr 標(biāo)簽會在頁面上產(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é)合，會更好對頁面進(jìn)行排版

<span> 標(biāo)簽

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

字體標(biāo)簽

<font> 標(biāo)簽

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

常用屬性：

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

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

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

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

使用十六進(jìn)制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）。當(dāng)顏色值為 #cc3300 時(shí)，也可以使用 #c30 這種簡化的方式來表示。
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> 對文字設(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>
<!-- 無序列表 -->
<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

圖形標(biāo)簽

<img> 可以讓我們在網(wǎng)頁引入一張圖片

常用屬性

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

超連接標(biāo)簽

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

常用屬性

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

表格標(biāo)簽

<!-- 學(xué)習(xí)表格標(biāo)簽 -->
<table border="2" align="center" width="400px">
    <caption>學(xué)生成績單</caption>
    <tr>
        <th>姓名</th>
        <th>語文成績</th>
        <th>數(shù)學(xué)成績</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)簽

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

<!-- 表單：用戶注冊案例 -->
<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">--請選擇省--</option>
                    <option value="10001">廣東</option>
                    <option value="10002">上海</option>
                    <option value="10003">山東</option>
                </select> 省
                <select name="city">
                    <option>--請選擇市--</option>
                    <option value="1000301">廣州市</option>
                    <option>深圳市</option>
                    <option>東莞市</option>
                </select> 市
            </td>
        </tr>
        <tr>
            <td>編程語言：</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="注冊"> 
                <input type="reset" value="取消"> 
            </td>
        </tr>
    </table>
</form>

框架標(biāo)簽

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

在 HTML 頁面上去描述框架信息時(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)簽

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

<link>標(biāo)簽

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

特殊字符

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

?HTML DOM

Introduction

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

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

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

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

核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
XML DOM - 針對 XML 文檔的標(biāo)準(zhǔn)模型
HTML DOM - 針對 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)彼此擁有層級關(guān)系。常用父（parent）、子（child）和同胞（sibling）等術(shù)語來描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（root）。
每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒有父節(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í)行的動作。

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

可通過 JavaScript （以及其他編程語言）對 HTML DOM 進(jìn)行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。方法是能夠執(zhí)行的動作（比如添加或修改元素）。屬性是能夠獲取或設(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ù)說明：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 對 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)頁已加載時(shí)
當(dāng)圖片已加載時(shí)
當(dāng)鼠標(biāo)移動到元素上時(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)事件，用來校驗(yàn)此文本框輸入數(shù)據(jù)的")
            }
            // 表單被提交時(shí)執(zhí)行事件
            function onSubmitFun(){
                alert("此表單已提交，這個(gè)方法也可以來作為數(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)離開某一個(gè)元素時(shí)執(zhí)行事件
            function onMouseOutFun(element){
                element.innerHTML = "鼠標(biāo)已離開H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求：當(dāng)頁面被載入時(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)移動到 H1 元素上時(shí)，修改文字，當(dāng)鼠標(biāo)移出元素時(shí)執(zhí)行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個(gè)標(biāo)題</h1>
    </body>
</html>

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

在線咨詢

上一篇：JavaScript ES6箭頭函數(shù)
下一篇：html5+canvas按鈕特效

您的項(xiàng)目需求

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

整合營銷服務(wù)商

學(xué)習(xí)編程入門必知：HTML 簡介—編輯器—基礎(chǔ)-4個(gè)實(shí)例—元素

TML 簡介

HTML 編輯器

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

HTML 元素

、任務(wù)介紹：

二、分析布局

七：效果展示

總結(jié)和反思：

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 事件

您的項(xiàng)目需求