【前端】HTML基础认知及标签知识总结

最新推荐文章于 2024-07-08 18:51:22 发布

逗号，！

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量545

点赞数

分类专栏：前端学习笔记文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_42417704/article/details/128522801

版权

前端学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、基础认知

1.1.1 认识网页

网页有哪些部分组成

答：文字、图片、音频、视频、超链接

我们看到的网页背后的本质？

前端H5代码

问题3：前端代码是通过什么软件转化为用户眼中的页面的？

通过浏览器转化为客户看到的页面

1.2.1 五大浏览器

浏览器：是网页显示的、运行的平台
常见浏览器：IE、google、firefox

1.2.2 渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析的部分
引擎内核不一样，加载代码的性能不一样

1.3.1 WEB标准

结构：HTML(页面元素和内容)
表现：CSS(页面元素的位置、外观、样式等)
行为：JavaScript(网页模型的定义与页面交互)

2.1.1 html概念

html:超文本标记语言

2.2.1 html 页面固定结构

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

2.3.4 VS code 的常用快捷键

！+tab 按键可以快速生成 html 骨架

3.1.1 html代码注释

注释快捷键: ctrl + /

3.2.1 html标签的结构

<标签></标签>

内容又开始有结束就是用双标签
不需要确定开始和结束，使用单标签就可以了

3.4.1 html 标签与标签的关系

父子嵌套关系

<head>
    <title>这是网页的标题</title>
</head>

兄弟关系

<head></head>
<body></body>

二、HTML标签学习

1.1.1 标题标签

网页中的标题使用
代码

<h1>标题标签学习</h1>
<h2>标题标签学习</h2>
<h3>标题标签学习</h3>
<h4>标题标签学习</h4>
<h5>标题标签学习</h5>
<h6>标题标签学习</h6>

ctrl + d 快速修改特定字符
标题标签特点：文字加粗、独占一行

1.2.1 段落标签

代码

<p>段落标签</p>

特点：段落之间存在间隙、独占一行

1.3.1 换行标签

代码

<br>

1.4.1 水平分割线

代码

<hr>

2.1.1 文本格式标签化介绍

b: 加粗
u：下划线
i：倾斜
s: 删除线
strong：加粗
ins: 下划线
em：倾斜
del：删除线

2.2 标签语义化

3.1.1 图片标签

代码

<img src="" alt="">

特点

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

标签属性

标签属性写在标签内部
标签的属性可以有多个
属性之间用空格隔开
属性之间没有顺序之分

3.1.3 图片标签的alt 属性

属性名： alt
属性值：替换文本

当图片加载失败时，才显示alt 属性
当图片加载成功时，不会显示alt 属性

3.1.4 图片标签的title 属性

属性名：title
属性值：提示文本

当用户鼠标悬停时才会显示文本
注意：title 属性还可以用于其他标签

3.1.5 图片标签的 width 和 height 属性

属性名： width、height
属性值：宽度、高度
注意点：

如果设置了width 或者 height 中的一个，另一个没设置的会等比例缩放
如果同时设置了两个，设置不当图片可能会变形

3.2.1 路径的介绍

场景：页面需要加载图片，现需要找到图片位置
路径分类：

绝对路径（了解）
相对路径（常用）

3.2.2 绝对路径

绝对路径：指目录下的绝对位置，通常从盘符开始的路径

3.2.3 相对路径

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

同级目录：当前文件和目标文件在同业目录
下级目录：当前文件所在目录的下一级目录
上级目录: 当前文件所在目录的上一级目录 …/

3.3.1 音频标签学习

场景：在页面中插入标签
代码

<audio src="./music.map3" conrtrols><audio>

常见属性

controls: 显示播放的控件
autoplay: 自动播放（部分浏览器不支持）
loop: 循环播放

3.3.2 视频标签学习

场景：在页面中插入视频
代码：

<video src="./video.mp4">

常见属性

controls: 显示播放的控件
autoplay: 自动播放,配合muted
loop: 循环播放

4.1 超链接标签学习

场景：点击后从一个界面跳转到另外一个界面
称呼：a标签、超链接
代码

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

特点：

双标签，内部可以包裹聂荣
需点击后需要进入另外一个界面，需要设置a标签的 href属性

4.4 超链接标签的target 属性

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

_self:默认值，会在当前窗口跳转（覆盖原窗口）
_blank:在新窗口中跳转（保留原网页）

逗号，！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】HTML基础认知及标签知识总结

html基础认知及标签知识总结
复制链接

扫一扫

专栏目录

【前端】HTML基础认知及标签知识总结

HTML基础认知

一、基础认知

1.1.1 认识网页

1.2.1 五大浏览器

1.2.2 渲染引擎

1.3.1 WEB标准

2.1.1 html概念

2.2.1 html 页面固定结构

2.3.4 VS code 的常用快捷键

3.1.1 html代码注释

3.2.1 html标签的结构

3.4.1 html 标签与标签的关系

二、HTML标签学习

1.1.1 标题标签

1.2.1 段落标签

1.3.1 换行标签

1.4.1 水平分割线

2.1.1 文本格式标签化介绍

2.2 标签语义化

3.1.1 图片标签

3.1.3 图片标签的alt 属性

3.1.4 图片标签的title 属性

3.1.5 图片标签的 width 和 height 属性

3.2.1 路径的介绍

3.2.2 绝对路径

3.2.3 相对路径

3.3.1 音频标签学习

3.3.2 视频标签学习

4.1 超链接标签学习

4.4 超链接标签的target 属性

“相关推荐”对你有帮助么？