Day2 前端与HTML

前端三大要点：

解决GUI人机交互问题 2.跨终端（pc浏览器，移动端）

Web技术栈

前端工程师是使用web技术栈去解决多端图形用户交互的工程师前端技术栈：HTML(内容) CSS(样式) JavaScript（行为），通过网络协议与服务器端交互

通俗来讲html标签就是骨架器官，css就是外貌装饰，javascript就是人的行为与外界能够交互

前端的关注点：功能，美观无障碍安全性能兼容性，比较重要的点就是用户的体验

随着技术的发展，前端不仅仅只在局限于页面设计，可以用node.js去开发服务端的应用,也可以web去开发一些3D的游戏,总之前端在互联网行业发展是非常迅速的，需要我们不断的更新学习。

开发环境：只需要有一个浏览器如chrome firefox，在加一个编辑器如vsCode，入门门槛较低

页面基本结构：

<!DOCTYPE html>  // 标记了使用的html版本

<html lang="en">  // html为根标签

   <head> // 不需要呈现在页面上的信息 配置

     <meta charset="UTF-8"> // 页面编码

    <title>页面标题</title>

   </head>

<body> // 放的就是需要呈现在页面上的内容

    <h1>一级标题</h1>

    <p>段落内容</p>

 </body>

</html>

DOM树用来清晰的表示标签与标签之间的关系

HTML语法：

标签和属性不区分大小写，推荐小写

空标签可以不闭合，比如 input、meta

属性值推荐使用双引号包裹

某些属性值可以省略，如required，readonly

要注意的就是标签的语义化
HTML中的元素，属性，属性值都有某些含义，开发者应该遵循语义来编写HTML

页面的内容划分

一般分为头部 header 主要内容main 相关信息aide 尾部 footer

谁在使用我们写的HTML

开发者-修改，维护页面

浏览器-展示页面

搜索引擎-提取关键词，排序

屏幕阅读器-给盲人度页面内容

语义化的好处

代码可读性

可为维护性

搜索引擎优化

提升无障碍性

总之 HTML传达的是内容，而不是样式

如何做到语义化

1.了解每个标签和属性的含义

2.思考什么标签最适合描述这个内容

3.不使用可视化工具生成代码

前端与HTML | 青训营