前端与HTML

什么是前端？

解决GUI人机交互问题

跨终端

PC移动浏览器

客户端/小程序

VR/AR等

Web技术栈

前端技术栈：

CSS

Javascript

HTML

前端应该关注哪些方面的问题？

功能

美观

无障碍

安全

性能

前端的边界

Nodejs ——服务器端应用

Electron ——客户端

WebRTC——3D游戏

React Naïve

WebGL、

WebASSEMBLY

开发环境：

浏览器：IE/Edge Chrome Firefox Safari

编辑器 VSCode Vim WebStorm

HTML

是什么？

HyperText：

图片，标题，链接，表格

Markup Language

文章标题

告诉浏览器渲染方式所有的语言都写在这两个标签中标题页面标题

一级标题

段落内容

HTML语法

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

空标签可以不必和，比如input、meta

属性值推荐用双引号包裹

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

标题h1~h6

字体排版学

历史

霍兹的雏形

印刷体源流

中国在唐代

应用

…

购物清单

apple
pair
banana

霸王别姬

导演：: 陈凯歌
主演：: 张国荣; 张丰毅; 巩俐
上映日期：: 1993-01-01

字节跳动官网

字节跳动官网

<img

Src=”https:lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg”alt=”Metal movable type”

width=”400”

<audio

Src=”/assets/music.ogg”

Controls

<video

src>

Hey

内容划分：header（nav）、main（article）、aside、footer

语义化是什么？

HTML中的元素、属性以及属性值都拥有某些含义

开发者应该遵循予以来编写HTML

有序列表用ol；无序列表用ul

Lang属性表示内容所属使用的语言

谁在使用我们写的HTML

开发者-修改、维护页面

浏览器-展示页面

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

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

语义化的好处

代码可读性

可维护话

搜搜哦引擎优化

提升无障碍性

传达内容，而不是样式

前端工程师的自我修养

怎么做到语义化？

了解每个标签的属性的含义

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

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

前端与HTML ｜ 青训营