一、HTML结构分析
一个完整的HTML结构包括哪几部分呢?
- 文档声明
- html元素
- head元素
- body元素
1.文档声明
HTML最上方的一段文本我们称之为 文档类型声明,用于声明文档类型
- HTML文档声明,告诉浏览器当前页面是
HTML5页面
; - 让浏览器用
HTML5
的标准去解析识别内容; - 必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题;
HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多
2.html元素
<html>
元素 表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。
- 所有其他元素必须是此元素的后代。
W3C标准建议为html元素增加一个lang属性
,作用是
- 帮助语音合成工具确定要使用的发音;
- 帮助翻译工具确定要使用的翻译规则;
如常用的规则:
lang=“en”
表示这个HTML文档的语言是英文;lang=“zh-CN”
表示这个HTML文档的语言是中文;
3.head元素
HTML head 元素 规定文档相关的配置信息(也称之为元数据),包括文档的标题
,引用的文档样式
和脚本
等。
- 什么是元数据(meta data),是描述数据的数据;
- 这里我们可以理解成对整个页面的配置:
常见的设置有哪些呢?一般会至少包含如下2个设置
- 网页的标题:title元素
- 网页的编码:meta元素
<head>
<meta charset="utf-8">
<title>HTML文档结构</title>
</head>
4.body元素
body元素里面的内容将是你在浏览器窗口中看到的东西,也就是网页的具体内容和结构
5.HTML元素汇总
HTML元素本身很多,但是常用的元素就是那么几个,我们只需要记住常用的,不常用的学会查看文档即可;
文档地址:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
常用的元素
- p元素、h元素;
- img元素、a元素、iframe元素;
- div元素、span元素;
- ul、ol、li元素;
- button元素、input元素;
- table、thead、tbody、thead、th、tr、td;
二、h1-h6、p元素
1. h元素
在一个页面中通常会有一些比较重要的文字作为标题
,这个时候我们可以使用h元素
。
<h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题
- Heading是头部的意思,通常会用来做标题
<h1>
级别最高,而<h6>
级别最低。
h元素通常和SEO优化有关系,请看《HTML额外知识补充》
2. p元素
如果我们想表示一个段落,这个时候可以使用p元素
HTML <p>
元素(或者说 HTML 段落元素)表示文本的一个段落。
- p元素是
paragraph
单词的缩写,是段落、分段的意思; - p元素多个段落之间会有一定的间距;
三、img、a、iframe元素
1. img元素
img
元素用来让浏览器显示一张图片
HTML <img>
元素将一份图像嵌入文档。
- img是image单词的所以,是图像、图像的意思;
- 事实上img是一个可替换元素( replaced element );
可替换元素:指该元素的内容可以被替换
img有两个常见的属性:
src属性
:source单词的缩写,表示源- 是必须的,它包含了你想嵌入的图片的文件路径。
alt属性
:不是强制性的,有两个作用- 作用一:当图片加载不成功(错误的地址或者图片资源不存在),那么会显示这段文本;
- 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义;
1.1 图片的路径
设置img的src时,需要给图片设置路径:
网络图片
:一个URL地址- 网络图片的设置非常简单,给一个地址即可;
本地图片
:本地电脑上的图片,后续会和html一起部署到服务器;
本地图片的路径有两种方式:
-
方式一:
绝对路径
(几乎不用);- 从电脑的根目录开始一直找到资源的路径;
-
方式二:
相对路径
(常用);- 相当于当前文件的一个路径;
.
代表当前文件夹(1个.),可以省略..
代表上级文件夹(2个.)
<!-- 绝对路径 -->
<img src="D:\frontend\code\01HTML\images\gouwujie01.jpg" alt="购物街">
<!-- 相对路径 -->
<img src="./images/gouwujie01.jpg" alt="购物街2">
对于网页来说,不管什么操作系统(Windows、Mac、Linux),路径分隔符都是 /,而不是 \
2. a元素
在网页中我们经常需要跳转到另外一个链接,这个时候我们使用a元素;
HTML <a>
元素(或称锚(anchor)元素):
- 定义超链接,用于打开新的URL;
a元素有两个常见的属性:
-
href
:Hypertext Reference的简称- 指定要打开的URL地址;
- 也可以是一个本地地址;
-
target
:该属性指定在何处显示链接的资源。- _self:默认值,在当前窗口打开URL;
- blank:在一个新的窗口中打开URL;
- 其他不常用, 后面iframe可以讲一下;
2.1 锚点链接
锚点链接可以实现:跳转到网页中的具体位置
锚点链接有两个重要步骤:
- 在要跳到的元素上定义一个id属性;
- 定义a元素,并且a元素的href指向对应的id;
<!-- a元素的锚点链接 -->
<a href="#1">标题1</a>
<a href="#2">标题2</a>
<a href="#3">标题3</a>
<div style="height: 2000px;"></div>
<h1 id="1">标题1</h1>
<div style="height: 2000px;"></div>
<h1 id="2">标题2</h1>
<div style="height: 2000px;"></div>
<h1 id="3">标题3</h1>
<div style="height: 2000px;"></div>
2.2 图片链接
在很多网站我们会发现图片也是可以点击进行跳转的
- img元素跟a元素一起使用,可以实现
图片链接
<!-- 图片链接 -->
<a href="http://www.baidu.com">
<img src="./images/gouwujie01.jpg" alt="gouwujie01">
</a>
2.3 其他URL地址
下载文件
<!-- 下载文件 -->
<a href="https://www.autoitscript.com/files/autoit3/autoit-v3-setup.zip">下载文件</a>
发送邮件
<!-- 发送邮件 -->
<a href="mailto:weli@163.com">发送邮件</a>
3. iframe元素
利用iframe元素可以实现:在一个HTML文档中嵌入其他HTML文档
frameborder属性:用于规定是否显示边框
- 1: 显示
- 0:不显示
a元素target的其他值:
-
_parent
:在父窗口中打开URL -
_top
:在顶层窗口中打开URL
<iframe src="http://www.taobao.com" frameborder="1"></iframe>
<p>分割线</p>
<!-- parent和top演示 -->
<iframe src="./other/iframe-wrap.html" frameborder="1" width="500px" height="400px"></iframe>
四、div、span元素
1.div元素、span元素的历史
在HTML中有两个特殊的元素div元素、span元素:
div元素
:division,分开、分配的意思;span元素
:跨域、涵盖的意思;
这2个元素算是万能元素,哪里都可以用;
产生的历史:
-
网页的发展早期是
没有css
,这个时候我们必须通过语义化元素
来告知浏览器一段文字如何显示; -
后来出现了css,结构和样式需要
分离
,这个时候html只需要负责结构
即可; -
比如h1元素可以是一段普通的文本+CSS修饰样式;
-
这个时候就出现了div、span来编写HTML结构
所有的结构
,样式都交给css来处理;
所以,理论上来说:
-
我们的页面可以
没有div、span
; -
我们的页面也可以
全部都是div、span
;
2.div元素、span元素的区别
这个时候有一个问题:我出现一个
不就可以了吗?
div元素和span元素都是“纯粹的” 容器
,也可以把他们理解成“盒子
”,它们都是用来包裹内容的;
- **div元素:**多个div元素包裹的内容会在
不同的行
显示;- 一般作为其他元素的父容器,把其他元素包住,代表一个整体
- 用于把网页分割为多个独立的部分
- **span元素:**多个span元素包裹的内容会在
同一行
显示;- 默认情况下,跟普通文本几乎没差别
- 用于区分特殊文本和普通文本,比如用来显示一些关键字
<div>我是div元素</div>
<div>我是div元素</div>
<span>我是span元素</span>
<span>我是span元素</span>
五、不常用元素
◼ strong元素:内容加粗、强调;
-
通常加粗会使用css样式来完成;
-
开发中很偶尔会使用一下;
◼ i元素:内容倾斜;
-
通常斜体会使用css样式来完成;
-
开发中偶尔会用它来做字体图标(因为看起来像是icon的缩写);
◼ code元素:用于显示代码
- 偶尔会使用用来显示等宽字体;
◼ br元素:换行元素
- 开发中已经不使用;
◼ 更多元素详解,查看MDN文档:
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
六、HTML全局属性
◼ 我们发现某些属性只能设置在特定的元素中:
- 比如img元素的src、a元素的href;
◼ 也有一些属性是所有HTML都可以设置和拥有的,这样的属性我们称之为 “全局属性(Global Attributes)”
- 全局属性有很多:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
1.常见的全局属性
-
id
:定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符),脚本或样式(使用 CSS)时标识元素。 -
class
:一个以空格分隔的元素的类名(classes )列表,它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素; -
style
:给元素添加内联样式; -
title
:包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。
<h1 class="title" id="mytitle" style="color: skyblue;" title="f">我是h1元素</h1>