1.4.1 文本标记

1.标题标记

2.字体标记

3.段落标记

4.换行标记

5.预格式化标记

6.转义字符

7.文字修饰标记

1.4.1 文本标记

1.标题标记

<hn align="对齐方式"> 标题文本</hn>

HTML中提供了6级标题，为<h1>至<h6>,其中<h1>字号最大，<h6>字号最小 。标题为块级元素，浏览器会自动在标题前后加上空行。

align属性是可选属性，用于指定标题的对齐方式，其取值3种：left,center,right,分别表示左对齐、居中对齐和右对齐。

2.字体标记

默认情况下，中文网页中的文字以黑色、宋体、3号字效果显示。如要改变，可以使用<font>字体标记及其相应属性进行设置。字体标记语法如下：

<font face="字体名称" size="字号" color="字体颜色">文字</font>

其中，face属性设置字体的类型，中文默认字体为宋体；size属性指定文字的大小，其中取值范围1--7（文字的显示从小到大，默认字号是3）；color属性设定文字颜色，颜色的表示可以用1.3.2HTML颜色定义中3种方法表示，默认颜色是黑色。

浏览器显示如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体标记使用</title>
</head>
<body><font size="7" face="隶书" color="red">银川科技学院</font><font face="黑体" size="6" color="green">信息工程学院</font><font face="楷体" size="5" color="blue">计算机科学与技术专业</font></body>
</html>

3.段落标记

在HTML中创建一个段落的标记是<p>。在HTML中可以使用单标记，也可以使用双标记。二者相同点为：都能创建一个段落。不同点：单标记创建的段落会与上文产生一个空行间隔；双标记创建的段落则与上下文同时有一个空行的间隔。

与标题字一样，段落标记也有对齐方式，使用属性为align属性。

<p align="对齐方式">段落内容</p>

<p>标记是块级元素，浏览器会自动在<p>标记的前后加上一定的空白。

4.换行标记

换行标记是<br>，该标签是一个单标记，把结束标记放在开始标记中，也就是<br/>等效于一个段落换行标记。

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>换行标记的使用</title>
</head>
<body><font size="5" color="blue" face="隶书"><p>《登鹳雀楼》</p>白日依山尽,<br/>黄河入海流。<br/>欲群千里目，<br/>跟上一层楼。</font></body>
</html>

5.预格式化标记

所谓的预格式化指某些格式可以在源码中预先设置，这些预先设置好的格式在浏览器解析源代码时被保留下来，即源代码执行后的效果与源代码中预先设置好的效果几乎完全一样。预格式化标记为：<pre>...<pre/>

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>预格式化标记</title>
</head>
<body><font size="6" color="blue" face="楷书"><pre>《登鹳雀楼》白日依山尽, 黄河入海流。欲群千里目，更上一层楼。</pre></font></body>
</html>

对比可以看出，源代码中的格式效果与浏览器中的效果是一样的。

6.转义字符

定义：一些字符无法通过键盘输入，这些字符对于网页来说是特殊字符。要想在网页中展示，必须使用转义字符的方式进行输入。

组成：转义字符由三部分组成，第一部分“&”，第二部分是实体名字或者“#”加上实体编号；第三部分是分号，表示转义字符结束。

转义字符结构如下：

&实体名称;

例如，“<”可以使用“<”表示，“>”可以使用“>”表示，空格可以使用“ ”表示。常用特殊字符与对应字符实体如下表1-1。

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
,	撇号	&apot;(IE不支持）
￠	分（cent）	¢
t	镑（pound）	£
¥	元（yen）	¥
€	欧元（euro）	€
§	小节	§
©	版权(copyright)	©
®	注册商标	®
™	商标	™
×	乘号	×
÷	除号	÷

表1-1常用的特殊字符与对应的字符实体。

注：同一个符号既可以使用实体名称，例如，“<”也可以使用实体编号，例如，“<”,这两种都表示符号“<”。

7.文字修饰标记

使用文字修饰标记可以设置文字为粗体，倾斜，下划线等格式。

常用文字修饰表如下：

常用文字修饰标记表
标记	描述
<b>...<b/>	加粗。如：<b>HTML文件<b/>
<i>...<i/>	斜体。如：<i>文本<i/>
<u>...<u/>	下划线。如:<u>HTML<u/>
<s>...<s/>	删除线
<sup>...<sup/>	上标
<sub>...<sub/>	下标

Web前端之HTML常用标记相关推荐

web前端学习之ruby标记和rt/rp标记
ruby 标记定义ruby注释(中文注音或字符).ruby标记与rt标记一同使用. ruby标记由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt 标记组成,还包括可选的rp标记,定义当浏览 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
web前端介绍_html-超文本标记语言
web 前端简介 1. web1.0 时代的网页制作 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件应用程序有两 ...
Web前端之HTML超文本标记语言
文章目录一.Web前端开发介绍 1.Web前端开发概述 1)什么是Web开发? 2)Web前端开发核心技术 (1)HTML语言(超文本标记语言,相当于一个整体的框架) (2)CSS(层叠样式表,用来 ...
Web前端应用十种常用技术你全都知道吗？
随着JS与XHTML的应用普及,越来越多的Web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些Web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的Web界 ...
Web前端培训：常用的Web前端开发框架有哪些？
学习web前端技术的时候,我们会学到开发框架这一课,web前端的开发框架是有很多的,有一些是常用的,那么常用的Web前端开发框架有哪些呢?来看看下面的详细介绍. 常用的Web前端开发框架有哪些?程序员 ...
Java Web前端到后台常用框架介绍
一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...
二十三、【开源】EFW框架Web前端开发之常用组件（FusionCharts图表、ReportAll报表等）
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...

Web前端之HTML常用标记

1.4.1 文本标记

1.标题标记

2.字体标记

3.段落标记

4.换行标记

5.预格式化标记

6.转义字符

7.文字修饰标记

Web前端之HTML常用标记相关推荐

最新文章

热门文章