在網頁中,有時需要為文字設置粗體、斜體或下劃線效果,這時就需要用到HTML中的文本格式化標簽,使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調的意思 , strong em del ins 語義更強烈
HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字,就需要使用注釋標簽。
<!-- 注釋語句 -->
Markdown是一種輕量級標記語言,它最初由John Gruber和Aaron Swartz在2004年共同創建,可以通過簡單、純文本的語法,快速構建格式化、排版精美的文檔。其可與HTML混編,可導出為HTML、PDF、Word等格式的文件
Markdown可以讓作者更多地關注內容本身而非格式排版。同樣的內容,在Markdown里會比在Word、HTML等里容易很多
得益于其簡潔、高效、易讀、易寫,Markdown被大量使用。如GitHub、Jupyter Notebook和各種博客平臺,都原生支持Markdown,可以說是技術文檔編寫的首選,甚至可以用來幫助寫公眾號文章(本篇推文即用Markdown編寫)
Markdown文件通常采用.md的后綴,其可以在幾乎所有文本編輯器中打開編輯,如:電腦自帶的記事本等
但,如果你想要預覽其排版格式化的內容,則需要使用對應支持的編輯器,好用的編輯器可以幫你快速預覽、導出各種格式的文檔或圖像等,下面介紹幾款主流好用的編輯器
千萬不要被標記、語言嚇到,Markdown的語法十分簡單,常用的標記符號不超過十個,用于日常寫作記錄綽綽有余,幾乎不到半小時就能完全掌握,從此達到心中無塵,碼字入神的境界
用于創建1-6級的標題,可對應HTML的h1 - h6
用#后加一個空格再跟標題內容的語法創建,#的數量于標題級數成正比,幾級標題前就跟幾個#
對應預覽效果(不同編輯器、主題會呈現不同效果,可自定義,本文采用github主題):
創建段落,只需使用空白行將一行或多行文本進行分隔
預覽:
如果段落含有語法字符,可使用 \ 轉義,如:\*轉義而非斜體\*
強調
可將文本設置為粗體或斜體來強調其重要性
需要加粗文本,只需在待加粗內容前后兩側分別添加兩個*星號或_下劃線,推薦使用星號
預覽(效果是一樣的):
需要斜體顯示文本,只需在待斜體內容前后兩側分別添加一個*星號或_下劃線,推薦使用星號
預覽(效果一致):
如果想要同時粗體和斜體,只需在待格式內容前后兩側各添加三個*星號或_下劃線,推薦使用星號
預覽:
刪除線
想要出現刪除線效果,只需在待刪除內容前后兩側各加兩個~
預覽:
高亮
想要高亮內容,只需在待高亮內容前后兩側各加兩個=
預覽:
上下標
有時需要使用上下標格式文本
使用上標,需在待上標內容兩側加一個^
預覽
使用下標,需在待下標內容兩側加一個~
預覽
可用于快速插入鏈接,達到跟HTML的a標簽同樣的效果
語法為:[鏈接描述](鏈接地址)
預覽:
可用于快速插入圖片,達到跟HTML的img標簽同樣的效果
語法為:,與鏈接語法類似,前面多了個!而已
預覽:
用于創建塊引用,達到突出引用內容的目的
語法為:> 引用內容,采用>后跟一個空格再加待引用內容的形式
如有多段引用內容,需要在每一段內容前均添加>,包括分隔段落用的空白行
預覽:
引用還可以嵌套結合其它語法進行使用,如強調、鏈接、列表等,具體可自行嘗試
在單獨一行上使用三個或多個星號 ***、破折號--- 或下劃線 ___,并且不包含其他內容,可創建一條分隔線
預覽(三種方式效果一致):
用于將多個條目組織成有序或無序列表
在每個列表項前面添加破折號-、星號*或加號+(用空格隔開),縮進一個或多個列表項可創建嵌套列表
預覽:
在每個列表項前添加數字并緊跟一個英文句點(用空格隔開),數字不必按數學順序排列,但是列表會當以數字1起始
預覽:
可將短語或單詞表示為代碼,兩側各使用一個反引號`包
如果想在代碼內含有反引號,可在內容兩側使用兩個反引號`包裹
預覽:
用于表示一整段代碼內容,語法如下,用三個反引號```或三個波浪號~~~包裹塊內容
預覽:
反引號后可跟內容塊語法的標注名稱,可起到語法高亮效果,也可不跟內容,表示普通純文本
有時候,單純的Markdown并不能滿足我們的全部需求,此時可直接使用HTML標簽表達
如<span>、<cite>、<del>、<a>、<img>或<div>等標簽,同時可搭配一些簡單的屬性樣式,起到改變文字、圖片大小等效果
基礎語法用于應對大部分日常場景已經十分夠用,但對于某些場景仍有一些不夠
使用三個或多個連字符---創建分隔標題與內容塊,并使用管道|分隔每列,可以選擇在表的任一端添加管道
預覽:
默認是采用左對齊,可在分隔行兩側添加冒號:表示左對齊、右對齊或居中
預覽:
在列表項前帶有復選框,用于表達任務的完成與否
語法參考:在任務列表項之前添加破折號-和方括號[ ](兩者用空格隔開),選擇復選框,需在方括號[]里面添加x,如[x]
預覽:
可以為內容添加注釋和參考
預覽:
除了本文介紹內容,Markdown還可以擴展流程圖、圖表和數學公式等語法,感興趣可自行深入了解
同時,搭配不同主題還可以生成各種精美格式、以下是一個擬態風的自定義主題預覽
為了方便學習和理解,通常將HTML5標記分為兩大類,即雙標記和單標記。
a.雙標記:
雙標記雙標記也稱為體標記,分為開始標記和結束標記,其基本語法為:
<標記名>內容</標記名>
如:
<p>我是一個雙標記</p>
b.單標記:
單標記也稱空標記,是指用一個標記就可以完整的描述某個功能,其基本語法為:
<標記名/>
如:
<hr/>
上面hr標記表示一條水平線,后面會提到
注釋標記是HTML的一種特殊標記,它是一段便于閱讀理解的不需要在頁面中顯示的注釋文字。其基本語法格式為:
<!-- 注釋語句 -->
如:
<p>這是一段文本</p> <!-- 這是注釋文本,不會在頁面中顯示 -->
上圖即為瀏覽器中的結果。
HTML標記的默認樣式是無法滿足頁面開發的需求的,如果想要為某段文本設置特定的樣式,就需要用到HTML標記的屬性了,其基本語法格式為:
<標記名 屬性1="屬性值1" 屬性2="屬性值2" 屬性3="屬性值3"...>內容</標記名>
下面以一個例子來展示:
網頁第一行是一個二級居中的標題,第二行是一個局中的段落,第三行是一個大小為2px,顏色為灰色的水平線,第四行是一段正常的段落,部分詞語被加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 align="center">我是居中的二級標題</h2>
<p align="center">我是居中的段落</p>
<hr size="2" color="#ccc"/>
<p>我是一個正常的段落,這是<strong>關鍵字</strong>,其他的都是正常內容。<p/>
</body>
</html>
效果如圖所示:
?
多學一招(鍵值對):
“鍵值對”簡單地說即為對“屬性”設置“值”
例如:
color = "red";width:"200px";
上面的color和width就相當于屬性1和屬性2,red和200px就是對應的屬性值1和屬性值2,如果順序出錯,是沒有效果的
總結:
在HTML開始標記中,可以通過 屬性=“屬性值”的方式為標記添加屬性,其中“屬性”和“屬性值”是以“鍵值對”的形式出現的
1.title
一個HTML文檔只能含有一對<title></title>標記,<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。
基本語法格式:
<title>網頁標題名稱</title>
2.meta
meta定義頁面元信息:
設置網頁關鍵字》》》<meta name=”keywords” content=”JAVA、php”/>
設置網頁描述》》》<meta name=”description” content=”IT培訓教育”/>
設置網頁作者》》》<meta name=”author” content=”傳智播客”/>
設置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>
設置頁面自動刷新與跳轉》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>
3.link
基本語法格式:
<link 屬性=”屬性值” />
屬性名 | 常用屬性值 | 描述 |
href | URL | 指定引用外部文檔 |
rel | stylesheet | 指定當前文檔與引用外部文檔的關系,該屬性值通常為stylesheet,表示定義一個外部樣式表 |
type | text/css | 引用外部文檔的類型為CSS |
type | text/javascript | 引用外部文檔的類型為JavaScript腳本 |
4.style
基本語法格式:
<style 屬性=”屬性值”>樣式內容</style>
在HTML中使用style標記時,常常定義其屬性為type,相應的屬性值為text/css,表示使用內嵌式的CSS樣式
*請認真填寫需求信息,我們會在24小時內與您取得聯系。