本文已参与「新人创作礼」活动，一起开启掘金创作之路。
概念
快速入门
标签学习
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>文件文本标签示例</title>
</head>
<body>
<!--这是注释-->
<!--换行标签：br-->
白日依山尽，<br>
黄河入海流。
<!--标题标签：h1~h6
数字由小到大字号逐渐变小，且自带换行效果
-->
<h1>哈哈</h1>
<h2>哈哈</h2>
<h3>哈哈</h3>
<h4>哈哈</h4>
<h5>哈哈</h5>
<h6>哈哈</h6>
<!--段落标签：p
让很长的一段文字成为一段，且自带换行
-->
<p>
青春是什么，每个人都有自己的见解。我们只是爱借着青春的名义再肆无忌惮一次，用时光绘画着未来的颜色，用汗水打造着理想的殿堂，用岁月承载着曾经的梦想，再将他们一一打磨，雕刻成最美丽的模样。我们只是想这青葱的岁月，留下些回忆，这样的回忆，是能够让我们在多年之后笑着流泪，说，我不曾后悔
</p>
<p>
青春是什么，每个人都有自己的见解。我们只是爱借着青春的名义再肆无忌惮一次，用时光绘画着未来的颜色，用汗水打造着理想的殿堂，用岁月承载着曾经的梦想，再将他们一一打磨，雕刻成最美丽的模样。我们只是想这青葱的岁月，留下些回忆，这样的回忆，是能够让我们在多年之后笑着流泪，说，我不曾后悔
</p>
<!--显示一条水平线标签：hr
标签里面有蛮多属性可以改原来的标签样式，但我们后面会使用CSS来写样式
所以知道有这么个事情就行
-->
<hr>
<!--加粗标签：b-->
<b> 白茹依山郡</b>
<!--斜体标签：i-->
<i>白日依山尽</i>
<!--字体标签：font(过时了)-->
<font></font>
</body>
</html>
图片标签：展示图片
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--展示一张图片：img
src属性后面跟上图片路径即可
相对路径：以.开头的路径
./：代表当前目录 ./image/1.jpg
../：代表上一级目录
-->
<img src="">
</body>
</html>
列表标签
有序：ol（列表项标签：li）
无序：ul（li）
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表标签：ol(order list)-->
早上起来干的事情
<ol>
<li>睁眼</li>>
<li>看手机</li>
<li>穿衣服</li>
</ol>
<!--无序列表-->
早上起来干的事情
<ul>
<li>睁眼</li>>
<li>看手机</li>
<li>穿衣服</li>
</ul>
</body>
</html>
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--超链接：a
属性：href：指定访问资源的url（统一资源定位符）
target:指定打开资源的方式，它有比较重要的两个值
_self:默认值，在当前页面打开
_blank：在空白页面打开
-->
<a href="https://www.baidu.com" target="_blank">点我</a>
<!--也可以这样跳转本页面-->
<a href="HelloWorld.html" target="_blank">点我</a>
</body>
</html>
语义化标签：html5中为了提高程序的可读性，提供了一些标签 如： 1、<header> 页眉 2、<footer> 页脚 表格标签：
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>1</td>
<td>哈哈</td>
<td>500</td>
</tr>
<tr>
<td>2</td>
<td>蹦蹦</td>
<td>250</td>
</tr>
</table>
</body>
</html>
表单标签
基础：
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--form
用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据的URL
method：指定提交方式
分类：一共七种，2种比较常用
get：
1、请求参数会在地址栏中显示，会封装在请求行中(HTTP协议后讲解)
2、请求参数大小是有限制的
3、get请求不太安全
post：
1、请求参数不会在地址栏中显示，会封装在请求体中(HTTP协议后讲解)
2、请求参数的大小没有限制
3、post请求比较安全
表单项中的数据想要被提交，必须指定其name属性
-->
<form>
用户名: <input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
详解内容：
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--form
用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据的URL
method：指定提交方式
分类：一共七种，2种比较常用
get：
1、请求参数会在地址栏中显示，会封装在请求行中(HTTP协议后讲解)
2、请求参数大小是有限制的
3、get请求不太安全
post：
1、请求参数不会在地址栏中显示，会封装在请求体中(HTTP协议后讲解)
2、请求参数的大小没有限制
3、post请求比较安全
表单项中的数据想要被提交，必须指定其name属性
-->
<form>
<!--文本框还有一个属性：placeholder
指定输入框的提示信息，当输入框的内容发生变化时，会自动清空提示信息
另外一个属性value和它差不多，但是不会自动清空提示信息，且也没有它好看
-->
用户名: <input type="text" name="username" placeholder="请输入用户名"><br>
<!--一般我们也不会让文字信息直接暴露在html文件当中
会用一个标签label的for属性来和input的id属性值对应，如果对应了，则点击label区域
会让input输入框获得焦点
-->
<label for="ppp">密码:</label><input type="password" name="password" id="ppp"><br>
<!--单选框radio注意：
1、如果不给radio的value值指定值，则传给服务器端的参数永远都是on
这样服务器端就无法知道传过来具体是什么值（不知道是男是女），所以要给value赋上值
2、如果radio的每个选项的name值不相等，则就无法单选
3、checked属性：默认选项
-->
性别：<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女<br>
<!--复选框checkbox注意点和radio一样-->
爱好：<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="basketball" checked="checked">打球
<input type="checkbox" name="hobby" value="game">打游戏
<br>
图片上传：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"><br>
<!--html5新提供的标签-->
生日：<input type="date" name="birthday"><br>
生日：<input type="datetime-local" name="birthday"><br>
邮箱：<input type="email" name="email"><br>
<!--select标签-->
<select name="province">
<!--selected默认被选中-->
<option value="" selected>请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">陕西</option>
</select><br>
<!--文本域：就是一个很大的框框-->
自我描述:
<textarea cols="5" rows="20"></textarea>
<input type="submit" value="登录">
<!--button一般要结合js实现一些动态效果-->
<input type="button" value="一个按钮">
<!--这是使用图片提交的意思-->
<input type="image" value="img/regbtn.jpg">
</form>
</body>
</html>
