前端
前端是什么，一句话总结：使用Web技术栈解决多端GUI（图形用户界面）交互问题。
HTML
HTML即超文本标记语言，它通过标签来描述网页内容，而Web浏览器可以读取HTML文档，并以网页形式显示它们。
可以看出标签即形如<h1>的由尖括号包围的关键词，同时它们可以拥有属性：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <h1>一级标题</h1> <p>段落内容</p> </body> </html> 复制代码
- doctype：标记当前文件版本，浏览器根据它决定渲染模式，不写则会以旧模式来渲染，可能造成显示差异。
- html：根标签，所有其他标签都是写在它的里面
- head：页面描述信息但不需要呈现给用户
- body：需要呈现给用户的内容
如果我们将上述HTML代码加载到浏览器中，浏览器会创建这些DOM结点以树结构显示我们的网页：
语法
| 标签 | 常用属性 | |
| 标题 | h1~h6 | |
| 列表 | ol > li ul > li dl > dt, dd |
|
| 链接 | a | href, target |
| 图片 | img | src, alt, width, height |
| 音频 | audio | src, controls |
| 视频 | video | src, controls |
| 输入 | input[type=range] input[type=number] input[type=date] textarea |
type, placeholder |
| 选项 | input[type=checkbox] input[type=radio] select > option input, datalist, option |
type |
| 文本内容 | blockquote cite q code pre > code |
|
| 文本样式 | strong em |
语义化
下列这些就是典型的语义化标签：
- header
- nav
- main
可以看出语义化的代码结构清晰，同时有很多好处：
- 开发者 - 修改，维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词，排序
- 屏幕阅读器 - 给盲人读页面内容
那么我们该如何做到语义化呢？
- 了解HTML标签以及属性
- 思考内容与标签的搭配
- 不使用可视化工具生成代码
部分课后问答
src与href属性的区别
- 需嵌入到当前页面的内容时，使用src，如
<img>, <audio>等。 - 需在当前页面链入外部内容时，使用href，如
<a>, <link>等。
IE是否需要兼容？
大部分场景下不需要
iframe标签的使用
嵌入第三方元素时可以使用
- 优点：无需开发
- 缺点：内容展示有限制且不能自主控制，同时也要考虑安全问题
input[type=button]与button标签推荐使用哪个？
button，用新不用旧
