肖sir_html之基本使用（1）

、新建項(xiàng)目

1、新建===web項(xiàng)目===輸入項(xiàng)目名稱(chēng)====完成

二、新建html文件

在新建項(xiàng)目中新建html模板

輸入文件名稱(chēng)：

三、認(rèn)識(shí)基本格式

聯(lián)想出基本格式：

四、編輯html文件

運(yùn)行html，選擇瀏覽器

五、html常用的快捷鍵

（1）ctrl+n+w web項(xiàng)目創(chuàng)建

（2）ctrl+n+h html文檔創(chuàng)建

（3）ctrl+s 保存html頁(yè)面（頁(yè)面上如果未保存會(huì)顯示*號(hào)）

（4）ctrl+r html運(yùn)行
（5）ctrl+z 撤回
（6）！+tab鍵聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋

（8）ctrl+鼠標(biāo)滾輪，字體方大和縮小

六、認(rèn)識(shí)標(biāo)簽

（1）H標(biāo)簽（標(biāo)題標(biāo)簽）

（2）p標(biāo)簽（段落標(biāo)簽）

（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接

第一種

img中顯示圖片

img中引入圖片

第二種：網(wǎng)上圖片的鏈接：

（4）標(biāo)簽（空格）

（5）em 標(biāo)簽表示斜體

（6）i 標(biāo)簽表示斜體

（7）br 表示換行

（8）b 標(biāo)簽表示加粗

（9） strong 標(biāo)簽表示加粗

（10）s 標(biāo)簽（刪除線(xiàn)）

（11）u 標(biāo)簽（下劃線(xiàn)）

（12）font 顏色

（13）sub下標(biāo)
（14）sup上標(biāo)

標(biāo)簽是默認(rèn)是自動(dòng)換行的，因此設(shè)置好寬度之后，能夠較好的實(shí)現(xiàn)效果，但是最近的項(xiàng)目中發(fā)現(xiàn)，使用ajax加載數(shù)據(jù)之后，p標(biāo)簽內(nèi)的內(nèi)容沒(méi)有換行，導(dǎo)致布局錯(cuò)亂，于是嘗試著使用換行樣式，雖然解決了問(wèn)題，但是并沒(méi)有發(fā)現(xiàn)本質(zhì)原因，本質(zhì)在于，我當(dāng)時(shí)獲取的數(shù)據(jù)是一長(zhǎng)串的數(shù)字，瀏覽器應(yīng)該是對(duì)數(shù)字和英文單詞處理方式相近，不會(huì)截?cái)唷?

先給出各種方式，再具體介紹每一個(gè)屬性。

強(qiáng)制不換行

p { white-space:nowrap; }

自動(dòng)換行

p { word-wrap:break-word; }

強(qiáng)制英文單詞斷行

p { word-break:break-all; }

*注意：設(shè)置強(qiáng)制將英文單詞斷行，需要將行內(nèi)元素設(shè)置為塊級(jí)元素。

超出顯示省略號(hào)

p{text-overflow:ellipsis;overflow:hidden;}

white-space 屬性設(shè)置如何處理元素內(nèi)的空白

normal 默認(rèn)。空白會(huì)被瀏覽器忽略。

pre 空白會(huì)被瀏覽器保留。其行為方式類(lèi)似 HTML 中的 pre 標(biāo)簽。

nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 br 標(biāo)簽為止。

pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。

pre-line 合并空白符序列，但是保留換行符。

inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。

normal: 只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理)

break-word:在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換行

word-break: normal|break-all|keep-all;

word-break 屬性用來(lái)標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句。

normal：使用瀏覽器默認(rèn)的換行規(guī)則。

break-all:允許再單詞內(nèi)換行

keep-all:只能在半角空格或連字符處換行

舉例看起區(qū)別：

<!doctype html>

<head>

<title>Document</title>

<style>

.word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}

/* 強(qiáng)制不換行 */

.nowrap{white-space:nowrap;}

/* 允許單詞內(nèi)斷句，首先會(huì)嘗試挪到下一行，看看下一行的寬度夠不夠，

不夠的話(huà)就進(jìn)行單詞內(nèi)的斷句 */

.breakword{word-wrap: break-word;}

/* 斷句時(shí)，不會(huì)把長(zhǎng)單詞挪到下一行，而是直接進(jìn)行單詞內(nèi)的斷句 */

.breakAll{word-break:break-all;}

/* 超出部分顯示省略號(hào) */

.ellipsis{text-overflow:ellipsis;overflow:hidden;}

</style>

</head>

<body>

<p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>

<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>

<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>

<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>

<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>

</div>

</body>

</html>

效果如下：

HTML文本格式化通常使用一系列特定的標(biāo)簽來(lái)改變文本的外觀或結(jié)構(gòu)。這些標(biāo)簽可以控制文本的字體、大小、顏色、對(duì)齊方式等，也可以用來(lái)標(biāo)記文本的邏輯結(jié)構(gòu)（如段落、標(biāo)題、列表等）。除了這些基本的格式化標(biāo)簽，HTML還支持通過(guò)CSS（級(jí)聯(lián)樣式表）來(lái)更精細(xì)和靈活地控制文本的格式和樣式。

參考文檔：https://www.cjavapy.com/article/3306/

1、標(biāo)題

HTML中，文本格式化和結(jié)構(gòu)化主要通過(guò)一系列標(biāo)簽來(lái)完成，其中標(biāo)題（Headings）標(biāo)簽是最常用于定義文本格式的元素之一。HTML提供了六級(jí)標(biāo)題標(biāo)簽，從 <h1> 到 <h6>，<h1> 表示最高級(jí)別的標(biāo)題，而 <h6> 表示最低級(jí)別的標(biāo)題。這些標(biāo)題標(biāo)簽不僅幫助改善網(wǎng)頁(yè)的結(jié)構(gòu)和可讀性，還對(duì)搜索引擎優(yōu)化（SEO）至關(guān)重要，因?yàn)樗阉饕媸褂眠@些標(biāo)簽來(lái)識(shí)別網(wǎng)頁(yè)上的不同部分和內(nèi)容的層次結(jié)構(gòu)。每個(gè)級(jí)別的標(biāo)題都有默認(rèn)的樣式，通常是不同的大小和加粗，以顯示它們的層次結(jié)構(gòu)

<h1>這是一個(gè) H1 標(biāo)題</h1>
<h2>這是一個(gè) H2 標(biāo)題</h2>
<h3>這是一個(gè) H3 標(biāo)題</h3>
<h4>這是一個(gè) H4 標(biāo)題</h4>
<h5>這是一個(gè) H5 標(biāo)題</h5>
<h6>這是一個(gè) H6 標(biāo)題</h6>

2、段落與換行

HTML中，文本格式化通常涉及使用特定的標(biāo)簽來(lái)控制文本的顯示方式。段落和換行是兩個(gè)基本但非常重要的文本格式化概念。用<p>創(chuàng)建段落，<br>插入換行。

1）段落 (<p> 標(biāo)簽)

<p> 標(biāo)簽自帶上下邊距，用以區(qū)分不同的段落。
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>

2）換行 (<br> 標(biāo)簽)

<br> 標(biāo)簽只是簡(jiǎn)單地添加一個(gè)換行點(diǎn)，不添加任何額外的空間或邊距，并且通常用于詩(shī)歌或地址等需要精確控制換行位置的文本。

這是文本行的開(kāi)始。<br>這是新的一行，但在同一個(gè)段落內(nèi)。

3、強(qiáng)調(diào)文本

使用<em>和<strong>強(qiáng)調(diào)文本。HTML中，強(qiáng)調(diào)文本通常使用 <em> 和 <strong> 標(biāo)簽來(lái)實(shí)現(xiàn)。這兩個(gè)標(biāo)簽既有語(yǔ)義意義，也影響文本的表現(xiàn)形式。

<em> 標(biāo)簽用于表示強(qiáng)調(diào)文本，通常表現(xiàn)為斜體，用以表示文本的輕度強(qiáng)調(diào)。

<strong> 標(biāo)簽用于表示更強(qiáng)烈的強(qiáng)調(diào)，通常表現(xiàn)為加粗，表示文本的高度強(qiáng)調(diào)。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了兩種主要的列表類(lèi)型：有序列表（<ol>）和無(wú)序列表（<ul>）。兩種類(lèi)型都使用列表項(xiàng)（<li>）來(lái)定義列表中的實(shí)際項(xiàng)。

1）有序列表

有序列表以 <ol> 標(biāo)簽開(kāi)始。每個(gè)列表項(xiàng)都放在 <li> 標(biāo)簽內(nèi)。列表是有序的，也就是每個(gè)項(xiàng)目都是編號(hào)的。這適用于項(xiàng)目順序很重要的列表，如食譜或待辦事項(xiàng)列表。

<ol>
  <li>第一項(xiàng)</li>
  <li>第二項(xiàng)</li>
  <li>第三項(xiàng)</li>
</ol>

2）無(wú)序列表

無(wú)序列表以 <ul> 標(biāo)簽開(kāi)始。像有序列表一樣，每個(gè)項(xiàng)都放在 <li> 標(biāo)簽內(nèi)。然而，無(wú)序列表中的項(xiàng)目不是編號(hào)的。使用圓點(diǎn)符號(hào)進(jìn)行表示。這適用于項(xiàng)目順序不重要的列表，如購(gòu)物清單。

<ul>
  <li>蘋(píng)果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>這是一個(gè)<em>斜體</em>和<strong>加粗</strong>的示例。</p>
<p><u>這段文本下劃線(xiàn)</u>和<s>這段文本是刪除線(xiàn)</s>。</p>
<p>化學(xué)水分子公式為H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
這是預(yù)格式化文本，
保留了空格和
換行符。
</pre>

<blockquote>這是一個(gè)長(zhǎng)引用的示例，可能包含多個(gè)段落。</blockquote>
<p>這是一個(gè)<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復(fù)制文本。</p>
<p><samp>這是計(jì)算機(jī)程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>

</body>
</html>

參考文檔：https://www.cjavapy.com/article/3306/

在線(xiàn)咨詢(xún)

上一篇：HTML5 的常見(jiàn)用法
下一篇：京東白條怎么開(kāi)通？激活京東白條方法流程圖解

您的項(xiàng)目需求

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