04程序員定要學HTML，字體段落標簽介紹，60秒搞定

全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

主要內容：這是HTML課程的第四課，主要講解HTML的文字標簽和格式標簽。在今天我們做一個屬于自己的簡歷。

上節回顧

在上一節中主要講解了HTML的標題標簽（h1~h7）以及加粗、斜體、下劃線、上下標等格式的標簽。上節請戳→HTML電腦編程03 標題物理字體標簽的使用，大學生學編程

HTML

font標簽

font標簽通過字面意思來看，就是字體的意思。是的這是一個用來顯示文字的標簽。不過值得說的是，這個文字可以通過屬性的方式，指定顏色和字體大小。比如：

font標簽的寫法

效果：

font標簽的顯示效果

從書寫的HTML代碼可以看出，font標簽包括兩個參數：

color（字體的顏色）：顏色的值可以為英文，也可以為RGB數值。
size（字體的大小）：通過數字1~7可以控制字體的大小。
face（文字的顯示字體）：這個屬性可以設置顯示的字體。如可以寫為：face="楷體"

顏色體系

在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍色）、green（綠色）等。

不同顏色

另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時候很多人都知道兩種不同的顏料，可以轉換為不同的顏色。RGB就是通過紅綠藍不同的明暗程度。來表示所有的顏色的。

RGB

RGB中的每一個顏色都是以六位十六進制進行表示。數值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號。

段落標簽

段落標簽為p。會為里面的文字自動分段顯示：

p標簽自動分段

換行標簽

換行標簽為br，這是個單標簽。寫法為：<br/>。

br標簽的形式

效果：

換行標簽的效果

默認情況下，HTML的文檔排列形式為自上而下，自左而右。標簽包括行級標簽和塊級標簽。如果想要對塊級標簽進行換行，你就需要使用br標簽。

其他幾個標簽

下面是幾個標簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦

居中預格式化標簽

言：在完成了使用開源的Atom軟件搭建好編寫markdown的環境后，接下來就進行我們的第一個markdown文件的編寫，同時學習markdown標記語言的基礎語法，都是十分簡單的一些標記，如果學習過HTML標記語言或者了解過HTML標記語言的就十分清楚，markdown也是一種標記語言，與HTML有著類似的效果功能，同時在markdown中還支持HTML標簽語法。廢話不多說，直接上干貨！

markdown基本文章結構

0、目錄

在需要目錄出現的地方放置一個標記，自動生成嵌套包含所有標題的列表，標記：[TOC]。

1、標題

用#的個數表示幾級標題，#與標題之間至少一個空格，有1到6級標題；

在標題下面使用任意個===符號表示一級標題，使用任意個---符號表示二級標題。

2、列表

無序列表，使用-、+、*表示，至少一個空格；

有序列表，使用數字加英文.表示，至少一個空格。

小提示：在使用列表時，只要是數字后面加上英文的點，就會無意間產生列表，比如2017.12.30 這時候想表達的是日期，有些軟件把它被誤認為是列表。解決方式：在每個點前面加上\就可以了。

3、引用

引用以>來表示，引用中支持多級引用、標題、列表、代碼塊、分割線等常規語法。

4、文字樣式

2個*代表加粗，1個*代表斜體，~~代表刪除，都是一對標簽，前后都要有；

3個*或者-表示加粗斜體，刪除是指由中間劃線；

字體上標（superscript）和下標（subscript ）<sup><sup>、<sub><sub>。

5、圖片與鏈接（Images & Links）

圖片與鏈接的語法很像，區別在一個 ! 號。

小提示：Markdown 不能設置圖片大小，如果必須設置則應使用HTML標記 <img>；

圖片：![]() ![圖片描述(可忽略)](鏈接的地址)；

鏈接：[]() [鏈接描述](鏈接的地址)。

6、代碼引用，預覽支持語法高亮顯示，形式如下

``` C

C語言源代碼

```

行內式：如果在一個行內需要引用代碼，只要用反引號`引起來就好（一般在ESC鍵下方，和~同一個鍵）。

7.表格（Tables）

表格對齊格式，居左：:----；居中：:----:或-----；居右：----:。

8、分割線

使用***符號獨自在一行，不能有其他字符，處理空格之外；

___三個下劃線在一行；

用三個以上的星號(*)、減號(-)、底線(_)來建立一個分隔線。

小提示：Markdown 可以利用反斜杠\來插入一些在語法中有其它意義的符號，轉義字符。

9、自動連接

Markdown 支持以比較簡短的自動鏈接形式來處理網址和電子郵件信箱，只要是用<>包起來， Markdown 就會自動把它轉成鏈接。也可以直接寫，也是可以顯示成鏈接形式的，直接寫URL鏈接。

10、換行

方法1: 連續兩個以上空格+回車；

方法2：使用html語言換行標簽：<br>。

11、錨點

錨點其實就是頁內超鏈接。比如我這里寫下一個錨點，點擊回到目錄，就能跳轉到目錄。在目錄中點擊這一節，就能跳過來。語法說明：在你準備跳轉到的指定標題后插入錨點{#標記}，然后在文檔的其它地方寫上連接到錨點的鏈接。

12、注腳

語法說明：在需要添加注腳的文字后加上腳注名字[^注腳名字],稱為加注。然后在文本的任意位置(一般在最后)添加腳注，腳注前必須有對應的腳注名字。腳注自動被搬運到最后面，請到文章末尾查看，并且腳注后方的鏈接可以直接跳轉回到加注的地方。

13、首行縮進兩個字符：(每個表示一個空格，連續使用兩個即可）

方法一：半角的空格；

方法二：全角的空格

14、使用LaTex數學公式

方法1.行內公式：使用兩個”$”符號引用公式:

輸入latex公式：$E=mc^2$；

方法2.行間公式：使用兩對“$$”符號引用公式：

輸入latex公式：$\sqrt{x^{2}}$ 。

# 前端復習 html（一）

HTML基礎

HTML: 制作網頁

純文本協議: 只保存內容不保存樣式

**HTML概述:**

1 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。

2<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

3在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。

4HTML5 不基于 SGML，所以不需要引用 DTD。

**常用的 DOCTYPE 聲明**

HTML5 : !DOCTYPE html

HTML 4.01 Strict : !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

XHTML 1.0 Strict : !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

> 現在開發直接使用HTML5文檔聲明即可

**HTML標簽**

1:聲明是一個html文檔，所有的標簽都寫在它內部

2:此元素可告知瀏覽器其自身是一個 HTML 文檔。

3:<html> 與 </html> 標簽限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。

Meta標簽

meta標簽概述

META標簽是HTML標記HEAD區的一個關鍵標簽

它位于HTML文檔的<head>和<title>之間

它提供的信息雖然用戶不可見，但卻是文檔的最基本的元信息。

字符

是各種文字和符號的總稱，包括各國家文字、標點符號、圖形符號、數字等

字符集

字符集(Character set)是多個字符的集合，字符集種類較多，每個字符集包含的字符個數不同

常用字符集

ASCII字符集

是基于羅馬字母表的一套電腦編碼系統。

它主要用于顯示現代英語和其他西歐語言。

圖示

GB2312字符集

GB2312是中國國家標準的簡體中文字符集。它所收錄的漢字已經覆蓋99.75%的使用頻率，

基本滿足了漢字的計算機處理需要。在中國大陸和新加坡獲廣泛使用。

GB18030字符集

GB 18030的全稱是GB18030-2000《信息交換用漢字編碼字符集基本集的擴充》，

是我國政府于2000年3月17日發布的新的漢字編碼國家標準，2001年8月31日后在中國市場上

發布的軟件必須符合本標準。

Unicode

支持現今世界各種不同語言的書面文本的交換、處理及顯示。

UTF-8 編碼

UTF-8是Unicode的其中一個使用方式。

支持現今世界各種不同語言的書面文本的交換、處理及顯示。

開發中我們使用的都是UTF-8編碼

為什么要設置字符編碼

告訴瀏覽器到哪一個字符集庫當中找對應的字符進行顯示

比如現在網頁當中寫的是中文.如果你指定的ASCII字符集

瀏覽器就會到ASCII字符集庫當中找對應的漢字進行顯示.

但是ASCII字符集庫中只有英語和其他西歐語言。

沒有漢字,就會在網頁當中顯示亂碼!

開發中我們都是使用UTF-8的字符集庫,因為它里面幾乎包含了全世界所有國家的字符,

所以到它當中肯定能找到對應的內容進行正確的顯示!

基礎標簽

<title>定義文檔的標題。

瀏覽器標簽顯示的標簽

```html

<!DOCTYPE html>

<head>

</head>

<body>

網頁內容

</body>

</html>

```

<h1> 到 <h6>定義標題

<body>

</body>

```

<p>定義段落。

<hr>定義水平線。

```html

<hr>我是水平線

```

<br>定義簡單的換行。

```html

<br>我是換行

```

定義注釋。

```html

```

基本樣式

可以的標簽當中添加一些基本的樣式

這些樣式可以修改字體的大小,顏色,讓文字更加豐富起來

在線咨詢

上一篇：html5常見的音視頻格式和解決方案
下一篇：webpack編譯loader大全

您的項目需求

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

整合營銷服務商

04程序員定要學HTML，字體段落標簽介紹，60秒搞定

上節回顧

font標簽

顏色體系

段落標簽

換行標簽

其他幾個標簽

markdown基本文章結構

您的項目需求