欢迎光临
我们一直在努力

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

今天来跟大家详细聊一下HTML中与文本有关的常用的标签,主要包括段落标签p、换行标签br、标题标签hn、强调语义标签strong和em、突出显示标签mark、装饰性标签span,希望对大家了解HTML有一定的帮助,对进一步学习页面编辑打好基础。


1、段落标签p

段落标签的语法格式为:<p>段落文本</p>。被其标记的文本,默认会与上下文之间产生一行的间隔。通常情况下,我们在DW的设计视图界面输入一段文本后,按回车键,就会在该段文本的前后自动加上<p>和</p>,不需要专门书写段落标签。

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

将光标放在段落标签的起始标签的p后面,键入空格,就会出现该标签的可用属性,具体语法格式为<p 属性名1=“属性值1”属性名2=“属性值2 ……>文本</p>,其中常用的属性是align和class:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

align属性中所说的“容器”,是指段落文本的外侧对象,例如:段落是放在一个单元格中的,那么单元格就是该段落的容器,此时如果align="center",则段落文本是相对单元格居中显示的。如果段落没有放入任何对象内,则它所属的容器就是页面。如下图,段落文本是相对页面右对齐显示:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

class是指定段落所使用的类,这个类一般是CSS定义的样式类。大家可能会说,难道文本不能设定颜色、大小等效果吗?能!按照设计网页的常规思路,有两种方法,一是在头部区域利用<style></style>标签设定(见本文第5点内容);一种是利用CSS类,本文中先不涉及,后面的文章会详细讲解CSS样式。

2、换行标签br

换行标签是个单标签,一般使用/来结束标签,即正确格式为<br />。它的功能就是换行,也就是说在想要换行的地方输入一个<br />就OK了,该标签没有属性,效果如下图:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

3、标题标签hn

其中n=1~6。即"<h1>…</h1>"至"<h6>…</h6>",它们是DW预设好效果的标题文本,其预设效果为:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

hn的常用属性也是align和class,属性值与p标签中所讲的一致。

4、强调语义标签strong和em

所谓强调语义是指,一方面显示加粗或倾斜效果,一方面加重语气以更加吸引搜索引擎。<strong>文本</strong>是加粗文本,<em>文本</em>是倾斜文本。在语气上,strong语气较重,em语气较轻。它们没有属性,效果如下:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

5、突出显示标签mark

mark标签是HTML5的新标签,IE8以下的浏览器不解析该标签。其语法格式为:<mark>文本</mark>。它是为文本设定了黄色背景,以突出显示,效果如下。如果设计视图看不到突出显示效果,只要在浏览器中预览该页面就能看到了(本文所用浏览器为QQ浏览器)。

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

<mark>中不能直接修改背景颜色,要想修改突出显示的背景色,需要在头部区域设置<style>,例如想要将背景色改为浅蓝色,其代码为:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

<style></style>是HTML的样式标签,其内部可以直接定义某个标签的样式。格式为:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

例如,在<style></style>中同时设定了mark和p的样式,效果为:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 

这里设定的属性其实就是CSS的样式属性,所以常用的属性及其解释,将在后续讲解CSS的文章中详细介绍。

6、装饰性标签span

语法格式为<span>文本</span>,其功能是对文本进行装饰。但是在<span>内部也无法设置效果类的属性,也需要借助<style></style>标签。例如,接上例,将“主页”二字设置为红底白字:

网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

 


以上就是我为大家介绍的一些常用的文本类标签。由于水平有限,难免存在不足之处。随着学习的深入,大家将会对HTML标签了解的越来越多。所以欢迎大家对本文内容进行补充,欢迎留言交流!如果觉得有用,欢迎收藏、转发、点赞、关注^_^

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:英协网 » 网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

分享到: 生成海报
avatar

热门文章

  • 评论 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    登录

    忘记密码 ?

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活