1.项目的文件夹建设
这几个文件夹是必建的，也别管用不用得到，算是一种规范。
2.html骨架结构
<!DOCTYPE html>
<html>
<head
<title><title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
3.容器元素
语义化容器元素（html5的新元素）
HTML5 提供的新语义元素定义了网页的不同部分。
header 元素
header元素：定义文档或节的页眉。
footer 元素
footer元素：定义文档或节的页脚。
nav 元素
nav元素：定义导航链接的容器。
section 元素
section 元素：定义文档中的节。
article 元素
article 元素：定义独立的自包含文章。
summary 元素
summary 元素：定义 details 元素的标题。
aside 元素
aside 元素：定义内容之外的内容（比如侧栏）。
span 元素
<span> 标签被用来组合文档中的行内元素。
<span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
div 元素
<div>元素是组成容器的最小单位，也是最常用的单位
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据
4. 表单的作用和使用场景
https://www.runoob.com/html/html-forms.html推荐一下菜鸟教程
https://www.w3school.com.cn/h.asp还有W3C
1.1 作用
表单的目的是为了收集用户信息，与用户进行交互
1.2 使用场景
在注册和登录的页面会经常使用表单。
2. 表单的组成
一个完整的表单通常由表单域、表单控件（表单元素）、和提示信息三个部分组成。
2.1 表单域
表单域是一个包含表单元素的区域。在HTML标签中，<form>标签用于定义表单，然后把表单元素信息提交给服务器。
2.1.1 语法
<form action="url地址" method="提交方式"name="表单域名字">
各种表单元素控件
</form>
复选框
<form action="">
唱:<input type="checkbox" name="favourite" checked=1>
跳:<input type="checkbox" name="favourite">
rap:<input type="checkbox" name="favourite">
篮球:<input type="checkbox" name="favourite">
</form>
2.2 表单控件（表单元素）
在表单域中可以定义表单元素，这些表单元素是允许用户在表单中输入或者选择内容的控件。
2.2.1 input输入表单元素
<input>标签用于收集用户信息，它包含一个type属性，根据属性值的不同输入形式有很多（文本框、复选框、文本控件、单选按钮、按钮等）
<input type="属性值">
<input>标签为单标签
type属性的值不同有不同的控件
<form action="">
<input type="button" value = "按钮">
<input type="reset" value = "重置">
<input type="submit" value = "提交">
<button>按钮</button>
</form>
这边是创建按钮的两种方式，一种就是input，另一种就是<button type></button>
2.2.2 select下拉表单元素
使用场景：有多个选项让用户选择，需要节省空间，我们可以使用<select>标签控件定义下拉表
语法：
<select >
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<form action="">
<select name="test" id="select">
<!-- select是选择默认选中 -->
<option values="sing" selected=1>唱</option>
<option values="dance">跳</option>
<option values="rap">rap</option>
<option values="basketball">篮球</option>
<option values="basketball" disabled=1>你干嘛</option>
<br>
</select>
</form>
2.2.3 textare本文域元素
使用场景：用户输入较多的内容时，不能使用本文框，我们可以使用<textare>标签，它可以定义多行文本输入的控件。常见于留言板、建议、评论。
语法：
<textare row="3" cols="20>
文本内容
</textare>
cols=“每行的字符数”，rows=“显示的行数”，实际开发中不怎么会用，都是用css来改变大小的。
3. label 标签
<label>标签为input元素定义标签，它用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点转到对应的表单元素上，用来增强用户体验的。
3.1 语法规范
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
<input type ="radio" name="sex" id="male">
<label for="male">男</label>
<input type ="radio" name="sex" id="female">
<label for="female">女</label>
for 里面的值要和input标签里的id值相同才可以。
4.CSS选择器
行内选择器优先级最高 id选择器优先级最高，然后是类选择器，最后是标签选择器
即最先执行的是标签选择器，然后是类，然后是id，最后是行内
单标签和双标签的区别
单标签是⼀种⾃闭合的标签, 不能嵌套其他标签或⽂本，例如< img/> 是典型单标签
双标签有开始标签合结束标签, 中间可以嵌套其他标签或⽂本，例如< div>< /div>是典型双标签
定义
单标签：由一个标签组成。例如< hr/> < input>等。
双标签：由“开始标签”和“结束标签”两部分构成。例如< p>< /p> < button>< /button>等。
< p>是开始标签，表示一个段落的开始。
< /p>是结束标签，表示一个段落的结束。
区别
单标签：是由一个标签组成，例如用< hr/>结尾，是一种简写
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。签，提高可阅读性；内容比较多，使用双标签，可以在单标签用/>结尾，只是一种简写
双标签：用< /p>结尾，双标签可以替换所有的单标签，内容简单的如只有一个属性的可以用单标签，提高可阅读性；
内容比较多，使用双标签，可以在标签中嵌套其他内容，而单标签就不能。
单标签是⼀种⾃闭合的标签, 不能嵌套其他标签或⽂本，例如< img/> 是典型单标签
双标签有开始标签合结束标签, 中间可以嵌套其他标签或⽂本，例如< div>< /div>是典型双标签
定义
单标签：由一个标签组成。例如< hr/> < input>等。
双标签：由“开始标签”和“结束标签”两部分构成。例如< p>< /p> < button>< /button>等。
< p>是开始标签，表示一个段落的开始。
< /p>是结束标签，表示一个段落的结束。
区别
单标签：是由一个标签组成，例如用< hr/>结尾，是一种简写
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。签，提高可阅读性；内容比较多，使用双标签，可以在单标签用/>结尾，只是一种简写
双标签：用< /p>结尾，双标签可以替换所有的单标签，内容简单的如只有一个属性的可以用单标签，提高可阅读性；
内容比较多，使用双标签，可以在标签中嵌套其他内容，而单标签就不能。
面试题：
1. div + css布局的好处。
优势：
- 1.符合w3c标准。可以保证网站不会因为将来网络应用的升级而淘汰。
- 2.对浏览者和浏览器更具亲和力。由于css富含丰富的样式，使页面更具灵活性，可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器向后兼容。
- 3.使页面载入更快。页面体积小，浏览器速度变快，由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。相对于表格（table）嵌套方式，div + css将页面独立成更多的区域，在打开页面时，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
- 4.保持视觉的一致性。表格（table）嵌套的方式，会使得页面与页面、或者区域与区域之间的显示效果会有偏差。而使用div + css的方式，将所有页面、或所有区域统一用css文件控制，就避免了不同区域或不同页面体现出的效果偏差。
- 5.修改设置样式时更有效率。由于使用div + css布局方式，使得内容结构和样式分离，在修改页面内容结构和样式的时候更加容易和省时。根据区域内容标记，到css里找到相应的样式，使得修改页面样式时更加方便快捷，也不会破坏页面其他部分的样式布局，这在团队开发中更容易实现分工合作，使得分工合作更有效率。
- 6.对搜索引擎更加友好。相对于传统的table布局，采用div + css布局，由于将大部分的html代码和内容样式写入了css文件中，这就使得网页中代码更加简洁，便于搜索引擎采集收录。
劣势：
尽管div + css布局具有一定的优势，不过现阶段div + css网站建设存在的问题也比较明显，主要表现在：
- 1.对于css的高度依赖使得网页设计变得复杂。相对于table布局复杂的多。
- 2.css文件加载异常将影响整个页面的正常浏览。css网站制作的样式设置通常放在一个或几个外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果css调用出现异常，那么整个网站就不能正常浏览。
- 3.对于css网站设计的浏览器兼容性问题比较突出。虽然说div + css解决了大部分浏览器兼容问题，但是在部分浏览器调用css时也会出现异常情况。
- 4.div + css对搜索引擎优化与否取决于网页设计的专业水平而不是取决于div + css布局本身。div + css网页设计并不能保证网页对搜索引擎的优化，因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
2.table的优缺点？
优点：
- 某些场合使用table是非常合适、恰当和正确的。比如，用table做表格是完全正确的。
缺点：
- 1.table会延迟下载时间，占用服务器更多的流量资源。table要比其它html元素占用更多的字节。
- 2.table会延迟页面的生成速度，让用户等待更久的时间。table会阻挡浏览器渲染引擎的渲染顺序。
- 3.table会增加页面加载时间，增加http会话数、增加设计复杂度。
- 4.在某些浏览器中table里文字的拷贝会出现问题。影响用户的体验感。
- 5.table会限制页面的自由性。table会影响其内部的某些布局属性的生效。
- 6.table布局比div + css布局更麻烦。
- 7.table相对于页面布局来说，从语义上是不正确的。table描述的是表现，而不是内容。
- 8.table布局不能利用css样式。
- 9.table很难通过css来改变页面样式。
3.很多网站不常用table元素的原因。
- table的内容会等内部的所有内容加载完成才会显示，比基于div + css实现的表格布局加载速度慢。
- table会导致网页语义发生错误，不利于无障碍功能。
改动table内部内容会造成整个table重绘，消耗更多资源。 - table前期广泛应用于后台管理系统布局，由于普通的后台管理系统大多是表格布局，基于table编程难度低，且面向内网的管理系统对性能要求不高。
