这是我参与[第五届青训营]伴学笔记创作活动的第1天。 本堂课的重点知识点主要在于认识与了解HTML这一门语言的定义、语言写法、包含的内容以及语言内元素的定义与作用.
A. 前端要解决图形界面下的人机交互 关注点：功能（满足需求）、美观、无障碍、安全（用户数据安全）、用户体验（速度是否够快）、用户体验（电脑手机体验）
B. node js开发服务器端应用、ELECTRON开发客户端的应用、react native同 Webrtc在线传输实现多人会议、WebGL开发3D游戏、WebASSEMBLY将c++等语言编写的代码转换成浏览器能直接浏览的样式
C. 编辑器 VSCode、Vim、WebStorm 浏览器 IE、CHROME
D.
HTML的语法:
例:<img src="photo.jpg" />
src为属性名，引号内的为属性值
!doctype为标记当前使用的语言，浏览器会根据这个来进行渲染模式的选择。
为文档根标签 放页面原数据（页面的标题和页面的编码等不太需要被用户看到的数据） 放要在用户面前展示的内容浏览器拿到html代码后会进行解析，解析出一个dom树，包含文档的根节点。例如→和→、、、等元素 每个节点为dom节点
html标签和属性不区分大小写，推荐小写 空标签可以不闭合，比如input、meta等标签 标签本身里面不会放别的内容，则可以不写结束标签 或 在最后写一个 / 属性值推荐使用双引号包裹起来 某些属性值可以省略，比如equired、readonly（不需要写它的值）
标签：
①标题有<h1>~<h6> 1大6小的顺序
<h1>这些通常和<p>一起用
例如：
<h1>.....</h1> <h2>.....</h2> <p>....</p> <h3>...</h3> <p>...</p>
②列表：
例如:
<h2>...</h2> <ol> ←有序列表,会将<li>的内容排列表上1. 2. 3.之类的序号 <li>...</li> ... </ol>
<h2>...</h2>
<ul> ←无序列表，会将<li>的内容排列表上加上中心圆点（如果不需要排列序号的话用这个，好看的）
<li>...</li>
...
</ul>
<h2>...</h2>
<dl>
<dt>导演:</dt> ←标题 detailed tail
<dd>某某某</dd> ←具体描述 detailed description
<dt>...</dt> dt和dl是多对多的关系
...
...
</dl>
③链接 <a href="(这里内容是链接)" target="blank"> href←超链接 加了target="blank"则打开的新页面不对替换原页面，而是新开一个窗口
图片、音频、视频也可以用链接
例如<img src="（这里的内容是链接）" alt="Metal movable type"/> 加了alt="Metal movable type"则可以让用户在未加载出内容时显示出这段文字（算是提高用户体验的一环）
<audio src="(这里的内容是链接)" controls></audio> controls←表示音频默认显示给音频默认的播放控件 video和audio同理 controls也一样。
④输入 表单类控件提供给用户输入信息进行操作。
例如：
<input placeholder="请输入用户名"> ←一个长条框内有“请输入用户名”的文本提示←是在用户没在框内输入任何东西时的提示
<input type="range"> ←横向亮度调节那样的可拉动条
<input type="number" min="1" max="10"> ←就输入数字的长条框，可同时定义最少输入量和最多输入量，框内还有上下键去调节输入数字的大小
<input type="data" min="2018-02-10"> ←输入日期，可定义最小日期
type=后面的类型还有很多，就不多说，自己查
<textarea>...</textarea> ←给用户输入多行的字符所用
下拉选择标签是 <select> <option>...</option> <option>...</option> <option>...</option> ....... </select>
<input list="元素名"/>
<datalist id="和上面相同的元素名"> ←可以用这个方法来进行用户选择输入的限制，将用户选择限制在option所给的范围内。
`...
⑥文本类的标签 关于引用的
1.<blockquote cite="这里内容是链接"> ←长引用，一般引用别人的一段话
<p>......（引用链接内的一些文字)</p>
</blockquote>
普通的是短引用 ←一般表示一个作品的名字和章节
例如<p>....<cite>...</cite></p>
<q>也是短引用，但是它是引用之前所引用过的内容才用 ←一般表示引用具体的内容
<code>用于代码，引用可长可短 <p><code>const</code></p> ←会用特殊（等宽）字体表示出来
<pre><code>....... </code></pre> ←引用多行代码时候、用会用特殊（等宽）字体表示出来
<strong>、<em>表示强调，<strong>表示很重要很紧急 而 <em>通常表示语气上比较重，重读部分
<em>会用斜体表示 <strong>会用加粗表示
例如<p>...<strong>...</strong>...<em>....</em>...</p>
E. 内容划分 ←还是看常见规范图，课ppt有。 页头一般放header里面，header一般放导航或者logo之类的，导航一般用nav这样标签表示。 一个页面里一般只有一个main元素，main里放主体部分。文章正文放article里（也可以没有article、博客一般有） aside一般是和内容相关但不直接属于内容页面。（文章推荐之类的） footer一般放版权信息什么的
F. 语义化： 元素、属性、属性值都有某些含义 ←这些含义就是语义 开发者应该遵循语义来编写html 要写什么内容就用什么标签，要正确的使用标签 lang属性表示内容所使用的语言
为什么强调语义化： 开发者写代码会多人维护，所以要规范代码编写，所以要让团队成员立刻get到就要规范代码编写 其次浏览器也要根据标签来在展示页面时起到作用 搜索引擎也会根据你html的关键词和排序来进行提取内容，所以可以在这方面规范语义进行优化。 屏幕阅读器也会优先读取html，这对于无障碍优化很重要。例如站在公交车上点击一个按钮是否容易也是一个很重要的服务优化。
所以语义化的好出： ←很重要。 ①代码可读性 ②代码可维护性 ③搜索引擎优化 ④提升无障碍性
→你要传达的是内容，而不是样式←
如何做到语义化： ①了解每个标签和属性的含义：mdm的文档（推荐）、w3c上的html5的规范 ②思考什么标签最适合描述这个内容 ③不适用可视化工具生成代码，就算用了，也要自己改。
