HTML基础与CSS样式使用

前言

此篇文章是我参考老师PPT所做的笔记，方便复习用。此篇文章仅供学习参考。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、HTML

• HTML的全称为Hypertext Markup Language，是一种用来制作超文本文档的简单标记语言。
• HTML由一套标签组成，这些标签可以用来描述文档的结构、文本的格式，也可以描述超链接、图像特征等信息。

(1)HTML文档结构

HTML文档由HTML标签和纯文本组成，它被Web浏览器读取，并以网页的形式显示。浏览器不会显示HTML标签，只是使用HTML标签来解释页面的内容。

(2) HTML元素

一个HTML元素包括标签和属性 2个部分，标签决定要应用于HTML文档的格式种类，属性用来管理格式编排的需求。

(3) 常用HTML标签

按照HTML标签的功能分类，大致可分为12类，即基础、格式、表单、框架、图像、音频与视频、链接、列表、表格、样式与节、元信息以及编程。

基础标签

HTML的基础标签，如表2.1所示，它们定义了HTML文档的结构、 文档内容中的 标题、段落等基本信息。

格式标签

• 常用的HTML格式标签，如表2.2所示，它们定义了HTML元素的文本格式。
• HTML的某些标签，例如<tt>、<i>、<b>等，所定义的字体样式可以用CSS样式来实现，所以在表中并没有列出。
  

列表标签

• 常用的HTML列表标签，如表2.3所示，它们定义了HTML文档的列表样式。
• HTML文档中的列表有3种形式，即无序列表、有序列表和定义列表。
  

【例2.4】HTML列表。

超链接

• 超链接是超级链接的简称，是指从一个页面指向另一个目标页面的连接关系。
• 这个目标页面可以是另一个网页页面(位于同一服务器或不同服务器)，也可以是同一页面上的不同位置，还可以是一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
• HTML的超链接标签为<a>，它拥有href、target、id等属性，用来表示链接的目标、目标页面的打开方式、唯一标识等信息。
• 超级链接的对象，也就是<a>元素的内容，可以是一段文本或者一张图片。

【例2.5】HTML的超级链接。

表格

表格在网页中的用途十分广泛，它既可以显示数据、图片等，也可以用来对页面进行布局。HTML的表格标签如表2.4所示。

【例2.6】HTML表格。

表单

• HTML表单用于收集不同类型用户输入，是Web应用获取数据的重要技术手段。
• HTML表单是一个包含表单元素的容器，用户可以通过表单元素输入数据。
• 例如，可以通过文本框输入用户名或账号、通过密码框输入登录密码、通过单选框输入性别等。
• HTML的表单标签如表2.7所示。
  

【例2.7】HTML表单。

图像

图像是Web页面的重要媒体元素，在网页中使用图像，不仅能使页面更加美观大方，而且还会使其内容丰富多彩、生动形象。

【例2.8】HTML图像及图形。

音频/视频

音频与视频，也是Web页面中不可或缺的媒体元素，其HTML标签及部分重要属性如表2.9所示。

【例2.9】HTML音频及视频。

(4) 常用的特殊符号

• 在HTML页面中，大部分内容都是普通的ASCII文本。
• 然而，在这些文本中有时需要引用一些特殊的符号，比如数学符号、希腊字母、各种箭头等等。
• 这些特殊符号在HTML中称为实体引用，实体引用以“&”符号开始，以分号“;”结束，如表2.10所示。
  

【例2.10】HTML特殊符号。

2、CSS样式

• CSS是Cascading Style Sheets的缩写，表示层叠样式表，用于控制网页的样式和布局。
• 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

(1) CSS样式的使用

在Web页面中使用CSS样式，有内联、内部、外部3种方法。

内联样式

内联样式又称为行内样式，它定义在HTML元素的开始标签里，使用style属性设置样式规则，并且样式规则仅对当前HTML元素有效果。

内部样式

内部样式是指使用 <style>样式标签，将页面中需要应用的所有样式规则集中定义在页面头部分。

外部样式

• 外部样式就是指在Web页面之外、以文件的形式定义的文档样式。
• 存储样式定义的文件，称为样式表文件。样式表文件是普通的文本文件，其后缀为“.css”，可以使用普通的文本编辑器对其进行编辑与修改。
• 由于样式表文件与Web页面文件分开存储，因此，需要在Web页面文件的头部，使用<link>标签将定义好的样式导入 到页面中。
  

(2) CSS语法

CSS的语法规则并不复杂，对于内联样式来说，只需在待定义样式的HTML元素开始标签中加入style属性即可。其中，样式之间以分号结束，属性与属性值之间用冒号分隔。如下所示：

style = "属性1:属性1值; 属性2:属性2值"

对于内部样式及外部样式，CSS的语法相同，如下所示：

(3) CSS选择器

常用的CSS选择器主要有：标签选择器、id选择器、类选择器、分组选择器、通用选择器、后代选择器、伪类选择器，以及高级选择器。

标签选择器

标签选择器就是对HTML元素标签应用相应的CSS样式，如下所示：

id选择器

id选择器就是根据元素的id属性来选择元素，格式为“#id”。

类选择器

类选择器就是根据元素的class属性来选择元素，格式为“.类名”。

分组选择器

通用选择器

后代选择器

• 后代选择器也称为包含选择器，用来选择特定元素或元素组的后代。
• 后代选择器用两个常用选择器，中间加一个空格表示。
• 其中，前面的选择器用于选择父元素，后面的选择器用于选择子元素，样式最终会应用于选定的子元素上。
  

伪选择器

在网页设计过程中，有时还会需要在文档以外的其他条件下应用样式，如鼠标悬停、鼠标经过某个HTML元素等。这时就要用到伪类，例如：

高级选择器

除了上面介绍的基本选择器之外，CSS中还提供了一些功能复杂的选择器，常用的主要有以下3种：

• 子类选择器
• 相邻同胞选择器
• 属性选择器

(4) CSS常用属性

上面简单介绍了常用的CSS选择器，本小节将分类介绍常用的CSS属性及其取值，从而为选定的HTML元素设置不同的样式。

字体和文本

背景

• 使用CSS背景属性，可以为网页中不同的HTML元素设置背景颜色或者背景图像。
• CSS背景图像和使用<img>标签在页面中插入图像不同，背景图像不占据正常的HTML文档位置，而使用<img>标签插入的图像会占据页面位置。
• CSS中常用的背景属性及其功能描述，如表2.13所示。
  

边框

通过使用CSS边框属性，可以创建出样式丰富的边框效果，并且可以应用于任何元素。常用的CSS边框属性如表2.14所示。

区块

• HTML元素可分为块元素和内联元素。块元素从新行开始，可以容纳内联元素，也可以嵌套其他块元素，常见的有<p>和<div>；内联元素一般都是基于语义的基本元素，它只能容纳文本或者其他内联元素，常见的有<a>和<span>。
• 如果没有CSS的作用，即在默认的情况下，块元素会按顺序、每次另起一行的方式排列显示。可以通过CSS来改变HTML的这种默认布局模式，把块元素摆放到想要的任何位置上，当然也可以通过CSS来改变其宽度与高度值。
• 块元素的常用属性如表2.15所示。
  

列表

CSS列表属性如表2.16所示。

定位

• CSS有3种基本的定位机制，即普通流、浮动和绝对定位。在默认情况下，Web页面中的所有HTML元素均在普通流中定位。也就是说，元素位置由该元素在HTML文档中的位置决定，所有元素从上至下顺序排列。
• 相对定位是指以一个元素本应该出现的位置为起点，然后通过设置垂直或水平距离，让这个元素“相对于”它的起点进行移动，元素仍然处在正常的HTML普通流中。而绝对定位则是将HTML元素从正常的普通流中隔离，通过设置具体的垂直或水平位置坐标来进行定位，定位时所参照的位置原点是离它最近的已定位祖先元素，如果没有已定位的祖先元素，那么它的原点位置就是浏览器的左上角。
• CSS定位属性如表2.17所示。
  

【例2.13】CSS应用实例。