肖sir_html之基本使用（1）

、新建項目

1、新建===web項目===輸入項目名稱====完成

二、新建html文件

在新建項目中新建html模板

輸入文件名稱：

三、認識基本格式

聯想出基本格式：

四、編輯html文件

運行html，選擇瀏覽器

五、html常用的快捷鍵

（1）ctrl+n+w web項目創建

（2）ctrl+n+h html文檔創建

（3）ctrl+s 保存html頁面（頁面上如果未保存會顯示*號）

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

（8）ctrl+鼠標滾輪，字體方大和縮小

六、認識標簽

（1）H標簽（標題標簽）

（2）p標簽（段落標簽）

（3）img 標簽（圖片標簽）
兩種：第一種widows上傳圖片，第二種：網上圖片鏈接

第一種

img中顯示圖片

img中引入圖片

第二種：網上圖片的鏈接：

（4）標簽（空格）

（5）em 標簽表示斜體

（6）i 標簽表示斜體

（7）br 表示換行

（8）b 標簽表示加粗

（9） strong 標簽表示加粗

（10）s 標簽（刪除線）

（11）u 標簽（下劃線）

（12）font 顏色

（13）sub下標
（14）sup上標

標簽是默認是自動換行的，因此設置好寬度之后，能夠較好的實現效果，但是最近的項目中發現，使用ajax加載數據之后，p標簽內的內容沒有換行，導致布局錯亂，于是嘗試著使用換行樣式，雖然解決了問題，但是并沒有發現本質原因，本質在于，我當時獲取的數據是一長串的數字，瀏覽器應該是對數字和英文單詞處理方式相近，不會截斷。

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

強制不換行

p { white-space:nowrap; }

自動換行

p { word-wrap:break-word; }

強制英文單詞斷行

p { word-break:break-all; }

*注意：設置強制將英文單詞斷行，需要將行內元素設置為塊級元素。

超出顯示省略號

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

white-space 屬性設置如何處理元素內的空白

normal 默認。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標簽。

nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br 標簽為止。

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

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

inherit 規定應該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。

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

break-word:在長單詞或URL地址內部進行換行

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

word-break 屬性用來標明怎么樣進行單詞內的斷句。

normal：使用瀏覽器默認的換行規則。

break-all:允許再單詞內換行

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

舉例看起區別：

<!doctype html>

<head>

<title>Document</title>

<style>

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

/* 強制不換行 */

.nowrap{white-space:nowrap;}

/* 允許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，

不夠的話就進行單詞內的斷句 */

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

/* 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句 */

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

/* 超出部分顯示省略號 */

.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文本格式化通常使用一系列特定的標簽來改變文本的外觀或結構。這些標簽可以控制文本的字體、大小、顏色、對齊方式等，也可以用來標記文本的邏輯結構（如段落、標題、列表等）。除了這些基本的格式化標簽，HTML還支持通過CSS（級聯樣式表）來更精細和靈活地控制文本的格式和樣式。

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

1、標題

HTML中，文本格式化和結構化主要通過一系列標簽來完成，其中標題（Headings）標簽是最常用于定義文本格式的元素之一。HTML提供了六級標題標簽，從 <h1> 到 <h6>，<h1> 表示最高級別的標題，而 <h6> 表示最低級別的標題。這些標題標簽不僅幫助改善網頁的結構和可讀性，還對搜索引擎優化（SEO）至關重要，因為搜索引擎使用這些標簽來識別網頁上的不同部分和內容的層次結構。每個級別的標題都有默認的樣式，通常是不同的大小和加粗，以顯示它們的層次結構

<h1>這是一個 H1 標題</h1>
<h2>這是一個 H2 標題</h2>
<h3>這是一個 H3 標題</h3>
<h4>這是一個 H4 標題</h4>
<h5>這是一個 H5 標題</h5>
<h6>這是一個 H6 標題</h6>

2、段落與換行

HTML中，文本格式化通常涉及使用特定的標簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創建段落，<br>插入換行。

1）段落 (<p> 標簽)

<p> 標簽自帶上下邊距，用以區分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>

2）換行 (<br> 標簽)

<br> 標簽只是簡單地添加一個換行點，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。

這是文本行的開始。<br>這是新的一行，但在同一個段落內。

3、強調文本

使用<em>和<strong>強調文本。HTML中，強調文本通常使用 <em> 和 <strong> 標簽來實現。這兩個標簽既有語義意義，也影響文本的表現形式。

<em> 標簽用于表示強調文本，通常表現為斜體，用以表示文本的輕度強調。

<strong> 標簽用于表示更強烈的強調，通常表現為加粗，表示文本的高度強調。

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

4、列表

HTML 提供了兩種主要的列表類型：有序列表（<ol>）和無序列表（<ul>）。兩種類型都使用列表項（<li>）來定義列表中的實際項。

1）有序列表

有序列表以 <ol> 標簽開始。每個列表項都放在 <li> 標簽內。列表是有序的，也就是每個項目都是編號的。這適用于項目順序很重要的列表，如食譜或待辦事項列表。

<ol>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>

2）無序列表

無序列表以 <ul> 標簽開始。像有序列表一樣，每個項都放在 <li> 標簽內。然而，無序列表中的項目不是編號的。使用圓點符號進行表示。這適用于項目順序不重要的列表，如購物清單。

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

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

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

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

<blockquote>這是一個長引用的示例，可能包含多個段落。</blockquote>
<p>這是一個<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>進行網頁設計。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復制文本。</p>
<p><samp>這是計算機程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>

</body>
</html>

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

在線咨詢

上一篇：HTML5 的常見用法
下一篇：京東白條怎么開通？激活京東白條方法流程圖解

您的項目需求

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