这是我参与【第四届青训营】笔记创作活动的第1天
嗨害嗨，这里是因比赛与前端结缘的非科班练习生bf,今天来简单整理一下青训营“前端与HTML”的相关内容，废话不多说，开始整活！ヾ(≧ ▽ ≦)ゝ*
一、前端应该关注哪些方面？
课上老师提到了以下方面：功能、美观、无障碍、安全、性能、兼容、体验
我的一些理解：
1、功能：
一个页面打开，里面肯定会支持很多种功能，比如：点击链接可以跳转到对应页面、搜索相关内容可以找到对应的资源等等，多种功能共同形成了这个大的项目。
2、美观：
页面美观可以更好的吸引并留住用户，试问你也不希望自己盯着一个只有黑白色、没有任何排版的页面发呆吧。
3、无障碍：
即无论什么人，进入到这个页面都能正常的获取到页面中的信息。
4、安全：
“道路千万条，安全第一条”，安全肯定是重中之重的存在，万一你在页面登录了一个账号，转手就被别人轻而易举的黑走了，那这个网页就太捞了。
5、性能：
性能好能够直接提升用户的体验
6、兼容：
即能在不同的浏览器里面正常的打开并能够正常的展示其内容、使用其功能。
7、体验：
作为跟用户进行直接交互的存在，肯定得要让用户有很好的体验，体验不好的话谁还光顾这个页面呢?
二、HTML是啥？
HTML: Hyper Text Markup Language，即超文本标记语言，是用来描述网页的一种语言
超文本：即图片、标题、链接、表格等内容
标记：需要使用标记标签来描述内容。
举个栗子：
<h1>文章标题</h1>
注意：
HTML不是一种编程语言
三、HTML结构
上段小代码：
<!DOCTYPE html>:
- 文档类型
- DOCTYPE用来链接一些HTML编写守则
<html>:
- 根元素
- 包含整个页面的内容
<head>:
- 该元素的内容对用户不可见
- 其中包含例如面向搜索引擎的搜索关键词、页面描述、CSS样式和字符编码声明等
<body>:
- 包含期望让用户在访问页面时看到的内容
- 包括文本、图像、视频、游戏、可播放的音轨或其他内容
四、内容划分
<header>:
- 用于展示介绍性内容
- 通常包含一组介绍性的或是辅助导航的适用元素
- 可能包含一些标签元素，也可能包含其它元素，如Logo、搜索框、作者名称，等等
<nav>:
目的是在当前文档或其他文档中提供导航链接
<article>:
- 表示文档、页面、应用或网站中的独立结构
- 意在成为可独立分配的或可复用的结构
<section>:
- 表示 HTML 文档中一个通用独立章节
- 没有更具体的语义元素来表示
- 一般来说会包含一个标题
<aside>:
- 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响
- 通常表现为侧边栏或者标注框（call-out boxes）
<footer>:
- 表示最近一个章节内容或者根节点元素的页脚
- 一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息
五、语义化
语义化：HTML中的元素、属性及属性值都拥有某些含义
语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
注意：标签最好是拿来传达内容，而不是样式
举个栗子:
想要实现一级标题的效果，我们就可以直接写成
<h1>我是一级标题</h1>
我写成如下这种，同样能实现这个效果
<p style="font-size: 32px;"><strong>我是一级标题</strong></p>
但作为标签而言，我们要做的仅仅只是告诉开发人员这一块内容在布局中的作用即可，比如说你是一级标题，就用<h1></h1>，你是段落，就用<p></p>,不要为了实现样式就乱用标签，导致代码阅读性降低以及后期维护的难度加大
可能这就是为什么H5新增了语义化布局标签的原因吧,可以不用在做导航栏的时候写<div class="nav"></div>了，让开发更加方便
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
未完待续...
以上就是本次的整理了，我们下次再见，拜了个拜(。・∀・)ノ
