前端与HTML | 青训营笔记

45 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

前端定义

image.png

前端技术栈

image.png

前端需要的关注点

  • 1、功能
  • 2、美观
  • 3、无障碍
  • 4、安全
  • 5、性能
  • 6、兼容
  • 7、体验

image.png

前端的边界

主要指的是前端目前能做的一些方面 比如:node.js ,可以写在服务器上;

electron,可以开发客户端应用,

WebRTC:PVP在线传输,实现多人的会议;

WebGL:开发3D游戏

WebASSEMBLY:可以把C++,Rust其他语言直接在浏览器端就可以运行

前端是互联网里面发展较快的领域

image.png

开发环境

浏览器+开发环境

入门容易,不需要像后端那样,入门学Java,Python,Golang,需要配置环境啥的。前端,浏览器就是环境,写的代码运行在浏览器里面 image.png

HTML

html是什么

全称:HyperTest Markup Language,超文本标记语言

image.png

标签介绍

标签分为自闭合和双标签闭合,下面图中那个就属于自闭合类型 标签内部包含有属性名和属性值

image.png

每一个标签都在不断的被嵌套,如下面这段代码,首先申明这是段html代码,之后在写出所使用的语言是英语,之后是头标签,里面写的都是些浏览器需要的配置信息,如编码格式为UTF-8,默认使用IE-Edge类型,默认跨度,标签页名字之类的

之后还有后边的body大标签,后面学的主要内容都是写在body标签里面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>