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.hmttv.cn/uploadfile/2024/0806/20240806105710864.gif"/>
</div>
 
<div align="center">
 <img src="http://www.hmttv.cn/uploadfile/2024/0806/20240806105710864.gif"/>
</div>
 
<div align="right">
 <img src="http://www.hmttv.cn/uploadfile/2024/0806/20240806105710864.gif"/>
</div>
<!--替换图片文字,加载不出图片时显示文字-->
<img src="http://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

12.超链接

<a href="http://www.12306.com">12306</a>
<!--target属性表示在新页面打开超链接-->
<a href="http://www.12306.com" target="_blank">http://www.12306.com</a>
<!--超链接上显示文字-->
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
<!--图片超链接-->
<a href="http://www.12306.com">
<img src="http://www.hmttv.cn/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.hmttv.cn/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> 标签