html語法-文本格式化標(biāo)簽 #html5開發(fā)

eb前端開發(fā)課程：html語法文本格式化標(biāo)簽。

講課人：波波老師。

講完段落，接下來看文本格式化標(biāo)簽，像word中一樣，在文本中也可以為文字設(shè)置粗體、斜體、下劃線等效果。為此，html準(zhǔn)備了專門的文本格式化標(biāo)簽，使文本以特殊的方式顯示。常見的文本格式化標(biāo)簽有這些。

然后是看斜體，然后是刪除線、下劃線、上標(biāo)、下標(biāo)文本、不要代碼片段。然后看還有small、小字體。

章來源：freecodecamp網(wǎng)址：https://chinese.freecodecamp.org/

HTML 是一種標(biāo)記語言，使用特殊的語法或標(biāo)記來向?yàn)g覽器描述網(wǎng)頁的結(jié)構(gòu)。HTML 元素由開始和結(jié)束標(biāo)簽構(gòu)成，標(biāo)簽之間是文本內(nèi)容。不同的標(biāo)簽可以讓文本內(nèi)容以標(biāo)題、段落、列表等形式展現(xiàn)。

在這個(gè)課程中，你將通過編寫一個(gè)展示貓咪圖片的應(yīng)用，學(xué)習(xí)最常見的 HTML 元素——它們可以用來構(gòu)成任何網(wǎng)頁。

向 HTML 元素問好通過

歡迎訪問 freeCodeCamp 的 HTML 編程挑戰(zhàn)。這些挑戰(zhàn)將會幫助你逐步掌握 Web 開發(fā)。

首先，我們采用 HTML 制作一個(gè)簡單的網(wǎng)頁。你可以直接在網(wǎng)頁內(nèi)置的代碼編輯器中編輯代碼。

你看到編輯器中的 <h1>Hello</h1> 了嗎？那是一個(gè) HTML 元素。

大部分 HTML 元素都有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽。

開始標(biāo)簽像這樣：

<h1>

結(jié)束標(biāo)簽像這樣：

</h1>

開始標(biāo)簽和結(jié)束標(biāo)簽的唯一區(qū)別就是結(jié)束標(biāo)簽多了一個(gè)斜杠。

每個(gè)挑戰(zhàn)都有測試，任何時(shí)候你點(diǎn)擊“運(yùn)行測試”按鈕，就可以運(yùn)行測試。如果代碼通過測試，將會彈出一個(gè)窗口，你就可以進(jìn)入下一個(gè)挑戰(zhàn)。

要通過這個(gè)挑戰(zhàn)的測試，需要修改 h1 元素的文本為 Hello World。

具體要求如下：

h1 元素的內(nèi)容文本應(yīng)為 Hello World。

源代碼如下：

<h1>Hello</h1>

更改后如下：

<h1>Hello world</h1>

家好，我是新媒之聲廣告工作室的大白，今天給大家?guī)淼氖荋TML5簡單教學(xué)第一章（第二節(jié)）。

今天給大家?guī)淼臇|西比較多；

br 換行標(biāo)簽實(shí)屬單標(biāo)簽，br換行標(biāo)簽就如同我們編輯文本是點(diǎn)擊的回車鍵，讓它換到下一行。

HTML5 標(biāo)簽用來對文檔中的文本進(jìn)行換行的處理，請參考下面的這個(gè)例子：

以下代碼標(biāo)記一個(gè)換行：

使用 br 元素 在文本中 換行。

所有主流瀏覽器都支持 標(biāo)簽。

標(biāo)簽定義及使用說明

標(biāo)簽插入一個(gè)簡單的換行符。

標(biāo)簽是一個(gè)空標(biāo)簽，意味著它沒有結(jié)束標(biāo)簽。

提示：由于 標(biāo)簽是空標(biāo)簽，因此，不允許有“ ...”這樣的寫法！

提示和注釋

提示：在寫地址信息或者寫詩詞時(shí) 標(biāo)簽非常有用。

注釋： 請使用 標(biāo)簽來輸入空行，而不是分割段落。

HTML 4.01 與 HTML5之間的差異無。

HTML 與 XHTML 之間的差異

在 HTML 中， 標(biāo)簽沒有結(jié)束標(biāo)簽。

在 XHTML 中， 標(biāo)簽必須被正確地關(guān)閉，比如這樣： 。

nobr 不換行是屬于雙標(biāo)簽，nobr就是強(qiáng)制不換到下一行，在做編輯時(shí)文字或是塊遇到瀏覽器的邊會自動換到下一行使用不換行標(biāo)簽就強(qiáng)制它不讓換行，這是瀏覽器底部就會出現(xiàn)航向滾動條。

p 段落標(biāo)簽也是屬于雙標(biāo)簽，p標(biāo)簽是文字標(biāo)簽，故名思議就是用于寫文字段落的標(biāo)簽，p標(biāo)簽是屬于塊標(biāo)簽，就是獨(dú)自占據(jù)一行，在下節(jié)課會介紹到塊標(biāo)簽與行標(biāo)簽。

HTML5 標(biāo)簽用于定義一個(gè)段落。

目前大多數(shù)瀏覽器支持 標(biāo)簽。

標(biāo)簽定義及使用說明

標(biāo)簽定義段落。

元素會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規(guī)定。

提示：在本站的HTML5編程實(shí)戰(zhàn)中，你可以練習(xí)使用標(biāo)簽！

在HTML 4.01 與 HTML5中的差異

HTML 4.01中標(biāo)簽的 align 屬性已經(jīng)廢棄，HTML5不支持該屬性。

p 段落,align屬性:left|center|right，是標(biāo)簽屬性，屬性有事css樣式，css樣式又可以通俗的理解為房子的裝修，html通俗可以理解為房子的框架，div又可以通俗的理解為房子的填充磚塊之類的。

所有主流瀏覽器都支持 align 屬性。

定義和用法

HTML5 不支持 align 屬性。請使用 CSS 代替。

在 HTML 4.01 中， 的 align 屬性已廢棄。

align 屬性規(guī)定段落中文本的對齊方式。

兼容性注釋

在 HTML 4.01 中， 的 align 屬性已廢棄，請使用 CSS 代替。

CSS 語法：

CSS 實(shí)例：在段落中右對齊文本

在我們的 CSS 教程中，您可以找到更多有關(guān) text-align 屬性的細(xì)節(jié)。

語法

屬性值

值	描述
left	左對齊文本。
right	右對齊文本。
center	居中對齊文本。
justify	對行進(jìn)行伸展，這樣每行都可以有相等的寬度（就像在報(bào)紙和雜志中）。

center 居中是屬于雙標(biāo)簽，雙標(biāo)簽就是成對出現(xiàn)的標(biāo)簽，center居中標(biāo)簽的意思就是讓它位于瀏覽器的中心位置，就好比是wps的文字居中一個(gè)道理，不過居中標(biāo)簽是可以讓它體內(nèi)所有的標(biāo)簽都可以居中。

HTML <center> 標(biāo)簽 - HTML 5 不支持

<center> 標(biāo)簽控制文本的居中顯示，不能在 HTML5 中使用。

所有主流瀏覽器都支持 <center> 標(biāo)簽。

標(biāo)簽定義及使用說明

HTML5 不支持 <center> 標(biāo)簽。請用 CSS 代替。

在 HTML 4.01 中，<center> 元素已廢棄。

<center> 對其所包括的文本進(jìn)行水平居中。

提示和注釋

提示：請使用 CSS 樣式來居中文本！在 CSS 教程中您能了解到更多關(guān)于居中文本的細(xì)節(jié)。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <center> 標(biāo)簽。請用 CSS 代替。

pre 按源代碼顯示是屬于雙標(biāo)簽不是很常用的標(biāo)簽，它的意思就是讓標(biāo)簽直接不解析讓瀏覽器表現(xiàn)出來，一般用于展示源代碼。

HTML <pre> 標(biāo)簽

<pre> 標(biāo)簽可以保留您需要的文本格式，比如不會取消換行和空格，并且所示文本是等寬的。

目前大多數(shù)瀏覽器支持 <pre> 標(biāo)簽。

標(biāo)簽定義及使用說明

<pre> 標(biāo)簽可定義預(yù)格式化的文本。

被包圍在 <pre> 標(biāo)簽元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。

注意：<pre> 元素是塊級元素，但是只能包含文本或行內(nèi)元素，任何塊級元素（常見為可以導(dǎo)致段落斷開的標(biāo)簽：例如<title>、 和<address> 標(biāo)簽）都不能位于 <pre> 元素中。

提示和注釋

提示: <pre> 標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼。

提示：<pre> 標(biāo)簽與 <code> 標(biāo)簽結(jié)合起來使用，可以獲得更加精確的語義。

在HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中，"width" 屬性已廢棄，不可使用。 HTML5 不支持"width"屬性。

屬性

屬性	值	描述
width	number	HTML5 不支持該屬性。HTML 4.01 已廢棄該屬性。定義每行的最大字符數(shù)（通常是 40、80 或 132）。

全局屬性

<pre> 標(biāo)簽支持全局屬性，查看完整屬性表 HTML全局屬性。

ul 無序列表屬于雙標(biāo)簽，一般配合li標(biāo)簽使用，無序列表屬和wps中表現(xiàn)是一樣的不過無序列表中不只可以寫文字和數(shù)字也可以寫div之類的標(biāo)簽有的網(wǎng)頁導(dǎo)航就是用ul無序列表標(biāo)簽寫出來的。

HTML <ul> 標(biāo)簽

<ul> 標(biāo)簽表示HTML頁面中項(xiàng)目的無序列表，一般會以項(xiàng)目符號列表呈現(xiàn)

所有主流瀏覽器都支持 <ul> 標(biāo)簽。

標(biāo)簽定義及使用說明

<ul> 標(biāo)簽定義無序列表。

將 <ul> 標(biāo)簽與 <li> 標(biāo)簽一起使用，創(chuàng)建無序列表。

提示和注釋

提示：使用 CSS 為列表定義樣式。

提示：使用 <ol> 標(biāo)簽創(chuàng)建有序列表。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，"compact" 和 "type" 屬性已廢棄。HTML5 則不支持著兩個(gè)屬性。

屬性

屬性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。
type	disc square circle	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表的項(xiàng)目符號的類型。

值

描述

compact

HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。

type

disc

square

circle

HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表的項(xiàng)目符號的類型。

ol 有序列表標(biāo)簽和ul無序列表標(biāo)簽是一個(gè)道理，也是配合li標(biāo)簽使用唯一區(qū)別就是一個(gè)前面帶點(diǎn)一個(gè)前面帶阿拉伯?dāng)?shù)字。

HTML <ol> 標(biāo)簽

<ol> 標(biāo)簽在 HTML 中表示有序列表，是 ordered lists 的縮寫。您可以自定義有序列表的初始序號

目前大多數(shù)瀏覽器支持 <ol> 標(biāo)簽。

標(biāo)簽定義及使用說明

<ol> 標(biāo)簽定義了一個(gè)有序列表. 列表排序以數(shù)字來顯示。

使用<li> 標(biāo)簽來定義列表選項(xiàng)。

提示和注釋

提示： 如果需要無序列表，請使用 <ul> 標(biāo)簽。

提示：使用 CSS 來定義列表樣式。

HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中"start" 和 "type" 屬性已經(jīng)廢棄，HTML5不支持該屬性。

"reversed" 屬性是 HTML5 中的新屬性。

在HTML 4.01中"compact" 屬性已經(jīng)廢棄,在 HTML5中不支持該屬性。

屬性

New：HTML5 新屬性。

屬性	值	描述
compact	compact	HTML5中不支持，不贊成使用。請使用樣式取代它。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。
reversedNew	reversed	指定列表倒序(9,8,7...)
start	number	HTML5不支持，不贊成使用。請使用樣式取代它。規(guī)定列表中的起始點(diǎn)。
type	1 A a I i	規(guī)定列表的類型。不贊成使用。請使用樣式代替。

dl 自定義列表 dt 自定義標(biāo)題 dd 自定義列表內(nèi)容這三個(gè)標(biāo)簽我放在一起講因?yàn)檫@三個(gè)標(biāo)簽是配合在一起的用法和ul標(biāo)簽ol標(biāo)簽差不多，就不再過多的敘述了，一般用到的不是很多。

所有主流瀏覽器都支持 <dl> 標(biāo)簽。

標(biāo)簽定義及使用說明

<dl> 標(biāo)簽定義一個(gè)描述列表。

<dl> 標(biāo)簽與 <dt> （定義項(xiàng)目/名字）和 <dd> （描述每一個(gè)項(xiàng)目/名字）一起使用。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<dl> 標(biāo)簽定義一個(gè)定義列表。

在 HTML5 中，<dl> 標(biāo)簽定義一個(gè)描述列表。

HTML <dt> 標(biāo)簽

<dt> 標(biāo)簽只能夠作為 <dl> 標(biāo)簽的一個(gè)子元素出現(xiàn)，常常后跟一個(gè) <dd> 標(biāo)簽。

所有主流瀏覽器都支持 <dt> 標(biāo)簽。

標(biāo)簽定義及使用說明

<dt> 標(biāo)簽定義一個(gè)描述列表的項(xiàng)目/名字。
<dt> 標(biāo)簽與 <dl> （定義一個(gè)描述列表）和 <dd> （描述每一個(gè)項(xiàng)目/名字）一起使用。
一行中的多個(gè) <dt> 標(biāo)簽表示由緊鄰的下一個(gè) <dd> 元素定義的多個(gè)術(shù)語。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<dt> 標(biāo)簽定義一個(gè)定義列表的條目。

在 HTML5 中，<dt> 標(biāo)簽定義一個(gè)描述列表的項(xiàng)目/名字。

hr 導(dǎo)航線這節(jié)課最后一個(gè)標(biāo)簽是單標(biāo)簽，所謂的導(dǎo)航線不過就是一條橫線用來分割。

HTML <hr> 標(biāo)簽

<hr> 標(biāo)簽表示段落級元素之間的主題劃分。

所有主流瀏覽器都支持<hr> 標(biāo)簽。

標(biāo)簽定義及使用說明

<hr>標(biāo)簽定義HTML頁面中的主題變化（比如話題的轉(zhuǎn)移），并顯示為一條水平線。元素被用來分隔HTML頁面中的內(nèi)容（或者定義一個(gè)變化）。

HTML 4.01與HTML5之間的差異

在HTML5中，<hr> 定義內(nèi)容中的主題變化，并顯示為一條水平線。

在HTML 4.01中，<hr> 標(biāo)簽僅僅顯示為一條水平線。

在HTML 4.01中，的所有布局屬性都已廢棄。在HTML5中不再支持這些屬性。請使用CSS來為<HR> 元素定義樣式。

HTML與XHTML之間的差異

在HTML中，<hr> 標(biāo)簽沒有結(jié)束標(biāo)簽。

在XHTML中，<hr> 標(biāo)簽必須被正確地關(guān)閉，比如<hr /> 。

屬性

屬性	值	描述
align	left center right	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定 <hr> 元素的對齊方式
noshade	noshade	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定 <hr> 元素的顏色呈現(xiàn)為純色。
size	pixels	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定 <hr> 元素的高度。
width	pixels %	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定 <hr> 元素的寬度。

謝謝大家的觀看，如果需要今天課程的源代碼和ppt可以私信給我，我會免費(fèi)發(fā)給你，最好使能夠關(guān)注小編一下。

在線咨詢

上一篇：2021年IT培訓(xùn)機(jī)構(gòu)哪家好？尚硅谷、黑馬、動力節(jié)點(diǎn)測評，杜絕踩坑
下一篇：怒火一刀雪域

您的項(xiàng)目需求

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

整合營銷服務(wù)商

html語法-文本格式化標(biāo)簽 #html5開發(fā)

向 HTML 元素問好通過

具體要求如下：

您的項(xiàng)目需求