理解网页文件
- 每一个网页对应一个网页文件。
- 在浏览器中看到的网页实质为:
网页文件
- 网页文件:
文本文件;
扩展名:.html或.htm
文件内容为:HTML代码和文本内容
HTML简介
- 超文本标记语言;
- HTML不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签,HTML使用标记标签来描述网页。
- HTML 标记标签通常被称为HTML标签,它是由尖括号包围的关键词
- HTML标签三要点:
(1)词汇(标签)
(2)语法(标签的使用规定)
(3)语义(浏览器“理解”的标签含义)
HTML基本结构
HTML基本结构(所有网页必须有的):
<!DOCTYPE html>文档的声明
<html>开始标签(所有的内容,一个网页文件,只有一对html标签)
<head>头部
<title>xxx</title>
<meta charset = "utf-8"/> 设置编码方式等
</head>
<body>文件的体部
</body>
</html>结束标签
标签
- 双标签:由“开始标签”和“结束标签”两部分构成。结束标签比开始标签多了一个“/”(比如
<body></body>
),必须成对使用。 - 单标签:在开始标签中进行关闭,即以开始标签的结束而结束(比如
<meta/>
)。 - 双标签:代表标签作用范围
单标签:无需表达范围,仅在标签出现处有效(不用限定范围)
所有标签必须全部闭合/。 <br/>
作用:换行。
- 网页元素 是指构成网页的各项内容(列表、超链接、文字、图片)
- 标题:
<h1>...</h1> h1-h6
h1表示1级标题,可以同时有多个h1标题。 - 段落
<p>...</p>
- 图片标签
src:指明存储图像的位置(图片的路径)
alt:为图片添加替换文本(当找不到指定图片时,会显示alt中的话)
(1)绝对路径:
本机绝对路径:即从盘符开始的完整路径
网络绝对路径:网络可访问的地址。
优点:真实路径、定位清晰
缺点:本机绝对路径长,容易出错;如果站点文件夹被移动,就需要重新修改路径
(2)相对路径:
图片和网页在同一级:src = "./图片名"
图片在网页的下一级目录src = "目录名称/图片名"
图片在网页的上一级目录src = "../图片名"
优点:文件夹被移动,其内部文件的相对路径不变
注意事项:
不要使用本机绝对路径,推荐使用相对路径
图片文件单独存放在一个文件夹中
图片文件夹与页面文件放在同一个目录下
超链接
列表标签和内联框架
列表
- HTML支持无序列表、有序列表。(有无前后顺序的信息列表)
- 一对标签
无序列表:
有序列表:
效果:
内联框架
- 用于在网页内显示另一个网页文件。
示例主要代码及效果