eb前端開發課程:html語法文本格式化標簽。
講課人:波波老師。
講完段落,接下來看文本格式化標簽,像word中一樣,在文本中也可以為文字設置粗體、斜體、下劃線等效果。為此,html準備了專門的文本格式化標簽,使文本以特殊的方式顯示。常見的文本格式化標簽有這些。
然后是看斜體,然后是刪除線、下劃線、上標、下標文本、不要代碼片段。然后看還有small、小字體。
章來源:freecodecamp網址:https://chinese.freecodecamp.org/
HTML 是一種標記語言,使用特殊的語法或標記來向瀏覽器描述網頁的結構。HTML 元素由開始和結束標簽構成,標簽之間是文本內容。 不同的標簽可以讓文本內容以標題、段落、列表等形式展現。
在這個課程中,你將通過編寫一個展示貓咪圖片的應用,學習最常見的 HTML 元素——它們可以用來構成任何網頁。
歡迎訪問 freeCodeCamp 的 HTML 編程挑戰。 這些挑戰將會幫助你逐步掌握 Web 開發。
首先,我們采用 HTML 制作一個簡單的網頁。 你可以直接在網頁內置的代碼編輯器中編輯代碼。
你看到編輯器中的 <h1>Hello</h1> 了嗎? 那是一個 HTML 元素。
大部分 HTML 元素都有一個開始標簽和一個結束標簽。
開始標簽像這樣:
<h1>
結束標簽像這樣:
</h1>
開始標簽和結束標簽的唯一區別就是結束標簽多了一個斜杠。
每個挑戰都有測試,任何時候你點擊“運行測試”按鈕,就可以運行測試。 如果代碼通過測試,將會彈出一個窗口,你就可以進入下一個挑戰。
要通過這個挑戰的測試,需要修改 h1 元素的文本為 Hello World。
h1 元素的內容文本應為 Hello World。
源代碼如下:
<h1>Hello</h1>
更改后如下:
<h1>Hello world</h1>
家好,我是新媒之聲廣告工作室的大白,今天給大家帶來的是HTML5簡單教學第一章(第二節)。
今天給大家帶來的東西比較多;
br 換行標簽實屬單標簽,br換行標簽就如同我們編輯文本是點擊的回車鍵,讓它換到下一行。
HTML5 <br/>標簽用來對文檔中的文本進行換行的處理,請參考下面的這個例子:
以下代碼標記一個換行:
<p> 使用 br 元素<br>在文本中<br>換行。 </p>
所有主流瀏覽器都支持 <br> 標簽。
標簽定義及使用說明
<br> 標簽插入一個簡單的換行符。
<br> 標簽是一個空標簽,意味著它沒有結束標簽。
提示:由于<br>標簽是空標簽,因此,不允許有“<br>...</br>”這樣的寫法!
提示和注釋
提示:在寫地址信息或者寫詩詞時 <br> 標簽非常有用。
注釋: 請使用 <br> 標簽來輸入空行,而不是分割段落。
HTML 4.01 與 HTML5之間的差異無。
HTML 與 XHTML 之間的差異
在 HTML 中,<br> 標簽沒有結束標簽。
在 XHTML 中,<br> 標簽必須被正確地關閉,比如這樣:<br /> 。
nobr 不換行是屬于雙標簽,nobr就是強制不換到下一行,在做編輯時文字或是塊遇到瀏覽器的邊會自動換到下一行使用不換行標簽就強制它不讓換行,這是瀏覽器底部就會出現航向滾動條。
p 段落標簽也是屬于雙標簽,p標簽是文字標簽,故名思議就是用于寫文字段落的標簽,p標簽是屬于塊標簽,就是獨自占據一行,在下節課會介紹到塊標簽與行標簽。
HTML5 <p>標簽用于定義一個段落。
目前大多數瀏覽器支持 <p>標簽。
標簽定義及使用說明
<p> 標簽定義段落。
<p>元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規定。
提示:在本站的HTML5編程實戰中,你可以練習使用<p>標簽!
在HTML 4.01 與 HTML5中的差異
HTML 4.01中標簽的 align 屬性已經廢棄,HTML5不支持該屬性。
p 段落,align屬性:left|center|right,是標簽屬性,屬性有事css樣式,css樣式又可以通俗的理解為房子的裝修,html通俗可以理解為房子的框架,div又可以通俗的理解為房子的填充磚塊之類的。
所有主流瀏覽器都支持 align 屬性。
定義和用法
HTML5 不支持 <p> align 屬性。請使用 CSS 代替。
在 HTML 4.01 中,<p> 的 align 屬性已廢棄。
align 屬性規定段落中文本的對齊方式。
兼容性注釋
在 HTML 4.01 中,<p> 的 align 屬性已廢棄,請使用 CSS 代替。
CSS 語法:<p style="text-align:right">
CSS 實例:在段落中右對齊文本
在我們的 CSS 教程中,您可以找到更多有關 text-align 屬性 的細節。
語法
<p align="left|right|center|justify">
屬性值
值 | 描述 |
---|---|
left | 左對齊文本。 |
right | 右對齊文本。 |
center | 居中對齊文本。 |
justify | 對行進行伸展,這樣每行都可以有相等的寬度(就像在報紙和雜志中)。 |
center 居中是屬于雙標簽,雙標簽就是成對出現的標簽,center居中標簽的意思就是讓它位于瀏覽器的中心位置,就好比是wps的文字居中一個道理,不過居中標簽是可以讓它體內所有的標簽都可以居中。
HTML <center> 標簽 - HTML 5 不支持
<center> 標簽控制文本的居中顯示,不能在 HTML5 中使用。
所有主流瀏覽器都支持 <center> 標簽。
標簽定義及使用說明
HTML5 不支持 <center> 標簽。請用 CSS 代替。
在 HTML 4.01 中,<center> 元素已廢棄。
<center> 對其所包括的文本進行水平居中。
提示和注釋
提示:請使用 CSS 樣式來居中文本!在 CSS 教程中您能了解到更多關于居中文本的細節。
HTML 4.01 與 HTML5之間的差異
HTML5 不支持 <center> 標簽。請用 CSS 代替。
pre 按源代碼顯示是屬于雙標簽不是很常用的標簽,它的意思就是讓標簽直接不解析讓瀏覽器表現出來,一般用于展示源代碼。
HTML <pre> 標簽
<pre> 標簽可以保留您需要的文本格式,比如不會取消換行和空格,并且所示文本是等寬的。
目前大多數瀏覽器支持 <pre> 標簽。
標簽定義及使用說明
<pre> 標簽可定義預格式化的文本。
被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
注意:<pre> 元素是塊級元素,但是只能包含文本或行內元素,任何塊級元素(常見為可以導致段落斷開的標簽:例如<title>、<p> 和<address> 標簽)都不能位于 <pre> 元素中。
提示和注釋
提示: <pre> 標簽的一個常見應用就是用來表示計算機的源代碼。
提示:<pre> 標簽與 <code> 標簽結合起來使用,可以獲得更加精確的語義。
在HTML 4.01 與 HTML5中的差異
在 HTML 4.01 中,"width" 屬性已廢棄,不可使用。 HTML5 不支持"width"屬性。
屬性
屬性 | 值 | 描述 |
---|---|---|
width | number | HTML5 不支持該屬性。HTML 4.01 已廢棄該屬性。定義每行的最大字符數(通常是 40、80 或 132)。 |
全局屬性
<pre> 標簽支持全局屬性,查看完整屬性表 HTML全局屬性。
ul 無序列表屬于雙標簽,一般配合li標簽使用,無序列表屬和wps中表現是一樣的不過無序列表中不只可以寫文字和數字也可以寫div之類的標簽有的網頁導航就是用ul無序列表標簽寫出來的。
HTML <ul> 標簽
<ul> 標簽表示HTML頁面中項目的無序列表,一般會以項目符號列表呈現
所有主流瀏覽器都支持 <ul> 標簽。
標簽定義及使用說明
<ul> 標簽定義無序列表。
將 <ul> 標簽與 <li> 標簽一起使用,創建無序列表。
提示和注釋
提示:使用 CSS 為列表定義樣式。
提示:使用 <ol> 標簽創建有序列表。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,"compact" 和 "type" 屬性已廢棄。HTML5 則不支持著兩個屬性。
屬性
屬性 | 值 | 描述 |
---|---|---|
compact | compact | HTML5 不支持。HTML 4.01 已廢棄。 規定列表呈現的效果比正常情況更小巧。 |
type | disc square circle | HTML5 不支持。HTML 4.01 已廢棄。 規定列表的項目符號的類型。 |
ol 有序列表標簽和ul無序列表標簽是一個道理,也是配合li標簽使用唯一區別就是一個前面帶點一個前面帶阿拉伯數字。
HTML <ol> 標簽
<ol> 標簽在 HTML 中表示有序列表,是 ordered lists 的縮寫。您可以自定義有序列表的初始序號
目前大多數瀏覽器支持 <ol> 標簽。
標簽定義及使用說明
<ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。
使用<li> 標簽來定義列表選項。
提示和注釋
提示: 如果需要無序列表,請使用 <ul> 標簽。
提示:使用 CSS 來定義列表樣式。
HTML 4.01 與 HTML5中的差異
在 HTML 4.01 中"start" 和 "type" 屬性已經廢棄,HTML5不支持該屬性。
"reversed" 屬性是 HTML5 中的新屬性。
在HTML 4.01中"compact" 屬性已經廢棄,在 HTML5中不支持該屬性。
屬性
New:HTML5 新屬性。
屬性 | 值 | 描述 |
---|---|---|
compact | compact | HTML5中不支持,不贊成使用。請使用樣式取代它。規定列表呈現的效果比正常情況更小巧。 |
reversedNew | reversed | 指定列表倒序(9,8,7...) |
start | number | HTML5不支持,不贊成使用。請使用樣式取代它。規定列表中的起始點。 |
type | 1 A a I i | 規定列表的類型。不贊成使用。請使用樣式代替。 |
dl 自定義列表 dt 自定義標題 dd 自定義列表內容這三個標簽我放在一起講因為這三個標簽是配合在一起的用法和ul標簽ol標簽差不多,就不再過多的敘述了,一般用到的不是很多。
所有主流瀏覽器都支持 <dl> 標簽。
標簽定義及使用說明
<dl> 標簽定義一個描述列表。
<dl> 標簽與 <dt> (定義項目/名字)和 <dd> (描述每一個項目/名字)一起使用。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,<dl> 標簽定義一個定義列表。
在 HTML5 中,<dl> 標簽定義一個描述列表。
HTML <dt> 標簽
<dt> 標簽只能夠作為 <dl> 標簽的一個子元素出現,常常后跟一個 <dd> 標簽。
所有主流瀏覽器都支持 <dt> 標簽。
標簽定義及使用說明
<dt> 標簽定義一個描述列表的項目/名字。
<dt> 標簽與 <dl> (定義一個描述列表)和 <dd> (描述每一個項目/名字)一起使用。
一行中的多個 <dt> 標簽表示由緊鄰的下一個 <dd> 元素定義的多個術語。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,<dt> 標簽定義一個定義列表的條目。
在 HTML5 中,<dt> 標簽定義一個描述列表的項目/名字。
hr 導航線這節課最后一個標簽是單標簽,所謂的導航線不過就是一條橫線用來分割。
HTML <hr> 標簽
<hr> 標簽表示段落級元素之間的主題劃分。
所有主流瀏覽器都支持<hr> 標簽。
標簽定義及使用說明
<hr>標簽定義HTML頁面中的主題變化(比如話題的轉移),并顯示為一條水平線。 元素被用來分隔HTML頁面中的內容(或者定義一個變化)。
HTML 4.01與HTML5之間的差異
在HTML5中,<hr> 定義內容中的主題變化,并顯示為一條水平線。
在HTML 4.01中,<hr> 標簽僅僅顯示為一條水平線。
在HTML 4.01中,的所有布局屬性都已廢棄。在HTML5中不再支持這些屬性。請使用CSS來為<HR> 元素定義樣式。
HTML與XHTML之間的差異
在HTML中,<hr> 標簽沒有結束標簽。
在XHTML中,<hr> 標簽必須被正確地關閉,比如<hr /> 。
屬性
屬性 | 值 | 描述 |
---|---|---|
align | left center right | HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的對齊方式 |
noshade | noshade | HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的顏色呈現為純色。 |
size | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的高度。 |
width | pixels % | HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的寬度。 |
謝謝大家的觀看,如果需要今天課程的源代碼和ppt可以私信給我,我會免費發給你,最好使能夠關注小編一下。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。