指引

网页中的信息主要是以文本为主的，可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。文字版面的编辑包括文本标签和格式标签两种，在浏览器中显示的文字内容和格式都要在<body>标记中编写。文字是网页设计最基础的部分，一个标准的文字页面可以起到传达信息的作用。对文字的格式化，通常可以使用两种方式：一种方式是直接使用HTML标记，另一种方式是使用CSS。利用CSS可以对文本的格式进行精确控制，使用HTML标记则更有利于搜索引擎抓取。本章主要介绍一些和页面排版相关的标记。

1   HTML基础标签

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

表1  HTML基础标签

1  标题标签<h1>to<h6>

HTML定义<h1></h1>到<h6></h6>六个标签对，分别用于设计不同大小字体的标题，字体由大到小，<h1>最大，<h6>则最小，需要注意的是<h7>及其它数字标签则不是HTML标记。这6个标题标签属于块级元素，浏览器会自动在标题的前后添加空行。页面中的标题对整个页面来说很重要，应该将这些标签只用于标题，而不要仅仅是为了产生粗体或大号的文本而使用标题。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。这些标题标签对SEO是很友好的，搜索引擎使用标题为您的网页的结构和内容编制进行索引，而且用户也会通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将<h1>用作主标题（最重要的），其后是<h2>（次重要的），再其次是<h3>，以此类推。需要注意的是<h1>在一个页面中只能使用一次，如果使用多次搜索引擎会认为你是在“作弊”。标题标签的使用和演示结果如下图1所示：

图1  标题标签演示结果

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

2  换行<br>和段落标记<p>

<br>可插入一个简单的换行符，<br>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。关于HTML中的换行标签<br>和分段标签<p></p>的区别是，换行标签<br>只是回车，<p></p>则是分段。因为<p>标签属于块级元素，它的前后会有比较大的空白，而<br>标签属于行级元素，它只是简单的换行，前后没有空白。有一个与<br>相对的标签<nobr></nobr>，它表示不换行，通常用于防止浏览器将程序代码等不需要换行的地方自动换行。

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

3  水平线标签<hr>

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

4  格式标签

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

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

在本例中简单应用表2中介绍的格式标记，这些标记全部需要声明在<body>标记中使用，代码如下所示：

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

5  文本标签

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

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

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

在本例中简单应用表3中介绍的文本修饰标记，和前面介绍的格式标记使用方式类似，也全部需要声明在<body>标记中使用，代码如下所示：

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

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

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签的更多相关文章

  1. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题

    小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...

  2. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格

    表格在网站中应用得非常广泛,使用它可以方便.灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局.表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.在H ...

  3. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构

    使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页,每个框架里的网页相互独立.这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果,而且可以非常方便地完成导 ...

  4. IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

    现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...

  5. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  6. IT兄弟连 HTML5教程 HTML5和CSS3的关系

    HTML5是第五版HTML的标准,CSS3则是第三版CSS,新增一些非常实用的选择器和样式属性,并且CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为 ...

  7. IT兄弟连 HTML5教程 HTML5和HTML的关系

    HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...

  8. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  9. IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例

    这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...

随机推荐

  1. 一篇文章搞清楚HashMap和TreeMap的内部结构

    一.HashMap 1.基于哈希表的 Map 接口的实现. 此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 Has ...

  2. 《Java数据结构》树形结构

    树形结构是一层次的嵌套结构. 一个树形结构的外层和内层有相似的结构, 所以这种结构多可以递归的表示.经典数据结构中的各种树形图是一种典型的树形结构:一颗树可以简单的表示为根, 左子树, 右子树. 左子 ...

  3. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  4. 服务器(VPS)被墙怎么办？

    比如开发接口用的临时服务器被墙,就可以使用以下方法之一. 方法一(推荐) 为你的服务器分配一个浮动IP 等于给你的 droplet 增加一个新的 ip,我们以后访问这个新的ip就ok了. 直到下一次被 ...

  5. spark-3.0 application 调度算法解析

    spark 各个版本的application 调度算法还是有这明显的不同之处的.从spark1.3.0 到 spark 1.6.1.spark2.0 到 现在最新的spark 3.0 ,调度算法有了一 ...

  6. 【转载】单线程Redis性能为何如此之高？

    Redis的优势 性能高不仅跟线程模型有关,它有很多原因,主要有如下3点: 基于内存: 单线程,但IO多路复用的利用率高: 数据结构为高性能优化. 下面分别阐述. Redis的优势:基于内存 性能高低 ...

  7. java 读取 yaml 文件

        做 java 项目用的最多的配置文件就是 properites 或者 xml, xml 确实是被用烂了,Struts, Spring, Hibernate(ssh) 无一不用到 xml.相比厚 ...

  8. vue组件之间的通信方式

    组件之间的通信方式有很多种 这里分享4种组件之间的通信方式 props(主要是父传子)  自定义事件(主要是子传父)  pubsub消息订阅与发布  xuex 1.props和自定义事件 app.vu ...

  9. https类型接口，关闭认证（verify=False）情况下消除告警的方法

    一.问题描述 当我们测试接口的协议为https时,当关闭了认证(verify=False)的时候,我们测试通过了,但是使用有一条警告显示,最终生成的测试报告也不美观,如下图 二.解决办法 我们可以在封 ...

  10. 关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html 之前开发的导入多个模型,旋转,分别移动什么什么的,都是在纯OpenGL ...