HTML速成学习总结

一、HTML开始

简介：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

初始网页：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>你好，前端</title>

</head>

<body>
  <h1>我的HTML学习开始</h1>
</body>

</html>

基本结构：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

二、常用标签

HTML 不是一种编程语言，而是一种标记语言，说白了就是使用一个个标签来表示网页，下面列举了一些常用的标签，帮助大家速成HTML。

1.div标签

div标签主要用于对内容分组，并且会在其内容前后产生换行，使用非常频繁

<div>
  <div>
    Hello HTML
  </div>

  <div>
    Hello World
  </div>
</div>

演示结果：

2.span标签

span标签主要用于行内分组，分组内容显示在同一行，使用也非常频繁。

<div>
  <div>
  <span>HTML</span>
  <span>CSS</span>
  <span>javascript</span>
  </div>

  <div>
    <span>SpringBoot</span>
    <span>Mybatis</span>
    <span>Vue</span>
  </div>
</div>

演示结果：

3.h1-h6标签

h1-h6定义标题，h1最大，h6最小

<div>
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
  </div>

演示结果：

4.strong标签

用来将文本加粗

    <div>
      你好，HTML
    </div>
    <div>
      <strong>你好，HTML</strong>
    </div>

演示结果：

5.a标签

用来设置超文本链接

  <div>
    <a href="https://www.csdn.net/">CSDN社区</a>
  </div>

演示结果：

6.img标签

在网页中设置图片

  <div>
    <div>图片</div>
    <img src="./img/img.png" alt="世界末日">
  </div>

演示结果：

7.video标签

在网页中插入视频

  <div>
    <div>视频</div>
    <video src="./video/海滨.mp4" controls></video>  <!-- controls表示播放控件，否则无法播放 -->
  </div>

演示结果：

8.input标签

表单标签，显示一个输入框，可改变“type”类型，即可可输入多种内容

  <div>
    <div>表单</div>
    <div>账号<input type="text"></div>
    <div>密码<input type="password"></div>
  </div>

演示结果：

9.textarea标签

多行表单标签，当我们需要输入多行内容时，就可以使用该标签，该表单还可以拖动然后就可以变大变宽。

  <div>
    <div>多行表单</div>
    <textarea></textarea>
  </div>

演示结果：

10.button标签

按钮标签，显示一个按钮，可以点击

<div><button>登录</button></div>

演示结果

三、练习

欢迎大家根据下面图片练习HTML

附上代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>
<body>

<div>
  <h1>进军网络人生</h1>

  <div>
    <a href="https://www.csdn.net/">CSDN</a>是中国最大的IT社区和服务平台、为中国的软件开发者和IT从业者提供广泛的知识分享、 技术交流、职业发展机会以及最新的行业动态。
    该平台上包含了大量的技术博客、教程、论坛、问答、资源下载等内容，涵盖了软件开发、数据库、云计算、大数据、人工智能、物联网等
    多个技术领域。用户可以在这里学习新知识、解决技术问题、分享自己的经验，并与其他开发者进行交流与合作。
  </div>

  <div>
    <a href="https://www.csdn.net/"><img src="./img/CSDN.png" alt="CSDN"></a>
  </div>

  <div>
    <div><h3>欢迎登录</h3></div>
    <div>账号<input type="text"></div>
    <div>密码<input type="password"></div>
    <div><input type="submit"></div>
  </div>

  <div>
    <div><h3>欢迎留言</h3></div>
    <textarea></textarea>
    <div><button>留言提交</button></div>
  </div>
  
</div>

</body>
</html>