前端:HTML

一、概念

1.页面组成

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

页面原始和内容

表现：CSS

网页原始的外观和位置等页面样式（如颜色、大小等）

行为：JavaScript

网页模型的定义与交互，简称JS

2.代码加载原理

代码变成可视化的网页就是由浏览器去渲染和加载的。也就是说有浏览器就可以运行以html后缀的代码了

3.编写代码工具

vscode

4.HTML标签类型

双标签：需要包裹住代码使用的标签，有一对，开头标签和结尾标签很像，结尾标签前多了一个/

单标签：通常是不需要包裹的代码使用的，例如换行使用的,水平线使用的

5.HTML标签关系

1. 父子关系（嵌套关系）

2. 兄弟关系（并列关系）

二、HTML正文讲解

1.注释

说明：方便阅读。

2.标题标签

说明：h1标签最重要，字体最大，文字最粗，逐级递减。独占一行

1.  
     <h1>深意总迟解，将爱却晚秋</h1>
2.  
    
3.  
   <h2>深意总迟解，将爱却晚秋</h2>
4.  
    
5.  
   <h3>深意总迟解，将爱却晚秋</h3>
6.  
    
7.  
   <h4>深意总迟解，将爱却晚秋</h4>
8.  
    
9.  
   <h5>深意总迟解，将爱却晚秋</h5>
10.  
     
11.  
    <h6>深意总迟解，将爱却晚秋</h6>

3.段落标签

说明：一段文字的段落需要用到这个。独占一行

<p>我是一个段落</p>

4.换行标签

说明：在需要换行的文字后面加上这个标签就可以实现了换行效果

  <p>深意总迟解，<br>将爱却晚秋</p>

5.水平线标签

说明：在需要添加水平分割线的位置后面添加上这个标签就可以实现添加一条水平分割线的效果

  <hr>深意总迟解，将爱却晚秋</hr>

6.文本格式化标签（加粗、下划线、倾斜、删除线）

说明：两个显示效果都一样，区别就是下面完整单词的那个强调了重要性，是给其他程序员阅读代码时候看的。

1.  
   <b> 加粗</b>
2.  
   <strong>加粗 </strong>
3.  
    
4.  
   <u>下划线 </u>
5.  
   <ins>下划线</ins>
6.  
    
7.  
   <i> 倾斜</i>
8.  
   <em>倾斜</em>
9.  
    
10.  
    <s>删除线 </s>
11.  
    <del>删除线</del>

7.媒体标签之图片标签

说明：src内容是图片的相对路径

alt内容是文字，当图片加载不出来时候显示的文字

title内容是文字，把鼠标放到图片上面显示的文字

width和height内容是图片的宽和高，只设置其中一个，另一个会对比缩放，两个都设置有可能会图片扭曲

<img src="./图片.jpg" alt="加载不出来" title="鼠标放这里提示" width="" height="">

8.相对路径

说明：相对路径是一定可以找到的，就了解一下就好了，绝对路径这里要好好学习，根据图片和html文件所在位置的不同去选择不同的方式去寻找图片

当前文件代码同级别目录

• 图片.jpg

当前文件代码下级目录

• 下级包名/图片.jpg

当前文件代码上级目录

• ../上级包名/图片.jpg

9.媒体标签之音频标签

说明：src里面/文件夹/可以直接找到音频。controls显示播放的控件： autoplay：自动播放 loop：循环播放

  <audio src=" /文件夹/音乐.mp3" controls autoplay loop></audio>

10.媒体标签之视频标签

说明：src里面/文件夹/可以直接找到音频。controls显示播放的控件： autoplay：自动播放 loop：循环播放

这个使用和音频差不多，自动静音播放谷歌浏览器支持，其他浏览器可能不支持

 <video src="/文件夹/视频.mp4" controls autoplay muted loop></video>

11.超链接标签

覆盖本页面跳转

<a href="https://www.百度.com/">超链接</a>

不覆盖本页面跳转

<a href="https://www.百度.com/" target="_blank">超链接</a>

说明：href内容是要跳转到的目标网站，标签之间夹着的就是点击内容，点击后跳转

跳转到的目标网址可以是网址也可以是本地的