这是我参与【第五届青训营】伴学笔记的第一天，以下是参与课程中记录的一些笔记和自己的整理
什么是前端？
- 解决GUI人机交互问题
- 跨终端
- pc/浏览器
- 客户端/小程序
- VR/AR等
- web技术栈
前端应该关注那些方面？
- 美观（页面是否好看）
- 功能（解决什么问题，满足用户需求）
- 性能（速度，流畅性）
- 安全（保障用户数据的安全）
- 无障碍（是否对于所有人都可用，比如色盲者）
前端的边界
- node
- Electron
- React Native
- WebGL
- WebAssembly
开发工具
- 浏览器
- 编辑器
前端的入门门槛还是比较低的，但是要往高处发展也是不容易的，前端工程师们需要掌握许多前端开发技术
HTML是什么？
HTML是hypertext markup language的缩写，意为超文本标记语言，下面看一段HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//页面标题
</head>
<body>
//呈现给用户的内容
</body>
</html>
html的结构是一种DOM数，里面的每一个结点称为DOM结点
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签不可以闭合，比如input，meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，比如required，readonly
标题标签 h1~h6与p标签
p标签指的是段落标记，既可以成对的使用来包含段落，也可以单独使用来划分段落 ，h标签指的是标题文字标记，h1到h6依次减小。而且h字体比p要粗。
列表标签
- 有序列表ol
- 无序列表ul
- 定义列表dl
dl列表表示一组key,value值
链接
在 HTML 文档中 a 标签每出现一次，就会创建 Anchor 对象,锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。可以通过搜索 Document 对象中的 anchors[] 数组来访问锚，或者使用 document.getElementById()。
语法：
<a href="跳转链接">点击跳转</a>
a标签有很多属性，具体参考W3CSchool
Anchor 对象的属性
| accessKey | 设置或返回访问一个链接的快捷键。 |
|---|---|
| charset | 设置或返回被链接资源的字符集。 |
| coords | 设置或返回逗号分隔列表，包含了图像映射中链接的坐标。 |
| href | 设置或返回被链接资源的 URL。 |
| hreflang | 设置或返回被链接资源的语言代码。 |
| id | 设置或返回一个链接的 id。 |
| innerHTML | 设置或返回一个链接的内容。 |
| name | 设置或返回一个链接的名称。 |
| rel | 设置或返回当前文档与目标 URL 之间的关系。 |
| rev | 设置或返回目标 URL 与之间当前文档的关系。 |
| shape | 设置或返回图像映射中某个链接的形状。 |
| tabIndex | 设置或返回某个链接的 Tab 键控制次序。 |
| target | 设置或返回在何处打开链接。 |
| type | 设置或返回被链接资源的 MIME 类型。 |
标准属性
| 属性 | 描述 |
|---|---|
| className | 设置或返回元素的 class 属性。 |
| dir | 设置或返回文本的方向。 |
| lang | 设置或返回元素的语言代码。 |
| title | 设置或返回元素的 title 属性。 |
语义化是什么？
-
HTML中的元素，属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容使用什么语言
为什么要求语义化？
- 开发者->修改，维护页面
- 浏览器->展示页面
- 搜索引擎->提取关键字，排序
- 屏幕阅读器->给盲人读页面内容
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不适用可视化工具生成代码
