HTML网页设计基础笔记 • 【第1章 HTML5基础】_html5+css3网站设计基础教程第二版第10章-CSDN博客

本文链接：https://blog.csdn.net/weixin_44893902/article/details/104964804

全部章节 >>>>

本章目录

1.1 HTML介绍及开发工具

1.1.1 HTML 的基本概念

一、WWW（World Wide Web，万维网）

是一种建立在 Internet 上的、全球性的、交互的、多平台的、分布式的信息资源网络，其采用 HTML 语言描述超文本（Hypertext）文件。

二、WWW的组成：

WWW 有 3 个基本组成部分，分别是

URL：Universal Resource Locators，统一资源定位器
HTTP ： HypertextTransfer Protocol，超文本传输协议
HTML ： Hypertext Markup Language，超文本标记语言

1、URL（统一资源定位器）：

URL（Universal Resource Locators，统一资源定位器）提供在 Web 上进入资源的统一方法和路径，使得用户所要访问的站点具有唯一性，这就相当于我们每个人只有一个身份证号一样。它说明了链接所指向的每个文件的类型及其准确位置。

2、HTTP（超文本传输协议）

HTTP（Hypertext Transfer Protocol，超文本传输协议） HTTP 是一种网络上传输数据的协议，专门用于传输以超文本（Hypertext）或超媒体（Hypermedia）的形式提供的信息。

3、HTML（超文本标记语言）

HTML（Hypertext Markup Language，超文本标记语言）是一种简易的文件交换标准，纯文本类型的语言，使用 HTML 编写的网页文件也是标准的纯文本文件。由于 HTML 所描述的文件具有极高的适应性，所以特别适合于 WWW 的网络环境。

HTML文件可以直接由浏览器解释执行，而无需编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。因此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的 HTML 源代码是十分重要的。

1.1.2 网页

网页通常是 HTML 语言编写的扩展名为“.html”或“.htm”的文件。网页必须通过网页浏览器来阅读。网页由文字、图片、视频、动画以及音乐等内容组成，用于在网络上传递丰富的信息。

1.1.3 Web 标准

W3C 英文全称是 World Wide Web Consortium，是 Web 标准的英文写法。Web 标准不是某一个标准，而是一系列标准的集合。Web 标准分为3 个方面：

1.1.4 HTML5 与移动互联网

从系统无关到设备无关

改变 Web 开发的局限

1.1.5 网页开发工具

手工直接编写：由于 HTML 语言编写的文件是标准的 ASCII 文本文件，所以可以使用任何文本编辑器来打开并编写 HTML 文件，如 windows 系统中自带的记事本。

使用可视化软件：Microsoft 公司的 frontpage、Adobe 公司的 Dreamweaver 和 golive 等软件均可以可视化的方式进行网页的编辑制作。

手工直接编写：

打开“记事本”程序
在记事本中直接输入 HTML 代码
保存HTML文件
关闭记事本
在浏览器中浏览HTML文件

使用可视化软件编写：

Adobe Dreamweaver 是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以制作出跨越设备平台和浏览器限制的充满动感的网页。

使用可视化软件编写：

可视化软件编写步骤如下
启动 Dreamweaver CC
创建空白的 HTML5 文档
在 Dreamweaver CC 的代码视图输入HTML内容
保存HTML文件
按F12打开浏览器查看实际运行效果

1.2 HTML5 标签

1.2.1 HTML5 标签概述

HTML5 文档由文字及标签组合而成。一般标签是由一个起始标签和一个结束标签所组成，使用“<”和“>”两个尖括号括起来。

语法：

<x> 文字 </x>

说明：其中，x 代表标签名称。<x> 和 </x> 就如同一组开关：起始标签 <x> 为开启的某种功能，而结束标签 </x>为关闭功能，文字信息便放在两标签之间。

空标签：虽然大部分的标签是成对出现的，但也有一些是单独存在的。这些单独存在的标签称为空标签（EmptyTags）。

语法：

<x  />

1.2.2 doctype 标签

doctype 是 document type（文档类型）的简写，用于说明使用的 HTML 是什么版本。doctype 声明必须放在每一个 HTML5 文档最顶部，在所有标签之上。目前常见的 doctype 声明写法及意义见表

HTML 版本	doctype 声明
HTML5	<!doctype html>
XHTML1.0	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML4.0	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1.2.3 html标签

在任何的一个 HTML 文件里，最先出现的 HTML 标签就是 <html>，<html> 是成对出现的，首标签 <html> 和尾标签 </html> 分别位于文件的最前面和最后面，文件中的所有文件和 html标签都包含在其中。

语法：

<html>
文件的全部内容
</html>

1.2.4 head 标签

<head> 是一个表示网页头部的标签。它包含文件的标题、编码方式及 URL 等信息。这些信息大部分是用于提供索引、辨认或其他方面的应用。

语法：

<html>
	<head>文件头</head>
	<body>文件主体</body>
</html>

1.2.5 meta 标签

为了符合 Web 标准，所有的 HTML5 文档都必须声明它们所使用的字符编码语言，我们通常使用 utf-8、gb2312（简体中文）字符集表达中文字符。它包含在 head 标签里面。

语法：

<html>
	<head>
		<meta charset="utf-8“ />
 	</head>
	<body>文件主体</body>
</html>

1.2.6 title 标签

title 标签表示 HTML5 文档的标题，当 HTML5 文档在浏览器中呈现时，title 标签的内容出现在浏览器窗口。

语法：

<html>
	<head>
		<meta charset="utf-8">
		<title>窗体标题</title>
 	</head>
	<body>文件主体</body>
</html>

1.2.7 body 标签

body 标签包含了所有文档主体内容，这些内容被浏览器显示在屏幕上。

<html>
	<head>
		<meta charset="utf-8">
		<title>窗体标题</title>
 	</head>
<body>
		body 标签里面的文本
		<!--body 标签里面的文本 -->
	</body>
</html>

3.1 文本和超链接标签

1.3.1 标题标签

HTML5 的标题标签是 h1、h2、h3、h4、h5 和 h6，标签中的字母 h 是英文 headline 的简称。作为标题，它们的重要性是有区别的，其中 h1 标题的重要性最高，h6 最低。由 h1 至 h6 标题字号逐渐减小。每个标题标签所标示的文字将独占一行且上下均留一空白行。

示例：

<h1> 这是 h1 标签效果 </h1>
<h2> 这是 h2 标签效果 </h2>
<h3> 这是 h3 标签效果 </h3>
<h4> 这是 h4 标签效果 </h4>
<h5> 这是 h5 标签效果 </h5>
<h6> 这是 h6 标签效果 </h6>

标题文字标签的对齐方式：

默认情况下，标题文字是左对齐的。而在网页制作的过程中，可以实现标题文字的编排设置。在文字标题的属性设置中，最常见的就是关于对齐方式的设置，这就需要使用 align 参数来进行设置。

语法：

align=“对齐方式”

属性	说明
left	左对齐
center	居中对齐
right	右对齐

1.3.2 段落标签

在文本编辑窗口中，输入完一段文字后，按下 Enter 键就生成了一个段落。HTML5 的段落标签是 p，它表示以段落的方式组织内容，并可以为文字、图片、表格等之间留一个空白行。

语法：

<p> 段落正文内容 </p>

说明：即可以使用成对的 标记来包含段落，也可以使用单独的 标记来划分段落。

示例：

<html>
	<head>
		<title> 输入段落文字 </title>
	</head>
<body>
	<p> 张而不弛 , 文武弗能也 ;</p>
	弛而不张 , 文武弗为也 , 一张一弛 , 文武之道也。	<p>
</body>
</html>

段落标签的属性

p 标签的部分属性

示例：

<body>
<p align="center" style="color:#ff0000"> 学习 HTML 其实很容易。</p>
<p> 只要熟悉 HTML 常用的标签的使用、特性、规则等。</p>
<p title=" 看看工具提示！ "> 这样你就初步掌握了 HTML。</p>
</body>

1.3.3 换行标签

段落与段落之间是隔行换行的，这样会导致文字的行间距过大，可以使用换行标记来完成文字的紧凑换行显示。

HTML5 的换行标签是 br，其作用是在不另起一段的情况下，将当前的文字、图片以及表格等强制换行显示于下一行。

语法：

一行文本 <br> 另起一行

一个 标记代表一个换行，连续的多个标记可以多次换行。

示例1：

<html>
	<head>
		<title> 文字的换行 </title>
	</head>
	<body>
		龚自珍 <br/><br/>
		九州生气恃风雷 , 万马齐喑究可哀。<br/>
		我劝天公重抖擞 , 不拘一格降人才。<br/>
	</body>
</html>

示例2：

<body>
	<p align="center" style="color:#ff0000">学习HTML其实很容易。</p>
	只要熟悉HTML常用的标签的使用、特性、规则等等。
	<br>
	这样你就初步掌握了HTML。<br>
</body>

1.3.4 水平标签

HTML5 的水平标签是 hr，其作用是在浏览器上显示一条细线以分隔两个区域，在 HTML5 文档中的任意位置插入一条水平线。

语法：

<hr 属性 =" 属性值 ">

说明：在网页中输入一个 <hr> 标记，就添加了一条默认样式的水平线。

示例：

<body>
	<center>
		<h4>HTML5</h4>
	</center>
	<hr> 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）  的第 5 次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容：[1] ）。2014 年 10月 29 日，万维网联盟宣布，经过接近 8 年的艰苦努力，该标准规范终于制订完成。
</body>

1、设置水平线的宽度和高度：在默认情况下，在网页中插入的水平线是 100% 的宽度，1 像素的高度，而在实际创建网页时，可以对水平线的宽度和高度进行设置。

语法：

<hr width=“水平线宽度” height=“水平线高度”/>

说明：在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口宽度值的百分比。而水平线的高度值则只能够是像素值。如果在创建水平线时只设置一个参数，那么另外一个参数则会取默认值。

示例：

<body>
	<center>
		<font face=" 隶书 " size="+4"> 醉花阴 </font>
		<hr width="130">
		<font size="+3"> 李清照 </font>
	</center>
	<hr width="85%" size="3">
	<p>&nbsp;&nbsp;&nbsp;&nbsp; 薄雾浓云愁永昼，瑞脑销金兽。<br/>
	&nbsp;&nbsp;&nbsp;&nbsp; 佳节又重阳，玉枕纱厨，半夜凉透彻。<br/>
	&nbsp;&nbsp;&nbsp;&nbsp; 东篱把酒黄昏后，有暗香盈袖。<br/>
	&nbsp;&nbsp;&nbsp;&nbsp; 莫道不消魂，帘卷西风，人比黄花瘦。</p>
	<hr size="5">
</body>

2、设置水平线的颜色：为了使水平线更加美观，同整体页面更加协调，可以设置水平线的颜色。

语法：

<hr color=“颜色代码”/>

说明：颜色代码是十六进制的数值。

示例：

<body>
	<center> 李白（唐朝著名浪漫主义诗人）</center>
	<hr width="220" size="3" color="#FFCC00">
	<p>
	李白（701—762 年）[1] ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，
	被后人誉为“诗仙”，</p>
	……
	<p> 李白所作诗赋，宋人已有传记（如文莹《湘山野录》卷上），就其开创意义及艺术成就而言，
	“李白诗”享有极为崇高的地位。</p>
	<hr size="5" color="#33FFFF">
</body>

设置水平线的对齐方式：水平线在默认情况下是居中对齐的。如果希望水平线左对齐或右对齐，就需要使用align 参数。

语法：

<hr aligh=“对齐方式”/>

说明：在该语法中包括 left、center 和 right3 种对齐方式。其中，center 的效果与默认效果相同。

示例：

<html>
	<head>
		<title> 设置水平线对齐方式 </title>
	</head>
	<body>
		<font face=" 隶书 " size="+3" color="#FF6600"> 苏轼 </font>
		<hr width="130" color="#996600" align="left"> 古之成大事者 , 不惟有超士之才 , 亦有坚忍不拔之志。
		<p align="right"> 大家要牢记啊！
		<hr size="2" width="120" color="#FF99CC" align="right">
	</body>
</html>

3、去掉水平线阴影：在默认情况下，水平线是空心带阴影的立体效果，通过设置 noshade 参数可以将水平线的阴影去掉。

语法：

<hr noshade=“noshade”/>

示例：

<html>
	<head>
		<title> 去掉水平线的阴影 </title>
	</head>
	<body>
		<center>
		<font face=" 隶书 " size="+3" color="#00FF00"> 老子 </font>
		</center>
		<hr width="200" size="4"><br/><br/>
		<p align="center"> 信言不美 , 美言不信。善者不辩 , 辩者不善。</p>
		<hr size="4" noshade="noshade" />
	</body>
</html>

4、hr 标签的属性

属性	说明	默认值
align	水平对齐方式。可选值：right, left, center	left
size	设定线条厚度。以像素作单位	2
width	设定线条长度。可以是绝对值（以像素为单位）或相对值	100%
color	设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color="blue"	黑色
noshade	设定线条为平面显示，若取消此项则具有阴影或立体	—

示例：

<body>
	<hr align="left" size="4" />
	<hr align="left" size="2" width="70%" color="#0000FF" noshade="noshade" />
	<hr align="left" size="4" width="70" color="#008000" />
</body>

1.3.5 强调标签

HTML5 的强调标签是 b 和 strong，其作用是显示文本。b 标签的英文全称是 bold，strong 标签的英文原名即strong，两者皆是 HTML 文档中格式化粗体文本的最基本标签。

语法：

<b> 要以粗体显示的文字 </b>
<strong> 要以粗体显示的文字 </strong>

注意：在 或 之间的文字，浏览器都会以粗体字体显示。两者都必须包含首尾标签。它们都是行内元素，它们都可以插入到一段文本的任何部分，表示重要的文本。

示例：

<body>
	<strong> 字体标签－ strong、b 标签都用于字体加粗显示。</strong>
	<br>
	<b>strong、b 标签通常都可以加粗文字，显示效果一样。</b>
</body>

1.4 图片标签与超链接标签

1.4.1 图片标签

网页上插入图片的方法是使用 img 标签。其众多属性可以控制图片的路径、尺寸和替换文字等功能。img 标签本身不包含任何内容，它的核心属性是 src 属性，定义图片的地址。img 标签属于“空标签”，它只有起始标签没有结束标签，所有图像样式均由 img 的属性决定。在网页上使用的图片，常见的格式有 JPEG、GIF 和 PNG 等格式。

语法：

<img src=“路径” alt=“提示信息” align=“对齐方式” border=“边框大小”          width=“宽度”height=“高度”/>

图片标签属性

属性	说明	默认值
src	图片地址，接受 GIF、JPG 及 PNG 格式。若图片文件与该 html 文件处于同一目录，则只写文件名称，否则必须添加正确的相对路径或绝对路径	left
width、height	设定线条厚度。以像素作单位	2
align	设定线条长度。可以是绝对值（以像素为单位）或相对值	100%
alt	设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color="blue"	黑色
noshade	设定线条为平面显示，若取消此项则具有阴影或立体	—

示例：

<body>
	<h3> 苹果手机 </h3>
	<p>
	<img src="images/iphone.jpg" alt=" 点击购买苹果 5 手机 " width="200" height="200" />
	<br/>
	Apple 型号 : iPhone 5<br/>
	手机价格区间 : 4000 元以上 <br/>
	网络类型 : GSM/WCDMA/LTE<br/>
	</p>
</body>

图片的相对路径和绝对路径

在 HTML 中，img 标签的 src 属性用于设置图片的位置，为了避免这些错误，必须正确地引用文件路径及名称。

HTML 路径有两种类型：相对路径和绝对路径。

图片与文本的对齐方式

img 标签的 align 属性可用于调整图像相对于周围文本的对齐方式。align 属性的取值可为 top、bottom、middle、left 或 right，

当 align 取值为 top 时，图片周边的文字与图片顶端对齐；当 align 取值为 bottom 时，图片周边的文字与图片底端对齐；当 align 取值为 middle 时，图片周边的文字与图片中间对齐。

语法：

<img align=“middle”/>

示例：

<body>
	联想电脑型号 :Lenovo U310-ITH
	<img src="images/lenovo.jpg" alt=" 联想电脑 " align="top" /> 爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
	<hr/> 联想电脑型号 :Lenovo U310-ITH
	<img src="images/lenovo.jpg" alt=" 联想电脑 " align="middle" /> 爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
	<hr/> 联想电脑型号 :Lenovo U310-ITH
	<img src="images/lenovo.jpg" alt=" 联想电脑 " align="bottom" /> 爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
</body>

1.4.2 超链接标签

超链接是指从一个网页指向一个目标的链接关系。链接的目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。HTML5 的超链接标签是 a。

语法：

<a 属性 =“属性值”> 链接显示文本 </a>

超链接标签的属性

属性	说明	默认值
href	链接的目标 URL	—
target	在何处打开目标 URL。仅在 href 属性存在时使用	_self

说明：a 标签的 href 属性可以链接到相对路径或绝对路径。如果相对路径中包含目录，使用“../”访问源文件所在目录的上一级目录，“../../”访问源文件所在目录的上上级目录

a标签的href属性用于设置链接的目标资源，与img标签的src属性类似，可使用相对路径或绝对路径。

绝对路径：绝对路径是访问带域名的文件完整路径。

<a href=”a.html”>相对路径的超链接</a>

<a href=”../a.html”>相对路径的超链接</a>

<a href = "html/a.html">相对路径的超链接</a>

相对路径：相对路径用于访问同一个目录的文件，直接编写文件名即可。

<a href=”http://www.qq.com”>绝对路径的超链接</a>

示例：（第一个相对路径，第二个绝对路径）

<body>
	<a href="1.1.html">1.1.html</a>
	<a href="http://www.baidu.com">baidu</a>
</body>

提醒：a 标签是一个行内元素，它可以成对出现在一段文档的任何位置。处于 <a> 与 </a> 标签中的文字、图片等，都可以成为一个链接。

小结：

HTML5 拥有众多的标签，其中 doctype、HTML 以及 body 等标签是每个 HTML5 文档都必须编写的。
HTML 文件分为文件头和文件主体两个部分。文件主体部分就是在 Web 浏览器窗口的用户区看到的内容，而文件头部分用来规定该文件的标题（出现在 Web 浏览器窗口的标题栏中）和一些属性。
事实上，现在常用的 Web 浏览器（如 IE）都可以自动识别 HTML 文件，并不要求有 <html> 标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的 HTML 文件能够适应不断变化的 Web 浏览器，还是应该养成使用这个标签的习惯。
标签的大小写不影响最终效果。W3C 从HTML 4 开始建议所有标签都用小写，因此最好养成良好的书写习惯，HTML5 标签都以小写形式出现。

总结：

HTML 是 Hypertext Markup Language（超文本标记语言）的缩写。超文本使网页之间具有跳转的能力，是一种信息组织的方式，使浏览者可以选择阅读的路径，从而可以不需要按顺序阅读。
HTML5标签所有内容都在 <html></html> 标签之内；<head></head> 内放的是头部信息，是对页面的描述，不会直接显示在页面中，<head> 内的 <title> 中设置的是页面的标题，<title> 只能放在 <head> 中；<body> 是页面的主体，大部分显示内容都定义在这里。
在 HTML 中，常用标签有：标签标签(<h1> ~ <h6>)、段落标签（）、换行标签（ ）、强调标签（ 或 ）、图像标签（<img />）和链接标签（<a></a>）。