IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签
指引
网页中的信息主要是以文本为主的,可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<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基础标签的更多相关文章
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题
小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格
表格在网站中应用得非常广泛,使用它可以方便.灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局.表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.在H ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构
使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页,每个框架里的网页相互独立.这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果,而且可以非常方便地完成导 ...
- IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作
现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- IT兄弟连 HTML5教程 HTML5和CSS3的关系
HTML5是第五版HTML的标准,CSS3则是第三版CSS,新增一些非常实用的选择器和样式属性,并且CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为 ...
- IT兄弟连 HTML5教程 HTML5和HTML的关系
HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...
- IT兄弟连 HTML5教程 HTML5表单 小结及习题
小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...
- IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例
这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...
随机推荐
- 前端表单提交,提交有图片出现的问题,及解决方案 兼容ie9
更新一下我的小园子,主要说的是jq文件上传的过程中,如果出现上传的文件里有图片问题 其实文件上传有图片的情况下,不是什么大问题,对于前端来说,但是,如果需要兼容ie9的时候,就需要处理一下 文件上传如 ...
- Hexo+Github个人博客搭建 | 实战经验分享
概述 第一次尝试搭建属于自己的博客,并且成功了,非常开心. 很久之前就想搭建一个博客,可是也一直没有行动,最近在逛B站的时候发现一个up主(CodeSheep)的一个视频 <手把手教你从0开始搭 ...
- AES-加密解密工具类
注意:AES加密算法对于不同系统之间的tokens可能会不同,需要在相同的系统间使用 如果设置为private,在其它类调用AES访问不了这个tokens常量,需要自主定义一个tokens或者在配置文 ...
- webpack实践(二)- webpack配置文件
webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...
- SpringBoot2基础,进阶,数据库,中间件等系列文章目录分类
本文源码:GitHub·点这里 || GitEE·点这里 一.文章分类 1.入门基础 SpringBoot2:环境搭建和RestFul风格接口 2.日志管理 SpringBoot2:配置Log4j2, ...
- python网络编程socketserver模块(实现TCP客户端/服务器)
摘录python核心编程 socketserver(python3.x版本重新命名)是标准库中的网络编程的高级模块.通过将创建网络客户端和服务器所必须的代码封装起来,简化了模板,为你提供了各种各样的类 ...
- 【Web前端开发】---自学转行roadmap
[Web前端开发] 自学转行roadmap: ● html/css ● 京东项目实操 ● javascript 基础 ● webapi ● javascrip高级 ● jquery基础 ● Ajax ...
- 微信小程序—支付宝小程序与微信小程序的不同点对比
支付宝小程序语法 http://caibaojian.com/aliapp-wxapp.html https://www.cnblogs.com/bgwhite/p/9447639.html http ...
- Python 下JSON的两种编解码方式实例解析
概念 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写.在日常的工作中,应用范围极其广泛.这里就介绍python下它的两种编解码方法: ...
- ElasticSearch 安装, 带视频
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 疯狂创客圈 高并 ...