这是我参与「第四届青训营」笔记创作活动的的第1天

前端

什么是前端

使用Web技术栈解决多端图形用户交互界面

解决GUI人机交互问题
跨终端

PC/移动浏览器
客户端、小程序
VR/AR等

Web技术栈

前端技术栈

HTML、CSS、JavaScript构成最基础的前端技术栈。

运行在浏览器的代码通过http协议和服务器进行通信，渲染成页面；浏览器也可将用户所填写的内容或行为通过http协议提交到服务器。

前端应该关注：

功能、美观、无障碍、安全、性能、兼容、体验

前端的边界

node.js：在服务器端开发服务器端应用；
ELECTRON、React Native：客户端应用；
WebRTC：实现多人会议；
WebGL：开发流畅的3D游戏；
WebASSEMBLY：把C++等代码编译成浏览器可以运行的代码。

开发环境

HTML

HTML是什么？

HyperText（超文本） Makeup Language（标记语言）

示例

  <!doctype html> 
   <html>
     <head> 
       <meta charset="UTF-8"> 
       <title>页面标题</title> 
     </head>
     <body> 
       <h1>一级标题</h1> 
       <p>段落内容</p> 
     </body>
   </html>

标记当前使用的HTML文件的版本，浏览器据此决定渲染模式。
html标签为根标签，囊括所有其他标签。
head页面需要的数据但可以不呈现给用户，如页面标题与页面编码方式。
body呈现页面内容。

DOM树

HTML语法与常见标签

标签和属性不区分大小写（推荐小写），（大写：自定义组件，小写：原生组件）
空标签可以不闭合，如input、meta，<img src='photo.jpg"/>
属性值推荐用双引号包裹
某些属性值可以省略，如required、readonly

标题h1~h6

列表

有序：<ol></ol> 无序：<ul></ul> 定义列表： <dl> <dt>标题</dt> <dd>具体描述</dd> </dl>

链接（href=" "）

target="_blank"表示新建一个页面打开

多媒体（图片：img；音频：audio；视频：video）

src地址；
alt替代文本（省流不加载时）；
controls默认显示播放空间（按钮进度条之类）

输入（input组件）

<textarea>长文本多行输入</textarea>

选择(input组件)

多选：type="checkbox"
单选：type="radio"
下拉选择：<select><option>选项一</option><option>选项二</option></select> 小注：list中为提示选择，给予快捷输入方式，但不影响input的自由输入

文本

快捷引用/常引用：<blockquote cite=""><p>啦啦啦</p></blockquote>
短引用：<cite>表示具体名字或章节；<q>一般是引用的内容
代码：<code>(多行代码可在外包裹<pre>)

强调

<strong>:重要、紧急
<em>：侧重于语气上的强调，需要重读

内容划分

HTML语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

有序列表用ol；无序列表用ul
lang属性表示内容所使用的语言

HTML的使用者

开发者：修改、维护页面
浏览器：展示页面
搜索引擎：提取关键词、排序
屏幕阅读器：给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容·
不使用可视化工具生成代码

总结

初次系统化地接触前端，了解了HTML的语法和各种标签的使用方法，收获颇多。笔记中大部分引用了PPT中的案例便于更好地理解，希望能继续认真对待接下来的学习。

前端与HTML ｜ 青训营笔记

前端