前端与HTML&青训营笔记

2023-04-13 90 阅读2分钟

简单的说前端是用html(内容)+css(样式)+js(行为，交互)结合来解决人机交互的问题，跨终端（pc，移动浏览器，客户端/小程序 VR/AR等）。

前端技术由最基础的三剑客（html+css+js）组成，浏览器会通过http网络协议把把服务器上的代码（也就是我们写的代码）渲染到页面当中，也会通过http协议把用户点击，填写表单之类的交互信息传输到服务器。
前端的边界，node.js（注意他不是框架是一个平台，是一个js运行环境，能够使用js开发服务端）electron框架可以用于开发跨平台桌面应用程序，React Native框架可以用来开发andorid安卓，ios应用，WebRTC框架是一种通信技术，可用于开发音视频，会议等应用，WebGL框架开发游戏等，WebAssembly等技术。
开发环境，常见浏览器有:IE/Edge，Chrome(谷歌)，Firefox(火狐)，Safari(苹果浏览器)，常用编辑器：vscode,Vim,WebStorm等。
HTML(HyperText Markup Language的缩写)Hyper超文本,可以表示文字图片链接表格等，Markup Language标记语言。

<!doctype html>//文档申明告诉浏览器这里使用的是什么版本的html
<html lange="en"><!--定义文档流，lange表示文档显示的语言，en为英语，zh-CN为中文--> 
  <head><!--头部 --> 
      <meta charset="UTF-8"><!--编码--> 
      <title>页面标题</title> 
  </head> 
  <body><!--内容--> 
      <h1>一级标题</h1> 
      <p>段落</p>
      .... 
  </body> 
</html>

浏览器拿到html文件后会进行解析构建一个DOM树，每个节点被成为DOM节点

HTML语法：标签和属性不区分大小写，推荐小写，空标签可以不闭合，属性推荐用双引号，某些属性值可以省略。
常用的部分标签如下：
内容划分，通过如图标签进行划分：

语义化：HMTL中的每个元素、属性、属性值都有自己的含义，开发时需要遵循语义来编写hmtl,如：ol表示有序列表，h1表示一级标题等，语义化好处：提高代码可读性，维护性，搜索引擎优化，无障碍性。
注意：html是用于传递内容而不是样式。