【html5+css3笔记】第一篇：初识HTML_html学习md文档-CSDN博客

本文链接：https://blog.csdn.net/sovereign__/article/details/127814477

前言

此为黑马程序员【web前端零基础html5 +css3+前端项目视频教程】笔记第一篇：初识HTML
视频指路：
前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程
该笔记md文档及代码附件下载（不要积分不要钱）：
初识HTMLmd文档及附件
笔记分篇严格按照原视频章节分篇。
后续其他篇笔记更新后链接会放置在此

初识HTML

1 基础概念

1-1 基础认知

网页由哪些部分组成？：文字、图片、音频、视频、超链接

程序员写的代码是通过什么软件转换成网页的？：浏览器

1-2 浏览器

五大浏览器：IE、火狐、谷歌、Safari、Opera

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

注意点：渲染引擎不同，导致解析相同代码时的速度性能效果也不同

PS：内核分为js引擎和渲染引擎

1-3 web标准

web标准的构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

2 HTML初体验

2-1 HTML的概念

HTML（Hyper Text Markup Language）：超文本标记语言

2-2 HTML的结构

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

HTML骨架结构由哪些标签组成？

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

2-3 开发工具的使用

推荐VScode

tips：

1 VScode自动加载骨架：

方法一：输入！后按Tab键或回车（注意此处需是英文的感叹号）

方法二：输入html:5后按回车

自动生成的骨架如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2 在默认浏览器打开快捷键（Alt+B）

注：需在vscode中安装open in browser插件

3 设置google chrome为默认浏览器：

鼠标单机开始菜单，选择设置，进入页面，单击应用。切换到默认应用选项，搜索Google Chrome，点进去设置为默认浏览器。（设置其他浏览器为默认浏览器方法同理）

3 语法规范

3-1 注释

注释的作用：

为代码添加的解释说明语句，用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释

注释的快捷键：

在VS code中：ctrl+/（再按一次取消注释）

html中注释语法如下：

    <!--  -->

3-2 HTML标签的构成

结构说明：

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常用标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容

（Tips：关于单标签和双标签：不用死记硬背，需要包裹内容的时候用双标签；不需要包裹内容时，如换行，就用单标签。）

关系说明：

HTML标签与标签之间的关系可分为：

父子关系（嵌套关系），如此处的head标签和title标签：

<head>
	<title></title>
</head>

兄弟关系（并列关系），如此处的head标签和body标签：

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

3-3 HTML标签学习

目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发

3-3-1 排版标签

标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。

代码：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义：1~6级标题，重要程度依次递减

特点：

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

效果展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

在这里插入图片描述

段落标签

场景：在新闻和文章的页面中，用于分段显示

代码：
```
我是一段文字
```
记忆tip: p是paragraph的意思

语义：段落

特点：
- 段落之间存在间隙
- 独占一行
题外话：有时候一行打得太多vscode页面显示不下就会需要拉滚动条，十分麻烦，因此可以使用vscode自动换行功能：alt+z或者在“查看”选项卡中选择自动换行
换行标签

场景：让文字强制换行显示

代码：
```
 
```
语义：换行

特点：
- 单标签
- 让文字强制换行
效果显示
```
我是一 段文字
```

在这里插入图片描述

水平线标签：

场景：分割不同主题内容的水平线

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

特点：
- 单标签
- 在页面中显示一条水平线

排版标签综合示例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标题标签 -->       
    <h1>这是文章标题</h1>
    <!-- 水平线标签 -->
    <hr>
    <!-- 段落标签 -->
    <p>我是一段文字</p>
    <!-- 换行标签 -->
    <p>我是换行了<br>的一段文字</p>
</body>
</html>

在这里插入图片描述

3-3-2 文本格式化标签

场景：需要让文字实现加粗、下划线、倾斜、删除线等效果

语法：有两组：

第一组：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

第二组：

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

区别：两者在网页上的显示效果完全相同，但是使用第二组标签可向项目组其他程序员传达该段文字很重要的强调语境。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>强调</b>
    <strong>强调</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
</body>
</html>

效果展示：
在这里插入图片描述

3-3-3 媒体标签

图片标签

场景：在网页中显示图片

代码：

src、alt是属性名，""里的内容是属性值
```
<img src="" alt="">
```
基础属性：

src属性中放置图片地址

alt属性中为替换文本（当图片加载失败时，才会显示alt的文本）

特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
代码示例：
```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <img src="cat.jpeg" alt="这是一只猫">
 <img src="我是错的.jpeg" alt="这是一只猫">
</body>
</html>
```
显示效果：

在这里插入图片描述

其他属性：

title属性：当鼠标悬停时显示的文本

width和height属性：宽度和高度（数字）

ps：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

如果同时设置了width和height两个，若设置不当此时图片可能会变形。

所以一般工作中只给出width和height中的一个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="cat.jpeg" alt="这是一只猫">
    <img src="我是错的.jpeg" alt="这是一只猫">
    <img src="cat.jpeg" alt="这是一只猫" title="这是一只猫，鼠标悬停时显示" width="20" height="80">
</body>
</html>

显示效果：

在这里插入图片描述

路径

场景：页面需要加载图片，需要先找到对应的图片

分类：
- 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
 
 例如：盘符开头：D:\day0\images\1.jpg
 
 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif
 
 缺点：容易只能在自己电脑下打开，别人电脑打不开，除非别人电脑的路径和你完全一样
- 相对路径（常用）：从当前文件出发开始找目标文件的过程
 
 相对路径分类：
 - 同级目录：目标文件和当前代码在同一级路径下
```
 
 <img src="名字.jpeg" alt="">
 
 <img src="./名字.jpeg" alt="">
```
 - 下级目录：目标文件在下级目录中
 
 代码：此处假设目标图片在当前路径下的images文件夹中
```
<img src="images/目标图片.gif">
```
 代码步骤：
 
 先知道在哪个文件夹里面→文件夹名字
 
 进入这个文件夹→/
 
 此时看到目标文件直接喊她→直接写目标文件名字
 - 上级目录：目标文件在上级目录中
 
 代码：
```
<img src="../目标图片.gif">
```
 代码步骤：
 
 先出当前文件夹到上一级目录→…/
 
 此时看到目标文件直接喊她→直接写目标文件
音频标签

场景：在页面中插入音频

代码：
```
 <audio src="" controls></audio>
```
常见属性：

属性名功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
注意点：
- 音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签

场景：在页面中插入视频

代码：
```
 <video src="" controls></video>
```
常见属性：

属性名功能
src 视频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
loop 循环播放
注意点：
- 视频标签目前支持三种格式：MP4、WebM、Ogg
链接标签

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签、超链接、锚链接

代码：
```
<a href="./目标网页.html">超链接</a>
```
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的herf属性
注：

当开发网页初期我们还不知道跳转地址的时候，href的值书写#代表空连接。

代码：
```
<a href="#">空链接</a>
```
链接标签的target属性：
- 属性名：target
- 属性值：目标网页的打开方式
 
 取值效果
 _self 默认值，在当前窗口中跳转（覆盖原网页）
 _blank 在新窗口中跳转（保留原网页）

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

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

4 综合案例

4-1 招聘

展示效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>腾讯科技高级web前端开发岗位</h1>
    <hr>
    <h2>职位描述</h2>
    <p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
    <h2>岗位要求</h2>
    <p>5年以上前端开发经验<strong>精通html5/css3/javascript等</strong>web开发技术<br>熟悉bootstrap，vue,angularjs，reactjs等框架...</p>
    <h2>工作地址</h2>
    <p>上海市-徐汇区-腾云大厦</p>
    <img src="招聘地址.png" alt="腾讯招聘地址">
</body>
</html>