HTML学习笔记一（标签）

可爱白菜小狗

已于 2022-11-10 23:45:08 修改

阅读量79

点赞数

文章标签： html 学习前端

于 2022-11-10 23:21:54 首次发布

本文链接：https://blog.csdn.net/m0_71040809/article/details/127135782

版权

主要想记录整理一下跟着学习HTML的笔记，方便以后回看，也能起一个督促学习的作用。

基础认识

web标准

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

HTML的概念

专用于网页开发的语言，通过HTML标签对网页中的文本、图片等进行编辑

骨架结构

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

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

注释
```

```

标签之间的关系

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

<body>
</body>
```

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

图片标签
```
<img src=" " alt=" ">

```
- 特点：
  - 单标签
  - img标签需要展示对应的效果，需要借助标签的属性进行设置
- 属性：
  - 标签的属性写在开始标签内部
  - 标签上可以同时存在多个属性
  - 属性之间以空格隔开
  - 标签名与属性之间必须以空格隔开
  - 属性之间没有顺序之分
- src属性：
  - 属性名：src
  - 属性值：目标图片的路径
  - 注意点：
    - 当前网页和目标图片在同一个文件夹中，直接写目标图片的名字即可
- alt属性：
  - 属性名：alt
  - 属性值：替换文本
    - 图片加载失败时会显示alt的文本
- title属性：
  - 属性名：title
  - 属性值：提示文本
    - 鼠标悬停时出现的文本
  - 注意点：
    - title属性不仅可以用于图片标签，也可以用于其他标签
- width和height属性
  - 属性名：width height
  - 属性值：宽度和高度（数字）
  - 注意点：
    - 如果只设置width或height中的一个。另一个没设置的会自动等比例缩放（图片不变形）
路径
- 分类
  - 绝对路径（了解）
    - 指目录下的绝对位置，可以直达目标位置，一般从盘符开始
  - 相对路径（常用）
    - 概念：
      - 当前文件：当前的html网页
      - 目标文件：要找的文件
    - 从当前文件开始出发找目标文件的过程
    - 分类：
      - 同级目录
```
  <img src="./目标文件名.后缀">
  <img src="目标文件名.后缀">
```
      - 下级目录
```
  <img src="./下级目录文件夹/目标文件名.后缀">
  <img src="下级目录文件夹/目标文件名.后缀">
```
      - 上级目录
      先返回上级文件夹：…/
```
<img src="../目标文件名.后缀"
```
音频标签
```
<audio src=" " controls></audio>
```
- 常见属性：
  
  属性名功能
  src 音频的路径
  controls 显示播放的控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
视频标签
```
<video src="./video.mp4" controls></video>
```
- 常见属性
  
  属性名功能
  src 视频的路径
  controls 显示播放的控件
  autoplay 自动播放（部分浏览器不支持，谷歌浏览器、edge中需要配合muted实现静音播放）
  loop 循环播放

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

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

链接标签

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

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

特点：
- 双标签，内部可以包裹内容
target属性：
- 目标网页的打开形式
取值效果
_self 默认值，在当前窗口中跳转
_blank 在新窗口中跳转（保留原网页）

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

    <!--跳转百度 原网页打开-->
    <a href="https://www.baidu.com/" target="_self">跳转到百度</a>
    <br>
    <!--新页面打开-->
    <a href="./目标网页.html/" target="_blank">目标网页</a>