【web前端开发】第一周初识HTML

爱写代码的July

已于 2024-02-01 19:36:24 修改

阅读量266

点赞数 1

分类专栏： web前端开发文章标签：前端 html javascript

于 2023-03-30 16:55:31 首次发布

本文链接：https://blog.csdn.net/Liu_y_xin/article/details/129860649

版权

web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、HTML5发展历程

HTML的出现由来已久，1993年HTML首次以因特网的形式发布。随着HTML的发展，W3C（World Wide Web Consortium，万维网联盟）掌握了对HTML规范的控制权，负责后续版本的制定工作。

然而，在快速发布了HTML的4个版本后，HTML迫切需要添加新的功能，制定新规范。

在2004年，一些浏览器厂商联合成立了WHATWG工作组。 2006年，W3C组建了新的HTML工作组，明智地采纳了WHATWG的意见，并于2008年发布了HTML5的工作草案。

2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。

2、 HTML5的优势

（1）解决了跨浏览器问题

在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JavaScript代码就可以使用新的元素。

（2）新增了多个新特性

•新的特殊内容元素，比如 header、nav、section、article、footer。•新的表单控件，比如 calendar、date、time、email、url、search。•用于绘画的 canvas 元素。•用于媒介回放的video和 audio 元素。•对本地离线存储的更好的支持。•地理位置、拖拽、摄像头等API。

（3）用户优先的原则

•安全机制的设计

为确保HTML5的安全，在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且针对不同的API（Application Programming Interface—应用程序编程接口）都通用。

•表现和内容分离

为了避免可访问性差、代码高复杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题，一些陈旧的表现和内容的代码还是可以兼容使用的。

（4）化繁为简的优势

•新的简化的字符集声明。•新的简化的DOCTYPE。•简单而强大的HTML5 API。•以浏览器原生能力替代复杂的JavaScript代码。

为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。

3、HTML5浏览器支持情况

现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，通过对这些主流Web浏览器的发展策略的调查，发现它们都在支持HTML5上采取了措施。

•IE浏览器

2010年3月16日，微软于MIX10技术大会上宣布，其推出的IE9浏览器已经支持HTML5。同时还声称，随后将更多地支持HTML5新标准和CSS3新特性。

•火狐浏览器

2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版。该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频、在线音频在内的多种应用都已在该版本中实现。

•Google浏览器

2010年2月19日，谷歌Gears项目经理伊安·费特通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。因为，Gears应用与HTML5的诸多创新非常相似，并且，Gears面临的需求也在日益下降。

•Safari浏览器

2010年6月7日，苹果在开发者大会的会后发布了Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajax历史和WebSocket字幕。

•Opera浏览器

2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的HakonWium Lie认为，HTML5和CSS3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷研发HTML5相关产品，Web的未来属于HTML5。

综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。

4、创建第一个HTML5页面

网页制作过程中，为了开发方便，通常我们会选择一些较便捷的工具，如Editplus、notepad++、sublime、Dreamweaver等。实际工作中，最常用的网页制作工具是Dreamweaver，本书中的案例将全部使用Adobe Dreamweaver CS6。接下来使用Dreamweaver CS6来创建一个HTML5页面。

选择菜单栏中的【文件】→【新建】选项，会出现“新建文档”窗口。这时，在文档类型下拉选项中选择HTML5，点击【创建】按钮，即可创建一个空白的HTML5文档。

5、HTML5文档基本格式

HTML5文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记，具体介绍如下：

（1）<!DOCTYPE>标记

<!DOCTYPE>标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或XHTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：

只有在开头处使用<!DOCTYPE>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。

（2）<html></html>标记

<html>标记位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档，<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容

（3）<head></head>标记

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。

一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

（4）<body></body>标记

<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

6、HTML5语法

（1）标签不区分大小写

HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。

在HTML5语法中，属性值不放在引号中也是正确的。

例如：

<input checked=a type=checkbox/>

<input readonly=readonly type=text />

以上代码都是完全符合HTML5规范的，等价于：

<input checked="a" type="checkbox"/>

<input readonly="readonly" type="text" />

（3）允许部分属性值的属性省略

在HTML5中，部分标志性属性的属性值可以省略。

例如：

<input checked="checked" type="checkbox"/>

<input readonly="readonly" type="text" />

可以省略为：

<input checked type="checkbox"/>

<input readonly type="text" />

从上述代码可以看出，checked="checked"可以省略为checked，而readonly="readonly"可以省略为readonly。

（3）允许部分属性值的属性省略

在HTML5中，可以省略属性值的属性如下表所示。

属性	描述
checked	省略属性值后，等价于checked="checked"。
readonly	省略属性值后，等价于readonly="readonly"
defer	省略属性值后，等价于defer="defer"
ismap	省略属性值后，等价于ismap="ismap"
nohref	省略属性值后，等价于nohref="nohref "
noshade	省略属性值后，等价于noshade="noshade"
nowrap	省略属性值后，等价于nowrap="nowrap"
selected	省略属性值后，等价于selected="selected"
Disabled	省略属性值后，等价于disabled="disabled"
Multiple	省略属性值后，等价于multiple="multiple"
Noresize	省略属性值后，等价于noresize="noresize"

7、HTML标记

在HTML页面中，带有“< >”符号的元素被称为HTML标记，如上面提到的<html>、<head>、<body>都是HTML标记。所谓标记就是放在“< >”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标记。

为了方便学习和理解，通常将HTML标记分为两大类，分别是“双标记”与“单标记”。

（1）双标记

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

该语法中“<标记名>”表示该标记的作用开始，一般称为“开始标记（starttag）”，“</标记名>” 表示该标记的作用结束，一般称为“结束标记（endtag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。

（2）单标记

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

<标记名/>

（3）注释标记

在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：

例如，下面为<p>标记添加一段注释，示例代码如下：

<p>这是一段普通的段落。</p>

需要说明的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。

8、标记的属性

使用HTML制作网页时，如果想让HTML标记提供更多的信息，例如希望标题文本的字体为“微软雅黑”且居中显示，此时仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用HTML标记的属性加以设置。其基本语法格式如下：

<标记名属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>

在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。

标记的属性—举例说明

<h1 align="center" >标题文本<h1>

其中align为属性名，center为属性值，表示标题文本居中对齐，对于标题标记还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示。

书写HTML页面时，经常会在一对标记之间再定义其他的标记，如例1-4中的第11行代码，在<p>标记中包含了<strong>标记。在HTML中，把这种标记间的包含关系称为标记的嵌套。例1-4中第11行代码的嵌套结构如下：

<p>传智云课堂是

  <strong>传智播客</strong>

    在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，专注于网页、平面、UI设计以及web前端的培训。

</p>

需要注意的是，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序依次关闭标记。

9、HTML5文档头部相关标记

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标记，这些标记通常都写在<head>标记内，因此被称为头部相关标记。

（1）<title></title>标记

<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title>标记，<title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：

<title>网页标题名称</title>

如图所示，线框内显示的文本即为<title>标记里的内容。

（2）<meta/>标记

下面介绍<meta />标记常用的几组设置，具体如下：

<meta name="名称" content="值" />

例如：设置网页关键字：

<meta name="keywords" content="java培训,.net培训,PHP培训,C/C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训" />

设置网页描述：

<meta name="description" content="IT培训的龙头老大,口碑最好的java培训、.net培训、php培训、C/C++培训,iOS培训，网页设计培训，平面设计培训，UI设计培训机构，问天下java培训、.net培训、php培训、C/C++培训,iOS培训，网页设计培训，平面设计培训，UI设计培训机构谁与争锋? " />

<meta name="author" content="传智播客网络部" />

<meta http-equiv="名称" content="值" />

例如：设置字符集：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

设置页面自动刷新与跳转：

<meta http-equiv="refresh" content="10;url=http://www.itcast.cn" />

（3）<link>标记

一个页面往往需要多个外部文件的配合，在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。其基本语法格式如下：

<link rel="stylesheet" type="text/css" href="style.css" />

属性名	常用属性值	描述
href	URL	指定引用外部文档的地址
rel	stylesheet	指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表
type	text/css	引用外部文档的类型为CSS样式表
type	text/javascript	引用外部文档的类型为javascript脚本

（4）<style></style>标记

<style 属性=”属性值”>样式内容</style>

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。

10、标题和段落标记

一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。

（1）标题标记

为了使网页更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：

<hn align="对齐方式">标题文本</hn>

该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式

（2）段落标记

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。其基本语法格式如下：

<p align="对齐方式">段落文本</p>

该语法中align属性为<p>标记的可选属性，和标题标记<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。

（3）水平线标记<hr/>

在在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：

<hr 属性="属性值" />

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

（3）水平线标记<hr/>

<hr />标记几个常用的属性如下表所示。

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center三种值，默认为center，居中对齐
size	设置水平线的粗细	以像素为单位，默认为2像素
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb(r,g,b)
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

（4）换行标记<br/>

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />。

11、文本格式化标记

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示，常用文本格式化标记如下表所示。

标记	显示效果
<b></b>和<strong></strong>	文字以粗体方式显示（b定义文本粗体，strong定义强调文本。）
<i></i>和<em></em>	文字以斜体方式显示（i定义斜体字，em定义强调文本。）
<s></s>和<del></del>	文字以加删除线方式显示（HTML5不赞成使用s）
<u></u>和<ins></ins>	文字以加下划线方式显示（HTML5不赞成使用u）

12、特殊字符标记

浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？其实HTML早想到了这一点，HTML为这些特殊字符准备了专门的替代代码，如下表所示。

特殊字符	描述	字符的代码
	空格符	&nbsp
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³

13、图像标记

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和它相关的属性。其基本语法格式如下：

<imgsrc="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。

图像标记—<img/>属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
	right	将图像对齐到右边
	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
	middle	将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
	bottom	将图像的底部和文本的第一行文字对齐，其他文字居图像下方

（1）图像的替换文本属性alt

由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的内容。

（2）图像的宽度、高度属性width、height

通常情况下，如果不给<img/>标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。

（3）图像的边框属性border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。

了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行修饰。

4）图像的边距属性vspace和hspace

在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

（5）图像的对齐属性align

图文混排是网页中的常见效果，默认情况下图像的底部会相对于文本的第一行文字对齐，如下图所示。但是在制作网页时经常需要实现图像和文字的环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。

14、相对路径与绝对路径

（1）绝对路径

绝对路径一般是指带有盘符的路径。

例如“D:\HTML5+CSS3\images\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:\HTML5+CSS3\images\logo.gif”这样一个路径。

（2）相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

例如：

<imgsrc="images/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径的设置分为以下3种：

•图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<imgsrc="logo.gif" />。

•图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<imgsrc="img/img01/logo.gif" />。

•图像文件位于html文件的上一级文件夹：在文件名之前加入“../”，如果是上两级，则需要使用 “../../”，以此类推，如<imgsrc="../logo.gif" />。

15、超链接标记

超链接虽然在网页中占有不可替代的地位，但是在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可，其基本语法格式如下：

<ahref="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在上面的语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，具体解释如下：

•href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。

•target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。

练习1.

HTML是什么意思？

A、高级文本语言
B、超文本标记语言
C、扩展标记语言
D、图形化标记语言

浏览器针对于HTML文档起到了什么作用？

A、浏览器用于创建HTML文档
B、浏览器用于查看HTML文档
C、浏览器用于修改HTML文档
D、浏览器用于删除HTML文档

哪个标记用于表示HTML文档的结束？

默认情况下，使用P标记会形成什么效果？

META元素的作用是什么？

下列那项技术可以用于帮助网页设计时使页面具有统一、专业的外观？

超链接不能链接到下列哪个位置？

A、/BODY
B、/HTML
C、/TABLE
D、/TITLE
A、在文字P所在位置中加入8个空格
B、P后面的文字会变成粗体
C、开始新的一行
D、P后面的文字会变成斜体
A、META元素用于表达HTML文档的格式
B、META元素用于指定关于HTML文档的信息
C、META元素用于实现本页的自动刷新
D、以上都不对
A、HTML
B、DHTML
C、CSS
D、URL
A、同一HTML文档内的位置
B、磁盘上其他HTML文档
C、Internet上HTML文档
D、计算机，你与它之间没有通信链路

下面关于HTML说法错误的是？

A、HTML是一种标记语言
B、HTML可以控制页面和内容的外观
C、HTML文档总是静态的
D、HTML文档是超文本文档

语句A：HTML文档必须包括“头”和“主体”两部分;

语句B：HTML文档的扩展名为.htm或.html;

以下说法正确的是：

Html标记中，哪个标记表示表格？

A、两句都对
B、两句都错
C、只有A对
D、只有B对
A、tr
B、td
C、table

爱写代码的July

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【web前端开发】第一周初识HTML

标记之后，主要用来封装其他位于文档头部的标记，例如、、及等，用来描述文档的标题、作者以及和其他文档的关系等。DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档，标记标志着HTML文档的开始，
复制链接

扫一扫