深入HTML

DustinWangq

已于 2023-07-19 11:55:17 修改

阅读量65

点赞数

分类专栏： # HTML-CSS 文章标签： html 前端

于 2023-07-19 11:52:56 首次发布

本文链接：https://blog.csdn.net/Welitsi/article/details/131805510

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、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>

DustinWangq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入HTML

一个完整的HTML结构包括哪几部分呢？
复制链接

扫一扫

专栏目录