01-HTML认知

最新推荐文章于 2024-10-01 23:46:18 发布

A_FlyingCat

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量161

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/A_FlyingCat/article/details/121062977

版权

本文介绍了HTML的基础知识，包括网页组成、浏览器渲染原理及常见浏览器内核。讲解了HTML的基本结构、常用标签如标题、段落、图像、音频、视频和链接的使用，以及路径和锚点定位的概念。此外，还分享了VScode编辑器的快捷操作，帮助初学者快速上手HTML。

摘要由CSDN通过智能技术生成

HTML基础

一、基础认知

1、网页的组成部分：文字、图片、音频、视频、超链接。

2、网页的本质：前端程序员写的代码。

3、前端的代码通过浏览器转化（解析和渲染）成用户看到的网页。

4、常见的5大浏览器：IE（内核：Trident）、Firefox（内核：Gecko）、Chrome（内核：Blink）、Safari（内核：Webkit）、Opera（内核：Blink）。

5、因为不同浏览器渲染引擎不同，解析的效果会存在差异。

6、Web标准：让不同的浏览器按照相同的标准显示结果。三大构成部分：HTML（结构）、CSS（表现）、JavaScript（行为）。

二、HTML的初体验

1、HTML（超文本标记语言）：主要通过HTML标签对网页中的文本、图片、音频等内容进行描述。

2、HTML页面基本骨架结构：

<html>                             //网页的整体
      <head>                       //网页的头部
             <title></title>       //网页的标题
      </head>
      <body></body>                //网页的身体
</html>

3、VScode的使用：ctrl +/- 放大/缩小界面字体；ctrl + s 保存；atl + b 默认浏览器打开；ctrl + / 注释标签；lorem 快速生成无意义的测试文档段落；alt+shift+鼠标左键拖住往下同时选中多行鼠标滚轮摁住拖动；ctrl + enter 新创建一行。

4、标签概念: 有尖括号包裹的就叫标签，分类: 单标签和双标签

5、标签关系: 父子/嵌套 兄弟/并列

三、HTML标签

1、标题标签: h1~h6 双标签标签效果: 文字加粗, 独占一行有间距, 文字大小从1-6逐渐减小

注意点: h1一般在一个页面只出现一次

2、段落标签: p 双标签效果: 自成一段, 上下有间隙

3、换行标签: br 单标签效果: 单纯的换行, 没有间距

4、水平线标签： hr

5、文本格式化标签：

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

6、图片标签：src为必备属性；宽度/高度只设置一个会等比缩放。

<img  src="图片路径"  alt="替换文本" titie="提示文本" width="宽度"  height="高度">

7、路径：绝对路径：带有盘符的路径/完整的网络地址；相对路径：从当前文件开始出发找目标文件的路径。

8、同级/下级目录查找：./文件名；上级目录查找：…/文件名。

9、音频标签：src：引入资源路径；autoplay：自动播放；controls：控制台；loop：循环循环；

<audio  src="音频地址" autoplay controls loop ></audio>

10、视频标签：src：引入资源路径；autoplay：自动播放；controls：控制台；loop：循环循环；muted：静音；

<video src="视频路径" autoplay controls loop muted width="100%"></video>

11、链接标签：a标签 ,实现页面跳转功能 , 文字自带下划线和蓝色, 点击后变紫色。属性:href: 必备属性, 写入跳转地址；target: 跳转方式默认是**_self**, 设置**_blank**的话新开窗口跳转

1、跳转外部网址：<a href="http://www.baidu.com">百度</a>
2、本地跳转：<a href="./09-音视频.html">音视频页面</a>
3、空链接(跳转回当前页面)：<a href="#">空链接</a>
4、下载链接：<a href="./video.zip">下载资源</a>
5、target设置跳转方式：<a href="http://www.baidu.com" target="_blank">新开窗口跳转百度</a>