一.前端

• 概念：

1，解决图形界面下的人机交互问题(pc/移动/app/小程序)

2,跨终端

3,使用web技术栈

前端工程师：使用web技术栈解决多端图形用户界面交互

• 前端技术栈

基础HTML(页面结构、内容)

CSS(页面样式)

Java(页面行为)

通过http网络协议和服务端进行通讯

• 前端的关注方面

1,产品功能，面向大众的需求有一定的使用度和范围

2,美观，页面简易好操作或者华丽美观都关系到使用者的使用时体验感受

3,无障碍，网站面向的群众范围，例如色盲使用者

4,安全，产品要保证用户个人信息的安全，以达到更好的用户体验

5,性能，网页的的加载缓冲速度，加载页面的连续性、流畅性

6,兼容性，网页是否能在各种设备上进行使用(电脑/手机/网址/平板等不同设备)

• 前端的涵括边界

客户端/在线传输(多人会议)/3D游戏/编译代码

［注］前端在互联网行业发展迅速，日新月异，需要实时跟进、不断学习才能在这个行业长久生存下去不被时代和技术淘汰。

• 前端开发环境

需要用到浏览器+编辑器

浏览器：Edge/Chrome/Firefox火狐/Safari

编辑器：VScode/Vim/WebStorm

编辑器编写代码保存成HTML在浏览器打开就能看到效果

二.HTML

HyperText Markup Language

标记语言(表现不同的格式)超文本

标记语言：

开始标签

结束标签

表示图片：

其中src是属性名，""内部是属性值，img内部不需要嵌套其他内容，可以省略结束标签“/img”，简写成“/”

• 案例

1

——doctype标记了当前使用的HTML文件的版本

2

11

——html标签是文档的根标签，其他的所有标签都是写在HTML标签内部的

3

6

——head标签里放一些页面的源数据，页面上需要一些不直接呈现给用户的数据(页面标题/页面编码)

7

10

——body内部存放一些呈现给用户的内容，比如如下的标题和段落内容

浏览器拿到代码会进行解析，解析出dom树：把HTML代码转化成对应的树形结构，里面的每一个节点称为dom节点

• HTML语法

HTML的语法本身十分简单

1,标签和属性不需分大小写的情况下推荐使用小写

2,空标签可以不闭合(img/input/menta)可以不写结束标签只写“/”，其内部不再放其他内容

3,属性值推荐使用""包裹使用

4,一部分的属性值可以省略，比如required、readonly

后一篇笔记将整理HTML有关的内部每一个细节，如标题部分、段落内容部分的详细编写过程，由于从手写再次整理成文字需要花费时间，所以笔记以节的方式呈现，根据标题的内容分为上下联系。