HTML是什么？-零基礎自學網頁制作

TML是什么

HTML的全稱是超文本標記語言，英文全稱是HyperText Markup Language。如果您是零基礎的話，看到這個名字，即使是漢語的，估計也會不知所云。

超文本指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起，這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念，可以說網絡的精髓就在于"互聯"。

這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。（孫素華編著．Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通：中國青年出版社，2014.10：第16頁）

標記語言的概念比較復雜，簡單來說，HTML并不是程序語言（不同于C或Python），只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。

如果讀的不太明白，在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示，如果您讀不懂可以盡情的跳過，畢竟我們的重點是怎么用。

HTML基本框架

HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下：

<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

這七行代碼是所有HTML頁面所共有的，也就是HTML的框架了。不信我們來驗證一下。

例子一，頭條的文章頁面（電腦版）網址：https://www.toutiao.com/i6785149184245760516/

筆者使用Firefox（火狐）瀏覽器，輸入網址后點擊鍵盤上的F12,，如圖所示

我們可以看到頁面下半部分出現了一個調控臺。

點擊查看器即可看頁面代碼。代碼如下：

放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少，只是中間多了很多內容而已。

一個例子不具有普適性，下面我們再看一個例子，我隨便找了個新聞頁面，網址：https://mil.eastday.com/a/200125113254400.html

使用同樣的方法打開查看器看代碼，如圖：

是不是框架中的代碼一個也不少吧。

所以，大家請在自己的電腦中新建一個txt文件，將HTML框架粘貼到txt文件中，并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。

通過對框架中的代碼進行觀察，細心的讀者可能已經發現了HTML這種標記語言的書寫規律。

規律1：每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一，大家一定記牢。

規律2：除了<!DOCTYPE HTML>這個標簽外，其他標簽都是成對出現！例如<html>與</html>，<head>與</head>，<body>與</body>。

規律3：這個規律通過觀察代碼也不難發現，即<html></html>兩個標簽中間夾著<head></head>和<body></body>，我們把<head></head>標簽稱為<html></html>標簽的子標簽，反過來<html></html>標簽是<head></head>標簽的父標簽，<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句，屬于六親不認的。

各種關系如下圖所示：

這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言"，這種父子關系、兄弟關系就可以理解為一個頁面的"結構"，這種結構又與頁面的排版有關。

在下一期中，我們會通過練習來解釋"結構"與排版的關系。

喜歡的小伙伴請加關注，有任何問題可以留言給我，歡迎指正批評，感激不盡！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

近碰到個需求，需要把當前頁面生成 pdf，并下載。弄了幾天，自己整理整理，記錄下來，我覺得應該會有人需要：）

項目源碼地址：https://github.com/linwalker/render-html-to-pdf

簡介

我們可以直接在瀏覽器端使用html2canvas，對整個或局部頁面進行“截圖”。但這并不是真的截圖，而是通過遍歷頁面DOM結構，收集所有元素信息及相應樣式，渲染出canvas image。

由于html2canvas只能將它能處理的生成canvas image，因此渲染出來的結果并不是100%與原來一致。但它不需要服務器參與，整個圖片都由客戶端瀏覽器生成，使用很方便。

使用

使用的API也很簡潔，下面代碼可以將某個元素渲染成canvas：

html2canvas(element, {
 onrendered: function(canvas) {
 // canvas is the final rendered <canvas> element
 }
});

通過onrendered方法，可以將生成的canvas進行回調，比如插入到頁面中：

html2canvas(element, {
 onrendered: function(canvas) {
 document.body.appendChild(canvas);
 }
});

做個小例子（demo1）代碼如下：

這個例子將頁面body中的元素渲染成canvas，并插入到body中。

jsPDF

jsPDF庫可以用于瀏覽器端生成PDF。

文字生成PDF

使用方法如下：

// 默認a4大小，豎直方向，mm單位的PDF
var doc = new jsPDF();
// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');

文字與圖片生成PDF

// 三個參數，第一個方向，第二個尺寸，第三個尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])
// 將圖片轉化為dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
//設置字體大小
doc.setFontSize(20);
//10,20這兩參數控制文字距離左邊，與上邊的距離
doc.text('Stone', 10, 20);
// 0, 40, 控制文字距離左邊，與上邊的距離
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')

生成pdf需要把轉化的元素添加到jsPDF實例中，也有添加html的功能，但某些元素無法生成在pdf中，因此可以使用html2canvas + jsPDF的方式將頁面轉成pdf。通過html2canvas將遍歷頁面元素，并渲染生成canvas，然后將canvas圖片格式添加到jsPDF實例，生成pdf。

html2canvas + jsPDF

單頁

將demo1的例子修改下：

如果頁面內容根據a4比例轉化后高度超過a4紙高度呢，生成的pdf會怎么樣？會分頁嗎？

你可以試試，驗證一下自己的想法。

jsPDF提供了一個很有用的API， addPage()，我們可以通過 pdf.addPage()，來添加一頁pdf，然后通過 pdf.addImage(...)，將圖片賦予這頁pdf來顯示。

那么我們如何確定哪里分頁？

這個問題好回答，我們可以設置一個 pageHeight，超過這個高度的內容放入下一頁pdf。

來捋一下思路，將html頁面內容生成canvas圖片，通過 addImage將第一頁圖片添加到pdf中，超過一頁內容，通過 addPage()添加pdf頁數,然后再通過 addImage將下一頁圖片添加到pdf中。

嗯～，很好！巴特，難道沒有發現問題嗎？

這個方法實現的前提是 — — 我們能根據 pageHeight先將整頁內容生成的canvas圖片分割成對應的小圖片，然后一個蘿卜一個坑，一頁一頁 addImage進去。

What? 想一想我們的canvas是腫么來的，不用拉上去，直接看下面：

html2canvas(document.body, {
 onrendered:function(canvas) {
 //it is here we handle the canvas
 }
})

這里的 body就是要生成canvas的元素對象，一個元素生成一個canvas；那么我們需要一頁一頁的canvas，也就是說。。。

你覺得可能嗎？我覺得不太現實，按這思路要獲取頁面上不同位置的DOM元素，然后通過 htnl2canvas(element,option)來處理，先不說能不能剛好在每個 pageHeight的位置剛好找到一個DOM元素，就算找到了，這樣做累不累。

累的話：）可以看看下面這種方法。

多頁

我提供的思路是我們只生成一個canvas，對就一個，轉化元素就是你要轉成pdf內容的母元素，在這篇demo里就是 body了；其他不變，也是超過一頁內容就 addPage，然后 addImage,只不過這里添加的是同一個canvas。

當然這樣做只會出現多頁重復的pdf，那到底怎么實現正確分頁顯示。其實主要利用了jsPDF的兩點：

超過jsPDF實例格式尺寸的內容不顯示（ varpdf=newjsPDF('','pt','a4');demo中就是a4紙的尺寸）
addImage有兩個參數可以控制圖片在pdf中的位置

雖然每一頁pdf上顯示的圖片是相同的，但我們通過調整圖片的位置，產生了分頁的錯覺。以第二頁為例，將豎直方向上的偏移設置為 -841.89即一張a4紙的高度，又因為超過a4紙高度范圍的圖片不顯示，所以第二頁顯示了圖片豎直方向上[841.89,1682.78]范圍內的內容，這就得到了分頁的效果，以此類推。

還是看代碼吧：

兩邊留邊距

修改imgWidth，并且在addImage時x方向參數設置你要的邊距，具體代碼如下：

作者：linwalkerhttps://segmentfault.com/a/1190000009211079

今天，前端工程師已經成為研發體系中的重要崗位之一。

可是與此相對的是，極少大學的計算機專業愿意開設前端課程，大部分前端工程師的知識，也都是在實踐和工作中不斷學習的。

最近收到很多同學的后臺留言，說希望多推出一些前端方向的教程。

今天我們就帶來一門適合前端初學者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創建一個待辦事項的管理應用～

項目效果：

課程從最基礎的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。

以下是課程第一節的內容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：

「HTML 簡介」

實驗介紹

本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內容有：HTML 常見標簽、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習，可以構建簡單的 HTML 網頁。

知識點

什么是 HTML
Web 是如何工作的
文檔結構
常見標簽
表格
表單
有序列表和無序列表

什么是 HTML

HTML（超文本標記語言）是一種用于創建網頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執行，它的解析依賴于瀏覽器的內核。它不是一種編程語言，而是一種標記語言。

Web 是如何工作的

下面我們來演示用戶是如何看到一個網頁顯示的。

具體來講：

當用戶通過瀏覽器輸入網址后，瀏覽器先在 DNS 服務器上找到它，然后對它進行解析。
解析完成后，瀏覽器給服務器發送 http 請求。
服務器同意這個請求，就把 HTML 文件發送回瀏覽器。
瀏覽器拿到 HTML 文件，對其解析執行，顯示在用戶屏幕上。

HTML 文檔結構

首先我們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。

文檔類型聲明

<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標簽

html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。

head 元素

head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。

title 標簽

作用：設置文檔的標題或者名稱。瀏覽器通常將該標簽的內容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。

meta 標簽

<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。

body 標簽

body 標簽定義文檔的主體，也就是我們的主要內容（比如文本、超鏈接、圖像、表格和列表等）。

常見標簽

1.h 系類標簽

h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
  </body>
</html>

為了大家能更有效的學習，請使用實驗樓的環境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。

最終效果為：

2.p 標簽

p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<p>我是第一段文字，實驗樓，做實驗，學編程</p>
<p>我是第二段文字，實驗樓，做實驗，學編程</p>

3. 圖片標簽

HTML 的圖像是通過標簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標簽

<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<a href="https://www.shiyanlou.com/">實驗樓</a>

點擊文字：

跳轉到指定網頁：

篇幅有限，后續的課程內容，請在“實驗樓”邊敲代碼邊學習～

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續學習啦！

在線咨詢

上一篇：廣州藍景技術分享—CSS中實現元素的隱藏方法
下一篇：HTML DOM td/th 對象

您的項目需求

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

整合營銷服務商

HTML是什么？-零基礎自學網頁制作