前端基础-HTML-第1篇_html中只设置width,height回怎么样-CSDN博客

本文链接：https://blog.csdn.net/Esther_liew/article/details/130435659

前端基础-HTML-01

一.网页

1.网页的元素：

文字，图片，音频，视频，超链接

2.五大浏览器和渲染引擎

浏览器	渲染引擎	备注
IE	Trident	IE/猎豹安全/360急速浏览器/百度浏览器
Firefox	Gecko	火狐浏览器内核
safari	Webkit	苹果浏览器内核
谷歌浏览器（chrome）	Blink（是Webkit的分支）	Edge的内核也是Blink
欧鹏（opera）	Blink

3.Web标准

Web标准的构成	使用语言	说明
结构	HTML	页面元素和内容
表现	CSS	页面样式
行为	JavaScript	页面交互

二.HTML

1.HTML的基本骨架结构

HTML骨架由以下标签组成：

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

代码结构：

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

2.Visual Studio Code的基本使用

VS Code的基本快捷键

自动生成标签组：英文 + tab
自动生成骨架结构：！ + tab
快速查看网页效果：alt + b
其他快捷键：

ctrl + c 复制整行

ctrl + v 粘贴整行

3.语法规范

①HTML注释

快捷键：ctrl + /
作用：帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释

②HTML标签的构成

标签的结构图：

![在这里插入图片描述](https://img-blog.csdnimg.cn/079108f6790342f980a2bc4e0fcaf1b0.png =60×60#pic_center)

③HTML标签的属性

标签的完整结构图：
属性注意点：

标签的属性写在开始标签内部

标签上可以同时存在多个属性

属性之间以空格隔开

标签名与属性之间必须以空格隔开

属性之间没有顺序之分

④HTML标签的关系

父子关系（嵌套关系）
```
<head>
    <title></title>
</head>
```
兄弟关系（并列关系）
```
<head></head>
<body></body>
```

4.HTML标签学习

①排版标签

标题标签
- 代码标签：h系列标签
```
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
```
  注：选择相同元素快捷键 ctrl + d
- 特点：
  - 加粗
  - 文字变大，从h1-h6依次递减
  - 独占一行
- 注意：开发中特定的使用场景，如新闻的标题、网页的logo部分
段落标签
- 代码：
```
<p>我是一段文字</p>
```
- 特点：
  - 段落间存在间隙
  - 独占一行
换行标签
- 代码：<br>
水平线标签
- 代码：<hr>

②文本格式化标签

代码：

标签-第一组标签-第二组说明
b strong 加粗
u ins 下划线
i em 倾斜
s del 删除
推荐第二组：

标签语义化 1.便于理解 2.有利于机器解析，对搜索引擎(SEO)有帮助

标签-第一组	标签-第二组	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除

注：快速换行快捷键 ctrl + enter

③媒体标签

图片标签
- 代码：<img src="" alt="">
- 特点：
  - 单标签
  - 需借助标签的属性进行设置！
- 图片标签的src属性
  - 属性值：目标图片的路径
  - 注意：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
- 图片标签的alt属性
  - 属性值：替换文本
    - 当图片加载失败时，才显示alt文本
- 图片标签的title属性
  - 属性值：提示文本
    - 悬停时才显示
  - 注意：title属性不仅仅可以用于图片标签，还可用于其他标签
- 图片标签的width和height属性
- 属性值：宽度和高度（数字）
- 注意：
  - 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放
  - 如果同时设置了width和height两个，若设置不当此时图片可能会变形
- 图片标签常见属性总结
  
  属性说明
  src 路径
  alt 替换文本，当图片加载失败时才显示
  title 提示文本，悬停时显示
  width 图片的宽度
  height 图片的高度
路径
- 路径分为：
  - 绝对路径（了解）
    - 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
    - 例如：
      - 盘符开头：D:\day01\images\1.jpg
      - 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
  - 相对路径（常用）
    - 概念普及：
      - 当前文件：当前的html网页
      - 目标文件：要找到的图片
    - 相对路径：从当前文件开始出发找目标文件的过程
    - 相对路径分类：
    - 同级目录
      - 代码步骤：直接写目标文件的名字即可
      - 方法一：<img src="目标图片.gif">
      - 方法二：<img src="./目标图片.gif">
      - VS Code快捷操作：直接敲./
    - 下级目录
      
      <img src="images/目标图片.gif">
      - VS Code快捷操作：直接敲./
    - 上级目录
      
      <img src="../目标图片.gif">
      - VS Code快捷操作：直接敲…/
音频标签

<audio src="./music.mp3" controls></audio>
- 常见属性：
  
  属性名功能
  src 路径
  controls 控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
  注意：音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签

<video src="./video.mp4" controls></video>
- 常见属性：
  
  属性名功能
  src 路径
  controls 控件
  autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
  loop 循环播放
  注意：视频标签目前支持三种格式：MP4 、WebM 、Ogg

属性	说明
src	路径
alt	替换文本，当图片加载失败时才显示
title	提示文本，悬停时显示
width	图片的宽度
height	图片的高度

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

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

④链接标签

称呼： a标签、超链接、锚链接
<a href="./目标网页.html">超链接</a>
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
链接标签的href属性
- 属性值：目标网页的路径
  - 外部链接：<a href="https://www.baidu.com">百度一下</a>
  - 内部链接：<a href="./目标网页.html"></a>
链接标签的target属性
- 属性值：目标网页的打开方式
  
  取值效果
  _self 默认值，在当前窗口中跳转（覆盖原网页）
  _blank 在新窗口中跳转（保留原网页）
<a href="https://www.baidu.com/" target="blank">百度一下</a>
链接标签的显示特点：
- a标签默认文字有下划线
- a标签从未点击过，默认蓝色
- a标签点过后，显示紫色（清除浏览器历史记录可恢复蓝色）