1. HTML - Hyper Text Markup Language(超文本标记语言)
2. <h1>~~<h6>标题标签
3. <p>文本内容</p>
4. <!-- 注释内容 -->
5. <h2 style= "color: red">该标题是红色</h2> [添加 style 内联样式] 内联样式最简单有效，当不利于维护，无法样式分离
<style> 选择器{属性名称：属性值;} h2 {color : red;} </style> /* 内嵌样式，便于修改维护 */
6. font-size : 14px; 字号
7. font-family: Helvetica , Sans-Serif; 字体; (一般设置2种以上，一种不能使用的时候，自动降级到第二种字体)
link标签引入字体（引入谷歌 Lobster 字体）
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css"> <!--引入谷歌字体--> <style> 选择器{ font-family:lobster； }
</style> <!--应用字体-->
8. <img src=" "> 指向图片地址 ，img 元素自关闭，无需结束标记
<img class = "class1 class2"> 2个类名中间可以使用空格分开
img{ border-color: red; border-width: 5px; border-style: solid; border-radius: 10px(50%); //像素或者百分比，圆角 } /* border设置边框样式 */ border-color: red; border- 5px; border-style: solid; /* 缩写为 */ border: 5px solid red;
9. <a href=" 指向地址 "> </a> anchor（锚点 / 链接）
<a href="#"> </a> 当无法确定链接地址，可以将 href 指向 “#” 放置固定链接（不跳转）
<a href="#" alt=" "> alt 属性，当图片无法加载时，可显示为替代文本（对盲人非常重要，搜索引擎也会捕捉）
10. <ul> ...<li>..</li> </ul> 无序列表
<ol> ...<li>..</li> </ol> 有序列表
11. <input type ="text" placeholder = "this is placeholder text"> 自关闭，（文本输入框）placeholder 文本占位符
12. 使用HTML 构建可以跟服务器交互的WEB表单（form），通过给form添加 action 属性来达成。
<form action="/url地址"> <input type="text" placeholder=" 我要占位 "> </form>
action 属性的值指定了表单提交到服务器的地址
13. submit（提交）按钮，点击，表单中数据会被发送到通过 action 属性指定的地址上。
<form action=" "> <button type="submit"> 这是一个提交按钮 </button> </form>
14. required (必填项) 只有当用户填写了该选项后，才能提交表单 （required 属性在 Safar 浏览器无效）
<input type = "text" required> <!--给输入框添加 required 属性，这样用户不填写输入框就无法提交表单-->
15. radio button (单选按钮) 每个单选按钮应嵌套在自己的 label 元素，* 所有关联的单选按钮应使用相同的 name 属性
<label> <input type="radio" name="shaojun"> 我是少君 </label> <label> <input type="radio" name="shaojun"> 我不是少君 </label>
16. checkbox （复选按钮）每个复选按钮都应嵌套在 label 元素中，* 所有关联的复选按钮都应使用相同的 name 属性
<form action="/ url 指向地址"> <label><input type="checkbox" name="personality"> door</label> <label><input type="checkbox" name="personality"> Indoor</label> <label><input type="checkbox" name="personality"> Outdoor</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
17. checked 属性，设置单选和复选按钮默认被选中状态，在 input 元素中添加 checked
<input type="radio" name="test-name" checked> <!--选中状态-->
18. div 层元素，盛装其他元素的容器 <div>......</div>
19. background-color: green; 背景颜色
20. 三个影响HTML 元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)
元素padding 控制元素内容 content 和元素边框 border 之间距离
元素margind 控制元素边框 border 和元素实际所占空间的距离（当 margin 值为负值时，元素会变大）
padding: top right bottom left;
21. body HTML页面都有 body 元素，并且body元素同样能够应用样式，所有其他元素将继承 body 元素的样式
class 声明的顺序，第二个声明比第一个声明具有更高优先权。<p class="one two"> two的类样式更高，会覆盖one
浏览器读取Css顺序是从上到下，在同样样式冲突下，浏览器会使用最后的CSS声明（ID属性 > Class属性）
22. !important > 内联样式 > ID属性 > Class属性