前端的3大元素：
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。所有需要展示的都写到body中，head中的内容是不被展示的，是规则也是规范
html 有两种标签定义
1、自闭和标签
<meta charset="UTF-8">
只有开头标签，没有结尾标签
2、主动闭合标签（成对出现）
<a></a>
标签介绍
div标签：是块级标签也叫伪白板标签，无论内容有多大，都会占满一整屏。
span标签：是行内标签又叫内联标签也叫白板标签，自己有多大就占多大。
标签内部是允许写一些属性的，属性是写在<>之间的且在标签名之后，属性和标签之间用空格分隔。
input标签
<!--placeholder属性只是一个提示信息 --> <input type="text" placeholder="请输入用户名">
<!--value属性是input框中的默认值 --> <input type="text" value="请输入用户名">
<!-- 文本输入框 --> <input type="text" name="username"> <!-- 密码输入框(密文) --> <input type="password" name="passwd"> <!-- 按钮 点击什么用也没有 需要结合js绑定事件（onclick就是绑定的弹框时） --> <form method="get"> <input type="button" value="button-登陆" onclick="alert(111)"> <!-- 提交 提交表单需要用submit --> <input type="submit" value="注册"> </form> <!-- 多选框 checkbox, 默认值checked=checked--> <span>篮球</span><input type="checkbox" checked="checked"> <span>足球</span><input type="checkbox" > <!-- 单选框 radio, name相同 勾选是互斥-,加checked表示默认选中 --> <span>男</span><input type="radio" name="sex" checked="checked"> <span>女</span><input type="radio" name="sex" > <!-- 上传文件 --> <input type="file"> <!-- reset 还原表单中填写的数据，必须与form表单联用 --> <form> <input type="reset" value="重置"> </form>
label标签
<!-- label 标题标签 与input联合运用，增加input输入框的点击范围 可直接点击文字光标就映射到输入框内，通过for和id进行关联的--> <label for="user">用户名</label> <input type="text" id="user" >
select标签
<!-- 下拉框 ，默认选中selected="selected"，通过value值与后端交互--> <!-- 1:羽毛球 2:篮球 3:足球 --> <!--{instering:1} --> <select name="instering"> <option value="2">篮球</option> <option value="3">足球</option> <option selected="selected" value=="1">羽毛球</option> </select>
a标签
<!-- target="_blank"表示新打开一个浏览器的tab --> <a href="http://www.baidu.com">跳转到百度</a> <a href="http://www.baidu.com" target="_blank">跳转到新打开的百度</a>
textarea标签
<!-- 多行文本框 --> <textarea>多行文本</textarea>
原文：https://www.cnblogs.com/tata-learning/p/11986326.html