第2章 常用HTML标记和格式
第2章 网页设计与制作-HTML语言基础
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
第2章 HTML入门(网页制作案例教程课件)
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
html中的标记举例解释
html中的标记举例解释HTML （Hypertext Markup Language）是一种用于创建网页结构和内容的标记语言。
在HTML中，我们可以使用不同的标记来定义文本、链接、图像、表格等内容。
下面是一些常见的HTML标记及其解释：1. `<p>`：定义段落。
用于包裹段落中的文本，浏览器会自动在段落前后添加一些间距。
2. `<h1>`至`<h6>`：定义标题。
h1为最高级标题，h6为最低级标题，其中h1的字体最大。
3. `<a>`：定义链接。
用于创建一个指向其他页面或相同页面内的链接。
可以通过href属性指定链接的目标URL。
4. `<img>`：定义图像。
用于在网页中插入图像。
通过src属性指定图像的URL，通过alt属性指定图像的替代文本。
5. `<ul>`和`<li>`：定义无序列表。
ul标记定义一个无序列表，li标记定义列表中的每一项。
6. `<ol>`和`<li>`：定义有序列表。
ol标记定义一个有序列表，li标记定义列表中的每一项。
7. `<table>`、`<tr>`和`<td>`：定义表格。
table标记定义一个表格，tr标记定义表格的行，td标记定义表格的单元格。
8. `<form>`和`<input>`：定义表单。
form标记定义一个包含表单元素的表单，input标记定义表单中的输入字段，如文本框、复选框等。
9. `<div>`：定义文档中的块级元素。
用于将文档内容分组，可以通过CSS样式和JavaScript进行操作。
10. `<span>`：定义文档中的内联元素。
用于对文本进行标记，可以通过CSS 样式和JavaScript进行操作。
这些只是HTML中的一小部分标记举例。
HTML中有很多其他的标记可以帮助我们创建丰富多样的网页内容。
网页设计基础-文本格式与超链接
第2章文本格式与超链接（1）段落格式本章目标•掌握段落标记符p、断行标记符br、标题标记符h1~h6、水平线标记符hr的用法。
•理解物理字符样式和逻辑字符样式。
•掌握使用ol/ul 和 li 标记符创建列表。
•掌握使用 a 标记符创建页面链接和锚点链接。
段落格式•段落格式是指针对 HTML 文档中的段落所设置的格式，例如段落的对齐方式。
•还有哪些段落格式？•首行缩进是不是段落格式？段间距呢？分段标记符•分段标记符用于将文档划分为段落，标记为<p></p>。
•换行标记符用于在文档中强制断行，标记为一个单独的<br />。
标题样式•hn 标记符 = 各级标题•n 是1至6的数字；h1表示最大的标题，h6表示最小的标题。
•注意：使用标题时应按照其逻辑含义，而不是按照其显示效果！添加水平线•添加水平线的标记符为hr，它包括以下属性：–size （粗细）–width （长度）–noshade （实线）align 属性•align 属性用于设置段落的对齐格式，取值：right（右对齐）、left（左对齐）、center（居中对齐）和 justify（两端对齐）。
•align 属性可应用于多种标记符，例如p、hn（标题标记符）、hr 等。
•注意：在学习了CSS技术之后应避免使用align属性。
第2章文本格式与超链接（2）字体格式与列表字体格式•字体格式/字符格式是指针对段落中的部分文字所设置的格式，通常包括：字体样式、字号、文字颜色等。
•注意：字体格式属于显示效果的设置，因此应主要使用CSS技术来实现。
物理字符样式•物理字符样式是指标记符本身说明了所修饰的效果。
•常用物理字符样式标记符有：–黑体标记<b></b>–斜体标记<i></i>–下划线标记<u></u>逻辑字符样式•逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义，例如address标记符。
HTML常用标记（完整版）
HTML常⽤标记（完整版）前端：1.HTML2.CSS3.JavaScript（JS）动态URL：统⼀资源定位符HTML常⽤标记：1.⽂档结构标记（1）⽂档标记：<HTML>…</HTML>（2）头部标记：<HEAD>…</HEAD>（3）标题标记：<TITLE>…</TITLE>（4）主体标记：<BODY>…</BODY>2.格式标记（1）段落标记：<p>…</p>（2）换⾏标记：<br>（3）两边缩进标记：<blockquote>…</blockquote>（4）项⽬列表标记：<dl></dl>、<dt>、<dd>（5）有/⽆序号列表标记：<ol></ol>、<ul></ul>、<li>（6）区隔标记：<div></div>3.⽂本标记（1）标题标记：<hn></hn> (n的范围为1~6)（2）字体标记：<b></b>、<i></i>、<u></u>（3）斜体和加重标记：<em></em>、<strong></strong>（4）字型标记：<font></font>4. 链接标记（1）<a href="⽬标地址">…</a>（2）锚点链接：<a name="标签名"></a>5.图像标记和多媒体标记（1）图像标记：<img src="图像⽂件存储位置与名称">（2）多媒体标记：①设置⾳乐和影像⽂件的超链接。
HTML教材
４、水平线标签
格式：<hr> 说明：该标签可以用来在页面上插入一条水平标尺线。 属性： align size 用来设定横线放置的位置。取值有：left、right和center。 用来设定线条粗细，取值为n个像素，默认为2。
width 用来设定线段长度，取值可为绝对值（n个像素）或相对值 （相对于当前窗口的百分比），默认值为100%。
来自
2.3.1 网页结构类标签（续上） 续上）
格式：<body>……</body> 说明：位于头部之后，以<body>开始，直到</body>结束。定义了 网页上显示的主要内容与显示格式，是整个网页的核心，浏览器 窗口中所能显示的内容全部被包含在该标签中。 属性：用于设定网页的总体风格。其中： bgcolor 设置网页的背景色。 background 设置网页的背景图像。 text 设置网页文本的颜色。 link 设置尚未被访问过的超链接颜色，默认为蓝色。 vlink 设置已被访问过的超链接颜色，默认为蓝色。 alink 设置一个正被激活的超链接颜色，默认为红色。
所示。 【例2-3】列表类标签演示，如图 】列表类标签演示，如图2-3所示。 所示
其代码如下：
<HTML> <HEAD> <TITLE>列表类标签演示 列表类标签演示</TITLE> 列表类标签演示 </HEAD> <BODY> <UL TYPE="CIRCLE"> <LI> <P ALIGN="LEFT"><FONT FACE=黑体 SIZE=5 黑体 COLOR=RED>公司口号 公司口号</FONT></LI> 公司口号 <OL TYPE="A"> <LI><P ALIGN="LEFT">开拓创新、追求无限 开拓创新、 开拓创新 追求无限</LI> <LI><P ALIGN="LEFT">度身设计、专业服务 度身设计、 度身设计 专业服务</LI> <LI><P ALIGN="LEFT">科技领先、群策管理 科技领先、 科技领先 群策管理</LI> </OL> <LI><P ALIGN="LEFT"><FONT FACE=黑体 SIZE=5 黑体 COLOR=RED>产品介绍 产品介绍</FONT></LI> 产品介绍 <OL> <LI><P ALIGN="LEFT">GJF、GJF—F系列臭氧发生器 、 系列臭氧发生器 </LI> <LI><P ALIGN="LEFT">GSK、GZK系列臭氧发生器电源控制 、 系列臭氧发生器电源控制 系统</LI> 系统 <LI><P ALIGN="LEFT">GJF-T系列臭氧发生器 系列臭氧发生器</LI> 系列臭氧发生器 <LI><P ALIGN="LEFT">GYD、GYD—F系列臭氧发生器 、 系列臭氧发生器 </LI> </OL> </UL> </BODY> </HTML>
第2章 HTML语言基础
<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部 文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页 外观以及创建特殊效果。 在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式 使用内嵌样式以应用层叠样式表属性到网页元素上。 例如段落标记符的内嵌样式属性如下： <p style="border-style: solid">
2.2.3 HTML中样式表的书写
2．嵌入式样式表 若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>
HTML标记大全
一、HTML标记注释：红色字体为标记和其必不可少的属性；绿色字体为标记中的属性，可任意选取所需要的属性；天蓝色字体为自由填充的属性值；黑色字体为补充内容及对标识和描述内容的注解1、HTML标记语法：<标记名称属性1名=属性1值属性2名=属性2值…>标记在表示HTML文档内容结构和含义的时候，通常有两种方式，我们分别称单标记和双标记。
表1：2、<BODY>的属性BGCOLOR="颜色" (设置背景颜色)BACKGROUND="图片名" (设置背景图片)BGPROPERTIES="FIXED" (设置背景图片固定不变)TEXT="颜色" (设置文本颜色)LINK="颜色" (默认链接)VLINK="颜色" (当鼠标按下时的链接)ALINK="链接按钮" (当鼠标松开后的链接)TOPMARGIN=距离(文本距顶部的距离)LEFTMARGIN=距离(文本距左边的距离)3、设置播放器，必须在BODY的双标记中存在设置背景音乐：<BGSOUND SRC="地址"(歌名或视频名) LOOP=“循环次数”>插入视频音频文件：（FLASH等）<EMBED SRC="地址"(歌名或视频名)WIDTH=宽度HEIGHT=高度(调整播放器的宽度和高度)HIDDEN="TRUE"(隐藏播放器) LOOP=”循环次数”>4、如何使网页在网站的排名靠前，其必须在HEAD中存在<META NAME="K EYWORD"CONTENT="描述网站内容">(用于标记搜索引擎在搜索该页面时所取出的关键词)<META NAME="DESCRIPTION" COUNT="描述网页内容" >（用来标记描述内容）<META NAME="AUTHOR" CONTENT="作者名称" >（用来标记文档的作者）<META HTTP-EQUIV="CONTENT-TYPE" CONTENT= "TEXT/HTML;CHARSET =GB2312">（用来标记你的页面的解码方式）<META HTTP-EQUIV="REFRESH" CONTENT="5;URL= Http:// .com">(用来自动刷新网页)5、标题字体表2：6、文章字体表3：7、物理字体表4：8、字符实体在往HTML文档中写入特殊字符，如“〈”、“〉”、“&”、“ ”等要使用特殊的代码，浏览器会用HTML命令对这些特殊代码进行翻译。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.5 粗体与斜体
粗体与斜体在语法结构上差不多，应用在文字文本中，且都是用双标记对来表示。在 学习本节前，先比较二者区别，可能学起来更有印象。 粗体标记的语法是由<b></b>标签对表示，标签对里面的文字在网页中会显示出字体 为粗体，语法简单，代码如下： <b>粗体，这里显示的是粗体</b> 同理，斜体<i>里面显示出字体为斜体，语法代码为： <i>斜体，这里显示的是斜体</i> 原来可以这样理解。粗体用<b>包括着，斜体用<i>包括着，代码2.5表示二者代码和 效果不同之处。 代码2.5 源代码\第2章\粗体与斜体.html <html> <head> <title>粗体与斜体</title> </head> <body> <!—下面表示粗体的用法--> <b>粗体，这里显示的是粗体</b> <br> <!—下面表示斜体的用法--> <i>斜体，这里显示的是斜体</i> </body> </html>
2.8.3 粗体和删除线
在第一段落文字上加粗体，第二个段落加上删除线。部分代码如下： <!—下面一行表示用标题的标记对--> <h1>HTML+CSS完全自学手册</h1> <p> <!—表示在文本中用粗体--> <b>HTML+CSS完全自学手册</b> </p> <p> <!—下面一行表示用删除线--> <s>HTML+CSS完全自学手册</s> </p> <p> <!---下面一行只是被包围在段落中-> HTML+CSS完全自学手册 </p> 在这个代码里，比前面多了两个标签对，即<b></b>，<s></s>，其他的都 还是一样的，所表示的效果就不同了，如图2.10所示。
2.4 给代码注释
制作大型网站的时侯，每个网页程序员所做的工作都会不同，但相互依赖 其他程序员写的代码。为了在同一个项目中让其他程序员看得明白，常常 用注释来说明代码功能。注释代码的内容不会在网页中显示，只起到注释 作用，如一个网页中头部用注释说明该页面的作用和创建日期，和本网页 所展示的功能等，让其他程序员或学习者看到注释就知道代码内容。 在前面的代码中，多次出现了注解符，而且在注解内容中，笔者都在前面 标记“注解：”，为了告诉初学者代码的意义，所采用的一种解说代码方 法，并不会在网页中显示注解内的内容。注释语法比较容易，可以在单行 中存在注释，同时也可以多行一起注释，单行注释完整语法如下： <!--这里放注释--> 在一行中，在尖括号中放置感叹号“！”和两个“-”，接下来放置注释 内容，最后一定要结束注释，结束注释用两个“-”和另一个尖括号组成， 即上面代码表示了单行注释。如果网页代码中，只需要注释一行，可以用 上面的注释。如果有多行同时需要注释，那是不是每行都用尖括号包围呢？ 答案是不需要的。其实还有一种方法可以注释多行，请看下面代码： <!-这里放注释 第二行注释 第三行注释 -->
2.7 上标与下标
上标与下标应用于文字或数字上比较多，如表示化学中的水元素、代学方 程式中，在数学中用平方、对数等。这是比较特殊的标记。 上标是位于文字或数字的中上位置的标记。如10的平方，平方符号就显示 10的中上位置。稍后做实例分析。先看语法代码，上标代码表示如下： <sup>上标</sup> 同理，下标是在文字或数字的中下位置的标记，应用也比较广泛，如化学 元素中的水元素，下标语法代码表示如下： <sub>下标</sub> 为了比较上标与下标的用法，显示出不同效果。用实例来显示出二者效果， 如代码2.7所示。
2.8.4 加上化学元素和数学平方跟
在前面的学习中用<sup></sup>表示上标，<sub></sub>表 示下标，用这些上标和下标表示数学、化学等特殊符号， 完整代码如2.9所示。
2.9 小结
本章所学的知识是网页编写中所用到的部分标记 和格式，语法简单易学，有标题<h1></h1>到段落 <p></p>再到换行<br>、注释<!-- 是常用的标记， 下划线<u></u>、删除线<s></s>、粗体<b></b>、 斜体<i></i>，还有上标<sup></sup>和下标 <sub></sub>都是重要的格式，也是在日常网页工 作中所常用到的。最后通过实例，在HTML代码中 演示了这些常用的标记和格式的用法，希望读者 能举一反三，以便在实际应用中，开发出更多的 实例。
2.6 下划线与删除线
为了使部分文字特别，可以在下面划一条线或删除线，这种字体往往引人 注意，从而达到想要的效果。在网页中也可以利用下划线与删除线。 下划线就是在文字下面有一条线。也是双标记对包含文字，尖括号里面用 u表示。其语法格式如下： <u>下划线</u> 类似的，删除线也是双标记尖括号对形式的，里面用s表示。其语法代码 如下： <s>删除线</s> 二者比较很容易区分，u表示下划线，s表示删除线，然后中间是表达的内 容。下面请看二者比较示例代码，如代码2.6所示。
2.8.2 设置每一行为一段落
从图2.8中可以看到，有三条一样的文字都显示在一行。这 与在代码中不同，那是因为代码会去掉空格，只显示一个 空格间隔。要想添加段落必需得有<p></p>标签对。给上面 代码加上后部分代码如下： <h1>HTML+CSS完全自学手册</h1> <!—下面在每行文本中，用段落标记对包围--> <p> HTML+CSS完全自学手册 </p> <p> HTML+CSS完全自学手册 </p> <p> HTML+CSS完全自学手册 </p>
2.8 HTML标记和格式实例手把手
本章节只学了HTML常用的标记和格式，这些知识 点以后会常用到，毕竟网页只由少数标签组成。 学好常用标签和格式在以后学习中会容易很多。 现在来练习一下前面学的知识。知识点通过实例 罗列出来。
2.8.1 标题用h1
网页代码基本组成在前一章学过，所以输入文章的关键是放在 <body><</body>里面。现在的文章就是这样输进去，如代码2.8所示。 代码2.8 源代码\第2章\HTML标记和格式实例手把手.html <html> <head> <title>HTML标记和格式实例手把手</title> </head> <body> <!—下面这行表示标题h1--> <h1>HTML+CSS完全自学手册</h1> <!—下面表示文本行并在代码中换行--> HTML+CSS完全自学手册 HTML+CSS完全自学手册 HTML+CSS完全自学手册 </body> </html>
2.1.2 标题设置经典案例――字号由大到小
理解了标题是由字母H加从1到6的数字后，下面用实例来演示这6 个标题的效果，代码2.1表示从H1到H6的标题。 代码2.1 源代码\第2章\六种不同的标题.html <html> <head> <title>标题标记</title> </head> <body> <!—下面是标题标记对--> <h1>标题h1</h1> <h2>标题h2</h2> <h3>标题h3</h3> <h4>标题h4</h4> <h5>标题h5</h5> <h6>标题h6</h6> </body> </html>
第2章 常用HTML标记和格式
通过第1章的学习，对HTML有了一定的认识。HTML由标记 （本书中标记与标签是同一概念）组成，其中有单标记和 双标记之分，大部分以双标记出现，即标记对（也称标签 对）。而本章要介绍的是应用中常用的HTML标记和格式， 这些知识点往往在网页中会常用到，也是必须得掌握的知 识点之一。在讲解过程中分两部分：标记和格式，学完本 章，应掌握以下内容： 标题标记 段落标记 换行与注释 强制换行
写文章时，往往要在一个段落中间另起一行，这就要用到 换行，在网页中也可以表示换行的，但需要换行标记。换 行可在行文中另起一行，显示出段落层次性，给人感觉更 有亲和力。 在网页编写代码时的换行与按回车键的换行是不同的，即 在编写HTML代码中的回车只多了一行空格，在代码中另起 一行，但浏览器解释时，会忽视多余空格，只保留一个空 格的位置。从2.2节中介绍的，得知网页显示中会去掉里面 空格，与正常文档换行不同，所以没达到换行效果。而今 天学习的换行就是在网页编写换行代码标记后将在页面中 显示出换行效果，当浏览器在解释换行代码时会强制换行， 这样在网页中就达到用户在输入时的换行标记的效果。 换行标记是音标记，即不会成对出现，语法是在尖括号中 包括br的单标记，其完整语法代码如下所示： <br>