今日内容：
1.前端概述
2.前端三剑客
3.页面基本结构
4.常用标签
5.标签分类
1.前端概述与前端三剑客
前端即⽹站前台部分，运⾏在PC端，移动端等浏览器上展现给⽤户浏览的⽹⻚。随着互联⽹技术的发 展，HTML5，CSS3，前端框架的应⽤，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动 效设计，给⽤户带来极⾼的⽤户体验。 前端技术⼀般分为前端设计和前端开发，前端设计⼀般可以理解为⽹站的视觉设计，前端开发则是⽹ 站的前台代码实现，包括基本的HTML和CSS以及JavaScript
广义前端：所有用户可以直接看见并交互的界面
狭义前端：浏览器上运行的用户交互界面
前端三剑客：
HTML:
1.超文本标记语言Hyper Text Markup Language
2.负责完成页面的结构
3.文件后缀：.html .htm
CSS:
1.级联样式表 Cascading Style Sheet
2.负责页面的风格设计，样式，美观
3.文件后缀：.css
JavaScript：
1.浏览器脚本语言，可以编写运行在浏览器上的程序
2.负责编写页面特效、调用浏览器的API（BOM）、操作改变页面内容（DOM），从后端获取数据（ajax）,渲染页面等
3.文件后缀：.js
总结：
HTML相当于一个人的骨架结构（网页结构），
网页内容就是人的血肉（网页内容），
CSS就是套上人皮，加上衣服（网页样式、风格），
JavaScript是给人赋予了灵魂（用户交互）。
2.页面基本结构
页面基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第⼀个⻚⾯</title>
</head>
<body> </body>
</html>
页面基本结构解读：
DOCTYPE:制定文档类型，规定HTML标签语法
html:文档根标签，标注着文档（页面）的开始与结束
head:文档头标签，可以引用脚本文件、制定样式表、书写代码逻辑块、提供元信息
body:文档主体标签，包含文档所有文本与超文本内容
title：文档tag标题标签，设置文档tag的标题内容
meta(元标签)
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">
<meta name="description" content="80字以内的⼀段话，与⽹站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no"
/>
meta:可以设置字符编码（charset = “”）、SEO(name=”keywords”、name=”description”)、移动适配(name=”viewport”)
link（连接标签）
<link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" />
⽂档tag图标
<link rel="shortcut icon" type="image/x-icon"
href="http://www.baidu.com/favicon.ico" rel="external nofollow" />
link:连接标签（外连接样式表、文档tag图标）
style（样式标签）
<style></style>
style:样式标签（内联样式表）
script（脚本标签）
<script type="text/javascript"></script>
script:脚本标签
3.常用标签
无语义标签：
<div></div> 最常用的标签，没有之一
<span></span> 纯文本标签 常用语义标签
<h1></h1> 标题标签
<p></p>段落标签
<pre></pre>原生显示标签
<br>换行标签
<hr>分割线标签 文本标签
<i></i>斜体标签
<em></em>强调斜体标签
<b></b>粗体标签
<strong></strong>强调粗体标签
<del></del>删除标签
<sub></sub>上标标签
<sup></sup>下标标签
<ruby>拼音<rt>pinyin</rt></ruby>组合标签给中文加上拼英 其他标签
<section></section>块
<small></small>小号标签
4.标签分类
<!-- 1.单双标签
标签都需要闭合 -->
<!-- 单标签 ：闭合操作在本身的尾部，并且可以省略（自定义标签要自我标注闭合）
单标签一般具有特殊功能，单标签主功能-->
<!-- 双标签 ：闭合操作有对应的结束标签完成，也可以省略（强烈不建议）
双标签一般具有文本（普通文本与超文本），双标签主内容-->
<hr>c <div>123</div><!-- 2.行块标签 -->
<!-- 行标签:内联，不具备自身宽高，通常同行显示 -->
<!-- 快标签：快级，具备自身宽高，通常换行显示-->
<!-- 自定义标签均属于内联标签 -->
<!-- span{我是span$}*2+div{我是div$}*2 -->
<span>我是span1</span>
<span>我是span2</span>
<div>我是div1</div>
<div>我是div2</div><!-- 3.单一组合标签 -->
<!-- 组合标签必须组合出现，协同下才能显示产生相应的内容和效果 -->
<ruby>
好的<rt>haode</rt>
</ruby>
