HTML &lt;hr&gt; 標簽

例

當內容的主題發生變化時，使用 <hr> 標簽進行分隔：

<p>HTML 是用于描述 web 頁面的一種語言。</p>

<hr>

<p>CSS 定義如何顯示 HTML 元素。</p>

瀏覽器支持

所有主流瀏覽器都支持 <hr> 標簽。

標簽定義及使用說明

<hr> 標簽定義 HTML 頁面中的主題變化（比如話題的轉移），并顯示為一條水平線。

<hr> 元素被用來分隔 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	leftcenterright	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> 元素的寬度。

全局屬性

<hr> 標簽支持 HTML 的全局屬性。

事件屬性

<hr> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

1.html中文問題

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>

2.標簽

<p> 這是一個開始標簽 
</p> 這是一個結束標簽 
<p> Hello World </p> 標簽之間的文本叫做內容
<h1>大標題</h1>
<h2>小一點的標題</h2>
<h3>再小一點的標題</h3>
<h4>更小一點的標題</h4>

3.元素

<html> 頭標簽
 
 <body> 身體標簽 
 
 <h1>標題</h1> 
 <br/> 換行
<hr/> 水平線
<p>段落表示</p> 
 </body>
 
</html>

4.屬性

<h1 align="center">居中標題</h1>
寫在開始標簽里的 align="center" 就叫屬性 
align 是屬性名 
center 是屬性值 
屬性值應該使用雙引號括起來

5.注釋

<!--注釋內容-->

6.標題

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題5</h6>

7.段落

<p>段落1 </p>
<p>段落2 </p>
<p>段落3 </p>

8.粗體--斜體

<b>b標簽粗體效果</b>
<strong>strong標簽粗體效果</strong> <br/> <!--推薦使用-->
<i>使用 i 標簽帶來的斜體效果</i>
<em>使用 em 標簽帶來的斜體效果</em> <!--推薦使用-->

9.預格式顯示Java代碼

<pre>
public class HelloWorld {
 
 public static void main(String[] args) {
 System.out.println("Hello World");
 }
}
 
</pre>

10.刪除--下劃線

<del>使用del標簽實現的刪除效果</del>
<ins>使用ins標簽實現的下劃線效果</ins>

11.圖像

<img src="圖片路徑"/>
<!--圖像大小-->
<img width="200" height="200" src="圖片路徑"/>
<!--圖像位置-->
<div align="left">
 <img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806105710864.gif"/>
</div>
 
<div align="center">
 <img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806105710864.gif"/>
</div>
 
<div align="right">
 <img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806105710864.gif"/>
</div>
<!--替換圖片文字,加載不出圖片時顯示文字-->
<img src="http://how2j.cn/example_not_exist.gif" alt="這個是一個圖片" />

12.超鏈接

<a >12306</a>
<!--target屬性表示在新頁面打開超鏈接-->
<a  target="_blank">http://www.12306.com</a>
<!--超鏈接上顯示文字-->
<a  title="跳轉到http://www.12306.com">www.12306.com</a>
<!--圖片超鏈接-->
<a >
<img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806105710864.gif"/>
</a>

13.表格

<!--
 table:表格
 tr:行
 td:列
 border:帶邊框的表格
 width:表格高度,px及像素的意思
 td-width:單元格寬度絕對值,也可用百分比顯示(50%)
 algin:單元格水平對齊(left,right,center)
 valgin:單元格垂直對齊(top,middle,bottom)
 colspan:水平合并
 rowspan:垂直合并
 bgcolor:背景顏色
-->
<table border="1" width="200px">
 <tr>
 <td width="50px">1</td>
 <td algin="center">居中</td>
 <td algin="left">靠左</td>
 <td algin="right">靠右</td>
 <td width="80%">1</td>
 <td valign="middle" >中間</td>
 <td valign="top" >頂部</td>
 <td valign="bottom" >底部</td>
 <td colspan="2" >1，2</td>
 <td rowspan="2">1,3</td>
 <td bgcolor="pink">b</td>
 </tr>
</table>

14.列表

<!--ul無序,ol有序-->
<ul>
<li>無序</li>
<li>列表</li>
</ul>
<ol>
<li>有序</li>
<li>列表</li>
</ol>

15.div域span

<!--
div是塊元素，即自動換行 
常見的塊元素還有h1,table,p 
span是內聯元素，即不會換行 
常見的內聯元素還有img,a,b,strong
業界通常結合css來控制頁面布局
-->
<div>
 第一個div
</div>
 
<div>
 第二個div <!--換行-->
</div>
 
<span>
 第一個span
</span>
 
<span>
 第二個span <!--不換行-->
</span>

16.字體

<!--color表示顏色,size表示字體大小-->
<font color="blue" size="+2">藍色大2號字體</font>

17.內聯框架

<!--
iframe相當于瀏覽器里面有個小瀏覽器，在這個小瀏覽器中，打開另一個網頁
-->
<iframe src="http://how2j.cn/" width="600px" height="400px">
</iframe>

18.文本框

<!--普通文本框-->
<input type="text">
<!--設置文本框長度-->
<input type="text" size="10">
<!--初始值文本框-->
<input type="text" value="有初始值的文本框">
<!--有背景文字的文本框,使用屬性placeholder-->
<input type="text" placeholder="請輸入賬號">

19.密碼框

<!--輸入的數據會自動顯示為星號-->
<input type="password">

20.表單

<!--
action獲取數據提交后的頁面,初學者體驗效果就好
get和post的區別 
get 
是form默認的提交方式 
如果通過一個超鏈訪問某個地址，是get方式 
如果在地址欄直接輸入某個地址，是get方式 
提交數據會在瀏覽器顯示出來 
不可以用于提交二進制數據，比如上傳文件 
post 
必須在form上通過 method="post" 顯示指定 
提交數據不會在瀏覽器顯示出來 
可以用于提交二進制數據，比如上傳文件
-->
<form action="http://how2j.cn/study/login.jsp">
賬號：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password" > <br/>
<input type="submit" value="登陸">
</form>

21.單選框

<!--兩個單選，都可以同時選中。但不能取消-->
單選1 <input type="radio" >
單選2 <input type="radio" >
<!--checked默認選中-->
默認選中 <input type="radio" checked="checked" >
<!--多個可單選框,activity參數-->
學習java<input type="radio" name="activity" value="學習java" > <br/>
java<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity" value="lol"> <br/>

22.復選框

<!--復選框,checkbox-->
學習java<input type="checkbox" value="學習java" > <br/>
學習<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

23.下拉列表

<!--
<select> 即下拉列表 
需要配合<option>使用
size:表示顯示高度
multiple:可以用ctrl多選中
selected:默認選中
-->
<select size="2" multiple="multiple >
 <option >1</option>
 <option >2</option>
 <option selected="selected" >3</option>
</select>

24.文本域

<!--
文本域可以有多行，并且可以有滾動條
cols:顯示寬度
rows:顯示行數
-->
<textarea cols="30" rows="8">abc
def
</textarea>

25.普通按鈕

<!--參數button,普通按鈕不具備提交from表單的效果-->
<input type="button" value="一個按鈕">

26.提交按鈕

<!--
<input type="submit"> 即為提交按鈕 
用于提交form，把數據提交到服務端
-->
<form action="/study/login.jsp" method="get">
賬號:<input type="text" name="name"> <br/>
密碼:<input type="password" name="password" > <br/>
<input type="submit" value="登陸">
</form>

27.重置按鈕

<!--
<input type="reset"> 重置按鈕 可以把輸入框的改動復原
-->
<form action="/study/login.jsp">
賬號：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

28.圖像提交

<!--<input type="image" > 即使用圖像作為按鈕進行form的提交-->
<form action="/study/login.jsp">
賬號：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password" > <br/>
<input type="image" src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806105710864.gif">
</form>

29.按鈕

<!--
<button></button>即按鈕標簽 
與<input type="button">不同的是，<button>標簽功能更為豐富 
按鈕標簽里的內容可以是文字也可以是圖像 
如果button的type=“submit” ，那么它就具備提交form的功能
-->
<form action="/study/login.jsp">
賬號：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password" > <br/>
<button type="submit">登陸</button>
 
</form>

30.html綜合演示

簡單登陸注冊模板.html

演示結果:

制簡單文字效果《HTML5系列教程22》

文字內容在網頁是必不可少的重要內容，我們可以在HTML中直接輸入文字，也可以通過Canvas設置文字的字體、大小和樣式，在網頁中呈現并繪制簡單文字效果。這次我們主要介紹在HTML5中利用Canvas如何控制文本的字體大小、顏色、描邊、對齊等方法。

如何控制文本的字體、大小和樣式

Canvas提供了設置文字字體、大小和樣式的函數，這個函數就是font，此函數可以有5個參數，依次代表文字的字體樣式、字體變體、字體粗細、字體大小和字體系列，下圖就是font函數的應用代碼示例

font函數的詳細描述參照下圖表

設置了文字的字體、大小和樣式后，最好通過fillText函數完成文字的繪制。通過Canvas繪制文字的代碼如圖：

在谷歌瀏覽器中預覽的效果：

如何控制文本的顏色

Canvas中有兩種方法可用于改變文本的顏色，一種是通過fillstyle函數設置文本的填充顏色，另一種是通過createLinearGradient函數為文本填充漸變色。控制文本顏色的代碼如下：

在谷歌瀏覽器中預覽的效果：

描繪文本的邊緣

要描繪字體的邊緣效果，需要使用stroKeText函數替代fillText函數，同時要用stroKeStyle屬性替代fillStyle屬性。描繪文本邊緣的代碼如圖：

在谷歌瀏覽器中預覽的效果：

文本對齊方式設置

Canvas中文本的對齊功能使用textAlign屬性進行控制，可供選擇的選項包括start、end、left、center和right。對齊的位置是相對于一條虛擬的垂直線，這條線是由fillText()或strokeText()定義的文本X位置。默認情況下，textAlign屬性被設置成start。

文本被左對齊的情況包括：

textAlign屬性被設為left時；

textAlign屬性被設為start，且文檔方向是ltr(left to right)時；

textAlign屬性被設為end，且文檔方向是rtl(right to left)時；

文本被右對齊的情況包括：

textAlign屬性被設為right時；

textAlign屬性被設為start，且文檔方向是ltr(left to right)時；

textAlign屬性被設為end，且文檔方向是rtl(right to left)時；

文本對齊的設置代碼如圖：

在谷歌瀏覽器中預覽的效果：

在HTML5中繪制簡單的文字效果還是挺簡單的，個人而言也比較好玩。希望大家有時間多練習練習代碼，試著自己改變參數來實現不同的效果。謝謝大家的觀看！祝大家:身體健康、生活愉快！

在線咨詢

上一篇：HTML5的新增標簽有哪些？
下一篇：用Python爬取六大平臺的彈幕、評論，看這一篇就夠了

您的項目需求

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

整合營銷服務商

HTML &amp;lt;hr&amp;gt; 標簽

制簡單文字效果《HTML5系列教程22》

您的項目需求

HTML <hr> 標簽