前端之HTML

最新推荐文章于 2024-04-26 21:29:15 发布

寂寞花如雪

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量848

点赞数 1

文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_40665861/article/details/129064705

版权

一、概念

1.页面组成

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

页面原始和内容

表现：CSS

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

行为：JavaScript

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

2.代码加载原理

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

3.编写代码工具

vscode

4.HTML标签类型

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

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

5.HTML标签关系

父子关系（嵌套关系）

兄弟关系（并列关系）

二、HTML正文讲解

1.注释

说明：方便阅读。

2.标题标签

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

  <h1>深意总迟解，将爱却晚秋</h1>
 
  <h2>深意总迟解，将爱却晚秋</h2>
  
  <h3>深意总迟解，将爱却晚秋</h3>
  
  <h4>深意总迟解，将爱却晚秋</h4>
  
  <h5>深意总迟解，将爱却晚秋</h5>
  
  <h6>深意总迟解，将爱却晚秋</h6>

3.段落标签

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

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

4.换行标签

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

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

5.水平线标签

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

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

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

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

  <b> 加粗</b>  
  <strong>加粗 </strong>
 
  <u>下划线 </u>
  <ins>下划线</ins>
  
  <i> 倾斜</i> 
  <em>倾斜</em>
  
  <s>删除线 </s>
  <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.媒体标签之视频标签