热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html5最小是h1到h7,IT兄弟连HTML5教程HTML5文字版面和编辑标签HTML基础标签

指引网页中的信息主要是以文本为主的,可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文

c40460fa90c841ec98af4b08a7da5083.jpg

指引

网页中的信息主要是以文本为主的,可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在

标记中编写。文字是网页设计最基础的部分,一个标准的文字页面可以起到传达信息的作用。对文字的格式化,通常可以使用两种方式:一种方式是直接使用HTML标记,另一种方式是使用CSS。利用CSS可以对文本的格式进行精确控制,使用HTML标记则更有利于搜索引擎抓取。本章主要介绍一些和页面排版相关的标记。

1   HTML基础标签

HTML标签有很多,为了方便学习和使用,我们可以将这些标签按类别细分一下。基础标签则是页面制作最常使用的一些标签,包括上一章介绍过的结构标签,都属于基础标签。本节介绍的基础标签如表1所示:

表1  HTML基础标签

1b5bba8a3f4444999fbde1ef34cc6f0d.png

1  标题标签

to

HTML定义

六个标签对,分别用于设计不同大小字体的标题,字体由大到小,最大,
则最小,需要注意的是及其它数字标签则不是HTML标记。这6个标题标签属于块级元素,浏览器会自动在标题的前后添加空行。页面中的标题对整个页面来说很重要,应该将这些标签只用于标题,而不要仅仅是为了产生粗体或大号的文本而使用标题。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。这些标题标签对SEO是很友好的,搜索引擎使用标题为您的网页的结构和内容编制进行索引,而且用户也会通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将
用作主标题(最重要的),其后是

(次重要的),再其次是

,以此类推。需要注意的是

在一个页面中只能使用一次,如果使用多次搜索引擎会认为你是在“作弊”。标题标签的使用和演示结果如下图1所示:

8bce78cea3724f85a08fe477f51f7843.png

图1  标题标签演示结果

标题标签也有四个可选的属性left、center、right和justify,用来规定标题中文本的排列,但不推荐使用,可以使用样式替代它们。

2  换行
和段落标记


可插入一个简单的换行符,
标签是空标签(意味着它没有结束标签,因此这是错误的:
)。关于HTML中的换行标签
和分段标签


只是回车,

标签属于块级元素,它的前后会有比较大的空白,而
标签属于行级元素,它只是简单的换行,前后没有空白。有一个与
相对的标签,它表示不换行,通常用于防止浏览器将程序代码等不需要换行的地方自动换行。

643d260e75a044cf8990e118403eeec5.png

图2  换行和段落签演示结果

3  水平线标签



标签在HTML页面中创建水平线,可以在视觉上将文档分隔成各个部分,常常用来分隔文章中的小节。
标签和
一样是单标签没有结束标签。
标签可以设置宽度width和高度height,这两个属性又分别有像素和百分比的表示方式。此外,
标签还有size(厚度)、color(颜色)和noshade(无阴影)的属性。
元素的所有呈现属性均不被赞成使用,都可以使用样式取代它们。

4  格式标签

格式标签用于定义网页中文本的布局,如缩进、位置、换行控制、列表等。当浏览器遇到这些标记时,就会按标记的格式显示网页。例如,
标签具有换行的功能,当浏览器遇到
标签时,就会把标签后的文本从新的一行开始显示。常见的格式标签如表2所示。

表3-2  常见的HTML格式标签

c5b9e7edfc9444f1bc4ecfa1a2474104.png

在本例中简单应用表2中介绍的格式标记,这些标记全部需要声明在

标记中使用,代码如下所示:

7796b182dded48b59f49bf1833609115.png

在浏览器中的输出结果如图3.3所示。

5  文本标签

在网页中,为了着意强调某一部分文字,或者为了让文字有变化,HTML提供了一些标签产生这些效果。常见的文本风格标签如表3所示。

8603cb949f0446d0881b3c9678e3356b.jpg

图3.3  HTML格式标签输出结果演示

表3  常见的HTML文本风格标签

573433de9f914096b6df71c1a835dcf8.png

在本例中简单应用表3中介绍的文本修饰标记,和前面介绍的格式标记使用方式类似,也全部需要声明在

标记中使用,代码如下所示:

13723cd09ac043b08fbefef053004469.png

上面的示例代码在浏览器中的显示结果如图4所示。

4a7da0eca20d42d68facf945fff2dd98.jpg

图4  HTML文本标签输出结果演示



推荐阅读
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
author-avatar
营帐水狂_836
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有