这是我参与「第四届青训营 」笔记创作活动的的第1天
1、本堂课的重点内容
1、什么是前端
2、前端技术栈
3、做前端我们应该关注哪些方面
4、前端的边界及开发环境
5、HTML
6、语义化
2、详细知识点介绍
1、什么是前端
解决GUI人机交互问题
跨终端
PC/移动浏览器
客户端/小程序
VR/AR等
Web技术栈
2、前端技术栈
JavaScript->行为
CSS->样式
HTML->内容
3.前端应该关注哪些方面
功能、美观、性能、无障碍、安全、兼容性、体验感
4、前端的边界及开发环境
前端的边界
开发环境
5、HTML
一、HTML指的是HyperText Markup Language
HyperText指的是超文本的东西，可以包含图片、标题、链接、表格等一些丰富的格式
Markup Language指的是标记语言，具体形式为
文章标题
,在标签内可以添加属性具体的使用情况：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>
一级标题
</h1>
<p>
段落内容
</p>
</body>
</html>
二、HTML的语法
标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如 required、readonly
三、标题标签
标题有 h1 ~ h6
四、列表标签
<ol> </ol>:有序列表，默认在内容前面加上1、2、3.....
<ul></ul>:无序列表,展示效果前面有个黑点
<dl></dl>:定义列表，<dt></dt>类似于标题，<dd></dd>:类似与标题下面包含的内容
五、链接标签
<a></a>
六、图片标签
<img />
七、多媒体标签
<audio></audio>
<video></video>
八、输入
<input>
placeholder:占位符，用户输入
type：range（范围）、number（数字）、date（日期）
text area：用户输入多行数据
九、文本
引用：
<blockquote></blockquote>：快捷引用
<cite></cite>:短引用，章节
<q></q>:具体引用的内容
<code></code>:代码的引用
<pre><code></code></pre>:多行代码的引用
强调：
<strong></strong>:强调内容的重要
<em></em>:强调语气
十：内容划分
<header></header>:页头
<nav></nav>:导航
<main></main>:主体
<article></article>:文章
<aside></aside>:侧边栏
<footer></footer>:页尾
6：语义化
一、语义化是什么
HTML中的元素、属性、属性值都拥有某些含义
开发者应该遵循语义来编写HTML
二、谁在使用我们写的HTML
开发者：修改、维护页面
浏览器：展示页面
搜索引擎：提取关键词、排序
屏幕阅读器：给盲人都页面内容
三、语义化的好处
代码可读性
可维护性
搜索引擎优化
提升无障碍性
四、如何做到语义化
了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不可使用可视化工具生成代码
3、课后总结
第一次接触到前端，对很多知识点不熟悉，老师讲的很清楚、列举了很多的例子，希望自己能够再接再厉！
\
