文本与段落标记
列表标签
超链接标签
图片标记
行内元素与块级元素
1. 文本与段落标记
（1）常用文本标签
| 标记 | 说明 |
|---|---|
| <h#></h#> | 标题标记，#=1,2,3,4,5,6，定义了6级标题，每级标题的字体大小依次递减，即数字越大字体越小。该标记自动插入一个空行。属性align设定对齐方式：center：居中；left：左对齐（默认）；right：右对齐 |
| <font></font> | 字体标记：size属性，设置字体大小，取值从1到7。数字越大字号越大；color属性，设计字体颜色，使用名字常量或RGB的十六进制值，face属性，设计字体字型，例如“宋体”、“楷体”等 |
| <p></p> | 段落标记：属性align指定对齐方式。 |
| <hr/> | 水平分隔线标记：属性width设置线的长度（单位像素），size设置线的粗细（单位像素），color设置线的颜色，align设置对齐方式 |
| <br/> | 插入一个回车换行符 |
| <sub> | 用于以下标的形式显示文本 |
| <sup> | 用于以上标的形式显示文本 |
| <u> | 用于实现下划线 |
| <b></b> | 字体加粗标记 |
| <i></i> | 斜体标记 |
| <strong></strong> | 加重文本标记（通常是斜体加黑体） |
(2)文本颜色
颜色由红色（Red）、绿色（Green）、蓝色（Blue）三种基色混合而成，简称RGB。每种颜色的最小值是0（十六进制为#00），最大值是255（十六进制为#FF）。
大多数的浏览器都支持颜色名集合，它们分别是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、 purple、red、silver、teal、white和yellow。
注意：
(1)rgb()的参数是十进制数，且只能作为CSS样式属性值，而不能作为标签属性值。
(2)标签具有属性color，取值为色彩名或色彩值。
(3)#FF00FF等效于#F0F。（全部两两相同才可简写）
（3）度量单位
在HTML文档里，字体除了有颜色特性，还有大小特性。表格和图像等页面元素，也需要有度量大小的单位。
HTML中，度量的主要单位如下：
- px：像素单位（计算机屏幕上的一个点），是绝对单位；
- %：百分比（相对当前屏幕尺寸的百分比），能适应屏幕大小；
- em：相对于当前字体尺寸的倍数，能方便地实现首先缩进2个汉字。
（4）常用特殊转义字符
| 字符 | 转义字符 |
|---|---|
| < | <； |
| >； | |
| & | &； |
| 空格 |  ； |
| " | "； |
| © | ©； |
| ¥ | ¥； |
例：创建如图所示HTML文档
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字网页</title>
</head>
<body>
<h2 align=center>唐诗欣赏</h2>
<hr width="100%" size="1" color="#00ffee">
<p align="center">
<b><font size="3">静夜思</font></b>
</p>
<p align="center">
<font size="2">李白</font><br/><br/>
<b>
床前明月光，<br/> 疑是地上霜。<br/>
举头望明月，<br/> 低头思故乡。<br/>
</b>
</p>
<hr width="100%" size="1" color="#00ffee" />
<p>
<b>【简析】</b>这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明静醉人的秋夜的意境。
</p>
<hr width="400" size="3" color="#00ee99" align="left" /> 版权©:版权所有，违者必究
<address>E-mail:abcdef@126.com</address>
</body>
</html>
2. 列表标签
（1）有序列表——order list
语法格式及属性：
（2）无序列表——unorder list
语法格式及属性：
（3）自定义列表：根据需求自定义列表
语法格式及属性：
例：有序列表与无序列表应用示例，编写代码，实现如下图所示效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有序列表与无序列表</title>
</head>
<body>
<b>班级新闻</b>
<ul type="disc">
<li>最新课程表</li>
<li>关于普通话考试的通知</li>
<li>div+css高级应用学习</li>
</ul>
<hr width="100%" size="1" color="red">
<strong>报名</strong>
<ol type="A">
<li>报名时间：3月16—21 日。</li>
<li>报名地点：所在院系办公室。</li>
<li>报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。 </li>
</ol>
</body>
</html>
3. 超链接标签
超链接是指从一个对象指向另一个对象的指针，它可以是网页中的一段文字也可以是一张图片。实现从一个页面到另一个页面的跳转。
（1）URL
URL：统一资源定位符/定位器，又称路径，用来描述资源位置的信息
①绝对路径：
从资源文件所在的最高级目录下开始的完整路径表示
获取网络资源文件只能用绝对路径，由以下内容组成：
- 通信协议：http或https，冒号和两个斜杠为通信协议与主机名之间的分隔符
- 主机名：域名或IP地址，如www.baidu.com
- 目录路径：获取的文件在主机上的目录结构
- 文件名：获取的文件名字 例：
https://www.baidu.com/img/bd_logo1.png
②相对路径：
从当前文件位置处开始去查找资源文件所经过的路径
- 相同目录下，直接通过名称进行引用，如a.jpg
- 子目录，先进入，再引用,如Images/b.jpg
- 父目录，先返回，再引用,“../”表示返回一级，如../a.jpg
③根相对路径：
从Web站点所在的服务器根目录下开始查找，以斜线“/”开始
（2）超链接语法及属性：
<a href=“值” target=“值”>超链接文本或图片</a>
属性href：指定链接的目标（另一个网页的路径）
target：目标窗口，取值有：
- _self：默认值
- _blank：浏览器总在一个新打开、未命名的窗口
- _parent：使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效
- _top：用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口
（3）超链接的表现形式：
外部链接：
- 资源下载：链接地址为**.zip/**.rar
- 电子邮件链接：<a href=“mailto:abc@163.com”>发送邮件</a>
- 返回页面顶部的空链接：<a href=“#”>返回顶部</a>
- 链接到JavaScript：<a href=“javascript:js代码”></a>
锚记链接：
定义锚点（做记号）：
- 通过a标记的name属性：<a name=”锚点名称”>内容</a>，尽量英文下划线连字符
- 通过任意标记的id属性：<标记 id=”锚点名称”></标记>
链接到锚点（跳转到锚点处）：
- <a href=”#锚点名称”></a>：跳转的本页的锚点
- <a href=”页面URL#锚点名称”></a>：跳转到指定页面的锚点
图片标签
语法与属性：
<img src="url" height="" width ="" alt="" />
- src：指定图像源的URL路径
- alt：替代文本（如：图片加载中）；
- height：图片的高度；
- width：图片的宽度
5. 滚动标签
<marquee width="80" height="80" bgcolor="#CCCCCC"
direction="left" scrollamount="0"> 滚动标签</marquee>
- width 和height：指定滚动对象宽度和高度
- bgcolor：背景颜色；
- direction：方向，默认向左；
- scrollamount：速度，0不动
6. 行内元素与块级元素
- 行内元素：多个元素会在一行内显示，元素的宽度、高度及顶部和底部边距不可设置；元素的宽度是它包含的文字或图片的宽度，不可改变。如<span>、<b>、<td>、 <a>、 <i>、<strong>等。
- 行内块级元素：多个元素会在一行内显示，元素的宽度、高度及顶部和底部边距可设置。如<img> <input> <marquee>
- 块级元素：每个元素独立成行，如<h1>~<h6>、<p>、<ol>、<ul>、<div>、<form> <table>等，元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。
7. span与div
<span> 元素
<span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
使用<span> 来组合行内元素，以便通过样式来格式化它们。
如果不对<span> 应用样式，那么<span> 元素中的文本与其他文本不会任何视觉上的差异。
可以为 <span> 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
例：
<p><span>some text.</span>some other text.</p>
<div> 元素
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记<div> ，那么该标签的作用会变得更加有效。
例：
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
