前言
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
今天主要学习了前端中HTML相关的一些知识，包括有：
- 前端要解决哪些问题？
- 什么是HTML？
- HTML语义化和文档结构是什么？
一. 前端概述
前端包括有：
- 人机交互
- 跨终端
- Web技术栈
而Web技术栈又可再分：
- HTML、CSS、JavaScript
- 网络协议
- 服务器端
前端所关注的点，也是在开发时候需要注意的地方：
- 功能、兼容、安全、美观、性能、无障碍
二. HTML简介
-
什么是HTML？
HTML全称Hyper Text Markup Language，即超文本标记语言，它由一系列元素构成，用来描述网页的骨架结构，告诉浏览器显示哪些内容。但只有HTML不够美观也不能交互，所以需要加上CSS和JavaScript才能基本上构成一个完整的网页。
-
什么是元素？
一般来说，一个元素的主要形式：
<起始标签> ...元素内容... < /结束标签>举个例子，
<p> 这是一个p标签 </p>，它的作用是在网页中显示一段话
这里的<p>是开始标签，</p>是结束标签，夹在中间的是元素的内容。当然，上面这个元素由双标签构成，除此之外还有只包含单个标签的元素
如，<br>，作用是换行。关于元素，更多需要知道的：
- 元素可以嵌套
- 元素可分为块级元素和内联元素，它们的区别是块级元素会自动换行
- 不是所有元素都含有开始标签，内容，结束标签
-
什么是属性？
属性提供了元素的附加信息，其结构为：
属性名="属性值"如，
<img src="mydog.jpg" alt="A photo of my dog.">
其中的src和alt就是属性，前者指示跳转的URL，后者是图片加载失败时显示的替代文本HTML标签在这里就不必记叙了，看过视频知道哪几个常用、知道了语法和用法，其余可自行查询文档来扩展，这里推荐：developer.mozilla.org/zh-CN/
三. HTML页面结构
基本的HTML结构如下图所示：
下面依次介绍：
<!DOCTYPE html>： 声明文档类型<html></html>：包裹了整个页面，是根元素<head></head>：文档头部，其中的title标签指明了网页的标题，并不显示在页面内<body></body>：文档主体，包含了页面内的所有内容，例如文本、视频、音乐
四. 语义化标签和文档结构
在HTML5中新增了语义化标签
<header>：页眉。<nav>：导航栏。<main>：存放主内容。主内容可包括众多子字段，如<article>、<section>和<div>等元素。<article>：存放具有独立意义的文章或帖子，与<section>可以是你中有我，我中有你。<section>：是内容的主题分组，通常带有标题，也可组织页面按照功能分块<aside>：侧边栏。<footer>：页脚。
文档大致如下图所示：
使用语义化标签有诸多好处：
- 开发者-修改、维护页面
- 浏览器-页面结构
- 搜索引擎-提取关键字、排序
- 屏幕阅读区-识别、查询
