1.什么是HTML？
HTML是HypeText Mark-up Language的简称，即超文本标记语言，是用于创建网页的标准标记语
言。
HTML的全称为：HypeText Mark-up Language，指的是超文本标记语言。它不是一种编程语言（如
java、C语言等），是一种标记语言，是一套标记标签，用来描述网页。标记：就是标签。<标签名称>
</标签名称>。
白话：用来写网页的一门语言，有很多标签组成
所谓的超文本：
1、因为网页可以放图片、视频、音频等内容（超越文本限制）
2、还可以在网页中跳转到另一个网页中（超链接文本）
2.HTML的作用 ----用来开发网页
3.网页的组成部分
HTML：负责网页的架构；(骨架)
CSS：负责网页的样式，美化；（衣服）
JavaScript（JS）：负责网页的行为；（动作）
4.工具介绍
python开发推荐工具pycharm
网站开发推荐工具vscode
如何创建项目？
在桌面创建一个文件
将文件拖入指定的区域 你那个创建的文件夹 也就变成了 项目文件夹
HTML文件的命名 :
HTML文件的文件后缀名为.html
文件名中不要包含特殊符号，如空格、$等。
5.结构介绍
这个尖括号 就叫标签
生成结构
vscode会自动帮我们生成html结构
shift + !
回车
什么叫标签
- 结构详情介绍
html由标签和属性构成。
标签：长在尖角号后面的第一个单词就是标签
属性：长在标签后面的并且用空格隔开的，称作 属性结构标签介绍
<!--html由标签和属性构成的-->
<!--注释ctrl+/-->
<!--标签:长在尖括号后面的第一个单词就是标签-->
<!--长在标签后面的并且用空格隔开的称作为属性-->
<!--成对出现的标识绝大多数的标签是成对出现的-->
<!--文档的类型声明告诉浏览器当前的文件是html文件它能够帮助浏览器正确的解析和呈现网页的内容-->
<!--只要你爬下来的内容html文件-->
<!DOCTYPE html>
<!--根标签最外部的标签-->
<html lang="en">
<!--head包裹的称为头部区域负责对网页进行标题编码的格式以及引入css和js文件-->
<head>
<!--网页采用的是utf-8的编码格式-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网页的标题设置-->
<title>这里输入标题内容</title>
</head>
<!--body标签内容标签网页中的所有你能够看得地方 都写在body里面-->
<body>
<!--如何打开文件?1.直接点击源文件2.通过vscode来打开借助里面的一个插件来快速的打开可以实时刷新-->
<!--插件的名字叫做1ive server这个插件的作用是可以打开网页并且实时的刷新-->
<!--安装成功了右击运行点击open withlive server-->
<!--怎么实现实时的刷新左上角文件--》勾上自动保存查看--》勾上自动换行-->
</body>
</html>
6.网页中常见的标签
标题标签
h1标签
h2标签
h3标签
h4标签
h5标签
h6标签
随着标题标签的递增文字的大小是逐级递减
<body>
<h1>hello word</h1>
<h2>hello word</h2>
<h3>hello word</h3>
<h4>hello word</h4>
<h5>hello word</h5>
<h6>hello word</h6>
</body
-----------2.段落标签
一般用来写文章段落
p标签
<body>
<p>这是一段文章</p>
</body
----------3.强调标签
em标签 作用：倾斜
<body>
<em>我是作用是倾斜</em>
</body>
b标签 作用：加粗
<body>
<b>我是作用是加粗</b>
</body>
----------4.换行标签
br标签
<body>
窗前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡
</body>
-----------5.分割标签
hr标签 作用：标签变成分割线
<body>
你好呀
<hr>
哈哈
</body>
----------6.div标签
div标签 是用来布局的，并没有语义，只是一个区块
<body>
<div>
这只是一个盒子
</div>
</body>
---------- 7.span标签
没有语义，一般用来包裹文字,让文字更好被选中。
<body>
<span>
这只是一个盒子
</span>
</body>
-----------8.img标签(图片标签)
作用：插入图片
属性
src：引入图片路径
alt：对图片的描述。 如果由于某种原因，浏览器无法加载图像，它将显示 alt 属性中的文本 以提供对图像内容的描述。
height：设置图片的高
width：设置图片的宽度
<body>
<!-- 可以链接引入 -->
<img src=" 这里输入网址" alt="如果图片加载失败">
<!-- 也可以本地引入 -->
[图片上传失败...(image-2be6d4-1724723473879)]
<img src=" 图片.png" alt="">
</body>
-----------9.a标签
作用：点击跳转到另一个网页
href：指定访问资源的URL
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在新的页面打开
<body>
<a href=" 输入网址">点击当前页面跳转到百度</a>
<a href="输入网址" target="_blank">点击重新打开页面跳转到百度</a>
</body>
--------10.列表标签
---------有序列表 ol li
<body>
<!-- ul标签定义无序列表 -->
<ol>
<!-- li标签定义列表项目 -->
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</body>
---------无序列表 ul ol
<body>
<!-- ul标签定义无序列表 -->
<ul>
<!-- li标签定义列表项目 -->
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
----------11.表格标签
姓名 张三
年龄 18
<table>
<!-- tr添加一行 -->
<tr>
<!-- 添加表头 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<!-- 添加一行 -->
<tr>
<!-- 添加列 -->
<td>张三</td>
<td>18</td>
</tr>
</table>
---------------12.表单标签
在网页中主要负责数据采集功能
表单项(元素)：不同类型的input元素、下拉列表、文本域等
input标签
type属性：
text：默认值、定义单行输入字段
<body>
<input type="text">
</body>
password：定义密码字段
<body>
<input type="password">
</body>
------------------ radio：定义单选框
<body>
<!--单选框-->
<!--想要多个单选按钮互斥，需要把他们的name设为一样的-->
<!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分
是男是女-->
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
</body>
----------------- checkbox：复选框
<body>
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">电影
<input type="checkbox" name="hobby" value="3">阅读
</body>
-----------------button：按钮
<body>
<!--按钮-->
<input type="button" value="一个普通按钮">
<button>一个普通按钮的第二个写法</button>
</body>
---------------------- file：会将文件上传
<body>
<!--上传文件-->
<input type="file"><br>
</body>
---------------------------- video：视频
<!-- controls：显示视频控制栏（播放、暂停、音量等）。
autoplay：视频加载后自动播放。 -->
<video controls autoplay >
<source src="mda-qdqxj7s4d6njpv18.mp4">
</video>
-------------------select：定义下拉列表，option定义列表项
<body>
<select>
<option value="1">红色</option>
<option value="2">绿色</option>
<option value="3">黄色</option>
</select>
</body>
---------------textarea ：文本域
<body>
<textarea></textarea>
</body>
