整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 文本格式化
加粗文本
斜體文本
電腦自動(dòng)輸出
這是 下標(biāo) 和 上標(biāo)
HTML 格式化標(biāo)簽
HTML 使用標(biāo)簽<b> 與<i> 對(duì)輸出的文本進(jìn)行格式, 如：粗體 or 斜體
這些HTML標(biāo)簽被稱為格式化標(biāo)簽（請(qǐng)查看底部完整標(biāo)簽參考手冊(cè)）。
| 通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來使用, <em> 替換 <i>標(biāo)簽使用。然而，這些標(biāo)簽的含義是不同的：<b> 與<i> 定義粗體或斜體文本。<strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體。不過，未來瀏覽器可能會(huì)支持更好的渲染效果。 |
在線實(shí)例
文本格式化
此例演示如何在一個(gè) HTML 文件中對(duì)文本進(jìn)行格式化
預(yù)格式文本
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。
"計(jì)算機(jī)輸出"標(biāo)簽
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
地址
此例演示如何在 HTML 文件中寫地址。
縮寫和首字母縮寫
此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。
文字方向
此例演示如何改變文字的方向。
塊引用
此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語。
刪除字效果和插入字效果
此例演示如何標(biāo)記刪除文本和插入文本。
HTML 文本格式化標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號(hào)字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標(biāo)字 |
| <sup> | 定義上標(biāo)字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
HTML "計(jì)算機(jī)輸出" 標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <code> | 定義計(jì)算機(jī)代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計(jì)算機(jī)代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預(yù)格式文本 |
HTML 引文, 引用, 及標(biāo)簽定義
| 標(biāo)簽 | 描述 |
|---|---|
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長(zhǎng)的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個(gè)定義項(xiàng)目。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
html標(biāo)題,水平線,注釋
html標(biāo)題(heading)是通過<h1>....<h6>標(biāo)簽來定義的.
根據(jù)重要性排列,<h1>定義最大的標(biāo)題,<h6>定義最小的標(biāo)題
<html>
<head>
<meta charser="utf-8">
<title>愛你的阿平</title>
</head>
<body>
<h1>這是標(biāo)題1</h1>
<h2>這是標(biāo)題2</h2>
<h3>這是標(biāo)題3</h3>
<h4>這是標(biāo)題4</h4>
<h5>這是標(biāo)題5</h5>
<h6>這是標(biāo)題6</h6>
</body>
</html>
HTML 是一種描述網(wǎng)頁語言， 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)。其中，超文本指的是網(wǎng)頁上可以包含圖片，視頻，連接信息。標(biāo)記也叫做標(biāo)簽，所以標(biāo)簽書寫的是<內(nèi)容>。語言就是一種交流工具，HTML 是用戶與瀏覽器之間交互工具。
簡(jiǎn)單說，HTML 是由瀏覽器解析執(zhí)行的，它不會(huì)將 HTML 標(biāo)簽展示出來，而是會(huì)解析 HTML 標(biāo)簽，以特定效果展示出來。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>可以使用 JetBrains WebStorm 或者 VS Code 進(jìn)行開發(fā)。
<html> 代表當(dāng)前書寫的是一個(gè) HTML 文檔
<head> 存儲(chǔ)的本頁面的一些重要的信息，它不會(huì)顯示
標(biāo)簽下有一個(gè)子標(biāo)簽 <title> 它是用于定義頁面的標(biāo)題的
<body> 書寫的內(nèi)容會(huì)顯示出來，屬性：1. text 用于設(shè)置文字顏色；2. bgcolor 用于設(shè)置頁面的背景色；3. background 用于設(shè)置頁面的背景圖片
<!-- 注釋不會(huì)在瀏覽器中顯示 -->
br 標(biāo)簽就是一個(gè)換行功能標(biāo)簽
在 p 標(biāo)簽中的內(nèi)容會(huì)在開始與結(jié)束之間產(chǎn)生一個(gè)空白行并且它會(huì)自動(dòng)換行
常用屬性 align 的作用是設(shè)置段落中的內(nèi)容對(duì)齊方式，可取值有 left right center
hr 標(biāo)簽會(huì)在頁面上產(chǎn)生一個(gè)水平線
常用屬性：
align：可取值有 left right center 代表水平線位置
size：代表水平線高度（厚度）
width：代表水平線寬度
color：水平線的顏色
兩種方式:
Div 是一個(gè)塊標(biāo)簽
Div 與 CSS 結(jié)合，會(huì)更好對(duì)頁面進(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è)置字體，例如 宋體 隸書 楷體
Size：用于設(shè)置字的大小
Color：用于設(shè)置字的顏色
我們所看到的屏幕上所有的顏色都是由紅、綠、藍(lán)這三種基色調(diào)混合而成的。每一種顏色的飽和度和透明度都是可以變化的，用 0～255 的數(shù)值來表示。如純紅色表示為 (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>
<!-- 無序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul><img> 可以讓我們?cè)诰W(wǎng)頁引入一張圖片
常用屬性
<a> 標(biāo)簽可以實(shí)現(xiàn)跳轉(zhuǎn)到其它頁面操作。超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息
常用屬性
<!-- 學(xué)習(xí)表格標(biāo)簽 -->
<table border="2" align="center" width="400px">
<caption>學(xué)生成績(jī)單</caption>
<tr>
<th>姓名</th>
<th>語文成績(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>通過表單可以將要提交的數(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>編程語言：</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)簽可以定制 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><meta> 標(biāo)簽必須寫在 <head> 標(biāo)簽之間
使用 link 標(biāo)簽來導(dǎo)入 CSS
詳情查看菜鳥教程：https://www.runoob.com/charsets/ref-html-ascii.html
DOM, Document Object Model -- 文檔對(duì)象模型，是 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é)點(diǎn)樹的 HTML。
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹。
節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。常用父（parent）、子（child）和同胞（sibling）等術(shù)語來描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。
HTML DOM 方法是可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作。
HTML DOM 屬性是可以在節(jié)點(diǎn)（HTML 元素）設(shè)置和修改的值。
可通過 JavaScript （以及其他編程語言）對(duì) HTML DOM 進(jì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ù)說明：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ā)生用戶點(diǎn)擊一個(gè) HTML 元素的事件。
如需在用戶點(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 代碼必須寫在 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)移動(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)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
