一、什么是前端

前端工程师是使用Web技术栈解决图形用户界面交互问题的工程师。

1.前端技术栈

浏览器通过HTTP协议和服务器进行通信，通过HTTP协议从服务器中拿到前端代码，之后渲染成我们看到的页面。浏览器也可以将用户填写的内容等用户行为通过HTTP协议提交到服务器端。

- HTML（内容） 
- CSS（样式）
- JavaScript（行为）

二、HTML

1、HTML是什么

超文本标记语言

<!doctype html>标记了当前使用的html文件是什么html版本，浏览器可以根据标签内容选择不同的渲染模式。
<html></html>为文档的根标签，除了上面的标签外其他的标签都是写在根标签内的。
<head></head>放一些源数据，页面需要的信息，但是不需要直接呈现给用户的数据，比如说页面标题、页面编码类型等等。
<body></body>呈现给用户的内容，比如说图片、文字等等。

2.DOM树

浏览器将html文件进行解析出来的，其中每一个节点称为DOM节点。

3.HTML语法

标签和属性不区分大小写,推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略：比如required、readonly

4.标签

标题：h1~h6
列表:有序（ol）、无序（ul）、自定义（dl）
链接:<a scr="">
多媒体：<img/>
输入：<input>
引用：<blockquote></blockquote>（常饮用）、<cite></cite>（短引用）、<q></q>
代码：<code></code>
强调：<strong></strong>（含义）、<em></em>（语气）

5.网页内容划分

6.语义化

是什么：HTML中的元素、属性及属性值都拥有某些含义
好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性
怎么做：了解每个标签和属性的含义、思考什么标签最适合表述这个内容、不使用可视化工具生成代码

7.HTML的使用

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容

总结

通过本次的学习，对HTML有了更深的认识，并且复习了HTML中所包含的标签的知识点。当然在学习的过程中发现有一些专有名词或者技术是我没有听过的，所以在课后应该继续的去拓宽自己的知识面，还得继续加油！

前端与HTML学习 | 青训营