帶你走進(jìn)JavaScript世界系列-top、par

帶你走進(jìn)JavaScript世界系列-top、parent 和 self 對象介紹

果頁面中包含框架，則每個框架都擁有自己的 window 對象，并且保存在 frames 集合中，在frames 集合中，可以通過索引或者框架名稱來訪問相應(yīng)的 window 對象。每個 window 對象都有一個 name 屬性，其中包含框的名稱。請看下面一個包含框架的頁面：

頁面框架結(jié)構(gòu)

上面的代碼創(chuàng)建了一個框架集，其中一個框架居中，兩個框架居下。對于上面的例子，可以通過 window.frames[0] 或者 window.frames['topFrame'] 來引用上方的框架。不過，最好使用 top 而非 window 來引用這些框架。

top 對象

top 對象始終指向最高（外）層的框架，也就是瀏覽器窗口。使用它可以確保在一個框架中正確地訪問另外一個框架。因為對于在一個框架中編寫的任何代碼來說，其中的 window 對象指向的都是那個框架的特定實例，而非最高層框架，下圖展示了在最高層窗口中，通過代碼來訪問上面例子中每個框架的不同方式：

通過代碼訪問上面例子中每個框架的不同方式

parent 對象

與 top 相對另一個 window 對象是 parent。parent 對象始終指向當(dāng)前框架的直接上層框架。在某些情況下，parent 有可能等于 top；在沒有框架的情況下，parent 一定等于 top （此時它們都等于 window）。請看下面的例子：

anotherframe2.htm

在瀏覽器加載完第一個框架后，會繼續(xù)將第二個框架加載到 rightFrame 中。如果代碼位于 redFrame （或 blueFrame ）中，那么 parent 對象指向的就是 rightFrame。如果代碼位于 topFrame 中，則 parent 指向的是 top ，因為 topFrame 的直接上層框架就是最外層框架。

注意，除非最外層窗口是通過 window.open() 打開的，否則其 window 對象的 name 屬性不會包含任何值。

self 對象

與框架有關(guān)的最后一個對象是 self ，它始終指向 window 。實際上，self 和 window 對象是可以互換使用的。引入 self 對象的目的就是為了與 top 和 parent 對象對應(yīng)起來，因此它不格外包含其他值。

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)前頁面是一個 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)前書寫的是一個 HTML 文檔

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

標(biāo)簽下有一個子標(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)簽就是一個換行功能標(biāo)簽

<p> 標(biāo)簽

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

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

<hr> 標(biāo)簽

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

常用屬性：

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 是一個塊標(biāo)簽

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

<span> 標(biāo)簽

Span 標(biāo)簽也是一個塊標(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 時，也可以使用 #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 如果圖片不可以顯示時，默認(rèn)顯示的文本信息
align 圖片附件文字的對齊方式，取值有：left right middle top bottom

超連接標(biāo)簽

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

常用屬性

href 代表的要跳轉(zhuǎn)的路徑
name 屬性可以在本頁面設(shè)置一個錨點
target 這個屬性規(guī)定在何處打開這個鏈接文檔，可取值：_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 頁面上去描述框架信息時，不可以將 <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è)置頁面加載后在指定的時間后跳轉(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 個不同的部分：

核心 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é)點樹的 HTML。

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

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

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

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

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

DOM 方法 & 屬性

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

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

可通過 JavaScript （以及其他編程語言）對 HTML DOM 進(jìn)行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。方法是能夠執(zhí)行的動作（比如添加或修改元素）。屬性是能夠獲取或設(shè)置的值（比如節(jié)點的名稱或內(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="此時已是修改后的內(nèi)容"

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

            // 添加元素
            // 創(chuàng)建一個p元素
            var elementP=document.createElement("p")
            // 創(chuàng)建一個內(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)建一個新的元素
            var eleP=document.createElement("p")
            // 創(chuàng)建一個內(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.在那個元素之前添加（指定一個元素）
            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ā)生時，可以執(zhí)行 JavaScript，比如發(fā)生用戶點擊一個 HTML 元素的事件。

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

HTML 事件的例子：

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

<!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("已載入...");
            }
            // 文本框失去焦點事件
            function onBlurFun(){
                alert("此方法是文本框失去焦點事件，用來校驗此文本框輸入數(shù)據(jù)的")
            }
            // 表單被提交時執(zhí)行事件
            function onSubmitFun(){
                alert("此表單已提交，這個方法也可以來作為數(shù)據(jù)校驗的");
            }
            // 元素被改變時觸發(fā)事件
            function onChangeFun(){
                alert("文本框元素已輸入新的數(shù)據(jù)")
            }
            // 當(dāng)鼠標(biāo)懸停在某一個元素上時執(zhí)行的方法
            function onMouseOverFun(element){
                element.innerHTML="鼠標(biāo)已停在H1元素上了"
            }
            // 當(dāng)鼠標(biāo)離開某一個元素時執(zhí)行事件
            function onMouseOutFun(element){
                element.innerHTML="鼠標(biāo)已離開H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求：當(dāng)頁面被載入時，執(zhí)行一個代碼，彈框提示已載入 -->
    <body onload="onLoadFun()">
        <!-- 需求：在一個表單中有用戶名錄入的文本框，當(dāng)輸入完文本框的時候進(jìn)行名稱校驗，提交的時候彈框顯示 -->
        <form onsubmit="onSubmitFun()">
            用戶名：<input id="username" name="username" onchange="onChangeFun()" >
            <br/>
            <button type="submit">提交</button>
        </form>
        <!-- 需求：有一個 H1 標(biāo)簽元素，當(dāng)鼠標(biāo)移動到 H1 元素上時，修改文字，當(dāng)鼠標(biāo)移出元素時執(zhí)行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個標(biāo)題</h1>
    </body>
</html>

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

礎(chǔ)準(zhǔn)備

我使用的是Hbuilder編輯器，在hbuilder中創(chuàng)建一個HTML文件。

在hbuilder中運(yùn)行HTML文件

效果

HTML文檔結(jié)構(gòu)

<!DOCTYPE html>
<html>
	<head>
		<!--網(wǎng)頁的頭部 -->
	</head>
	<body>
		<!--網(wǎng)頁內(nèi)容 -->
	</body>
</html>

<!-- -->   用于注釋代碼

HTML常用標(biāo)簽

基礎(chǔ)標(biāo)簽

html 最外層的元素
head 網(wǎng)頁的頭部
title 網(wǎng)頁的標(biāo)題
body 網(wǎng)頁內(nèi)容

文本格式化

i/em 斜體
strong 加粗
q 引用
blockquote 長引用
code 元素定義編程代碼示例

<i>武漢，加油！</i>
<em>湖北,加油！</em>

<strong>武漢，加油！</strong>

<q>HX是輕量編輯器和強(qiáng)大IDE的完美結(jié)合體。敏捷的性能，清爽的界面，強(qiáng)大的功能和于一身。</q>

<blockquote>
  HX是輕量編輯器和強(qiáng)大IDE的完美結(jié)合體。敏捷的性能，清爽的界面，強(qiáng)大的功能和于一身。
</blockquote>

<code>var a=1 </code>

實驗效果

標(biāo)題段落

h1-h6 表示標(biāo)題數(shù)字越大字體越小
p 段落標(biāo)簽
hr 水平分割線
br 換行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用標(biāo)題和段落</title>
	</head>
	<body>
		
		<!-- 標(biāo)題-->
		<h1>武漢加油！</h1>
		<h2>武漢加油！</h2>
		<h3>武漢加油！</h3>
		
		<h4>武漢加油！</h4>
		<h5>武漢加油！</h5>
		<h6>武漢加油！</h6>
		
		<!--段落標(biāo)簽-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>
	
	    <hr > <!--水平分割線-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>

<!-- 換行符-->
武漢加油！武漢加油！武漢加油！武漢加油！
<br>武漢加油！武漢加油！武漢加油！
        
	</body>
</html>

塊元素

div 盒子
span 功能和div類似，span可以用來裝一小段文字和div的區(qū)別就是在一行內(nèi)顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ </i>
		
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
	</body>
</html>

最終效果

圖片

img
img標(biāo)簽必須加上 src屬性才能把圖像展示出來
alt屬性：當(dāng)圖片沒有辦法顯示的時候用來提示用戶的文字
title屬性：當(dāng)鼠標(biāo)移動到圖片的時候，用來提示用戶的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用圖片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="風(fēng)景圖" title="測試圖片" >
	</body>
</html>

鏈接

a標(biāo)簽超鏈接
href屬性：超鏈接的地址
target屬性：_blank 表示新建一個瀏覽器標(biāo)簽頁來顯示超鏈接的內(nèi)容，不會覆蓋原來的網(wǎng)頁_parentsearchtop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>

列表

ol 有序列表
ul 無序列表
li 列表項
type 定義類型
disc 實體圓點
circle 空心圓
square 實體方形
a 小寫字母（有序）
A 大寫字母（有序）
默認(rèn)數(shù)字（有序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 無序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>

表格

tablecaption 表格標(biāo)題
th 表頭
tr 行
td 單元格

在線咨詢

上一篇：Fast Video Player-超級好用的視頻格
下一篇：2025年公務(wù)員考試網(wǎng)課視頻課程資源全套百度云網(wǎng)盤分

您的項目需求

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

整合營銷服務(wù)商

帶你走進(jìn)JavaScript世界系列-top、par