1.html介绍（了解）
1.网站和网页区别
网站=网页+后端(java+数据库) 网页：显示给用户看的
2.html作用：书写网页的。
2.使用记事本创建html(了解)
<!--根标签-->
<html>
<!--头标签-->
<head>
<!--网页的标题标签-->
<title>这是第一个html</title>
</head>
<!--体标签-->
<body>
<font color="yellow" size="7">乾坤未定，你我皆黑马</font>
</body>
</html>超文本的后缀名:.html或者.htm
3.在vscode中书写html页面_入门(掌握)
1.打开文件夹
2.在文件夹下面创建html页面
3.在空的html页面上书写!然后回车即可生成html页面
<!-- 1.声明当前文件是一个超文本文档 -->
<!DOCTYPE html>
<!-- 2.表示当前文件支持英文，也可以书写中文 -->
<html lang="en">
<head>
<!-- 3.当前页面使用的编码表 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vscode中的第一个html</title>
</head>
<body>
<font color="red" size="7">荔枝味</font>
</body>
</html>4.使用vscode注意
1.设置vscode的文件为自动保存：文件===》选择自动保存
5.基础标签(理解)
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<!--
1.字体标签：font
2.font标签常见属性：
1）color ：表示字体颜色，颜色值有两种设置方式：
I:使用英文字母 red yellow green
II:使用十六进制表示 RGB red green blue #xxyyzz xx表示red的值 yy表示green的值 zz表示blue的值
2)size:字体大小
属性值范围是：1-7，依次递增，默认是3
3)face:字体样式 楷体 宋体等
-->
<font color="red">荔枝味</font>
<font color="#FF0000">荔枝味</font>
<font color="#00FF00" size="3">荔枝味</font>
<font color="#0000FF" size="1">荔枝味</font>
<font color="#0000FF" size="7" face="楷体">荔枝味</font>
<!--
3.i标签：倾斜
4.b标签：加粗
-->
<i>我是倾斜的</i>
<b>我是加粗的</b>
<b><i>我既是加粗的又是倾斜的</i></b>
<!--5.水平线-->
<hr>
<!--
6.br标签：换行
-->
七七<br>来了
<!--
7.center表示文本居中标签
-->
<br>
<center>九九</center>
</body>
</html>6.图片 音频 视频标签
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--引入图片-->
<!--
1.使用img标签引入图片，常见属性：
1）src：表示引入图片的路径
src="../img/a.jpg" :
1. .. 表示当前页面的上一级路径即：02-图片音频和视频目录
2. /img/a.jpg ：在02-图片音频和视频目录同级别目录下有img目录，下面是a.jpg
2）px在前端中表示单位，像素，单位还可以使用百分比表示，相对于页面 。
表示占页面50%
-->
<!-- <img src="../img/a.jpg" height="500px" width="500"> -->
<!-- <img src="../img/a.jpg" height="500px" width="50%"> -->
<hr>
<!--
2.音频 audio标签
注意：audio标签必须加controls属性，表示播放控件，如果不加该属性就无法播放
-->
<!-- <audio src="../img/b.mp3" controls></audio> -->
<!--
视频：video
-->
<video src="../img/c.mp4" controls height="500px" width="500px"></video>
</body>
</html>注意：
1.src属性引入的路径不能是本地的路径。
2.对于video audio必须书写播放控件属性controls
7.超链接标签a
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
超链接标签：a标签 可以实现跳转
属性：
1.href="http://www.itcast.cn" 表示跳转地址
2.target="_blank" 表示新跳转的网页在新的窗口打开
target="_self" 表示新跳转的网页在当前窗口打开覆盖之前的窗口，默认的打开方式
-->
<a href="http://www.baidu.com" target="_blank">访问百度</a>
</body>
</html>8.列表标签
-
列表标签:
-
无序列表:
<ul>和<li>标签用于创建无序列表。<ul> <li>Item 1</li> <li>Item 2</li> </ul> -
有序列表:
<ol>和<li>标签用于创建有序列表。<ol> <li>First item</li> <li>Second item</li> </ol>
-
9.表格标签
<!-- 1.表格标签：table 2.table标签的子标签： 1）行标签：tr 2) 列标签：td th 注意：th表示表格标题标签，自动加粗和居中显示 3.table标签的属性border="1px" 表示表格边框 4.table标签的属性cellspacing="0px" 表示表格单元格之间的距离是0，即没有距离 5.table标签的属性width="50%" 表示表格标签的宽度占页面的50% 6.tr的属性：align="center"，值center表示居中 left 靠左(默认值) right 靠右 -->
小结：
1.td或者th属性实现跨行：rowspan
2.td或者th属性实现跨列：colspan
10.布局标签
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.div标签:块级标签即单独占一行的标签。h1~h6 p br等
-->
<div>div1</div>
<div>div2</div>
<!--
2.span标签:属于行内标签；共处一行的标签 img a 等
-->
<span>span1</span>
<span>span2</span>
</body>
</html>11.表单标签
1.form标签
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.form表单标签
常见属性：
1）action：表示将收集的数据提交到具体后台服务器的地址
2) method:提交数据到后台的方式(请求方式)
get: http://www.jd.com?username=锁哥&password=1234 默认方式
1.不安全
2.有大小限制
3.只能传输字符数据，传输数据格式url?name=value&name=value
post: http://www.jd.com
1.安全
2.没有大小限制
3.可以传输任意数据
-->
<form action="#" method="post">
<!-- TODO:所有收集的数据必须放到form标签文本中 -->
</form>
</body>
</html>2.input输入域
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
input输入项
1.<input type="text"> 普通文本 默认值
2.<input type="password">
3.<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女
TODO:radio表示单选按钮，只能选择一个，通过name属性保证单选效果，要求name属性值必须一致
4. <input type="checkbox"> 篮球 <input type="checkbox"> 足球
TODO:checkbox 多选框或者复选框
5. <input type="file"> 上传的文件
6.<input type="hidden" value="918181iauaioO"> 隐藏域。用户在页面看不到，其实在页面中是存在的。如果某种需求不需要给用户看，但是后台服务器需要
数据，那么可以将数据放到隐藏域标签的value中
7.<input type="submit" value="登录"> submit ：将表单收集的数据提交到指定服务器中
TODO: 补充： 如果单选按钮和复选框被选中，那么需要给input标签加checked属性
-->
<form action="#">
<!-- TODO:收集的数据必须放到form标签文本中 -->
用户名：<input/> <br>
用户名：<input type="text"/> <br>
密码：<input type="password"> <br>
性别： <input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女 <br>
爱好：<input type="checkbox" checked> 喝酒 <input type="checkbox"> 抽烟 <input type="checkbox"> 烫头 <br>
<input type="file"> <br>
<input type="hidden" value="ksjsjsjjsjjsjjs"> <br>
<input type="submit" value="登录">
<input type="reset">
<input type="button" value="注册">
</form>
</body>
</html>3.下拉框和文本域标签
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<form action="#">
<!--
1.select下拉项：需要结合子标签option一起使用，有几个下拉项就有几个option
2.提交到后台的数据是用户当前选中的下拉项的option的value值
3.option的属性selected表示当前下拉项被选中
-->
<select name="" id="">
<option value="">----------请选择城市----------</option>
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
</select>
<hr>
<!--
textarea文本域：由行和列组成
1.cols="30" column 列 占30列
2.rows="10" 行，占10行
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>