这是我参与「第四届青训营 」笔记创作活动的的第2天
什么是前端？
- 解决GUI人机交互问题
-
跨终端 PC/移动浏览器
客户端/小程序
VR/AR等
-
Web技术栈
总结：前端工程师是使用Web技术栈解决多端图形用户界面交互问题的工程师
前端技术栈
三层：HTML负责页面结构和内容，CSS设置页面样式，JavaScript定义广义的行为
浏览器通过HTTP协议和服务器进行通信，将用户的行为提交到服务器端
HTML、CSS、JavaScript和网络协议构成最基础的前端技术栈
HTML是什么？
HTML 指的是超文本标记语言( Hyper TextMarkup Language ),它是用来描述网页的一种语言。
所谓超文本,有2层含义:
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
2.它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
列表
有序列表
<ol>
<li></li>
</ol>
无序列表
<ul>
<li></li>
</ul>
key:value型
<dl>
<dt></dt>//key
<dd></dd>//value
</dl>
链接
< a href ="跳转目标" target ="目标窗口的弹出方式">文本或图像</ a >
多媒体标签
图像标签
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
音频
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放 |
| loop | loop | 循环播放 |
| preload | auto（是） none（否） | 是否预加载视频 |
| poster | imgurl | 加载等待图片 |
| muted | muted | 静音播放 |
表单输入
<input type="range">//滑块
选择
多选
单选
下拉选择
<input list=""/>//输入下拉提示
<datalist id="">
<option></option>
</datalist>
引用
长引用（块级引用）
<blockquote cite="">
//cite内是引用地址
</blockquote>
短引用cite标签：主要作品名称等；q标签：具体内容
code标签用于引用代码，外面加pre标签表示多行代码
语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
lang属性表示内容所使用的语言
谁在使用我们写的HTML？
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
