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
用Spire.Doc,可以輕松地將HTML插入到Word文檔中。下面是一個(gè)示例代碼:
import com.spire.doc.Document;
import com.spire.doc.FileFormat;
import com.spire.doc.Section;
import com.spire.doc.documents.HorizontalAlignment;
import com.spire.doc.fields.DocPicture;
import com.spire.doc.fields.HtmlLayoutType;
import com.spire.doc.fields.TextRange;
import java.io.*;
public class HtmlToWord {
public static void main(String[] args) throws Exception {
//定義文檔對(duì)象
Document doc = new Document();
//添加一個(gè)段落
Section section = doc.addSection();
TextRange tr = section.addParagraph().appendText("下面是插入HTML到Word的示例:");
tr.getCharacterFormat().setBold(true);
tr.getCharacterFormat().setFontSize(16f);
//定義HTML內(nèi)容
String htmlContent = "<html><body><h1>Hello, World!</h1><p>This is an example of inserting HTML into a Word document using Spire.Doc.</p></body></html>";
//插入HTML到Word
DocPicture htmlPicture = section.addParagraph().appendPicture(
htmlContent.getBytes(), HtmlLayoutType.Inline);
htmlPicture.setHorizontalPosition(0);
htmlPicture.setVerticalPosition(30);
htmlPicture.setWidth(520);
htmlPicture.setHeight(520 * 9 / 16);
//設(shè)置段落格式
section.getParagraphFormat().setHorizontalAlignment(HorizontalAlignment.Center);
//保存為Word文檔
doc.saveToFile("HtmlToWord.docx", FileFormat.Docx);
System.out.println("Word文檔已生成。");
}
}
在上面的代碼中,我們首先定義一個(gè)文檔對(duì)象并添加一個(gè)段落。然后定義HTML內(nèi)容,并使用 appendPicture 方法將HTML插入到Word文檔中。 HtmlLayoutType 枚舉類型可用于指定HTML的布局方式。最后,我們?cè)O(shè)置了段落格式并將文檔保存為Word格式。在輸出語句中,我們打印了一條消息以通知用戶生成文檔的完成。
嘍,大家好!今天我來分享一個(gè)超級(jí)實(shí)用的工具,讓你輕松將Word文檔轉(zhuǎn)換為HTML網(wǎng)頁,成為網(wǎng)頁編輯大師!
在工作中,我們會(huì)遇到編輯好的word文檔要在Web上顯示,但是其中的段落和圖片會(huì)錯(cuò)亂顯示,因此將Word文檔轉(zhuǎn)換成HTML格式后,便可以能夠最大限度保證在web上展示的頁面樣式。
一、Word轉(zhuǎn)HTML工具是什么?
Word轉(zhuǎn)HTML是一種工具或服務(wù),用于將Microsoft Word文檔轉(zhuǎn)換為HTML格式,以便于在網(wǎng)頁上發(fā)布、編輯或共享文件。它可以保留文檔的格式、圖像和鏈接,讓用戶可以方便地將Word文檔轉(zhuǎn)化為適用于網(wǎng)頁展示和在線編輯的HTML文件。
二、Word轉(zhuǎn)HTML工具怎么用?
打開半文魚新標(biāo)簽頁,點(diǎn)擊添加小組件,在組件庫(kù)中搜索“Word轉(zhuǎn)HTML”,立即獲取這個(gè)免費(fèi)版在線神器!
1、點(diǎn)擊左下角的“添加文件”,然后從你的電腦中找到你要轉(zhuǎn)換的Word文檔即可,你也可以直接將word文件拖入到窗口中哦~
2、等待文件上傳完畢,文件后方會(huì)顯示“上傳成功”。此時(shí)點(diǎn)擊“開始處理”按鈕,等待文件轉(zhuǎn)換完成即可。文件轉(zhuǎn)換完畢后,后方的“等待處理”字樣會(huì)變成“處理成功”,點(diǎn)擊右下角的打包下載就好了。
3、打包下載成功后,界面上會(huì)提示你“文件下載成功”。你可以在設(shè)定的輸出文件夾中找到轉(zhuǎn)換后的Markdown文件。
是不是超級(jí)簡(jiǎn)單呢?而且這個(gè)工具是完全免費(fèi)的哦!
趕快試試吧,讓你的Word文檔煥發(fā)出新的生命,成為令人驚艷的網(wǎng)頁作品!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。