整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
紹得比較粗略,大家只要有個印象就可以,后邊我們會在詳細的在具體的前段開發項目中來講解.
一 css3偽類
css3中的偽類允許我們在不適用于JavaScript等腳本的情況下去設置web頁面中某些特定的元素的屬性.
偽類通常以":"(冒號)開頭. :first-child和:last-child是較為常用的偽類.
:first-child將會匹配該元素中的第一個子元素.
html代碼:
<div id="parent">
<p>又見雪飄過</p>
<p>飄于傷心記憶中</p>
<p>讓我再想你</p>
<p>卻掀起我的痛</p>
</div>
css代碼:
#parent p:first-child{color:green; text-decoration:underline; }
執行結果如下:
:last-child則是選取最后一個元素.
二 偽元素
偽元素用于選取元素的特定部分.
在css中有五個偽元素,每個都以一個雙冒號(::)開頭
::first-line 選擇器中文本的第一行
::first-letter 選擇器中文本的第一個字母
::selection 選擇用戶選擇的元素部分
::before 在元素之前插入一些內容
::after 在元素之后插入一些內容
在下面的例子中,::first-line偽元素用于為文本的第一行設置樣式.
html代碼:
<div id="parent1">
<p>早經分了手
<br>為何熱愛尚情重
<br>獨過追憶歲月
<br>或許此生不會懂</p>
</div>
css代碼:
#parent1 p::first-line{color:#AE4141;}
效果如下:
::selection偽元素用于對選定的文本進行設置樣式.
css代碼:
#parent1 p::-webkit-selection{background:#AE4141; color:#fff;}
#parent1 p::selection{background:#AE4141; color:#fff;}
效果如下:
使用了瀏覽器前綴-webkit-.有的瀏覽器會不支持::seleciton偽元素
使用::before和::after偽元素允許我們向頁面添加各種各樣的內容.
在下面的例子中,::before偽元素用于在段落之前添加圖像.
html代碼:
<div class="parent">
<p>又再想起你</p>
<p>抱擁飄飄白雪中</p>
<p>讓你心中暖</p>
<p>去驅走我冰凍</p>
</div>
css代碼:
div.parent p::before{ content:url("before.jpg");}
效果如下:
請注意樣式中使用的content關鍵字
::after則會在末尾增加樣式.
三 css3自動換行
word-wrap屬性允許對長單詞進行自動換行處理.它有兩個屬性值:normal和break-word.
html代碼:
<p id="word-wrap">冷風催我醒,原來共你是場夢,像那飄飄雪淚下,弄濕冷清的晚空.原來是那么深愛你.</p>
css代碼:
#word-wrap{width:100px; height:100px; border:2px solid #000000; word-wrap:normal; }
效果如下:
由于是段落內容是中文,所以word-wrap:normal; 和word-wrap:break-word; 效果是一樣的都會自動換行.
四 @font-face
@font-face允許將自定義字體加載到網頁中.借助于此規則,設計不再局限于安裝在用戶計算機上的字體
在IE8和更低版本中,url必須指向Embedded OpenType(eot)文件,而firefox,chrome等支持True Type(ttf)字體和OpenType(otf)字體.
定義一個名為"text"的新字體
@font-face{font-family:"text"; src:url("text.otf"); }
然后這個新的字體可以使用了如p{font-family:text;}
HTML文本格式化通常使用一系列特定的標簽來改變文本的外觀或結構。這些標簽可以控制文本的字體、大小、顏色、對齊方式等，也可以用來標記文本的邏輯結構（如段落、標題、列表等）。除了這些基本的格式化標簽，HTML還支持通過CSS（級聯樣式表）來更精細和靈活地控制文本的格式和樣式。
參考文檔：https://www.cjavapy.com/article/3306/
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>HTML中，文本格式化通常涉及使用特定的標簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創建段落，<br>插入換行。
1）段落 (<p> 標簽)
<p> 標簽自帶上下邊距，用以區分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>2）換行 (<br> 標簽)
<br> 標簽只是簡單地添加一個換行點，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。
這是文本行的開始。<br>這是新的一行，但在同一個段落內。使用<em>和<strong>強調文本。HTML中，強調文本通常使用 <em> 和 <strong> 標簽來實現。這兩個標簽既有語義意義，也影響文本的表現形式。
<em> 標簽用于表示強調文本，通常表現為斜體，用以表示文本的輕度強調。
<strong> 標簽用于表示更強烈的強調，通常表現為加粗，表示文本的高度強調。
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>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><!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/
段落是通過 <p> 標簽定義的。
實際例子
<p>This is a paragraph</p> <p>This is another paragraph</p>
注釋：瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）
提示：使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它！（但是不要用 <br /> 標簽去創建列表。）
不要忘記結束標簽
即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來：
實際例子
<p>This is a paragraph <p>This is another paragraph
上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。
注釋：在未來的 HTML 版本中，不允許省略結束標簽。（現在開發已經不允許了）
提示：通過結束標簽來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始，并在何處結束，不論對您還是對瀏覽器來說，都會使代碼更容易理解。
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽：
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽。
<br> 還是 <br />
你會發現 <br> 與 <br /> 很相似。
在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標簽（閉合標簽）的 HTML 元素。
即使 <br> 在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠的保障。
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。
對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。
標簽 描述
<p> 定義段落。
<br /> 插入單個折行（換行）。
如果您覺得有用，麻煩點個贊，支持一下！！
歡迎提問與建議。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
