这是我参与「第五届青训营 」笔记创作活动的第1天
什么是前端？
解决GUI人机交互问题
前端技术栈
-
HTML，CSS，JS
-
开发环境
常见的浏览器、编辑器
前端关注哪些方面？
- 功能，无障碍，美观，安全，性能，兼容性，用户体验
- 前端的新发展
从HTML入门
什么是HTML
超文本——多种内容格式
标记——用标签来表示格式，标签内可以设置属性
语言
分析基本HTML结构
<!doctype html> 表示当前使用的版本，提示浏览器用什么模式来渲染
<html> </html> 页面上的所有内容都放在这里
<head> </head> 这里面的 <title> 是指整个页面的标题，不是页面内容里的各种题目
<body> </body>
HTML代码 → 浏览器解析 → DOM树
HTML语法
基本规则
标题
<h1> </h1> ~ <h6> </h6>
列表
- 有序列表：
<ol> <li>内容</li> </ol>
- 无序列表：
<ul> <li>内容</li> </ul>
【xx:xx】定义列表（属性名：属性值） definition list：
<dl> <dt>title名称</dt> <dd>description描述，可有多对dd标签</dd> </dl>
链接
- anchor，hyper reference
<a href="http链接地址"> </a>
< ... target="_blank" ...> 在新窗口打开链接
- 插入多媒体
<img ... ... />插入图片
<src="..."> 资源链接
<alt="..."> 图片无法正常加载时，显示的替代文本
<width="400">
<audio ... ...> </audio> 插入视频
<src="...">
<controls> 显示浏览器默认的播放控件
<video .... ..> </video> 插入音频
<src="...">
<controls>
输入
<input ... />
<placeholder="...占位文本“> 显示占位值
<type="range"> 范围滑动条
<type="number" min="..." max="..."> 输入数字，设定大小值范围
<type="date" min="2023-01-15"> 输入日期并设定最小值
<textarea> 多行文本框 </textarea>
选择
- 多选
<input type="checkbox" />：多选框
<input type="checkbox" checked />：多选框且已选择
- 单选
<input type="radio" />
- 下拉选择
<select> <option>选项1</option> <option>选项2</option> </select>
- 提示可输入的选项
<input ... /> <datalist ...> <option>提示选项1</option> <option>提示选项2</option> </datalist>
引用与其他格式
- 块引用，比较长
使用 <blockquote ... > </blockquote> 标签
标签有属性 <cite="...URL..."> 表示引用的来源
- 短引用，可用于行内短文本引用，一般表示作品名字、章节标题等
使用 <cite> </cite> 标签
- 短引用，表示引用符号
标签 <q> </q>
- 表示代码，代码可长可短，可有多行
标签 <code> </code>
- 表示含义上的强调、重要紧急
标签 <strong> </strong>
- 表示强调、明显、重读
标签 <em> </em>
HTML 内容划分
HTML 语义化
标签、元素、属性都有其特定含义
开发者要根据语义来编写，而不是混淆格式瞎写
HTML传达内容，而不是样式！
代码用处
开发者：维护
浏览器：解析、展示
搜索引擎：提取，索引，排序
屏幕阅读器：无障碍功能
