html基礎標簽大全（網頁開發基礎）

lt;hr>：畫一條直線

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

2.<meta>標簽

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

（2）提供搜索關鍵字和內容描述信息，方便搜索引擎的搜索

例：<head>

平臺，提供各類服飾、美容、家居、數碼、……" />

</head>

3.HTML標簽分類（方便后續的布局設計）：

塊級標簽：顯示為“塊”狀，前后隔一行

行級標簽：按行逐一顯示

分類好處：方便后續的布局設計

4.有序列表標簽：ol li

5.無序列表標簽：ul li

6.定義描述標簽：dt是塊狀標簽，所以常用于圖文混編的布局場合

<dl>

……

</dl>

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

<form>

<table>

<tr>

</tr>

.....

</table>

</form>

8.請說出實際開發常用的4種塊狀結構是什么？

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

（2）.div-dl-dt-dd:常用于圖文混編場合

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

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

9.圖像標簽：

alt:當圖片刷新不出來顯示這個文字

title:鼠標放在圖片上顯示的文字

10.鏈接標簽

11.特殊符號：

空格：

大于：>1、因為<、>等符號在HTML中已使用，所以必須用其他符號來代替,都以分號結束（；）

小于：<

引號：&quot

版本號：?

12.各種功能表單元素

會持續更新哦！免費學習資源。

、什么是前端

前端對于網站來說，通常是指網頁，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發。

前端設計一般可以理解為網站的視覺設計，比如 UI 設計；前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高級版本HTML5、CSS3，以及SVG等。

前端開發的核心部分主要是：HTML，CSS，JavaScript 三個部分。

HTMLHTML 是這三者中最基礎的部分，相當于是網頁的骨架，也就是網頁的結構； CSSCSS 部分是網頁的表現形式，也可以說是網頁的美化，比如一個圖片的大小、位置，文字的大小顏色等； JavaScriptJavaScript 是一種動態的腳本語言，負責與用戶進行交互，增加用戶體驗的作用。

2、網頁組成

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

3、Web 標準

說道 Web 標準，不能不說 W3C 組織（World Wide Web Consortium），全稱為「萬維網聯盟」。萬維網聯盟創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。

W3C 最重要的工作是發展 Web 規范（稱為推薦，Recommendations），這些規范描述了 Web 的通信協議（比如 HTML 和 XHTML）和其他的構建模塊。簡單的說就是就是確定 Web 頁面的語法格式和規范的。

與之類似的一個組織是「European Computer Manufacturers Association」（ECMA組織），這個組織制定了標準的腳本語言規范 ECMAScript ，而 JavaScript 就參照的這個規范。

那么 Web 標準規范了下面三個部分：

HTML 標準（結構標準），相當人的骨架結構。CSS 樣式（表現）標準，相當于給人化妝變得更漂亮。JavaScript 行為標準，相當于人在唱歌，頁面更靈動。

4、瀏覽器內核

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

這里涉及到一個「兼容性問題兼容性問題」，瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。所以我們在編寫代碼的時候，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。

內核和對應的瀏覽器：內核和對應的瀏覽器：

trident : IE windows gecko : firefox 跨平臺 webkit : safari/chrome presto : opera 渲染速度最快 blink : google/opera 共同開發

5、認識 HTML

HTML 全稱為：超文本標記語言超文本標記語言（Hyper Text Markup Language）。這里超文本就是超鏈接的意思，就是可以實現頁面的跳轉。

6、 HTML 結構標準

HTML 基本結構如下：

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

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

7、html 標簽分類

單標簽 <! Doctype html> 雙標簽 <html> </html> ，<head></head>， <title></title>

8、 html 標簽關系分類

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

9、開發工具

前期學習一種語言的時候，開發工具很重要。Web開發工具有很多。最簡單的一個開發工具就是 Windows 系統自帶的記事本了，但是又難用又難看，沒有語法高亮、代碼補全等功能。

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

提到 Web 開發工具不得不提到 JebBrain 全家桶的「 Webstorm 」軟件。目前已經被廣大 Web 開發者譽為"Web前端開發神器"、"最強大的HTML5編輯器"、"最智能的JavaScript IDE"等。它令人稱道的是它智能打代碼補全、代碼一鍵格式化、HTML 提示、聯想查詢、代碼重構等強大功能。

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

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

1、什么是前端
2、網頁組成
3、Web 標準
4、瀏覽器內核
5、認識 HTML
6、HTML 結構標準
7、html 標簽分類
8、html 標簽關系分類
9、開發工具

學習了解更多前端、互聯網內容，點贊關注我。私信獲取完整前端學習資料。

兩天有個客戶需要把網頁轉為pdf，之前也沒開發過類似的工具，就在百度搜索了一波，主要有下面三種

在線轉pdf
使用瀏覽器打印功能轉pdf
使用本地軟件工具轉pdf

在線轉pdf

在百度（我一般用必應）搜索“在線網頁轉pdf”就有很多可以做這個事的網站，免費的如

PDF24Tools

各種pdf的操作都有，免費使用，速度一般。

官網地址https://tools.pdf24.org/zh

PDF24 Tools

doctron

開源免費項目，使用golang寫的，提供在線轉

官網地址http://doctron.lampnick.com/

doctron在線體驗demo

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

使用瀏覽器打印功能轉pdf

在瀏覽器右鍵，點擊打印或者ctrl+p
在彈出的打印對話框中找到目標打印機選擇“另存為PDF”
點擊“保存”按鈕即可下載pdf了

使用本地軟件工具轉pdf

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

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

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

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

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

倉庫

運行

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

運行截圖

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

轉換效果

然后就可以寫程序去批量轉換需要的網頁了，但是我需要轉換的網頁有兩個需求

1、網站需要會員登錄，不然只能看得到一部分

2、需要把網站的頭和尾去掉的

這就為難我了，不會go語言啊，硬著頭皮搞了，肯定有個地方打開這個url的，就去代碼慢慢找，慢慢調試，功夫不負有心人，終于找到調用的地方了。

第一步：添加網站用戶登錄cookie

添加cookie之前

添加cookie之后

第二步：去掉網站頭尾

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),

打開網頁后執行js代碼把頭尾隱藏掉

第三步：程序化，批量自動生成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()){
                //移動到對應目錄
                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怎么導出html格式文件
下一篇：CSS-畫一個iPhone12

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商