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) |
如何在网页上显示一些包含特殊字符的文本呢?你在这个页面上看到的< >
,这就是特殊字符,如果不经过处理,浏览器会解析掉它的。下表是一些常见的特殊字符标记:
特殊字符 | 描述 | 字符代码 |
---|---|---|
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 平方3(上标3) | ³ |
HTML5图像标记
网页中图像过大,会造成网页打开缓慢,太小又会影响图像的质量,,那么哪一种图像的格式可以解决这个问题呢?目前网页上常用的图像格式有GIF、PNG、JPG三种,我们来分别看一下。
GIFGIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片的质量几乎没有损失。再加上GIF支持透明(全透明或全不透明),因此很合适在互联网上使用。GIF格式常用LOGO,小图标以及其他色彩相对单一的图像。
PNGPNG格式包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明、半透明、全不透明),并且颜色过渡平滑,但PNG不支持动画。
JPGJPG格式所能显示的颜色比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名称标注跳转目标的位置。
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!