首页 > html教程 > 正文

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

转载 2019-02-12 0 48

网页设计技术之Dreamweaver中文本的使用与编辑 一文中,我为大家介绍了DW软件中输入和编辑文本的基本方法,其中涉及到了一些HTML标签,今天就来跟大家详细聊一下HTML中与文本有关的常用的标签,主要包括段落标签p、换行标签br、标题标签hn、强调语义标签strong和em、突出显示标签mark、装饰性标签span,希望对大家了解HTML有一定的帮助,对进一步学习页面编辑打好基础。


1、段落标签p

段落标签的语法格式为:

段落文本

。被其标记的文本,默认会与上下文之间产生一行的间隔。通常情况下,我们在DW的设计视图界面输入一段文本后,按回车键,就会在该段文本的前后自动加上

,不需要专门书写段落标签。
网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

将光标放在段落标签的起始标签的p后面,键入空格,就会出现该标签的可用属性,具体语法格式为

文本

,其中常用的属性是align和class:
网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

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

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

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

2、换行标签br

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

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

3、标题标签hn

其中n=1~6。即"

"至"
",它们是DW预设好效果的标题文本,其预设效果为:
网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍

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

4、强调语义标签strong和em

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

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

5、突出显示标签mark

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

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

中不能直接修改背景颜色,要想修改突出显示的背景色,需要在头部区域设置是HTML的样式标签,其内部可以直接定义某个标签的样式。格式为:

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

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

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

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

6、装饰性标签span

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

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


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

相关文章


  • web技术:动态页面技术jsp和html有啥不同?在编程能有哪些应用?
  • 零基础学习HTML之CSS篇元素显示模式文档流元素浮动和布局
  • 想要成为最好的Web开发人员?十种方式测试你的HTML和CSS编程技能
  • 西安北邮在线靠谱吗?​我放弃画画来北邮在线学HTML!
  • 零基础学习HTML图像热区特殊字符无序列表和有序定义列表表格
  • Web前端工程师培训 DW模板dwt更改后如何更新基于模板的HTML页面
  • 阿里旺铺装修代码的fx.roll滚动特效组件使用详解及HTML代码示例
  • 我们来让视频站启用HTML 5播放器吧,看更优质的视频!