[編程基礎(chǔ)] 常用html標(biāo)簽使用介紹

用html標(biāo)簽使用介紹

本文主要記錄常用的html標(biāo)簽使用說(shuō)明，用起來(lái)的時(shí)候偶爾查查。

常用html標(biāo)簽列表

標(biāo)簽	英文全拼	作用	特點(diǎn)
?<html></html>??	html	網(wǎng)頁(yè)的根標(biāo)簽	所有的標(biāo)簽都要寫在這一對(duì)根標(biāo)簽里面
??<head></head>??	head	網(wǎng)頁(yè)的頭標(biāo)簽	包括完檔的屬性和信息
??<body></body>??	body	網(wǎng)頁(yè)的主題	包含文檔的所有內(nèi)容
??<div></div>??	division	定義一個(gè)區(qū)域	瀏覽器通常會(huì)在??<div>??前后放置一個(gè)換行符
??<!-- 注釋 -->??	-	注釋	單標(biāo)簽
??<br>或<br/>??	break	換行	單標(biāo)簽，不會(huì)在其前后創(chuàng)建空白行
??<hr>或<hr/>??	horizontal rule	添加水平線	單標(biāo)簽
??<img src="">??	image	添加圖片	單標(biāo)簽
??<embed src="">??	embed	嵌入外部應(yīng)用	單標(biāo)簽
??<meta>??	meta	提供有關(guān)頁(yè)面的元信息	單標(biāo)簽，??<meta>???標(biāo)簽通常位于??<head>??區(qū)域內(nèi)
??<link>??	link	定義文檔與外部資源的關(guān)系	單標(biāo)簽，??<link>???標(biāo)簽只能存在于??<head>??區(qū)域內(nèi)，不過(guò)它可出現(xiàn)任何次數(shù)。
??<p></p>??	paragraph	定義段落	自動(dòng)在其前后創(chuàng)建空白行
??<h1> to <h6>??	Header 1 to Header 6	定義標(biāo)題	h1在一個(gè)頁(yè)面里只能出現(xiàn)一次
??<strong></strong>??	strong	文本加粗	加粗標(biāo)記該文本
??<b></b>??	bold	文本加粗	加粗顯示文本，不推薦使用
??<em></em>??	emphasize	文本傾斜	傾斜標(biāo)記文本
??<i></i>??	italic	文本傾斜	傾斜顯示文本，不推薦使用
??<del></del>??	delete	文本添加刪除線	-
??<s></s>??	strike	文本添加刪除線	不推薦使用
??<ins></ins>??	insert	文本添加下劃線	-
??<u></u>??	underline	文本添加下劃線	不推薦使用
??<a href="">填寫內(nèi)容</a>??	anchor	添加超鏈接	最好使用CSS來(lái)改變鏈接的樣式
??<ul></ul>??	unordered list	定義無(wú)序列表	通常與??<li>??標(biāo)簽一起使用
??<ol></ol>??	ordered list	定義有序列表	通常與??<li>??標(biāo)簽一起使用
??<li></li>??	list item	創(chuàng)建列表項(xiàng)	可與各種列表定義標(biāo)簽一起使用
??<dl></dl>??	definition list	定義描述列表	通常與??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定義條目	定義描述列表的項(xiàng)目
??<dd></dd>??	definition description	定義描述	對(duì)描述列表中的項(xiàng)目進(jìn)行描述
??<table></table>??	table	定義HTML表格	盡可能通過(guò)樣式改變表格外觀
??<tr></tr>??	table row	定義表格的行	一個(gè)??<tr>???標(biāo)簽包含一個(gè)或多個(gè)??<th>???或??<td>??標(biāo)簽
??<th></th>??	table headline	定義表格每一列的標(biāo)題	該標(biāo)簽的文本通常呈現(xiàn)為粗體且居中
??<td></td>??	table data	定義表格中的單元格數(shù)據(jù)	該標(biāo)簽的文本呈現(xiàn)為普通且左對(duì)齊
??<caption>表格標(biāo)題</caption>??	caption	定義整個(gè)表格的標(biāo)題	??<caption>???標(biāo)簽必須直接放在??<table>??標(biāo)簽后
??<input type="">??	input	定義輸入控件	輸入字段可通過(guò)多種方式改變，取決于type屬性
??select??	select	定義下拉列表	??<select>???中的??<option>??標(biāo)簽定義了列表中的可用選項(xiàng)
??<option></option>??	option	定義下拉列表中的可用項(xiàng)	??<option>??標(biāo)簽不可自由定義寬高
??<optgroup></optgroup>??	options group	定義選項(xiàng)組	??<optgroup>??標(biāo)簽用于把相關(guān)的選項(xiàng)組合在一起
??<textarea></textarea>??	textarea	定義多行的文本輸入控件	文本的默認(rèn)字體是等寬字體
??<form></form>??	form	定義表單	??<form>??可以包含多個(gè)元素
??<fieldset></fieldset>??	field set	定義圍繞表單中元素的邊框	??<legend>???為??<fieldset>??定義標(biāo)題
??<legend></legend>??	legend	為??<fieldset>??定義標(biāo)題	??<legend>??通過(guò)css設(shè)定樣式
??<progress></progress>??	progress	定義運(yùn)行中的任務(wù)進(jìn)度	??<progress>???是HTML5中的新標(biāo)簽，??<progress>??標(biāo)簽不適合用來(lái)表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新標(biāo)簽，??<meter>??標(biāo)簽不適合用來(lái)表示進(jìn)度條
??<audio></audio>??	audio	添加音頻	??<audio>??標(biāo)簽是HTML5的新標(biāo)簽
??<video></video>??	video	添加視頻	??<video>??標(biāo)簽是HTML5的新標(biāo)簽
??<source>??	source	定義媒介資源	??<source>??標(biāo)簽是HTML5中的新標(biāo)簽

常用標(biāo)簽使用說(shuō)明

常用寫法：??<img src="" alt="" title=""width="" height=""??>
src：圖片的來(lái)源（必寫屬性）
alt：圖像不顯示時(shí)的替代文本
title：鼠標(biāo)在移動(dòng)到元素上的文本提示
width/height：圖片寬高，沒(méi)有定義寬高的時(shí)候，圖片按照百分之百比例顯示，更改圖片的寬度或者高度，圖片等比例縮放

普通用法

常用寫法：??<a href="" title="" target="">填寫內(nèi)容</a>??
href：去往的路徑（必寫屬性）
title：鼠標(biāo)在移動(dòng)到元素上的文本提示
target：規(guī)定在何處打開(kāi)路徑

_blank：新頁(yè)面打開(kāi)
_parent：在父窗口中打開(kāi)鏈接
_self：當(dāng)前頁(yè)面跳轉(zhuǎn)（默認(rèn)值）
_top：在當(dāng)前窗體打開(kāi)鏈接，并替換當(dāng)前的整個(gè)窗體

當(dāng)href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉(zhuǎn)
當(dāng)href的值為#，表示超鏈接為空鏈接，點(diǎn)擊此鏈接時(shí)會(huì)跳轉(zhuǎn)到頁(yè)首的位置

錨點(diǎn)鏈接

錨點(diǎn)鏈接通過(guò)點(diǎn)擊超鏈接，自動(dòng)跳轉(zhuǎn)到我們?cè)O(shè)置錨點(diǎn)的位置，類似于word的目錄導(dǎo)航。建立錨點(diǎn)的元素必須要有id或name屬性，最好兩個(gè)都有。這里只跳轉(zhuǎn)本頁(yè)面元素，其他頁(yè)面跳轉(zhuǎn)自行搜索。
具體做法如下：

給目標(biāo)元素設(shè)置id值，如??<p id="id1"></p>??
設(shè)置錨點(diǎn)超鏈接，錨點(diǎn)的超鏈接路徑一定包含"#"，后面緊跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。為了顯示效果，通過(guò)使用lorem自動(dòng)生成隨機(jī)文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復(fù)lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超鏈接全局設(shè)置

在頁(yè)面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

<head>
  <!-- 讓頁(yè)面所有的超鏈接新頁(yè)面打開(kāi) -->
  <base target="_blank">  
</head>

charset編碼

常用寫法： ??<meta charset="UTF-8">??
charset：定義文檔的字符編碼

ASCII/ANSI/Unicode：英語(yǔ)
GBK：亞洲通用字符集
GB2312：中文簡(jiǎn)體
Big5：臺(tái)澳港繁體
UTF-8：世界通用字符集

name

關(guān)鍵字

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁(yè)的關(guān)鍵字，盡量將重要的關(guān)鍵詞放在前面

網(wǎng)頁(yè)描述

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁(yè)的主要內(nèi)容

作者

常用寫法： ??<meta name="author" content="">??
描述：告訴搜索引擎網(wǎng)頁(yè)的作者

文件檢索

常用寫法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有時(shí)候會(huì)有一些站點(diǎn)內(nèi)容，不希望被ROBOTS抓取而公開(kāi)。為了解決這個(gè)問(wèn)題，ROBOTS開(kāi)發(fā)界提供了兩個(gè)辦法：一個(gè)是robots.txt，另一個(gè)是The Robots META標(biāo)簽。
content: 文件檢索方式

all：文件將被檢索，且頁(yè)面上的鏈接可以被查詢（默認(rèn)值）
none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢
index：文件將被檢索；
noindex：文件將不被檢索，但頁(yè)面上的鏈接可以被查詢
follow：頁(yè)面上的鏈接可以被查詢
nofollow：文件將不被檢索，頁(yè)面上的鏈接可以被查詢

網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)

常用寫法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：網(wǎng)頁(yè)5秒后自動(dòng)跳轉(zhuǎn)到谷歌主頁(yè)
url：為空則刷新本頁(yè)
常用寫法：
描述：規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。rel 是 relationship的英文縮寫（必寫屬性）
type：規(guī)定被鏈接文檔的類型
href：鏈接的文件路徑
示例：

鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
設(shè)置網(wǎng)頁(yè)icon圖標(biāo)：??<link rel="icon" href="a.ico">??

列表

無(wú)序列表

無(wú)序列表使用粗體圓點(diǎn)進(jìn)行標(biāo)記。簡(jiǎn)單示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用數(shù)字進(jìn)行標(biāo)記，我們可以通過(guò)整數(shù)值start指定列表編號(hào)的起始值。簡(jiǎn)單示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通過(guò)描述列表自定義列表，列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡(jiǎn)單示例如下。

<dl>
        <dt>A</dt> <!-- 小標(biāo)題 -->
            <dd>A1</dd> <!-- 解釋標(biāo)題 -->
            <dd>A2</dd> <!-- 解釋標(biāo)題 -->
        <dt>B</dt> <!-- 小標(biāo)題 -->
            <dd>B1</dd> <!-- 解釋標(biāo)題 -->
            <dd>B2</dd> <!-- 解釋標(biāo)題 -->
    </dl>

表格

基礎(chǔ)表格

常用寫法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格寬度
height：表格高度
border：邊框?qū)挾?/li>
cellspacing：?jiǎn)卧耖g距
cellpadding：內(nèi)容與邊框間距

簡(jiǎn)單示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標(biāo)題</caption> <!-- 定義表格標(biāo)題 -->

<tr>
    <!-- 定義表格的行 -->
    <td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定義表格的行 -->
    <th>A</th> <!-- 定義表格每一列的標(biāo)題 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

單元格合并

常用寫法：??<td colspan=“” rowspan=“”></td>??
描述：告訴表格該單元格可以橫跨colspan列，縱跨rowspan行

簡(jiǎn)單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標(biāo)題</strong></caption> <!-- 定義表格標(biāo)題 -->
<tr height="100">
    <!-- 定義表格的行 -->
    <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

對(duì)于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

文本輸入框

常用寫法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
maxlength：輸入文本長(zhǎng)度
readonly：輸入框是否只讀
disabled：輸入框是否未激活
value：輸入框默認(rèn)值

簡(jiǎn)單示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

密碼輸入框

常用寫法：??<input type="password" name="">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
密碼輸入框的其他參數(shù)和文本輸入框一樣

簡(jiǎn)單示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

單選框

常用寫法：??<input type="radio" name="" checked="checked">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
checked：設(shè)定該輸入框被預(yù)先選定
想要多個(gè)單選框只能有一個(gè)被選中，設(shè)置所有單選框的name值相同即可實(shí)現(xiàn)

示例一，兩個(gè)單選框都可以被選中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，兩個(gè)單選框只能有一個(gè)被選中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用寫法：??<select multiple=""></select>??
multiple：當(dāng)該屬性為true時(shí)，可選擇多個(gè)選項(xiàng)。

??<optgroup>??

常用寫法：??<optgroup label=""></optgroup>??
label：設(shè)定選項(xiàng)組的描述。

??<option>??

常用寫法：??<option value="" selected="">選項(xiàng)值</option>??
value：定義送往服務(wù)器的選項(xiàng)值。
selected：當(dāng)該屬性為true時(shí)，該選項(xiàng)被默認(rèn)選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認(rèn)選中 -->
  </select>

示例二，帶組合的單選下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，帶組合的多選下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多選框

常用寫法：??<input type="checkbox" checked="">??
type：規(guī)定輸入字段的類型
checked：設(shè)定該輸入框被預(yù)先選定

簡(jiǎn)單示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用寫法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可見(jiàn)文本的列數(shù)
rows：控制可見(jiàn)文本的行數(shù)
placeholder：提示字符

簡(jiǎn)單示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上傳控件

常用寫法：??<input type="file" accept=""/>??
accept：規(guī)定提交的文件的類型

簡(jiǎn)單示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他類型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網(wǎng)址控件
  <input type="date">日期控件 
  <input type="time">時(shí)間控件
  <!--email提供了郵箱的完整驗(yàn)證，必須包含@和后綴，如果不滿足驗(yàn)證，會(huì)阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數(shù)字控件
  <input type="range" step="100">滑塊控件
  <input type="color">顏色控件

表單

示例一，普通表單

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，帶分組信息表單

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

與

??<progress>???與??<meter>??主要區(qū)別和用法見(jiàn)??HTML5 progress和meter控件??

??<progress>??

常用寫法：??<progress value="" max=""></progress>??
value：規(guī)定進(jìn)程的當(dāng)前值
max：規(guī)定需要完成的值

簡(jiǎn)單示例如下。

<progress value="60" max="100"></progress>

??<meter>??

常用寫法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：規(guī)定度量的當(dāng)前值
max：規(guī)定被界定為高的值的范圍
min：規(guī)定被界定為低的值的范圍
low：規(guī)定被界定為低的值的范圍
high：規(guī)定被界定為高的值的范圍
optimum：規(guī)定度量的最優(yōu)值
具體使用見(jiàn)meter標(biāo)簽改變顏色規(guī)則

簡(jiǎn)單示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒體資源

??<audio>??

常用寫法：??<audio src="" controls autoplay loop></audio>??
src：規(guī)定音頻文件的url
controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現(xiàn)該屬性，自動(dòng)播放音頻
loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡(jiǎn)單示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用寫法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：規(guī)定視頻文件的url
width：設(shè)置視頻播放器的寬度（pixels）
height：設(shè)置視頻播放器的高度（pixels）
poster：設(shè)置視頻未播放時(shí)展示的畫面
controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現(xiàn)該屬性，自動(dòng)播放音頻
loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡(jiǎn)單示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用寫法：??<source src="" type="">??
src：規(guī)定媒體文件的url
type：規(guī)定媒體文件的類型
因?yàn)椴煌瑸g覽器支持的媒體格式不同，當(dāng)添加媒體文件時(shí)，需要考慮瀏覽器是否支持它們。我們可以準(zhǔn)備多種不同格式的媒體文件，然后使用source 標(biāo)簽，讓瀏覽器從上到下選擇支持的媒體格式

簡(jiǎn)單示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的瀏覽器不支持video元素。
  </video>

特殊字符

??HTML特殊字符編碼對(duì)照表??

參考

??HTML基礎(chǔ)??
??HTML 參考手冊(cè)??
HTML中標(biāo)簽對(duì)應(yīng)的英文
meter標(biāo)簽改變顏色規(guī)則
HTML5 progress和meter控件

述

說(shuō)起富文本編輯器，我們大都遇到過(guò)，甚至使用過(guò)，這種所見(jiàn)即所得的書(shū)寫方式，以及它靈活的排版，讓我們的創(chuàng)作更加流暢和美觀。其實(shí)你可以把它理解成是把word等軟件的功能轉(zhuǎn)成在瀏覽器里面使用，這樣就能通過(guò)其他的一些手段進(jìn)行管理，并融入到相應(yīng)系統(tǒng)中。但是由于實(shí)現(xiàn)方式和語(yǔ)言等的不同，存在著一些出入。

比如我現(xiàn)在正在使用的，也就是此刻我寫這篇文章的工具，就是一個(gè)富文本編輯器。其實(shí)富文本編輯器有很多種，它們的功能類似、產(chǎn)出目的類似、使用方式也類似，只不過(guò)在豐富程度上稍有差別，今天的CKEditor5就是其中的一款。

示意圖

可以看到，還是很好看的，美而不失實(shí)用。它的功能特別多，只不過(guò)有一些功能是要收費(fèi)的，也就是說(shuō)它只開(kāi)源了一部分，或者說(shuō)對(duì)于一些更高級(jí)的吊吊的功能你需要少買一點(diǎn)零食或者玩具。不過(guò)這些基礎(chǔ)功能已經(jīng)足夠用了，它的可插拔式插件集成功能非常強(qiáng)大。

示意圖

就像上面所示，你可以隨意的添加或刪除一個(gè)擴(kuò)展功能，下面有非常多的待繼承插件供你選擇。

示意圖

但是像上面這種的，帶有premium的插件，那你就需要支付一定的費(fèi)用才可以使用啦。

細(xì)心的你相信一眼就看出來(lái)了，這就是我們今天要講的內(nèi)容：從word中導(dǎo)入。

這是一個(gè)高級(jí)功能，雖然不是很常用，但是有一些特殊的場(chǎng)景或者需求，我們可能希望從編輯好的word中，通過(guò)導(dǎo)入的方式來(lái)讓用戶在網(wǎng)頁(yè)中繼續(xù)編輯它，并盡可能的保留內(nèi)容和格式。

一個(gè)是自己資金不是很充裕，再一個(gè)是想自己去動(dòng)手做做，因此就決定獨(dú)立實(shí)現(xiàn)這樣一個(gè)功能。自己做的，當(dāng)然可以隨便免費(fèi)用。

示例

在開(kāi)始之前，我們先看下做這個(gè)功能在完成之后需要滿足的效果，雖然這個(gè)功能官網(wǎng)是收費(fèi)的，但是為了給大家演示，官網(wǎng)也提供了示例，我們先看下官網(wǎng)的成品：

效果圖

我們先根據(jù)提示，在官網(wǎng)示例上面下載了它提供的一個(gè)word，然后用CKEditor5的導(dǎo)入word功能，把這個(gè)word導(dǎo)入到編輯器中，解析完成之后就看到了效果，它的還原度很高了，官網(wǎng)應(yīng)該是特意制作的示例word文件，里邊包含了段落、列表、圖片、表格等等多個(gè)技術(shù)點(diǎn)。這些都是我們接下來(lái)要實(shí)現(xiàn)的內(nèi)容，官網(wǎng)這復(fù)雜程度，錢花的挺值。

為了能讓大家有一個(gè)對(duì)比，這里我把原版word也展示出來(lái)給你們看一下：

效果圖

可以對(duì)比著感受下，不過(guò)還是有一些地方不太一樣的，比如我對(duì)這個(gè)原文檔做一點(diǎn)點(diǎn)更改。體現(xiàn)就稍微有一點(diǎn)略微的不同，但是這個(gè)不是毛病，只是看著有點(diǎn)別扭，我給兩張圖，先來(lái)原word的圖，這是我改過(guò)的列表：

示意圖

再來(lái)一張官網(wǎng)導(dǎo)入之后渲染的效果圖：

示意圖

主要有：1.列表距左邊的距離。2.列表項(xiàng)之間多出空白。3.不能顯示中文序號(hào)。

實(shí)現(xiàn)

我們要想實(shí)現(xiàn)這樣一個(gè)插件，首先想到有沒(méi)有現(xiàn)成的word轉(zhuǎn)html的前端或者后端插件，因?yàn)楦晃谋揪庉嬈魇强梢栽O(shè)置內(nèi)容的，并且這個(gè)內(nèi)容實(shí)質(zhì)就是html代碼，然后再在這個(gè)基礎(chǔ)上進(jìn)行集成開(kāi)發(fā)。

因?yàn)槲矣凶约旱膎ode后端，所以如果用后端做的話就找了一些關(guān)于node的word轉(zhuǎn)html插件，一共找到了docx2html、mammoth、word2html等，但是經(jīng)過(guò)測(cè)試都不太理想，于是決定放棄，換一個(gè)思路，我們可以解析word，然后根據(jù)word規(guī)范，自己生成出html。

word是流式文件，能任意編輯并且回顯，那么肯定有一套約定在里邊，能夠保存格式并重新讀取，就看它有沒(méi)有開(kāi)放給我們，幸好，docx這個(gè)x就是告訴我們，可以的，因?yàn)樗褪莤ml的意思，符合x(chóng)ml規(guī)范。

好了，我們可以找出兩個(gè)輔助插件：

第一個(gè)就是用來(lái)解壓縮用的adm-zip包。

第二個(gè)就是用來(lái)解析xml文件的xml-js包。

為什么這樣呢？這是因?yàn)橐粋€(gè)docx文件，就是一個(gè)壓縮包，我們把docx文件重命名為zip格式。然后就可以解壓看下里面的內(nèi)容：

示意圖

這就是解壓之后的目錄，里面包含著所有的word內(nèi)容，我們一會(huì)揭開(kāi)它的面紗。其中一個(gè)關(guān)鍵目錄就是word文件夾：

示意圖

可以看到有很多的xml文件，它們就規(guī)定了word的回顯機(jī)制和渲染邏輯。

還有一個(gè)media文件夾，我們看下它里面有什么：

示意圖

可以明顯的看到有兩張圖片，這兩張圖片就是我們?cè)谠瓀ord中使用的圖片，它就隱藏在這里。

另外，其中document.xml文件存儲(chǔ)了整個(gè)word的結(jié)構(gòu)和內(nèi)容，numbering.xml文件規(guī)定了列表如何渲染，styles.xml告訴了需要應(yīng)用哪些樣式。

我們就以document.xml文件做一個(gè)簡(jiǎn)單的說(shuō)明，其余不做過(guò)多展開(kāi)：

示意圖

文件前面是對(duì)該xml的一些聲明，body中包含了一個(gè)個(gè)的段落，也就是w:p。其中又包含了多個(gè)系列w:r，系列中就存儲(chǔ)著我們的文本，比如上圖紅框中我圈出的部分。

而且里面還存儲(chǔ)著段落屬性w:pPr和系列屬性w:rPr。我們就是通過(guò)對(duì)這些一對(duì)對(duì)的xml標(biāo)簽，來(lái)對(duì)word進(jìn)行解析，找出它的渲染規(guī)則。

首先使用上面提到的兩個(gè)包，非常簡(jiǎn)單：

const dir = join(process.cwd(), 'public/temp/word/' + fn)
const zip = new AdmZip(dir)
let contentXml = zip.readAsText('word/document.xml')
const documentData = xml2js(contentXml)
contentXml = zip.readAsText('word/numbering.xml')
const numberingData = contentXml ? xml2js(contentXml) : {
  elements: ''
}
contentXml = zip.readAsText('word/_rels/document.xml.rels')
const relsData = xml2js(contentXml)
contentXml = zip.readAsText('word/styles.xml')
const styleData = xml2js(contentXml)
let ent = zip.getEntries()
let ind = fn.lastIndexOf('.')
let flag = false
for(let i = 0; i < ent.length; i++) {
  let n = ent[i].entryName
  if(n.substring(0, 11) === 'word/media/') {
    flag = true
    zip.extractEntryTo(n, join(process.cwd(), 'public/temp/word/' + fn.substring(0, ind)), false, true)
  }
}
return {
  documentXML: documentData?.elements[0]?.elements[0]?.elements,
  numberingXML: numberingData?.elements[0]?.elements,
  relsXML: relsData?.elements[0]?.elements,
  styleXML: styleData?.elements[0]?.elements.slice(2),
  imagePath: fn.substring(0, ind),
}

簡(jiǎn)單對(duì)上面的代碼做一下說(shuō)明：

先說(shuō)返回值，由于我們解析完word之后，需要將xml文件讀取出來(lái)，根據(jù)語(yǔ)義再轉(zhuǎn)成html，因此我們需要整個(gè)document.xml中的內(nèi)容，因此返回documentXML，而且還要知道列表的渲染機(jī)制，因此也需要返回numberingXML，同樣我們需要獲取到文檔中用了哪些圖片，以及它們的位置，所以要返回relsXML，并且我要把對(duì)應(yīng)的圖片放到另一個(gè)地方存儲(chǔ)起來(lái)以供使用，所以也要返回imagePath，最后整個(gè)文檔的樣式，也就是styleXML也要返回。
第1行就是獲取到上傳的word路徑，這里是我自己做了一個(gè)上傳方法。
第2行通過(guò)adm-zip插件對(duì)文件進(jìn)行解壓和讀取。
第3行就是指定獲取document.xml文件的內(nèi)容。
第4行就是用xml-js對(duì)讀取到的內(nèi)容進(jìn)行解析，之后的代碼同理，只是去解析不同的文件而已。
第13行讀取該壓縮文件中的目錄結(jié)構(gòu)。
第16行至第22行就是找出word里面用到的所有圖片，并將它們存儲(chǔ)在其他位置。

至此，我們看一下目前解析完成之后，形成的數(shù)據(jù)結(jié)構(gòu)。

示意圖

很好，現(xiàn)在開(kāi)始集成：

import { Editor } from '/lib/ckeditor5/ckeditor'
import loadConfig from './config'
import filePlugin from './file'
import './style.scss'
loadConfig(Editor)
const container: any = ref(null)
let richEditor: any = null
onMounted(() => {
  Editor.create(container.value, {
    extraPlugins: [filePlugin]
  }).then((editor: any) => {
    richEditor = editor
  }).catch((error: any) => {
    console.log(error.stack)
  })
})

第1行，導(dǎo)入Editor，也就是我們一會(huì)要用的富文本編輯器，然后第9行通過(guò)create方法創(chuàng)建它，接收的兩個(gè)參數(shù)分別表示：渲染的容器與配置的插件。

因?yàn)镃KEditor5填入圖片的時(shí)候，需要自己手動(dòng)實(shí)現(xiàn)一個(gè)插件方法，因此我們要把它配置進(jìn)來(lái)，因?yàn)楦蹅円v的內(nèi)容無(wú)關(guān)，就不展開(kāi)了，官方文檔說(shuō)的很清楚了。

第5行，我在初始化編輯器之前，先去加載了一些配置，其中一個(gè)就是引入word轉(zhuǎn)pdf的功能，由于CKEditor5插件擴(kuò)展很容易，直接在Editor的builtinPlugins屬性數(shù)據(jù)里面加上我們實(shí)現(xiàn)的插件就可以，所以我們直接講插件的開(kāi)發(fā)：

import { ButtonView, Plugin } from '/lib/ckeditor5/ckeditor'
import { postData } from '@/request'
import { DocumentWordProcessorReference } from '@/common/svg'
import { serverUrl } from '@/company'
import { ElMessage } from 'element-plus'
import { arrayToMapByKey } from '@/utils'
let numberingList: any = null
let relsList: any = null
let styleList: any = null
let imageUrl: any = null
let docInfo: any = {
  author: {},
  currentAuthor: '',
  currentIndex: -1
}
const colorList = ['#d13438', '#0078d4', '#5c2e91', 'chocolate', 'aquamarine', 'lawngreen', 'hotpink', 'darkblue', 'darkslateblue', 'blueviolet', 'firebrick', 'coral', 'darkcyan', 'indigo', 'greenyellow', 'deeppink', 'indianred', 'blue', 'darkgray', 'darkmagenta', 'darkgreen', 'chartreuse', 'darksalmon', 'dimgray', 'crimson', 'darkolivegreen', 'gold', 'aqua', 'lightcoral', 'goldenrod', 'burlywood', 'green', 'darkkhaki', 'forestgreen', 'fushcia', 'darkorchid', 'deepskyblue', 'darkgoldenrod', 'cyan', 'cornflowerblue', 'brown', 'cadetblue', 'darkviolet', 'dodgerblue', 'darkred', 'gray', 'khaki', 'bisque', 'darkorange', 'darkslategray', 'lightblue', 'darkturquoise', 'darkseagreen']
let BlockType = ''

引入一些必要的組件和方法等，然后定義我們的插件，一定要繼承ckeditor5的Plugin：

export default class importFromWord extends Plugin {
}

然后首先在里面實(shí)現(xiàn)它的init方法，做一些初始化操作：

init() {
  const editor = this.editor
  editor.ui.componentFactory.add('importFromWord', () => {
    const button = new ButtonView()
    button.set({
      label: '從word導(dǎo)入',
      icon: DocumentWordProcessorReference,
      tooltip: true
    })
    button.on('execute', () => {
      this.input.click()
    })
    return button
  })
}

this.editor就是我們之前使用create創(chuàng)建好的編輯器，通過(guò)editor.ui.componentFactory.add給工具欄添加一個(gè)按鈕，也就是我們要點(diǎn)擊導(dǎo)入word的按鈕。

示意圖

這里面用到了ckeditor5的ButtonView按鈕組件生成器，設(shè)置它的名稱和圖標(biāo)，然后添加一個(gè)暴露出來(lái)的事件，當(dāng)點(diǎn)擊按鈕的時(shí)候，觸發(fā)選擇文件彈窗，這個(gè)input是我自己寫的一個(gè)文件上傳輸入框。

接下來(lái)，我們?nèi)?gòu)造函數(shù)中做一些事情，當(dāng)實(shí)例化這個(gè)組件的時(shí)候，初始化好我們需要的東西：

constructor(editor: any) {
    super(editor)
    this.editor = editor
    this.input = document.createElement('input')
    this.input.type = 'file'
    this.input.style.opacity = 0
    this.input.style.display = 'none'
    this.input.addEventListener('change', (e: any) => {
      const formData: any = new FormData()
      formData.append("upload", this.input.files[0])
      formData.Headers = {'Content-Type':'multipart/form-data'}
      let ms = ElMessage({
        message: "正在解析...",
        type: "info",
      })
      postData({
        service: "lc",
        url: `file/word`,
        data: formData,
      }).then(res => {
        ms.close()
        if (res.data) {
          ElMessage({
            message: "上傳文件成功",
            type: "success",
          })
          const { documentXML, numberingXML, relsXML, styleXML, imagePath } = res.data
          numberingList = numberingXML
          relsList = relsXML
          styleList = styleXML
          imageUrl = imagePath
          markList(documentXML)
          const html = listToHTML(documentXML)
          const ckC = this.editor.ui.view?.editable?.element
          const ckP = this.editor.ui.view?.stickyPanel?.element
          if(ckC) {
            let rt = ckC.parentNode.parentNode.parentNode
            rt.style.setProperty('--content-top', docInfo.paddingTop + 'px')
            rt.style.setProperty('--content-right', docInfo.paddingRight + 'px')
            rt.style.setProperty('--content-bottom', docInfo.paddingBottom + 'px')
            rt.style.setProperty('--content-left', docInfo.paddingLeft + 'px')
            rt.style.setProperty('--content-width', docInfo.pageWidth - docInfo.paddingLeft - docInfo.paddingRight + 'px')
          }
          if(ckP) {
            let rt = ckP.parentNode.parentNode.parentNode
            rt.style.setProperty('--sticky-width', docInfo.pageWidth + 'px')
          }
          const div = document.createElement('div')
          div.style.display = 'none'
          div.innerHTML = html
          splitList(div.firstElementChild)
          insertDivToList(div)
          document.body.appendChild(div)
          document.body.removeChild(div)
          this.editor.setData(div.innerHTML)
        } else {
          ElMessage({
            message: "上傳文件失敗",
            type: "error",
          })
        }
      })
    })
  }

在這里我們主要做了幾件事：

首先第4行到第7行定義了一個(gè)文件選擇器。

然后給這個(gè)輸入框添加了一個(gè)事件。

第9行到第20行我們讀取到選擇的文件并上傳到服務(wù)器進(jìn)行解析。

對(duì)返回回來(lái)的文檔數(shù)據(jù)，我們首先做一個(gè)標(biāo)記，以方便我們接下來(lái)的操作：

function markList(list: any) {
  let cache: any = []
  list.forEach((item: any, index: number) => {
    let isList = false
    if(item.name === 'w:p') {
      let pPr = findByName(item.elements, 'w:pPr')
      if(pPr) {
        let numPr = findByName(pPr.elements, 'w:numPr')
        if(numPr) {
          isList = true
          let ilvl = numPr.elements[0].attributes['w:val']
          let numId = numPr.elements[1].attributes['w:val']
          let c =  cache.at(-1)
          numPr.level = ilvl
          if(c) {
            if(c.ilvl === ilvl && c.numId === numId) {
              cache.pop()
            }else if(c.ilvl === ilvl && c.numId !== numId) {
              numPr.start = true
              c.numPr.end = true
              cache.pop()
            }else if(c.ilvl < ilvl && c.numId === numId) {
              numPr.start = true
              cache.pop()
            }else if(c.ilvl > ilvl && c.numId === numId) {
              c.numPr.end = true
              cache.pop()
            }else if(c.numId !== numId) {
              while(c.ilvl >= ilvl) {
                c.numPr.end = true
                c = cache.pop()
                if(!c) {
                  break
                }
              }
            }
          }else {
            numPr.start = true
          }
          cache.push({
            ilvl,
            numId,
            index,
            numPr
          })
        }
      }
    }
  })
  cache.forEach((c: any) => {
    c.numPr.end = true
  })
}

主要就是對(duì)列表進(jìn)行標(biāo)記，因?yàn)樗鲆恍┨厥饣奶幚怼?/p>

拿到數(shù)據(jù)之后，我們的核心邏輯都在第33行，實(shí)現(xiàn)listToHtml進(jìn)行處理：

function listToHTML(list: any) {
  let html = ''
  list.forEach((item: any, index: number) => {
    let info = getContainer(item)
    html += info
  })
  return html
}

遍歷每一項(xiàng)，然后把它們生成的html拼接起來(lái)：

function getContainer(item: any) {
  let html = ''
  if(item.name === 'w:p') {
    let n = findByName(item.elements, 'w:pPr')
    let el: any = null
    let pEl: any = null
    let attr: any = {}
    let style = null
    if(n) {
      let ps = findByName(n.elements, 'w:pStyle')
      if(ps) {
        let styleId = getAttributeVal(ps)
        let sy = styleList.find((item: any) => {
          return item.attributes['w:styleId'] === styleId
        })
        let ppr = findByName(sy.elements, 'w:pPr')
        let rpr = findByName(sy.elements, 'w:rPr')
        if(ppr) {
          ppr.elements.forEach((p: any) => {
            if(!findByName(n.elements, p.name)) {
              n.elements.push(p)
            }
          })
        }
        if(rpr) {
          let rs = findsByName(item.elements, 'w:r')
          rs.forEach((r: any) => {
            let rr = findByName(r.elements, 'w:rPr')
            rpr.elements.forEach((p: any) => {
              if(!findByName(rr.elements, p.name)) {
                rr.elements.push(p)
              }
            })
          })
        }
      }
      let info = getPAttribute(n.elements)
      attr = info.attr
      style = info.style
      if(attr.list) {
        let s1: any = {}
        let s2: any = {}
        for(let t in info.style) {
          if(t === 'list-style-type') {
            s1[t] = info.style[t]
          }else{
            s2[t] = info.style[t]
          }
        }
        for(let t in info.liStyle) {
          s1[t] = info.liStyle[t]
        }
        if(attr.order) {
          if(attr.start) {
            if(attr.level !== '0') {
              html += '<li style="list-style-type:none;">'
            }
            html += '<ol'
            html += addStyle(s1)
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }else {
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }
        }else{
          if(attr.start) {
            if(attr.level !== '0') {
              html += '<li style="list-style-type:none;">'
            }
            html += '<ul'
            html += addStyle(s1)
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }else {
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }
        }
      }else{
        html += '<p'
        html += addStyle(info.style)
      }
    }else{
      el = document.createElement('p')
    }
    item.elements.forEach((r: any) => {
      if(r.name === 'w:ins') {
        setAuthor(r.attributes['w:author'])
        r.elements.forEach((ins: any) => {
          html += dealWr(ins, 'ins')
        })
      }else if(r.name === 'w:hyperlink') {
        r.elements.forEach((hyp: any) => {
          html += dealWr(hyp)
        })
      }else if(r.name === 'w:r') {
        html += dealWr(r)
      }else if(r.name === 'w:commentRangeStart') {
        BlockType = 'comment'
      }else if(r.name === 'w:commentRangeEnd') {
        BlockType = ''
      }else if(r.name === 'w:del') {
        setAuthor(r.attributes['w:author'])
        r.elements.forEach((hyp: any) => {
          html += dealWr(hyp, 'del')
        })
      }
    })
    if(attr.list) {
      if(attr.order) {
        if(attr.end) {
          html += '</p></li></ol>'
          if(attr.level !== '0') {
            html += '</li>'
          }
        }else {
          html += '</p></li>'
        }
      }else{
        if(attr.end) {
          html += '</p></li></ul>'
          if(attr.level !== '0') {
            html += '</li>'
          }
        }else {
          html += '</p></li>'
        }
      }
    }else {
      html += '</p>'
    }
  }else if(item.name === 'w:tbl') {
    let n = findByName(item.elements, 'w:tblPr')
    if(n) {
      let info = getTableAttribute(n.elements)
      html += '<figure class="table"'
      html += addStyle(info.figureStyle)
      html += '<table'
      html += addStyle(info.tableStyle)
      html += '<tbody>'
    }
    item.elements.forEach((r: any) => {
      if(r.name === 'w:tr') {
        html += dealWtr(r)
      }
    })
    html += '</tbody></table></figure>'
  }else if(item.name === 'w:sectPr') {
    let ps = findByName(item.elements, 'w:pgSz')
    let pm = findByName(item.elements, 'w:pgMar')
    if(ps) {
      docInfo.pageWidth = Math.ceil(ps.attributes['w:w'] / 20 * 96 / 72) + 1
    }
    if(pm) {
      docInfo.paddingTop = pm.attributes['w:top'] / 1440 * 96
      docInfo.paddingRight = pm.attributes['w:right'] / 1440 * 96
      docInfo.paddingBottom = pm.attributes['w:bottom'] / 1440 * 96
      docInfo.paddingLeft = pm.attributes['w:left'] / 1440 * 96
    }
  }
  return html
}

做了一些邏輯判斷，和不同標(biāo)簽的特殊處理。

在剛才input事件中的第34行到47行，主要是做一些編輯器大小等外觀設(shè)置，因?yàn)橐渲贸蓋ord中的寬度與邊距。

還需要考慮到，列表可能不是連續(xù)的，中間可能被一些段落所隔開(kāi)，因此到這里還需要對(duì)生成的html中的列表進(jìn)行分割，并修復(fù)索引問(wèn)題：

function splitList(el: any) {
  while(el) {
    if(el.tagName === 'OL' || el.tagName === 'UL') {
      let a = el.querySelectorAll('ol > p, ul > p')
      let path: any = []
      a.forEach((item: any) => {
        let p: any = []
        while(item) {
          p.push(item)
          item = item.parentNode
          if(item === el) {
            break
          }
        }
        path.push(p.reverse())
      })
      let cur = el
      let t: number = 0
      path.forEach((p: any) => {
        let list = cur.cloneNode(false)
        let list2 = list
        cur.parentNode.insertBefore(list, cur)
        p.forEach((l: any, ind: number) => {
          let chi = cur.children
          let t = 0
          for(let i = 0; i < chi.length; i++) {
            if(chi[i] !== l) {
              list.append(chi[i])
              t++
              i--
            }else{
              if(cur.tagName === 'OL') {
                let s = cur.getAttribute('start')
                cur.setAttribute('start', s ? (+s + t) : (t + 1))
              }
              if(ind === p.length - 1) {
                let par = chi[i].parentNode
                el.parentNode.insertBefore(chi[i], el)
                if(par.children.length === 0) {
                  par.remove()
                }
                cur = el
              }else{
                cur.setAttribute('start', cur.getAttribute('start') - 1)
                let cl = chi[i].cloneNode(false)
                list.append(cl)
                list = cl
                cur = chi[i]
              }
              break
            }
          }
        })
      })
    }
    el = el.nextElementSibling
  }
}

并且由于CKEditor5會(huì)對(duì)相鄰的列表進(jìn)行合并等處理，這不是我們想要的，可以在它們中間插入一些div：

function insertDivToList(div: any) {
  let f = div.firstElementChild
  let k = f.nextElementSibling
  while(k) {
    if(f.tagName === 'UL' && k.tagName === 'UL') {
      let d = document.createElement('div')
      f = k
      div.insertBefore(d, f)
      k = f.nextElementSibling
    }else if(f.tagName === 'OL' && k.tagName === 'OL') {
      let d = document.createElement('p')
      d.setAttribute('list-separator', "true")
      f = k
      div.insertBefore(d, f)
      k = f.nextElementSibling
    }else {
      f = k
      k = f.nextElementSibling
    }
  }
}

最后我們用this.editor.setData方法，將剛才生成的html設(shè)置到編輯器中去。

到此我們基本就已經(jīng)把需要的功能實(shí)現(xiàn)了。

效果

該來(lái)看一下我們所做的工作成果了，首先同樣導(dǎo)入CKEditor5官網(wǎng)中的文檔：

效果圖

可以看到，內(nèi)容與格式等，基本跟原word一樣，與CKEditor5官網(wǎng)的示例也相同。然后我們?cè)儆昧硪粋€(gè)剛才修改過(guò)的文件測(cè)試一下：

效果圖

這個(gè)是用咱們剛才開(kāi)發(fā)的插件導(dǎo)入的word的效果圖，幾乎與原word一模一樣，也沒(méi)有了CKEditor官網(wǎng)中的那幾個(gè)小問(wèn)題。

至此，我們針對(duì)CKEditor5導(dǎo)入word的功能已經(jīng)開(kāi)發(fā)完畢，同時(shí)我又找了各種類型的word測(cè)試，均未發(fā)現(xiàn)問(wèn)題，還原度都非常高。

結(jié)語(yǔ)

感謝docx的規(guī)范，使得我們自己解析word成為可能，雖然不可能100%還原word的格式，但是能夠?qū)⑺鼘?dǎo)入到我們的富文本編輯器中，以進(jìn)行二次創(chuàng)作，這對(duì)我們來(lái)說(shuō)是非常方便的。

本次word轉(zhuǎn)html，并導(dǎo)入富文本編輯器的開(kāi)發(fā)過(guò)程，希望能給大家?guī)?lái)啟發(fā)。

每一次創(chuàng)作都是快樂(lè)的，每一次分享也都是有益的，希望能夠幫助到你！

謝謝

標(biāo)

文本標(biāo)簽的作用是什么？
有哪些常用的文本標(biāo)簽？
常用的文本標(biāo)簽的使用場(chǎng)合？（重點(diǎn)）
制作簡(jiǎn)單的文章

文本標(biāo)簽的作用是什么？

我們編寫網(wǎng)頁(yè)的內(nèi)容都是在body里面。

對(duì)于這樣子的文章，可以用word很輕松的實(shí)現(xiàn)出來(lái)。

一篇文章

但是如果直接將文字放到body里面，就會(huì)達(dá)不到排版的效果，因?yàn)闉g覽器會(huì)將他識(shí)別為一段話，所以我們需要給文字定義格式。

瀏覽器直接識(shí)別為一段話

常用的文本標(biāo)簽

1.標(biāo)題標(biāo)簽

作用：定義一篇文章的標(biāo)題；被搜索引擎收錄

用法：通過(guò) h1 、h2、h3、h4、h5、h6 標(biāo)簽進(jìn)行定義

<h1>你才不是一個(gè)沒(méi)有故事的女同學(xué)</h1>

注意：<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題；請(qǐng)確保將 HTML 標(biāo)題標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號(hào)的文本而使用標(biāo)題

標(biāo)題標(biāo)簽

2.段落標(biāo)簽

作用：定義一個(gè)段落

用法：通過(guò) p標(biāo)簽進(jìn)行定義

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

段落標(biāo)簽

3.換行標(biāo)簽

作用：強(qiáng)制換行

用法：通過(guò) br標(biāo)簽進(jìn)行定義

<p>我是一個(gè)<br>段落</p>

換行標(biāo)簽

4.下劃線標(biāo)簽

作用：分隔內(nèi)容

用法：通過(guò)hr標(biāo)簽進(jìn)行定義

<hr>

思維導(dǎo)圖

文本標(biāo)簽

更多前端教程，敬請(qǐng)關(guān)注微信公眾號(hào)：前端旺

在線咨詢

上一篇：css實(shí)現(xiàn)小數(shù)點(diǎn)星級(jí)評(píng)分
下一篇：一小時(shí)教會(huì)你HTML5加js打造一個(gè)響應(yīng)式炫酷動(dòng)態(tài)的太陽(yáng)系

您的項(xiàng)目需求

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

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

[編程基礎(chǔ)] 常用html標(biāo)簽使用介紹

用html標(biāo)簽使用介紹

常用html標(biāo)簽列表

常用標(biāo)簽使用說(shuō)明

列表

表格

與

多媒體資源

特殊字符

參考

述

示例

實(shí)現(xiàn)

效果

結(jié)語(yǔ)

文本標(biāo)簽的作用是什么？

常用的文本標(biāo)簽

思維導(dǎo)圖

您的項(xiàng)目需求

文本標(biāo)簽的作用是什么？