HTML：网页布局与流体网格技术教程.pdf

HTML：网页布局与流体网格技术教程：网页布局与流体网格技术教程

HTML基础回顾基础回顾

1.HTML标签与结构标签与结构

HTML（HyperTextMarkupLanguage）是用于创建网页的标准标记语言。它通过使用各种标签来

定义网页的结构和内容。下面是一些基本的HTML标签及其用途：

•!DOCTYPEhtml:声明文档类型为HTML5。

•html:根元素，所有其他HTML元素都应位于此元素内。

•head:包含文档的元数据，如标题、样式表链接和脚本。

•title:定义文档的标题，显示在浏览器的标题栏或标签页上。

•body:包含网页的所有内容，如文本、图像和链接。

•h1到h6:标题标签，h1表示最重要的标题，h6表示最不重要的标题。

•p:段落标签。

•a:链接标签，用于创建到其他网页或位置的链接。

•img:图像标签，用于在网页中嵌入图像。

•div:通用容器标签，用于组合其他HTML元素并应用样式。

•ul和ol:无序列表和有序列表标签。

•li:列表项标签，用于定义列表中的项目。

1.1示例代码示例代码

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

title我的第一个网页/title

style

body{

font-family:Arial,sans-serif;

}

h1{

color:blue;

}

p{

font-size:16px;

}

/style

/head

body

h1欢迎来到我的网站/h1

p这是一个段落，用于描述网站的内容。/p

ahref=访问示例网站/a

imgsrc=image.jpgalt=示例图片

div

ul

li项目1/li

li项目2/li

li项目3/li

/ul

/div

/body

/html

1.2解释解释

•!DOCTYPEhtml声明文档类型为HTML5。

•htmllang=zh指定文档语言为中文。

•metacharset=UTF-8确保文档使用UTF-8字符编码。

•style标签内包含CSS样式，用于定义body、h1和p元素的样式。

•h1和p标签用于创建标题和段落。

•a标签创建一个链接到的超链接。

•img标签用于显示一张名为image.jpg的图片，alt属性提供图片的替代文本。

•div标签用于创建一个容器，其中包含一个无序列表ul，列表中有三个项目

li。

2.CSS样式基础样式基础

CSS（CascadingStyleSheets）用于描述HTML文档的外观和布局。它允许你控制网页的布局、颜

色、字体和大小等。以下是一些基本的CSS属性：

•color:设置文本颜色。

•font-size:设置字体大小。

•font-family:设置字体类型。

•background-color:设置元素的背景颜色。

•margin:设置元素周围的外边距。

•padding:设置元素内部的内边距。

•border:设置元素的边框。

•width和height:设置元素的宽度和高度。

•display:控制元素的显示方式，如block、inline或flex。

•position:控制元素的定位方式，如static、relative、absolute或fixed。

2.1示例代码示例代码

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

titleCSS样式示例/title

style

.box{