HTML5文档的文本控制标记 图像标记 超链接标记

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML » HTML5文档的文本控制标记 图像标记 超链接标记

HTML5文本控制标记

在一个网页中文字往往占有很大的篇幅,为了让文字能够排版整齐,结构清晰,HTML5提供了一些文本控制标记,通常有以下几种:

  • 标题标记<h1>~<h6>
  • 段落标记<p>

为了使网页更具有语义化,我们经常会在页面中用到标题标记。HTML5提供了6个等级的标题标记:<h1>~<h6>,它的基本语法格式为:<hn align="对齐方式">标题文本</hn>,n取值为1~6。

使用<h1>~<h6>标记设置6中不同级别的标题。一个页面中只能使用一个<h1>标记,常常被用在网站的LOGO部分,h元素具有确切的语义,所以谨慎选择恰当的标记来构建文档结构。鳄鱼君提请大家,不要仅仅为了加粗或更改文字大小而使用h标记

为了让网页展示的文字更加有条理,就离不开段落标记<p>,它是HTML5文档中最常见的标记,基本语法格式为:<p align="对齐方式">段落文本</p>。语法中align属性为<p>标记的可选属性,和标题标记<h1>~<h6>一样,同样可以使用align属性设置段落文本的对齐方式。基本用法如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>段落标记演示</title>
</head>
<body>
<p>欢迎访问鳄鱼教程!这里有最详细的教程资源</p>
<p align="left">这段文本的显示方式为左对齐</p>
<p align="center">这段文本的显示方式为居中对齐</p>
<p align="right">这段文本的显示方式为右对齐</p>
</body>
</html>

水平线

水平线将段落与段落之间隔开,使文档结构清晰,层次分明。水平线的基本语法格式为:<hr 属性="属性值"/><hr/>单标记,在网页中输入一个<hr/>,就添加了一条默认样式的水平线。<hr/>标记常用的属性:

属性名 含义 属性值
align 设置水平线的对齐方式 可选择left.right.center三种值,默认为center,居中对齐
size     设置水平线的粗细 以像素为单位,默认为2像素
color 设置水平线的颜色 可是颜色名称.十六进制#RGB.rgb(r,g,b)
width 设置水平线的宽度 可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100%

换行标记

在HTML中,一个段落从左边开始到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望段落文本强制换行,可以使用换行标记<br/>。在浏览器中使用回车键并不会使段落换行,而是使用换行标记<br/>

文本格式化标记

在网页中,有时需要为文字设置粗体、斜体、下划线效果,为此HTML准备了专门的文本格式化标记,使文字以特殊的方式显示。常用的文本格式标记有以下几种:

标记 显示效果
<b></b>和<strong></strong> 文字以粗体方式显示(b定义文本粗体.strong定义强调文本)
<i></i>和<em></em> 文字以斜体方式显示(i定义斜体字,em定义强调文本)
<s></s>和<del></del>

文字以加删除线方式显示(HTML5不赞成使用s)

<u></u>和<ins></ins> 文字以加下划线方式显示(HTML5不赞成使用u)

特殊字符标记

如何在网页上显示一些包含特殊字符的文本呢?你在这个页面上看到的< >,这就是特殊字符,如果不经过处理,浏览器会解析掉它的。下表是一些常见的特殊字符标记:

特殊字符 描述 字符代码
  空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2(上标2) &sup2;
³ 平方3(上标3) &sup3;

HTML5图像标记

网页中图像过大,会造成网页打开缓慢,太小又会影响图像的质量,,那么哪一种图像的格式可以解决这个问题呢?目前网页上常用的图像格式有GIF、PNG、JPG三种,我们来分别看一下。

GIF

GIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片的质量几乎没有损失。再加上GIF支持透明(全透明或全不透明),因此很合适在互联网上使用。GIF格式常用LOGO,小图标以及其他色彩相对单一的图像。

PNG

PNG格式包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明、半透明、全不透明),并且颜色过渡平滑,但PNG不支持动画。

JPG

JPG格式所能显示的颜色比GIF和PNG要多得多,可以用来保存超过256种颜色的图像,但是JPG是一种有损压缩的图像格式,这就意味着每修改一次图片都会造成一些图像数据的丢失。

浏览网页时,我们经常会看到一些精美的图片,在网页中使用图像就需要使用图像标记,它的基本语法格式为:<img src="图像URL"/>,其中src属性用于指定图像文件的路径和文件名。图像标记中其他常见的属性:

  • title属性,使用title属性设置提示文字,当鼠标移动到图像上时就会出现提示文本。
  • align属性,图像的对齐属性align,用于调整图像的位置。
  • alt属性,图像的替换文本属性,在图像无法显示时告诉用户该图像的内容。
  • width、height属性,用力啊定义图像的宽度和高度,通常我们只设置其中的一个,另一个会按原图等比例显示。
  • border属性,为图像添加边框,设置边框的宽度,但边框的颜色的调整仅仅通过HTML属性是不能够实现的。
  • vspace、hspace属性,HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

通常创建一个文件夹专门用于存放图像文件,这时候插入图像就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。这涉及到相对路径和绝对路径,你必须要搞清楚!

绝对路径

绝对路径就是网页上的文件或目录在硬盘上真正的路径。网页中不推荐使用绝对路径,因为网页制作完成之后我们需要将所有的文件上传到服务器

相对路径

相对路径就是相当于当时文件的路径,通过层级的关系描述图像的位置。相对路径不带有盘符,通常是以HTML网页文件为起点。

我们重点来看一下相对路径的用法,这也是我们以后需要经常使用的我们来看一下具体的使用方法(由于样式污染,会存在alt和title属性):

/*图像文件和html文件位于同一文件夹*/
<图像标签img src="logo.png"/>  /*只需输入图像文件的名字即可*/
/*图像文件位于html文件的下一级文件夹*/
<图像标签img src="img/logo.png"/>  /*输入文件夹名和文件名,之间用"/"隔开*/
/*图像文件位于html文件的上一级文件夹*/
<图像标签img src="../logo.png"/>  /*在文件名之前加入"../",如果是上两级,则需要使用"../../",以此类推..*/

HTML5超链接标记

在HTML中创建超链接非常简单,只需要用<a> <a/>环绕需要被链接的对象即可。它的基本语法格式为:

<a href="跳转目标" target="目标窗口的弹出方式" rel="noopener noreferrer">

对超链接标记常用的属性解释如下:

  • href属性,用于指定链接目标的url地址,当为<a>标记应用href属性时,它就具有了超链接的功能。
  • target属性,用于指定链接页面的打开方式,其取值有_self_blank两种,其中_self为默认值,意为在原窗口中打开,_blank为在新窗口中打开。

HTML语言提供了一种特殊的链接——锚点链接,通过创建锚点链接,用户能够快速定位到目标内容。我们来看一个案例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>锚点链接演示</title>
</head>
<body>
<strong>鳄鱼教程介绍</strong>
<ul>
	<li><a href="#one">跳转到id为one的位置</a></li>
	<li><a href="#two"></a></li>
	<li><a href="#three"></a></li>
</ul>
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
</body>
</html>

通常锚链接用于文档目录,便于用户快速的减速内容,那么跳转的位置就应该是h标记,这里由于样式污染,不再演示,可行编写长篇文档测试一下效果。创建锚点链接分为两步:

  • 使用“< a href=”#id名”>链接文本</a>”创建连接文本。
  • 使用相应的id名称标注跳转目标的位置。

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《HTML5文档的文本控制标记 图像标记 超链接标记》 发布于2020-04-06

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

5 + 8 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册