整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
天繼續(xù)說(shuō)下HTML第二講，空元素、小寫(xiě)標(biāo)簽、屬性和對(duì)應(yīng)的具體使用。
先說(shuō)下HTML 空元素:
沒(méi)有內(nèi)容的 HTML 元素被稱(chēng)為空元素。空元素是在開(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小標(biāo)簽:
HTML 標(biāo)簽對(duì)大小寫(xiě)不敏感：<P> 等同于 <p>。許多網(wǎng)站都使用大寫(xiě)的 HTML 標(biāo)簽。
HTML屬性:
屬性是 HTML 元素提供的附加信息。
屬性都包含:
HTML 元素可以設(shè)置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開(kāi)始標(biāo)簽
屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，比如：name="value"。
接著我們看一個(gè)實(shí)例:
HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定
<a href="http://www.liepin.com">這是一個(gè)鏈接</a>
我們?cè)赟ublime Text上試下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---測(cè)試開(kāi)發(fā)轉(zhuǎn)型</title>
</head>
<body>
<h>空元素</h>
<p>沒(méi)有內(nèi)容的 HTML 元素被稱(chēng)為空元素</p>
</body>
<a href ="https://www.baidu.com">這是一個(gè)招聘網(wǎng)站</a>
</html>
由于 http://www.liepin.com跳轉(zhuǎn)需要的時(shí)間有點(diǎn)長(zhǎng)，可能是家里網(wǎng)速不好， 頁(yè)面一直跳轉(zhuǎn)不成功。就修改為 www.baidu.com 這樣就可以了。點(diǎn)擊可以跳轉(zhuǎn)到新的網(wǎng)址。
HTML 屬性常用引用屬性值
屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。
雙引號(hào)是最常用的，不過(guò)使用單引號(hào)也沒(méi)有問(wèn)題。
提示: 在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么您必須使用單引號(hào)，例如：name='John "ShotGun" Nelson'
HTML 提示：使用小寫(xiě)屬性
屬性和屬性值對(duì)大小寫(xiě)不敏感。
不過(guò)，萬(wàn)維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫(xiě)的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫(xiě)屬性。
HTML 屬性參考手冊(cè)
下面列出了適用于大多數(shù) HTML 元素的屬性：
屬性描述
class 為html元素定義一個(gè)或多個(gè)類(lèi)名（classname）(類(lèi)名從樣式文件引入)
id 定義元素的唯一id
style 規(guī)定元素的行內(nèi)樣式（inline style）
title 描述了元素的額外信息 (作為工具條使用)
HTML 標(biāo)題
標(biāo)題（Heading）是通過(guò) <h1> - <h6> 標(biāo)簽進(jìn)行定義的。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
接著我們看一個(gè)實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---測(cè)試開(kāi)發(fā)轉(zhuǎn)型</title>
</head>
<body>
<h>空元素</h>
<p>沒(méi)有內(nèi)容的 HTML 元素被稱(chēng)為空元素</p>
<h1>我是最大的，你忍一下</h1>
<h2>我是老二，你也要忍一下</h2>
<h3>我是老三，我一般</h3>
<h4>我是老四，我湊合</h4>
<h5>我是老五，我忠于革命</h5>
<h6>我是老六，我是最小的，我啥也不是</h6>
</body>
<a href ="https://www.baidu.com">這是一個(gè)招聘網(wǎng)站</a>
</html>
嘗試一下 ?
注釋: 瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。
可以看出，文字是越來(lái)越小的，標(biāo)題越來(lái)越小。說(shuō)明符合要求
TML基本結(jié)構(gòu)
HTML基本結(jié)構(gòu)
網(wǎng)頁(yè)：由HTML(HyperText Markup Language)超文本標(biāo)記語(yǔ)言所組成。文件后綴一般為.htm或.html
靜態(tài)網(wǎng)頁(yè)：由html、js、css等組成，不具備交互性。后綴一般為.htm或.html
動(dòng)態(tài)網(wǎng)頁(yè)：在html中加入asp/asp.net/jsp/php等技術(shù)，使網(wǎng)頁(yè)有交互性，后綴一般為.asp/.aspx/.jsp/.php
網(wǎng)站：由一個(gè)或若干個(gè)網(wǎng)頁(yè)、圖片、音頻、視頻、動(dòng)畫(huà)、文件夾等組成的一個(gè)集合（文件夾）。
網(wǎng)站中的所有文件和文件夾均不能使用漢字命名。
首頁(yè)：也叫主頁(yè)/homepage,即打開(kāi)網(wǎng)站時(shí)默認(rèn)顯示的第一個(gè)網(wǎng)頁(yè)（http://www.XX.com,https://www.XX.cn），首頁(yè)名稱(chēng)一般為index.html或default.html
標(biāo)題標(biāo)簽：h1……h(huán)6,h1最大，h6最小
<h1>文字</h1>
……
<h6>文字</h6>
HTML注意事項(xiàng)：
1、html中的標(biāo)點(diǎn)符號(hào)必須是英文輸入法中的標(biāo)點(diǎn)符號(hào)
2、HTML標(biāo)簽不區(qū)分大小寫(xiě)，但一般習(xí)慣小寫(xiě)；Html不區(qū)分空格、空行，html標(biāo)簽和屬性、屬性和屬性之間用一個(gè)空格隔開(kāi)，如<p align=”center” style=”color:red;”>；屬性值一般放置在單引號(hào)或雙引號(hào)中。
3、html標(biāo)簽必須放置在尖括號(hào)<>中
4、html標(biāo)簽一般是成對(duì)出現(xiàn)（雙標(biāo)簽），結(jié)束標(biāo)簽在開(kāi)始標(biāo)簽的基礎(chǔ)上添加/，如<h1>……</h1>、<p>……</p>
如果是單標(biāo)簽則在右尖括號(hào)前加/，如<br />、<hr />、<img />
5、Html標(biāo)簽是包含關(guān)系，不要交叉書(shū)寫(xiě)。如<p><b><i>文字</i></b></p>,不要書(shū)寫(xiě)為<p><b><i>文字</p></b></i>
段落：<p>……</p>
分行：<br />
網(wǎng)頁(yè)中支持的圖像格式：jpg、gif、png、bmp，其中支持背景透明的有g(shù)if和png,支持動(dòng)畫(huà)的有：gif
圖像：img
<img src="./pic/guoqing.jpg" width="562" height="424" />
Src:圖像的地址。 ./當(dāng)前目錄下 ../向上退一級(jí)目錄 ../../向上退二級(jí)目錄 /根目錄
Width:寬度
Height:高度
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 是用戶(hù)與瀏覽器之間交互工具。
簡(jiǎn)單說(shuō)，HTML 是由瀏覽器解析執(zhí)行的，它不會(huì)將 HTML 標(biāo)簽展示出來(lái)，而是會(huì)解析 HTML 標(biāo)簽，以特定效果展示出來(lái)。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>可以使用 JetBrains WebStorm 或者 VS Code 進(jìn)行開(kāi)發(fā)。
<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è)面的背景圖片
<!-- 注釋不會(huì)在瀏覽器中顯示 -->
br 標(biāo)簽就是一個(gè)換行功能標(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)簽會(huì)在頁(yè)面上產(chǎn)生一個(gè)水平線
常用屬性：
align：可取值有 left right center 代表水平線位置
size：代表水平線高度（厚度）
width：代表水平線寬度
color：水平線的顏色
兩種方式:
Div 是一個(gè)塊標(biāo)簽
Div 與 CSS 結(jié)合，會(huì)更好對(duì)頁(yè)面進(jìn)行排版
Span 標(biāo)簽也是一個(gè)塊標(biāo)簽Div 與 span 區(qū)別：Div 會(huì)自動(dòng)換行，我們也叫這樣的標(biāo)簽為行級(jí)元素Span 標(biāo)簽它不會(huì)自動(dòng)換行，我們也叫它為行內(nèi)元素
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 種顏色。
<h1> 最大 <h6> 最小，它們代表的是標(biāo)題，可以使用 <b> <i> 對(duì)文字設(shè)置加粗或傾斜
注意：在 HTML 中允許標(biāo)簽進(jìn)行嵌套的，但是一般都包裹嵌套，而不可以進(jìn)行交叉嵌套
有序清單：
<!-- 有序列表 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><img> 可以讓我們?cè)诰W(wǎng)頁(yè)引入一張圖片
常用屬性
<a> 標(biāo)簽可以實(shí)現(xiàn)跳轉(zhuǎn)到其它頁(yè)面操作。超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息
常用屬性
<!-- 學(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>通過(guò)表單可以將要提交的數(shù)據(jù)提交到指定的位置
<!-- 表單：用戶(hù)注冊(cè)案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用戶(hù)名：</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>通過(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><meta> 標(biāo)簽必須寫(xiě)在 <head> 標(biāo)簽之間
使用 link 標(biāo)簽來(lái)導(dǎo)入 CSS
詳情查看菜鳥(niǎo)教程：https://www.runoob.com/charsets/ref-html-ascii.html
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 是被視為節(jié)點(diǎn)樹(shù)的 HTML。
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
HTML DOM 將 HTML 文檔視作樹(shù)結(jié)構(gòu)，這種結(jié)構(gòu)被稱(chēng)為節(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)被稱(chēng)為同胞（兄弟或姐妹）。
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)的名稱(chēng)或內(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>HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。當(dāng)事件發(fā)生時(shí)，可以執(zhí)行 JavaScript，比如發(fā)生用戶(hù)點(diǎn)擊一個(gè) HTML 元素的事件。
如需在用戶(hù)點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，可以把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript
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>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è)表單中有用戶(hù)名錄入的文本框，當(dāng)輸入完文本框的時(shí)候進(jìn)行名稱(chēng)校驗(yàn)，提交的時(shí)候彈框顯示 -->
<form onsubmit="onSubmitFun()">
用戶(hù)名：<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
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
