这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天，学习笔记附下：
什么是前端
使用Web技术栈解决多端图形用户界面交互问题
前端技术栈
html：负责页面结构、内容
css：设计页面样式（eg：位置、大小、颜色）
javascript：定义网页行为，比如用户点击后页面该如何响应
以上三者都在浏览器中运行，浏览器可通过http协议和服务器进行通信，把前端代码通过网络协议从服务器上拿到，渲染成我们看到的页面；同时浏览器可以把用户填写的内容、行为通过http协议提交到服务器端
前端要关注哪些方面
功能：这个产品能满足用户哪些方面的需求
美观：界面是否好看
无障碍：对于不同的人群是否友好，用户包容
安全：用户隐私
性能：是否流畅
兼容：浏览器、不同的设备是否兼容
体验：用户体验是否好
开发环境
浏览器 + 编辑器
html
html是什么
HyperText：超文本，包括图片、标题、链接和表格 Markuo Language：标记语言，用一个开始标签和结束标签来表示一段内容
例如一段代码：
<!doctype html > ——决定了渲染方式
< html > ——所有的其他代码都会写在html里面
< head >——放页面的原数据，不需要直接呈现给用户的内容
< meta charset = "UTF-8" >
< title >页面标题</ title >
</ head >
< body > ——需要呈现给用户的内容
< h1 >一级标题</ h1 >
< p >段落内容</ p >
</ body >
</ html >
浏览器拿到html后会把这串代码解析成一个DOM树，其中的每一个节点称之为DOM节点，比如上述的title
html语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
标题
有h1-h6种表示，分别表示1-6级标题
列表
1、有序列表：展示出来会默认加上1、2、3，表示排序
<ol>
<li>xx</li>
<li>xxx</li>
</ol>
2、无序列表
<ul>
<li>xx</li>
<li>xxx</li>
</ul>
3、有属性值、属性名的列表
<dl>
<dt>属性名：</dt>
<dd>属性值1</dd>
<dt>属性名2：</dt>
<dd>属性值a</dd>
</dl>
链接
<a href="网址">
名称
</a>
多媒体标签
图片： alt属性：当这张图片加载失败或者不被加载的时候显示这些文字。
<img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
alt="Metal movable type"
width="400"
/>
音频： controls：这个音频需要显示浏览器的默认播放控件
<audio
src="/assets/music.ogg"
controls
></audio>
视频：
<video
src="/assets/video.mp4"
controls
></video>
输入+选择
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
输出结果：
Hey语义化
语义化是什么
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML 语义化的好处
- 代码可读性、可维护性、搜索引擎优化、提升无障碍性 如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
谁在使用我们写的HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
