这是我参与「第五届青训营」伴学笔记创作活动的第1天。
- 一、本堂课重点内容：
赵老师的本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，层层解析前端技术栈的构成，以及作为前端最为基础的技术HTML基础语法和基本功能，在实际研发过程中如何做到HTML语义化。
二、详细知识点介绍：
1.前端主要使用的三种技术：HTML、CSS、JavaScript。
它们看上去是三种不同的技术，但在实际中却是相互搭配使用的。
HTML 用来标记内容，它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。
CSS 用来修饰内容样式，负责HTML页面中元素的展现及排版。
JavaScript 用来进行交互，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。
2.前端应该注意的方面：功能，安全，美观，性能，兼容，体验，无障碍
3.前端的边界及开发环境，前端的入门门槛不高但是前端是进化很快的一个方向，意味着前端工程师要不断的学习来跟上科技界的进步。
4.HTML：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
老师用到的一些代码
<h1>文章标题</h1> //h1样式输出“文章标题”
<img src="photo.jpg"/> //设置本目录下photo.jpg图片属性名为src并显示
<!doctype html> //声明文档的解析类型
<meta charset="UTF-8"> //页面所使用编码
5.DOM树：将 HTML表示为标签的树形结构你可以点击元素（element）节点，它们的子节点会打开/折叠。
每个树的节点都是一个对象。标签被称为元素节点，并形成了树状结构：<html> 在根节点，<head> 和 <body> 是其子项，等。元素内的文本形成文本节点，一个文本节点只包含一个字符串。它没有子项，并且总是树的叶子。我们可以通过网页右键检查代码。
6.HTML语法：标签和属性不区分大小写，推荐小写；
空标签可以不闭合，比如input、meta；
属性值用双引号包裹；
某些属性值可以省略，比如required、readonly。
7.标题：标题有h1到h6六个等级
8.列表：<ol>有序列表 默认123排序
<ul>无序列表 默认：圆点+内容<dl>标题列表<dt>标题<dd>具体描述/值
<dd><dt>多对多关系
9.<a href="地址">超链接
<target=" blank">新窗口打开超链接
<img>//图片
<audio>//音频
<video>//视频
controls 播放控件
alt="" 加载失败提示
10.表单：
<input type="数据类型" min="最小值" max="最大值" placeholder="占位符 提示语句">
<textarea> 多行内容输入</textarea>
type="checkbox" 可以选择多个结果
type="radio" 单选(name属性相同时 只能选择一个)
<select>//下拉选择
<input>//自由输入
<datalist id="属性名">//提示填充
<option>内容</option>
11.文本
<blockquote cite="文本所在地址">
<p>文本</p>
</blockquote>//快捷引用
<cite>书名/章节</cite>
<q>引用之前讲过的话</q>
<code>代码引用</code>
<pre><code>多行代码引用</code></pre>
<p>//强调一句话的重点
<strong>含义</strong>
<em>语气</em>
</p>
12.内容划分： header：页头，包括nav导航
main：标题正文，包括一个或多个文章（article）
aside：文章相关内容、热点、广告
footer：版权相关、备案信息
13.语义化：HTML中的元素、属性及属性值都拥有某些含义、开发者应该遵循语义来编写HTML。语义化可以保证代码可读性、可维护性、搜索引擎优化、提升无障碍性。所以我们要了解每个标签和属性的含义思考什么标签最适合描述这个内容，不使用可视化工具生成代码。
三、课后个人总结：
作为一个前端小白来说，这节课虽然只是大概讲解了html和前端的一小部分内容，但却是对于我们以后工作很重要的一部分，尤其需要掌握的标签、需要注意的部分以及语义化的重要性部分。
