前端要关注的方面：美观、安全、功能、性能、无障碍、兼容、用户体验
前端技术栈：JavaScript(行为)、CSS(样式)、html(内容)
HTML是一种由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义，将文档结构化为逻辑块，并且可以将图片，影像等内容嵌入到页面中。
HTML元素
一个html元素的主要部分有：
<p>Hello World</p>
- 开始标签（Opening tag）：包含元素的名称，被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
- 内容（Content）：元素的内容，本例中就是段落的文本。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。
总之，整个元素即开始标签、内容、结束标签三部分组成的整体。
HTML语法
l 标签和属性不区分大小写，建议小写
l 空标签可以不闭合，如input、meta
l 属性值建议用双引号包裹
l 某些属性值可以省略，如required、readonly
html代码：
<!doctype html>标记html文件的版本，浏览器会根据这个决定页面的渲染模式
<html>文档中所有代码的根标签
<Head>页面源数据，保存html的格式、标题、编码等不需要告诉用户的内容
在页面加载完成的时候，HTML 文档中的头部是不会显示在 web 浏览器的。它包含了诸如页面的 <title>(（标题）、指向CSS的链接（如果你选择用 CSS 来为 HTML 内容添加样式）、指向自定义网页图标的链接和其他的元数据（描述 HTML 的数据，比如作者和描述文档的重要关键词）等信息。
<body>展示给用户的内容，包括图片、资讯等
DOM树
把html代码结构转换成树形结构，并根据顺序划分每级节点
html中用作文档分节的标签
h1~h6:一级到六级标题，浏览器默认样式，等级越后字体越小
<ol>(Ordered list):有序列表，根据顺序按1.2.3.4.…进行排序
<ul>(Unordered list):无序列表，默认使用圆点进行标记
<dl>(Description list):定义列表，可以设定子元素层级
Html中资源的标签
<a href=””>:超链接，点击之后会跳转到指定的链接
<img>:图片资源 -alt:不展示图片时用文本代替图片
<audio>:音频资源
<video>:视频资源
<input>:用户提供输入信息
-placeholder:无输入时显示的文本
-type:控件的类别，如文本框、滚动条、选择栏等
<textarea>:多行标签输入
<select>:下拉选项栏,选项内容为<option>
<datalist>:文本框输入时会显示下拉列表来快捷输入，选项内容为<option>
文本引用标签
<blockquote>:块级引用,可引用一整段文字
<cite>:用来标明引言的短引用，如一本书、一篇报告或其它出版的来源资料的引用
<q>:用来分离文本中的引语，定义一个短的引用
<code>:代码引用
<strong>:对重要的内容进行引用
<em>:语气上的引用，对字体本身的强调
结构：
Header:页头，给用户呈现的标题内容
Main:页面的主要内容，一个页面应该只有一个main元素
Aside:次要内容，主要摆放跟main相关的内容
Footer:页尾，放参考链接、版权信息、备案信息等
HTML的语义化
HTML中的元素、属性及属性值都有含义，即html的语义。编程人员需要清晰地传达内容给用户及其他开发者，因此需要使用正确的语义规范以编写html。
语义化可以增加代码可读性、可维护性、搜索引擎优化、无障碍性
编写HTML时需要考虑的受众
开发者->修改、维护页面
浏览器->展示页面
搜索引擎->提取关键词、排序内容
屏幕阅读器->所有用户，包括有视力障碍的用户
