HTML基础知识小结

最新推荐文章于 2024-09-20 21:47:09 发布

小奋斗♛

最新推荐文章于 2024-09-20 21:47:09 发布

阅读量401

点赞数

文章标签：大数据 html 前端

本文链接： https://blog.csdn.net/m0_72684019/article/details/125792735

版权

1、网页

1.1 什么是网页

网页是一个以`.html`为后缀的文件, 使用浏览器打开
网页是构成网站的基本元素，通常由文字, 图片, 音频, 视频等元素组成
本质是 html 代码, 代码主要由前端工程师编写
html 代码, 由浏览器解析和渲染之后, 用户就可以看到页面了
html 网页文件是纯文本

1.2 什么是HTML

HTML 指的是**超文本标记语言**，它是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种**标记语言**。
标记语言是一套**标记标签**。
HTML使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容。
HTML文档也叫做**web页面**。

1.3 网页的形成

前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面

2、常用浏览器

浏览器是网页显示、运行的平台。

五大浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari、Opera。

3、Web 标准（重点）

3.1 Web 标准

Web 标准是由 W3C 组织和其他标准化组织制定的**一系列标准的集合**。
W3C（万维网联盟）是国际最著名的标准化组织。

3.2 Web 标准的构成

主要包括**结构**（Structure）、**表现**（Presentation）和**行为**（Behavior）三个方面。

最佳方案：结构、样式、行为**相分离**。

*即：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。*

4、代码结构分析

`<!DOCTYPE html>` ==> **文档类型声明 DTD**
`<html lang="en">` ==> **网页语言**

（“en"代表是英文的网页，”zh-CN“代表中文的网页）

`<meta charset="UTF-8">` ==>**字符集设置**

（"UTF-8"是一种字符集）

`<title>`Document`</title>` ==>**网页的标题**

5、标签

标签通常成对儿出现，但是也有单个出现的

“/” ==> **斜线** “\” ==> **反斜线**

5.1 双标签

标签通常成对儿出现，有开始标签和结束标签。

如：`<p>` 键盘敲烂，工资过万 `</p>`

5.2 单标签

有的标签不是成对儿的，而是只有起始标签。

常见单标签`<br>` `<hr>` `<img>` `<input>` `<meta>`

5.3 标签之间的关系

6、基本标签

6.1 文章标题标签——`<h1>`~`<h6>`

特点：

文字都有**加粗**
文字都有变大，并且从h1 → h6文字**逐渐减小**
独占一行

注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

6.2 段落标签——`<p>`

代码：`<p> 我是段落标签</p>`
特点：

段落之间存在间隙
独占一行

6.3 换行标签——`<br>`

代码：`<br>`
语义：换行
特点：

单标签
让文字**强制换行**

6.4 水平线标签——`<hr>`

代码：`<hr>`
语义：主题的分割转换
特点：

单标签
在页面中显示一条水平线

6.5 文本格式化标签

语义：突出重要性的强调语境(右边的语义更加强烈一些)

6.6 图片标签——`<img>`

`代码：<img src="" alt="">``

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！

6.6.1 绝对路径

**绝对路径**：*指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径*

例如：

盘符开头：D:\day01\images\1.jpg
完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）

6.6.2 相对路径

**相对路径**：*从当前文件开始出发找目标文件的过程*
相对路径分类：

同级目录 ——`<img src="目标图片.jpg">` 或`<img src="./目标图片.jpg">`
下级目录 ——`<img src="images/目标图片.jpg">`
上级目录 ——`<img src="../images/目标图片.jpg">`

6.7 音频标签——`<audio></audio>`

代码：`<audio src="./music.mp3 contrls"></audio>`

常见属性：

注意点：

音频标签目前支持三种格式：MP3、Wav、Ogg

6.8 视频标签——`<video></video>`

代码：`<video src="./video.mp4 contrls"></video>`

常见属性：

注意点：

视频标签目前支持三种格式：MP4 、WebM 、Ogg

6.9 链接标签——`<a></a>`

6.9.1 空链接

代码：`<a href="#">空链接</a>`

功能：

点击之后回到网页顶部
开发中不确定该链接最终跳转位置，用空链接占个位置

6.9.2 超链接/锚链接

代码：`<a href="./目标网页.html">超链接</a>`

特点：

双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

6.9.3 href属性

属性名：href
属性值：点击之后跳转去哪一个网页（**目标网页的路径**）

外部链接：`<a href="https://www.baidu.com/">百度一下</a>`
内部链接：``<a href="./目标网页.html">目标网页</a>``

6.9.4 target属性

属性名：target

属性值：目标网页的打开形式

如：`<a href="https://www.baidu.com/" target="_blank">百度一下</a>`

小奋斗♛

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML基础知识小结