1. HTML概述
HTML(超文本标记语言)
W3C(万维网联盟)
1.1 HTML文档结构
HTML是一种描述性标记语言,用来描述页面内容的显示方式。
HTML文件是一种纯文本文件,以".html"或".htm"为后缀。
HTML的基本组成单位是元素,语法结构如下:
<标签>
内容
</标签>
重!手写HTML文档具体结构
<!DOCTYPE >
标签需放在所有的文档标签之前(出题点),用于说明文档使用的HTML或XHTML的特定版本,并告诉浏览器后续内容应按照什么方式进行解析。注意<title>
标签的位置。
HTML文档结构是由<html><head><body>
这三大元素组成。
<html>
元素:文档以标签开始,以</html>
标签结束,所有内容都要放在这两个标签之间。<head>
元素:页面头部信息,用于向浏览器提供整个页面的基本信息(选择/判断题),但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素(填空)。页面头部信息通常并不在浏览器中显示,标题元素(<html>
标签的内容)除外,会显示在浏览器窗口的左上角。<body>
元素:网页的正文,是用户在浏览器主窗口中看到的信息,包括图片、表格、段落、音视频等内容,且需位于<body>
标签之内;但并不是所有的<body>
内部标签都是可见的。
1.2 编写HTML文件的注意事项
- **HTML不区分大小写,而XHTML区分大小写**
- HTML标签的属性与属性值
- HTML中的空格
- HTML中的注释
- **标签可以嵌套使用**
2. HEAD元素
HTML文档的<head>
元素包含很多标签,用于向浏览器提供整个页面的基本信息。
<head>
中可以包含以下子元素:<title>
标题、<meta>
、<link>
CSS外部样式表、<script>
JS样式、<style>
CSS内部样式、<base>
等。
2.1 title元素
页面的标题位于<title>
标签内,可以包含任何字符或实体。
2.2 meta元素
meta元素用于向客户的浏览器传递信息和命令,而不是用来显示内容的。
一个标签中可以包含一个或多个<meta>
标签。
<meta>
标签主要分为两大类:
- 对页面的设置,通过http-equiv属性进行指定
- 对搜索引擎的设置,通过name属性进行指定
案例:
该页面显示5秒后会自动跳转到指定的URL页面
<html>
<head>
<title>漫步时尚广场 E&S</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">//定义页面使用的字符集
<meta http-equiv="Refresh" content="5;url=http://www.itshixun.com" />//自动刷新并转到新页面
<meta name="keywords" content="漫步时尚广场,时尚,购物,影视,餐饮"/>//页面关键词
<meta name="description" content="游客漫步在时尚广场,可漫步湖畔步行街,可在国际名品店、时尚精品店徜徉,在电影区感受视听震撼,在咖啡、酒吧一条街放松身心,在世界特色餐厅享受美味。 "/>//页面的描述内容
<meta name="author" content="QST青软实训"/>//页面的作者
<meta name="robots" content="all"/>//告诉搜索引擎页面允许查询
</head>
<body>
Meta标签的使用,5秒后进入QST官方网站~
</body>
</html>
3.文本元素
HTML文档中的文本元素包括:内容标题、文本修饰、特殊字符。
- 内容标题:h1、h2、h3、h4、h5、h6
- 文本修饰:font、b、i、s、u、sup、sub、strong、big、small
- 特殊字符:双引号(“)、&号、空格、小于号(<)、大于号(>)、小于等于(≤)、大于等于(≥)、版权号(©)、商标符号(™)、注册商标(®)、分数(¼)等
3.1内容标题标签
<hn>
标签是双标签,默认情况下,在大多数浏览器中显示的<h1><h2><h3>
元素内容大于文本在网页中的默认尺寸,<h4>
元素的内容与默认文本的大小基本相同,而<h5>
和<h6>
元素的内容较小一些。
3.2文本修饰标签
文本修饰标签用于对文本样式进行设置:
注意
-
HTML5为
<strong>
标签添加了语义,使用<strong>
标签包起来的文本表示重要的文本。 -
HTML5中删除了原有的
<big>
标签,并对<small>
标签进行重新定义,用于标识所谓的”小字印刷体“,通常用来标注诸如注意事项、法律规定、免责声明或版权相关的声明性文字。
3.3特殊字符
在页面中,有些字符不能直接使用,只能通过引用的方式实现;
&号:&
空格:
4.文档结构元素
- 段落标签
<p>
用于对网页内容提供块级格式。当浏览器解析<p>
标签时,通常在下一个段落之前插入一个新的空白行。 - 换行标签
<br />
可以在文本内容不结束的情况下需要对文本进行换行,<br />
标签是空标签,br和“/”之间存在一个空格。 - 水平线标签
<hr />
可以在页面中产生一条水平线,将文本区域内容分开。
5.列表元素
在HTML页面中,使用列表将相关信息放在一起,会使内容显得更具有条理性。
HTML中的列表有以下三种类型:
- 有序列表:使用一些数值或字母作为编号
- 无序列表:使用项目符号作为编号
- 定义列表:列表中的每个项目与描述配对显示
5.1有序列表
HTML中提供了<ol>
标签来实现有序列表有序列表:使用一些数值或字母作为编号;
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
......
</ol>
其中:
<ol>
中允许包含多个列表项,每一个列表项都嵌入在<ol></ol>
之间;<li>
标签用于展示某一列表项,其内容包含在<li></li>
之间。
通过type属性可以指定有序列表编号的样式,取值方式有如下几种:
- “1”代表阿拉伯数字(1、2、3…);
- “a”代表小写字母(a、b、c…);
- “A”代表大写字母(A、B、C…);
- “i”代表小写罗马数字(i、ii、iii…);
- “I”代表大写罗马数字(I、II、III…)。
通过start属性指定列表序号的开始位置,例如start="3"表示从3开始编号。
<ol type="A" start="3">
<li>购物区</li>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>休闲装</li>
<li>运动装</li>
</ol>
5.2无序列表
无序列表与有序列表不同,无序列表每一项的前缀显示的是图形符号,而不是编号。
HTML中提供了<ul>
标签来实现无序列表:
<ul type="类型">
<li>列表项 1</li>
<li>列表项 2</li>
......
</ul >
其中:
- 每一个列表项
<li>
嵌入在<ul></ul>
之间,使用方式基本与有序列表一致; - type属性用于设置列表的图形前缀,取值可以是circle(圆)、disc(点)、square(方块)、none等类型;当缺省type属性时大部分浏览器默认是disc类型。
<ul type="disc">
<li>购物区</li>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>休闲装</li>
<li>运动装</li>
</ul>
5.3定义列表
定义列表是一种特殊列表,将项目与描述成对显示,使用<dl>
标签来实现
<dl>
<!-- 第1项开始 -->
<dt>标题 1</dt >
<dd>描述 1</dd>
<!-- 第1项结束 -->
<!-- 第2项开始 -->
......
<!-- 第2项结束 -->
</dl >
其中:
- 在一个
<dl>
标签中可以包含多对<dt>、<dd>
标签;与<dt>
标签相比,<dd>
标签的内容通常向后缩进一定的空间。 - 一个定义列表中可以包含1~n个子项;
- 每一子项都由两部分构成:标题(dt)和描述(dd),且成对出现;
<dt></dt>
标签用于存放标题内容;<dd></dd>
标签用于存放描述内容。
<dl>
<!-- 第一项开始 -->
<dt>购物区</dt>
<dd>近年来,随着经济社会和现代物流业的快速发展,带动了电子商务的快速发展……</dd>
<!-- 第一项结束 -->
<!-- 第二项开始 -->
<dt>影视区</dt>
<dd>能够在线收看高清电影电视剧、体育直播、游戏竞技视频、动漫视频、综艺视频、财经资讯视频播放流畅、完全免费,是网民喜爱的休闲娱乐区。</dd>
<!-- 第二项结束 -->
<dt>餐饮区</dt>
<dd>通过互联网使消费者及时了解餐厅营运、在线点菜、优惠套餐等方式进行网络销售传播,便利充分地实现餐厅服务价值交换。</dd>
</dl>
6.div与span标签
div标签(display:block;)
块级元素<div>
标签用于将网页中的某一特定区域用边框围起来,并赋予指定的样式。
<div style="块元素的样式" class="类选择器名称" align="对齐方式">
内容部分
......
</div>
其中:
- style属性用于设置div元素的行内样式;
- class属性用于引用CSS的类选择器;
- align属性用于设置div元素中的内容的对齐方式,取值范围是left、right、center或justify
span标签(display:inline;)
<span>
标签属于行内元素,用于指定行内元素
通过<span>
标签来选择特定的文本,以便赋予特殊的样式;
<span style="块元素的样式" class="类选择器名称" align="对齐方式">
内容部分
</span>
其中:
- style属性用于设置span元素的行内样式;
- class属性用于引用CSS的类选择器;
- align属性用于设置span元素中的内容的对齐方式,取值范围是left、right、center或justify
注意:如果只是使用<div>
标签不使用CSS样式,在页面中的效果和<p>
标签基本相同,且通过<div>
标签可以对页面进行整体划分,并使用CSS进行修饰,以实现页面的布局。
小知识
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
- 块元素特征:(display:block;)
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。
- 行内元素特征:(display:inline;)
(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
(3)不会自动进行换行
行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体<b>
和<i>
标签,还有<sub>
和<sup>
这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助。
- 行内块状元素特征:(display:inline-block;)
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。
7.URL简介
URL(Uniform Resource Locator,统一资源定位符),用于指定web资源所在的位置。URL是internet上标准的资源地址,又称网页地址或网址。
URL包含三个关键部分:协议、主机地址(网站域名或IP地址)、文件路径(填空题)
协议、主机地址和文件路径共同组成了一个完整的URL:
- 网页通常采用HTTP超文本传输协议传递信息,对应的网址基本使用http://前缀
- 电子商务等网站相对安全性更高时,多采用https协议(https://前缀)
- 文件上传下载时,多采用ftp://前缀
- 主机地址(Host Address)一般是网站的域名,如www.itshixun.com
- 主机地址也可以使用IP地址(数字形式),如192.168.1.100、115.239.210.27等
- 文件路径通常与网站的目录结构相对应,以斜杠(/)开始,以文件夹名或文件名结束,中间可以包含一级或多级目录,例如:/web/test/index/html或/web/test/
7.1绝对路径
绝对路径是指一个完整的路径
http://www.itshixun.com/movie/index.html
d:/web/movie/index.html
绝对地址相对比较长,而网站的每个页面可能包含很多链接,页面代码显得比较臃肿。
7.2相对路径
相对路径比绝对路径更加简洁,方便后期网站的维护
当浏览器访问Web资源时,浏览器需要完整的URL才能获取到资源内容;当页面中提供的地址是相对路径时,浏览器会将相对URL转成完整的绝对URL后再获取资源。
相对路径的访问方式有以下几种形式:
- 同一目录
- 子目录
- 父目录
- 根目录
注意:
相对路径仅适用于链接相同网站中的内容,不能用于链接其他域名下的资源。
根目录方式在本地访问时无法实现,只有站点内容上传到Web服务器上才能展示效果。
8.图像标签
在页面中,使用<img/>
标签向HTML文档中添加一幅图像
<img src="url" alt=" " ...>
属性名 | 描述 |
---|---|
src | 图像的地址,可以是绝对URL,也可以是相对URL |
alt | 图像的文本描述。浏览器无法显示图像时,该文本值作为图像的替代;描述文本能够更好的帮助搜索引擎对页面进行索引 |
height | 指定图片的高度,可以是固定值,也是百分比(占外层容器的百分比,会随外层容器的改变而改变) |
width | 指定图片的宽度,可以是固定值,也是百分比(占外层容器的百分比,会随外层容器的改变而改变) |
align | 图像的对齐方式:top、bottom、middle、left、right |
border | 指定图像边框的宽度 |
9.超链接标签
当浏览者点击链接(HyperLink)时,可以直接转向对应的网页、图片、文件或邮箱等资源;
<a href="url" name=" " target=" ">链接内容</a>
常见的超链接有以下几种类型:
文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接
9.1 文本链接与锚点链接
文本链接
文本链接是指链接内容是文本内容。链接目标可以是站内链接,也可以是站外链接;
<a href="../index.html" title="网站首页">首页</a><br />
<a href="list.html" title="本教程提供的列表示例页面">列表示例</a><br />
<a href="http://www.baidu.com">百度</a> <br />
<a>
标签的title属性用于给链接添加标题,当鼠标悬停在超链接之上时,会提供该链接的更多相关信息。
锚点链接
锚点链接分为同一页面的锚点链接和跨页面的锚点链接,实现步骤如下:
(1)在目标页面中,使用<a>
标签创建锚点标记
(2)在页面中,创建超链接链接到锚点
<a id="myAnchor">这里是我创建的锚点位置(方法1)</a> <!--推荐使用-->
<a name="otherAnchor">这里是我创建的锚点位置(方法2)</a>
同一页面的锚点链接<a>
标签的href属性是由"#"+"目标锚点名称"两部分构成
<a href="#myAnchor">链接到锚点位置</a>
跨页面的锚点链接的<a>
标签的href属性由“目标页面的绝对路径(或相对路径)”+“#”+“目标锚点名称”构成
<a href="/chapter01/anchorLinkDemo.html#myAnchor">锚点位置</a>
9.2 图片链接与图片热区链接
图片链接也是使用<a>
标签来实现
把<img/>
标签放在<a>
和</a>
标签之间即可
<a href="http://www.itshixun.com">
<img src="images/logo.jpg"/>
</a>
图片热区链接是指在同一个图片中不同的部分链接到不同的目标位置,比一般的图片链接更加灵活。
在图片中设置“热区”的步骤如下:
通过<map>
标签定义一个客户端图像映射(image-map),可以包含一个或多个图像的映射区域(<area>
),而每个<area>
区域拥有一个独立的链接。
将<img/>
标签usemap属性与<map>
标签的name属性相关联,实现图片与映射之间的联系。
<body>
<map name="myMap">
<area shape="circle" coords="32,35,31" href="http://xx.com" />
<area shape="rect" coords="62,8,103,66" href="http://xx.cn" />
<area shape="poly" coords="114,73,133,11,107,11" href="#" />
</map>
<img src="images/logo.jpg" usemap="#myMap" border="0"/>
</body>
9.3 其他超链接
空链接
- 空链接是未指派的链接,多用于向页面中的对象或文本附加行为时使用
- href属性为“#”
Email链接
- 浏览者可以通过点击Email链接时,操作系统会使用默认的程序打开一封新的电子邮件,并准备好发送该电子邮件到链接指向的地址
- href属性由“mailto:”+“邮箱地址”两部分构成
JavaScript链接
可以实现对JavaScript脚本的调用
<body>
//以下两种写法等价
<a href="JavaScript:alert('你好,欢迎来到Web前端设计课堂');">
JavaScript链接,弹出提醒信息。
</a>
<a href="JavaScript:void(0);" onClick="alert('欢迎来到Web前端设计课堂');">
JavaScript链接,弹出提醒信息。
</a>
</body>
//和空链接效果相同
<a href="JavaScript:void(0);" ></a>
9.4 超链接的target属性
默认情况下,链接会在当前活动窗口打开目标链接文档,目标文档的内容将替换当前显示的页面内容。
<a>
标签的target属性可以改变目标文档的显示窗口。
<a href="http://www.itshixun.com" target="_blank">打开目标链接</a>
总结
- HTML是一种描述性标记语言,通常以后缀.html或.htm结尾
- HTML内容主要由网页头部和网页主体两大部分构成
<head>
元素中包含<title>、<meta>、<base>、<link>、<script>、<style>
等标签<meta>
标签主要包含两类:对页面的设置,对搜索引擎的设置- HTML中提供了6级标题,通过标题让文件结构更加清晰
<font>
标签可以用来控制更多的文本外观,可以通过设置属性face、size、color来设定文本的字体、大小、颜色<p>
标签是HTML特定的段落标签,可以为网页内容提供块格式<hr />
标签可以在页面中产生一条水平线,将文本区域内容分开- HTML中列表分为有序列表、无序列表、定义列表
<div>
用来表达一个逻辑区块,属于块级元素<span>
标签属于行内元素,用来选择特定文本- URL(Uniform Resource Locator,统一资源定位符),用于指定Web上资源所在的位置,分为绝对路径和相对路径
<img />
标签向HTML文档中添加图像- 常见的超链接有以下几种(7)类型:文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接