前端与 HTML
一、什么是前端？
解决GUI人机交互问题
跨终端
pc/移动浏览器
客户端/小程序
VR/AR等
Web技术栈
二、前端技术栈：
HTML(内容)
CSS（样式）
JavaScript（行为）
三者与服务器之间靠网络协议进行交互
2.1 前端应该关注的方面：
美观、安全、功能、无障碍
2.2 前端的边界：
1.使用node期编写服务器端代码
2.使用ELECTRON 、React Native ：开发客户端
4.使用Web RTC ：实现在线传输，多人会议
5.使用WebGL：实现非常流畅的3D游戏
6.使用WebASSEMBLY：将其他语言发开的代码转换成在浏览器端可以运行的代码
总而言之，前端在互联网行业的发展的是很快的，需要持续的学习，掌握最新的技术
2.3 开发环境
浏览器：IE/Edge,Chrome,Firefox,Safari
编辑器：VSCode,Vim,WebStorm
2.4 HTML是什么？
HTML即超文本标记语言，顾名思义就是一种利用标签来对超文本元素进行标记形成页面的语言。
标签，就是用一对<>包含的，少部分标签是自闭合标签，就是在标签内有‘/’，例如<img src="" />就是一个自闭和标签
2.5 HTML语法：
标签和属性不区分大小写，推荐小写
空标签可以不闭合，eg::input,meta
属性值推荐使用双引号
2.6 常见标签：
| 元素 | 说明 |
|---|---|
| html | 元素的根标签 |
| head | 里面放一些页面的元数据，页面用了什么编码 |
| body | 里面存放页面正在的内容 |
| h1-h6 | 标题标签 |
| ol | 无序列表，特点：会在元素前面加上带有顺序的标识；eg:1-1 |
| ul | 有序列表，特点：默认会在元素的前面加上实心小黑点；eg:1-2 |
| a | 链接标签，属性href，里面的值代表要跳转的路径 |
| img | 图片标签，src属性的值：代表图片的路径；alt属性的值：浏览器加载失败的时候，该图片的替换文字 |
| audio | 音频标签，controls属性：浏览器默认播放属性 |
| 定义列表：dl->dt(标题)-》dd(值),多对多的关系（一个dt可对应多个dd） | |
| vidio：多媒体组件标签 |
href与src的区别：
直接嵌到页面展示的使用src
外部引用使用href
表单类标签:
input:placeholder:占位符，当有输入后，会消失，type：类型
type="checkbox"：代表单选，依赖name属性的值达到互斥效果
文本类标签：
引用型：
blockquote：快捷引用
cite属性：表名引用来源
cite:短引用，表名引用的是作品的名字或标题
q:引用之前讲过的内容。
code:代码的引用，会用特殊的编程字体
pre:引用多行代码，内嵌code标签
p:文本标签
em: 更倾向语气，一段话里需要重读的一句话
strong:个更突出表强调。突出，紧急
2.7 页面布局结构：
三、语义化：
3.1 什么是语义化：
HTML中的元素、属性及属性都值拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用ol；无序列表用ul
lang属性表示内容所使用的语言
3.2 谁在使用HTML
开发者-修改、维护页面
浏览器--展示页面
搜索引擎-提取关键词、排序
屏幕阅读器：给盲人读页面内容
3.3 语义化好处
提高代码的可读性和可维护性；
为团队开发提供了一种隐式规范；为后期开展维护工作的时候，方便熟悉代码
使浏览器更容易分析页面代码，增强浏览器对代码的可读性；
有利于搜索引擎的SEO优化；
使用语义化会更加有利于SEO的优化，提高网页的权重
屏幕阅读器
给盲人读取页面内容，提高无障碍性
3.4 如何做到语义化：
了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码
标题：「前端与 HTML」字节青训营 - 寒假前端场
