html基礎(chǔ)標(biāo)簽大全（網(wǎng)頁(yè)開發(fā)基礎(chǔ)）

lt;hr>：畫一條直線

1.<h1></h1>~<h6></h6>

2.<meta>標(biāo)簽

（1）描述文檔類型和字符編碼

（2）提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索

例：<head>

平臺(tái)，提供各類服飾、美容、家居、數(shù)碼、……" />

</head>

3.HTML標(biāo)簽分類（方便后續(xù)的布局設(shè)計(jì)）：

塊級(jí)標(biāo)簽：顯示為“塊”狀，前后隔一行

行級(jí)標(biāo)簽：按行逐一顯示

分類好處：方便后續(xù)的布局設(shè)計(jì)

4.有序列表標(biāo)簽：ol li

5.無(wú)序列表標(biāo)簽：ul li

6.定義描述標(biāo)簽：dt是塊狀標(biāo)簽，所以常用于圖文混編的布局場(chǎng)合

<dl>

……

</dl>

7.表單form,一般和table一起使用：

<form>

<table>

<tr>

</tr>

.....

</table>

</form>

8.請(qǐng)說出實(shí)際開發(fā)常用的4種塊狀結(jié)構(gòu)是什么？

（1）.div-ui(ol)-li:常用于分類導(dǎo)航欄或者菜單等

（2）.div-dl-dt-dd:常用于圖文混編場(chǎng)合

（3）.table-tr-td:常用于圖文布局或顯示數(shù)據(jù)

（4）.form-table-tr-td：常用于布局表單，登錄，注冊(cè)……

9.圖像標(biāo)簽：

alt:當(dāng)圖片刷新不出來顯示這個(gè)文字

title:鼠標(biāo)放在圖片上顯示的文字

10.鏈接標(biāo)簽

11.特殊符號(hào)：

空格：

大于：>1、因?yàn)?lt;、>等符號(hào)在HTML中已使用，所以必須用其他符號(hào)來代替,都以分號(hào)結(jié)束（；）

小于：<

引號(hào)：&quot

版本號(hào)：?

12.各種功能表單元素

會(huì)持續(xù)更新哦！免費(fèi)學(xué)習(xí)資源。

、什么是前端

前端對(duì)于網(wǎng)站來說，通常是指網(wǎng)頁(yè)，網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)。

前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，比如 UI 設(shè)計(jì)；前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5、CSS3，以及SVG等。

前端開發(fā)的核心部分主要是：HTML，CSS，JavaScript 三個(gè)部分。

HTMLHTML 是這三者中最基礎(chǔ)的部分，相當(dāng)于是網(wǎng)頁(yè)的骨架，也就是網(wǎng)頁(yè)的結(jié)構(gòu)； CSSCSS 部分是網(wǎng)頁(yè)的表現(xiàn)形式，也可以說是網(wǎng)頁(yè)的美化，比如一個(gè)圖片的大小、位置，文字的大小顏色等； JavaScriptJavaScript 是一種動(dòng)態(tài)的腳本語(yǔ)言，負(fù)責(zé)與用戶進(jìn)行交互，增加用戶體驗(yàn)的作用。

2、網(wǎng)頁(yè)組成

一個(gè)網(wǎng)頁(yè)的組成部分主要包括下面幾個(gè)部分：文字、圖片、輸入框、視頻、音頻、超鏈接文字、圖片、輸入框、視頻、音頻、超鏈接等。

3、Web 標(biāo)準(zhǔn)

說道 Web 標(biāo)準(zhǔn)，不能不說 W3C 組織（World Wide Web Consortium），全稱為「萬(wàn)維網(wǎng)聯(lián)盟」。萬(wàn)維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。

W3C 最重要的工作是發(fā)展 Web 規(guī)范（稱為推薦，Recommendations），這些規(guī)范描述了 Web 的通信協(xié)議（比如 HTML 和 XHTML）和其他的構(gòu)建模塊。簡(jiǎn)單的說就是就是確定 Web 頁(yè)面的語(yǔ)法格式和規(guī)范的。

與之類似的一個(gè)組織是「European Computer Manufacturers Association」（ECMA組織），這個(gè)組織制定了標(biāo)準(zhǔn)的腳本語(yǔ)言規(guī)范 ECMAScript ，而 JavaScript 就參照的這個(gè)規(guī)范。

那么 Web 標(biāo)準(zhǔn)規(guī)范了下面三個(gè)部分：

HTML 標(biāo)準(zhǔn)（結(jié)構(gòu)標(biāo)準(zhǔn) ），相當(dāng)人的骨架結(jié)構(gòu)。CSS 樣式（表現(xiàn)）標(biāo)準(zhǔn) ，相當(dāng)于給人化妝變得更漂亮。JavaScript 行為標(biāo)準(zhǔn) ，相當(dāng)于人在唱歌，頁(yè)面更靈動(dòng)。

4、瀏覽器內(nèi)核

瀏覽器內(nèi)核是一個(gè)瀏覽器的核心部分，也就是「渲染引擎渲染引擎」。它的主要作用是決定一個(gè)瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫語(yǔ)法的解釋也有不同，因此同一網(wǎng)頁(yè)在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同。

這里涉及到一個(gè)「兼容性問題兼容性問題」，瀏覽器兼容性問題又被稱為網(wǎng)頁(yè)兼容性或網(wǎng)站兼容性問題，指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁(yè)間的兼容問題。所以我們?cè)诰帉懘a的時(shí)候，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對(duì)于瀏覽器軟件的開發(fā)和設(shè)計(jì)，瀏覽器對(duì)標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗(yàn)。

內(nèi)核和對(duì)應(yīng)的瀏覽器：內(nèi)核和對(duì)應(yīng)的瀏覽器：

trident : IE windows gecko : firefox 跨平臺(tái) webkit : safari/chrome presto : opera 渲染速度最快 blink : google/opera 共同開發(fā)

5、認(rèn)識(shí) HTML

HTML 全稱為：超文本標(biāo)記語(yǔ)言超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）。這里超文本就是超鏈接的意思，就是可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。

6、 HTML 結(jié)構(gòu)標(biāo)準(zhǔn)

HTML 基本結(jié)構(gòu)如下：

<!doctype html> 聲明文檔類型
<html> 根標(biāo)簽
  <head> 頭標(biāo)簽
    <title></title> 標(biāo)題標(biāo)簽
  </head>
  <body> 主體標(biāo)簽
  </body>
</html>

<!DOCTYPE html> 是告訴瀏覽器，以下文件用 HTML 哪個(gè)版本解析，這里是 HTML5 版本。<html></html> 標(biāo)簽是一個(gè)網(wǎng)頁(yè)的根標(biāo)簽，所有的標(biāo)簽都要寫在這一對(duì)根標(biāo)簽里面。<head></head> 是頭標(biāo)簽，主要是定義文檔（網(wǎng)頁(yè)）的頭部，包括完檔的屬性和信息，文檔的標(biāo)題，還可以引入 JavaScript 腳本，CSS 格式等。<body></body> 是一個(gè)文檔的主題，里面包含文檔的所有內(nèi)容，比如文本，超鏈接，圖片，表格等內(nèi)容。

7、html 標(biāo)簽分類

單標(biāo)簽 <! Doctype html> 雙標(biāo)簽 <html> </html> ，<head></head>， <title></title>

8、 html 標(biāo)簽關(guān)系分類

包含（嵌套關(guān)系） <head><title></title></head> 父子關(guān)系并列關(guān)系 <head></head><body></body> 兄弟姐妹

9、開發(fā)工具

前期學(xué)習(xí)一種語(yǔ)言的時(shí)候，開發(fā)工具很重要。Web開發(fā)工具有很多。最簡(jiǎn)單的一個(gè)開發(fā)工具就是 Windows 系統(tǒng)自帶的記事本了，但是又難用又難看，沒有語(yǔ)法高亮、代碼補(bǔ)全等功能。

那么我推薦大家使用的是「Sublime Text 3」代碼編輯器，它雖小巧精致，但有著炫酷的界面，并且有大量的插件可以使用，大大提高了代碼的編寫效率。

提到 Web 開發(fā)工具不得不提到 JebBrain 全家桶的「 Webstorm 」軟件。目前已經(jīng)被廣大 Web 開發(fā)者譽(yù)為"Web前端開發(fā)神器"、"最強(qiáng)大的HTML5編輯器"、"最智能的JavaScript IDE"等。它令人稱道的是它智能打代碼補(bǔ)全、代碼一鍵格式化、HTML 提示、聯(lián)想查詢、代碼重構(gòu)等強(qiáng)大功能。

還有近些年來崛起的【visual studio code】，已經(jīng)成為前端開發(fā)的主流工具。

建議初學(xué)者初期使用Sublime等文本編輯器，太過于智能的編輯器確實(shí)會(huì)帶給我們極大的便利，但是在帶給我們便利的同時(shí)，也會(huì)削弱我們對(duì)基礎(chǔ)知識(shí)的掌握，只有自己一個(gè)單詞一個(gè)單詞敲出來的代碼，才會(huì)讓我們記得更加牢固。

1、什么是前端
2、網(wǎng)頁(yè)組成
3、Web 標(biāo)準(zhǔn)
4、瀏覽器內(nèi)核
5、認(rèn)識(shí) HTML
6、HTML 結(jié)構(gòu)標(biāo)準(zhǔn)
7、html 標(biāo)簽分類
8、html 標(biāo)簽關(guān)系分類
9、開發(fā)工具

學(xué)習(xí)了解更多前端、互聯(lián)網(wǎng)內(nèi)容，點(diǎn)贊關(guān)注我。私信獲取完整前端學(xué)習(xí)資料。

兩天有個(gè)客戶需要把網(wǎng)頁(yè)轉(zhuǎn)為pdf，之前也沒開發(fā)過類似的工具，就在百度搜索了一波，主要有下面三種

在線轉(zhuǎn)pdf
使用瀏覽器打印功能轉(zhuǎn)pdf
使用本地軟件工具轉(zhuǎn)pdf

在線轉(zhuǎn)pdf

在百度（我一般用必應(yīng)）搜索“在線網(wǎng)頁(yè)轉(zhuǎn)pdf”就有很多可以做這個(gè)事的網(wǎng)站，免費(fèi)的如

PDF24Tools

各種pdf的操作都有，免費(fèi)使用，速度一般。

官網(wǎng)地址https://tools.pdf24.org/zh

PDF24 Tools

doctron

開源免費(fèi)項(xiàng)目，使用golang寫的，提供在線轉(zhuǎn)

官網(wǎng)地址http://doctron.lampnick.com/

doctron在線體驗(yàn)demo

還有挺多其他的，可以自己搜索，但是都不符合我的預(yù)期。

使用瀏覽器打印功能轉(zhuǎn)pdf

在瀏覽器右鍵，點(diǎn)擊打印或者ctrl+p
在彈出的打印對(duì)話框中找到目標(biāo)打印機(jī)選擇“另存為PDF”
點(diǎn)擊“保存”按鈕即可下載pdf了

使用本地軟件工具轉(zhuǎn)pdf

Doctron，這是我今天要介紹的重頭戲。

Doctron是基于Docker、無(wú)狀態(tài)、簡(jiǎn)單、快速、高質(zhì)量的文檔轉(zhuǎn)換服務(wù)。目前支持將html轉(zhuǎn)為pdf、圖片(使用chrome(Chromium)瀏覽器內(nèi)核，保證轉(zhuǎn)換質(zhì)量)。支持PDF添加水印。

使用chrome內(nèi)核保證高質(zhì)量將HTML轉(zhuǎn)為pdf/圖片。
簡(jiǎn)易部署(提供docker鏡像,Dockerfile以及k8s yaml配置文件)。支持豐富的轉(zhuǎn)換參數(shù)。轉(zhuǎn)為pdf和圖片支持自定義大小。
無(wú)狀態(tài)服務(wù)支持。

管他的，先把代碼下載下來再說

git clone https://gitcode.net/mirrors/lampnick/doctron.git

倉(cāng)庫(kù)

運(yùn)行

go build
./doctron --config conf/default.yaml

運(yùn)行截圖

轉(zhuǎn)pdf，訪問http://127.0.0.1:8080/convert/html2pdf?u=doctron&p=lampnick&url=<url>，更換鏈接中的url為你需要轉(zhuǎn)換的url即可。

轉(zhuǎn)換效果

然后就可以寫程序去批量轉(zhuǎn)換需要的網(wǎng)頁(yè)了，但是我需要轉(zhuǎn)換的網(wǎng)頁(yè)有兩個(gè)需求

1、網(wǎng)站需要會(huì)員登錄，不然只能看得到一部分

2、需要把網(wǎng)站的頭和尾去掉的

這就為難我了，不會(huì)go語(yǔ)言啊，硬著頭皮搞了，肯定有個(gè)地方打開這個(gè)url的，就去代碼慢慢找，慢慢調(diào)試，功夫不負(fù)有心人，終于找到調(diào)用的地方了。

第一步：添加網(wǎng)站用戶登錄cookie

添加cookie之前

添加cookie之后

第二步：去掉網(wǎng)站頭尾

chromedp.Evaluate(`$('.header').css("display" , "none");
		$('.btn-group').css("display" , "none");
		$('.container .container:first').css("display" , "none");
		$('.breadcrumb').css("display" , "none");
		$('.footer').css("display" , "none")`, &ins.buf),

打開網(wǎng)頁(yè)后執(zhí)行js代碼把頭尾隱藏掉

第三步：程序化，批量自動(dòng)生成pdf

public static void createPDF(String folder , String cl ,  String pdfFile, String urlhref) {
        try {
            String fileName = pdfFile.replace("/", ":");
            String filePath = folder + fileName;
            File srcFile = new File(filePath);
            File newFolder = new File("/Volumes/disk2/myproject" + File.separator + cl);
            File destFile = new File(newFolder, fileName);
            if(destFile.exists()){
                return;
            }
            if(srcFile.exists()){
                //移動(dòng)到對(duì)應(yīng)目錄
                if(!newFolder.exists()){
                    newFolder.mkdirs();
                }
                FileUtils.moveFile(srcFile , destFile);
                return;
            }
            if(!newFolder.exists()){
                newFolder.mkdirs();
            }
            String url = "http://127.0.0.1:8888/convert/html2pdf?u=doctron&p=lampnick&url="+urlhref;
            HttpEntity<String> entity = new HttpEntity<String>(null, null);
            RestTemplate restTemplate = new RestTemplate();
            ResponseEntity<byte[]> bytes = restTemplate.exchange(url, HttpMethod.GET, entity, byte[].class);
            if (bytes.getBody().length <= 100) {
                if(urlList.containsKey(urlhref)){
                    Integer failCount = urlList.get(urlhref);
                    if(failCount > 3){
                        System.out.println("下載失敗：" + cl + " / " + pdfFile +"  " + urlhref);
                        return;
                    }
                    failCount++;
                    urlList.put(urlhref , failCount);
                }else{
                    urlList.put(urlhref , 1);
                }

                createPDF(folder , cl ,  pdfFile , urlhref);
            }else{
                if (!destFile.exists()) {
                    try {
                        destFile.createNewFile();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                try (FileOutputStream out = new FileOutputStream(destFile);) {
                    out.write(bytes.getBody(), 0, bytes.getBody().length);
                    out.flush();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

最終成果：

文件夾分類存放

pdf文件

在線咨詢

上一篇：PS軟件怎么切圖，PS怎么導(dǎo)出html格式文件
下一篇：CSS-畫一個(gè)iPhone12

您的項(xiàng)目需求

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

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