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

以下为本次课程的学习笔记

主要内容

1. 简单介绍了什么是前端、前端的技术栈、应该关注哪些方面和前端的边界以及开发环境等
2. HTML的概念、标签
3. HTML语义化

概念

什么是前端

前端是前端工程师使用web技术栈解决多端图形用户界面下的人机交互问题

跨终端

• PC/Y移动浏览器
• 客户端/小程序
• VR/AV等

HTML负责页面结构和内容

CSS设置网页的样式

JavaScript定义网页的行为

运行在浏览器中的，通过http协议在服务器端进行渲染

前端应该关注哪些方面

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

应用

• node.js开发服务器端的应用
• ELECTRON React Native开发客户端的应用
• WebRTC P2P的在线传输
• WebGL 3D游戏
• WebASSEMBLY 在浏览器编译c++等语言

语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以忽略，比如required、readonly

具体示例

部分标签

有序列表<ol>

无序列表<ul>

定义列表<dl> 标题<dt> 值<dd>

链接<a href="" target=“_blank”>字节跳动</a>

图片<img src="" alt=""> (不被显示替换)

多媒体<audio arc="" controls>

输入<input placeholder="">占位符

<input ytpe="range">

<input type="number min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

选择<lable><input type="checkbox">

选择多个互斥 <input tpye="radio" name="test">

下拉选择<select>

罗列可供选择的<datalist>

长引用<blockquote cite="来源地址">

短引用<cite>名字、章节

短引用<q>具体内容

引用代码<code>

强调含义<strong>语气<em>

内容划分

谁在使用我们写的HTML

• 开发者-修改、维护页面
• 浏览器-展示页面
• 搜索引擎-提取关键词、排序
• 屏幕阅读器-无障碍性（图片未加载出来怎么解决、用户使用舒适度和易用性）