一、HTML基础
（1）什么是HTML
HTML(Hyper Text Markup Language),超文本标记语言.
超文本:比文本更强大.通过链接和交互式方式来组织和呈现信息的文本形式.不仅仅有文本,还可能包括图片,音频,或者自己经审阅过它的学者所加的评注,补充或脚注等.
标记语言:由标签构成的语言
HTML的标签都是提前定义好的,使用不同的标签以表示不同的内容.
类似于飞书文档,Word文档.
如果选中文本,点击标题1,就会使用标题1的样式来显示文本,上述标题1就是一个标签.
比如下方代码(编译器使用的是vscode):
<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>经过浏览器的解析如下:
上面代码中<h1><h2><h3>就是标签.
学习HTML主要就是学习标签.
（2）认识HTML标签
HTML代码是由"标签构成的".
标签名(body)放到< >中
大部分标签成对出现. eg.<h1>为起始标签, </h2>为结束标签.
少数标签只有开始标签,称为"单标签".
开始标签与结束标签之间,写的是标签的内容.
开始标签可能会带有"属性".id属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
<h3 id="myId">我是三级标题</h3>（3）HTML文件基本结构
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>html标签是整个html文件的根标签(最顶层标签)
head标签写页面的属性.
body标签写的是页面上的内容.
title标签写的是页面的标题.
（4）标签层次结构
父子关系和兄弟关系
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>其中:
head和body是html的子标签(html就是head和body的父标签).title是head的子标签.head是title的父标签.
head和body之间是兄弟关系.
二、HTML常见标签
（1）标题标签h1-h6
有6个,从h1到h6,数字越大则字体越小.
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>（2）段落标签:p
在HTML中,段落,换行符,空格都会失效,如果需要分成段落,需要使用专门的标签.
p标识表示一个段落.
<p>段落一、每个人都有潜在的能量，只是很容易：被习惯所掩盖，被时间所迷离，被惰性所消磨。</p>
<p>段落 二、人生不过百年，不论是好是坏都得死，与其在悲哀中死亡，何不努力去拼出精彩。</p>
<p>段落三、人生不分早晚，努力不分年纪。只要你不回避与退缩，生命的掌声终会为你响起。</p>
p标签描述的段落,前面没有缩进(未来CSS会学)
自动根据浏览器宽度来进行排版.
html内容首位处的换行,空格均无效.
在html中文字之间输入的多个空格只相当于一个空格.
html中直接输入换行不会真的换行,只是相当于一个空格
（3）换行标签:br
想要完成换行的话,也可以通过<br/>标签来实现.(br是break的缩写,表示换行).
<p>段落一、每个人都有潜在的能量，<br>只是很容易，<br>被时间所迷离，<br>被惰性所消磨。</p>
br是一个单标签(不需结束标签)
br标签不像p标签那样带有一个很大的空隙.
<br/>是规范写法.不建议写成<br>
（4）字体设置标签
<strong>加粗</strong>
<b>加粗</b>
<br>
<em>倾斜</em>
<i>倾斜</i>
<br>
<del>删除线</del>
<s>删除线</s>
<br>
<ins>下划线</ins>
<u>下划线</u>
（5）图片标签:img
使用img标签来表示图片，img标签也是一个单标签，img里面可以写很多的属性，最重要的是src属性，通过src描述图片所在的位置，这里的src可以是一个绝对路径也可以是一个相对路径，还可以是一个网络路径。alt中的内容表示如果这个图片出现问题，就会打印出alt中的内容，来声明这个图片是什么。
第一个是图片的绝对路径；
第二个的话需要把这个图片给放到和demo1.html这个文件目录下；
第三种就是从网上找一张图片然后把这张图片的地址复制过来填进去就可以；
<img src="C:\Users\ASUS\Desktop\JavaWeb.jpeg" alt="这是一个力扣图片">
<img src="./冰墩墩.jpeg" alt="这是一个冰墩墩">
<img src="https://img1.baidu.com/it/u=3350627612,904552742&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1674147600&t=f3e004da7bed0012126e07bb6f65a667">
（6）超链接标签：a
a标签，效果就是点击之后会跳转到其他页面。
<a href="https://github.com/">这是一个超链接</a>1.外部链接: href引用其它网站的网址.
2.内部链接: 网站内部页面的链接,先创建一个1.html,再创建一个2.html
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a> 3.空链接
属于还在开发阶段，有的链接具体的地址还不确定，可以先用#占个位置。
<a href="#">空链接</a>（7）表格标签
table标签:表示整个表格
tr:表示表格中的一行
td:表示一列。
th:表示表头中的一列。
table包含tr,
tr包含td.
<style>
td{
text-align: center;
}
</style>
<table border="2px" width="500px" height="300px" cellspacing="0">
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>001</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>003</td>
<td>80</td>
</tr>
</table>
表格标签中有一些属性,可以用于设置大小边框等.但是一般使用CSS方法来设置 .
这些属性都要放到table标签中.
align是表格相对于周围元素的对齐方式.align="center"(不是内部元素的对齐方式).
border表示边框.1表示有边框(数字越大,边框越粗),""表示没有边框.
cellpadding:内容举例边框的距离,默认是1像素.
cellspacing:单元格之间的距离.默认为2像素.
width/height:设置尺寸.
（8）列表标签：
无序列表: ul li
有序列表: ol li
<!--表格标签-->
<h4>无序列表</h4>
<ul>
<li>小黑</li>
<li>旺财</li>
<li>哈士奇</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>小黑</li>
<li>旺财</li>
<li>哈士奇</li>
</ol>
<h4>自定义列表</h4>
<dl>
<dt>咋家的动物</dt>
<dd>小黑</dd>
<dd>旺财</dd>
<dd>哈士奇</dd>
</dl>
（9）表单标签：
表单是用户和页面之间交互的重要手段，让用户输入信息的重要途径.
分成两个部分:
表单域:包含表单元素的区域.重点是form标签.
表单控件:输入框,提交按钮等.重点是input标签.
这里会借助form，form表示一个表单标签，借助这个form可以让用户输入一些信息，并且提交到服务器上，form里面可以放一些和用户交互的组件。
<form action="test.html">
... [form 的内容]
</form>input标签
各种输入控件,单行文本框,按钮,复选框.
type(必须有):取值种类很多,button,checkbox,text,file,image,password,radio等.
name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选1.
value: input中的默认值.
checked:默认被选中.(用于单选按钮和多选按钮).
下面介绍一些常用的类型:
1.文本框
<input type="text">
2.密码框
<input type="password">可以看到当我们输入密码的时候，都变成了小黑点，这跟我们在网站上输入密码是不是一样一样的。
3.单选框
注意:单选框之间必须具备相同的name属性,才能实现多选1的效果.
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="chkecked">女
（女 为默认选项）
这里面还有一个label标签，搭配这个使用，可以让代码实现点击文字也可以实现选中选项的效果。
<body>
<label>
<input type="radio" name="sex">男
</label>
<label>
<input type="radio" name="sex" checked="chkecked">女
</label>
</body>或
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" checked="checked" id="female">
<label for="female">女</label>
4.复选框
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆
5.普通按钮
<input type="button" value="我是个按钮">
当前点击没有反应,需要搭配JS使用.
<input type="button" value="我是个按钮" onclick="alert('原神启动')">alert()方法是显示一条弹出提示消息和确认按钮的警告框。
需要注意的是 ：alert()是一个阻塞的函数，如果我们不点确认按钮，后面的内容就不会加载出来。
点击之后显示这样
6.提交按钮
<from action="示例.html">
<input type="text" name="username">
<input type="submit" value="提交">
</from>
action 属性规定在提交表单时将表单数据发送到何处。
提交按钮必须放入form标签内.点击后就会尝试给服务器发送请求.
7.select标签
下拉菜单
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>option中定义selected="selected"表示默认选中.
8.无语义标签:div&span
div标签,division的缩写,含义是分割
span标签,含义是跨度.
就是两个盒子,用于网页布局
div是独占一行的,是一个大盒子.
span不独占一行,是一个小盒子.
span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示
span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变
span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。
div和span的区别是：
div标签是块级元素，每个div标签都会从新行开始显示，占据一行；
div标签内可以添加其他的标签元素（行内元素、块级元素都行）。
而，span标签是行内元素，会在一行显示；
span标签内只能添加行内元素的标签或文本。
由于div元素是一个块级元素，它可以包含其他块级元素和内联元素，并且可以用作布局容器。而span元素通常用于内联内容的样式化或选取，以及与CSS或脚本一起使用。
三、综合练习:用户注册
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input text="password" placeholder="请输入密码"></td>
</tr>
</table>
<div>
<input type="button" value="注册">
<span>已有帐号?</span><a href="#">登录</a></br>
</div>