8.5前端之Html樣式和文字格式化
阿新 • • 發佈：2021-08-05
樣式屬性<style>
style 屬性用於改變 HTML 元素的樣式
背景顏色
background-color 屬性為元素定義了背景顏色：
<body style="">
<h1 style="">This is a title</h1>
<p style="" contenteditable="true">This is a paragraph</p>
</body>
字型、顏色、尺寸
font-family定義元素中文字的字體系列：
color定義元素中文字的字型顏色：---注意color的用法
font-size定義元素中文字的字型尺寸：
<body>
<h2 style="font-family: '微軟雅黑';">This is another title of the html</h2>
<p style="font-family: '微軟雅黑'; color: blue; font-size: 20px;" contenteditable="true">This is another paragraph</p>
</body>
文字對齊
text-align 屬性規定了元素中文字的水平對齊方式：
<body>
<h3 style="font-family: '微軟雅黑'; text-align: center;">In the middle of this article</h3>
<p style="font-family: '微軟雅黑'; text-align: left;">In the left of this article</p>
<p style="font-family: '微軟雅黑'; text-align: right;">In the right of this article</p>
</body>
文字格式化
文字格式化和文字預格式化的區別
文字格式化不會保留文字中的空格，文字預格式化會保留：
<b>This is a bold</b>
<br />
<big>This is another word</big>
<br />
<em>This is emphasized(adj.加強的)</em>
<br />
<i>This is italic(adj.斜體的)</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript(adj.下標的)</sub>
<br />
This text contains
<sup>superscript(adj.標在上方的)</sup>
<p>這是<del style="font-family: '微軟雅黑';" contenteditable="false">刪除字</del>這是<ins style="" contenteditable="true">插入字</ins></p>
文字格式化的標籤：
| 標籤 | 描述 |
|---|---|
<b> |
定義粗體文字。 |
<big> |
定義大號字。 |
<em> |
定義著重文字。 |
<i> |
定義斜體字。 |
<small> |
定義小號字。 |
<strong> |
定義加重語氣。 |
<sub> |
定義下標字。 |
<sup> |
定義上標字。 |
<ins> |
定義插入字。 |
<del> |
定義刪除字。 |
文字預格式化：
<pre style="text-align: left;">
這是預格式文字，他不會省略掉 空格
適合用於來寫程式碼內容
</pre>
<pre>
/*迴圈輸入map鍵值對*/
while (true){
System.out.println("輸入Key:");
BufferedReader buff = new BufferedReader(new InputStreamReader(System.in));
try {
Key = buff.readLine();
}catch (IOException e){
System.out.println("這是在輸入Key的時候丟擲的異常!!!");
System.out.println(e.getMessage());
e.printStackTrace();
}
if (!Key.equals("")){
System.out.println("輸入Value:");
BufferedReader buff1 = new BufferedReader(new InputStreamReader(System.in));
try {
Value = buff1.readLine();
}catch (IOException e){
System.out.println("這是在輸入Value的時候丟擲的異常!!!");
System.out.println(e.getMessage());
e.printStackTrace();
}
if (!Value.equals("")){
//Map裡面有內容--->將上面內容放入Map中
map.put(Key, Value);
}else {
break;
}
}else {
break;
}
}
</pre>
<!--預格式化標籤內的內容會保留其原有的格式-->
計算機輸出標籤
| 標籤 | 描述 |
|---|---|
<code> |
定義計算機程式碼。 |
<kbd> |
定義鍵盤碼。 |
<samp> |
定義計算機程式碼樣本。 |
<tt> |
定義打字機程式碼。 |
<var> |
定義變數。 |
<pre> |
定義預格式文字。 |
<code>計算機程式碼</code>
<!--這個標籤不會像預格式化標籤一樣保留程式碼的格式-->
<br />
<code>System.out.println("Hello World")</code>
<hr />
<kbd>Keyboard Input--->鍵盤輸入</kbd>
<br />
<kbd accesskey="Enter">Enter</kbd>
<hr />
<tt>Teletype text--->電傳文字</tt>
<br />
<tt>This is a content about article</tt>
<hr />
<samp>Sample text--->手機文字輸入的軟體</samp>
<br />
<samp>This is a text</samp>
<hr />
<var>
var i = getElementId();
</var>
<hr />
<dfn>定義專案</dfn>
引用、引用和術語定義
| 標籤 | 描述 |
|---|---|
<abbr> |
定義縮寫。 |
<acronym> |
定義首字母縮寫。 |
<address> |
定義地址。 |
<bdo> |
定義文字方向。 |
<blockquote> |
定義長的引用。 |
<q> |
定義短的引用語。 |
<cite> |
定義引用、引證。 |
<dfn> |
定義一個定義專案。 |
縮寫和首字母縮寫
結合title屬性來使用，滑鼠放到縮寫上可顯示全部的內容：
<abbr title="etcetera(adj.附加物)">etc</abbr>
<br />
<acronym title="https://www.cnblogs.com/JunkingBoy/">www</acronym>
地址引用：
<address>
MyBlogs is<a href="https://www.cnblogs.com/JunkingBoy/">Click to my blogs</a><br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
定義文字方向：--->結合屬性(dir)使用：
<bdo dir="rtl">
假亦真時真亦假
<p style="text-align: left;">對於上面的內容你必須思考他是從左往右的還是從右往左的</p>
</bdo>
長引用和短引用：--->區別在於短引用會加個" "引號
<strong>下面是短的內容引用：</strong>
<span style="font-family: '微軟雅黑';color: red; font-size: xx-large;"><q contenteditable="true">請往這看</q></span>
定義引用、引證：
<img src="../Picture/Big.gif" width="300" height="300" alt="This is a GIF" />
<p><cite>The Scream</cite>是一直大大的皮卡丘動圖</p>
樣式分類
基於內容的樣式
-
<abbr>--->縮寫 -
<acronym>--->首字母縮寫 -
<cite>--->定義引用、引證 -
<dfn>--->定義一個定義專案 -
<em>--->定義著重文字 -
<kbd>--->定義文字方向 -
<samp>--->定義計算機程式碼樣本 -
<strong>--->定義加重語氣 -
<var>--->定義變數
物理樣式
-
<b> -
<big> -
<i> -
<samll> -
<strike> -
<sub> -
<sup> -