前端三剑客 页面模板 HTML标签
前端
什么是前端
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。
前端开发技术栈
HTML
- 超文本标记语言
- 负责完成页面的结构
- 文件后缀：.html .htm
"超文本"指的是页面内可以包含图片、链接、程序等非文字元素
CSS
- 级联样式表
- 负责页面的风格设计，样式、美观
- 文件后缀：.css
JavaScript
- 浏览器脚本语言，可以编写运行在浏览器上的程序
- 负责编写页面特效、调用浏览器的API（BOM）、操作改变页面内容（DOM），从后端获取数据（Ajax），渲染页面等
- 文件后缀：.js
前端三剑客
HTML
标记语言
标记语言为非变成语言，不具备变成语言具备的程序逻辑，遇到重复操作只能全部手写
组成
html为前端页面的主体，由标签、指令、转义字符（实体）组成
标签
标签：由<>包裹，以字母开头可以结合合法字符可以被浏览器解析的标记（纯字母或字母与数字组合）
<zero>html</zero>
<a1>html</a1>
<a_1>html</a_1>
指令
指令：被<>包裹，以！开头的可以被浏览器解析的标记
<!DOCTYPE html>
<!--html注释-->
转义字符
被&与； 包裹的特殊字母组合或#开头的十进制数
 ； <；
CSS
CSS为前端页面的样式，由选择器、作用域与样式块组成
选择器
选择器：由标签/类/id单独或组合出现
<style>
/*选择器 zero*/
zero{
color : red;
}
</style>
作用域
{}内部区域
<style>
/*作用域{}*/
zero{
color : red;
}
</style>
样式块
满足css链接语法的各种样式
<style>
/*样式块color：red;*/
zero{
color : red;
}
</style>
JS
实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑
BOM:js操作浏览器
DOM:js操作页面文档
ES:js语法（ECAMScript）
<script type="text/javascript">
// js注释：可以省略; 但不建议
alter("我真帅");
</script>
页面
模板
<!DOCTYPE html>
<html>
<html lang="zh-cn">
<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="name,key,aa,搜索关键词"/>
<meta name="description" content="网站相关内容">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
link(链接标签)
外联样式表
<link rel="stylesheet" type="text/css" href="style.css">
文档tag图标
<link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico">
style(脚本标签)
<script type="text/javascript"></script>
HTML常用标签
无语义标签
<div></div>
<span></span>
常用语义标签
<hn>标题</hn>
<p>段落</p>
<pre>原文本</pre>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!-- br换行 hr分割线 -->
<br>好<br>的<br>
<hr>呵<hr>呵<hr>
文本标签
<!-- i：很常用的标签，一般不作为斜体文本使用，作为字体图片使用，原因写法简单 -->
<i>斜体，</i>
<em>以斜体方式强调</em>
<b>加粗</b>
<strong>以加粗的方式强调</strong>
<!-- p：段落标签具有具体区域，成段出现，段落之间存在段落间距 -->
<p>段落标签</p>
<p>段落标签</p>
<p> 123 4242 4232</p>
<!-- 原样文本标签：会保留所有字符，原样显示 -->
<pre>大萨达 请问 1232 4 4 </pre>
<!-- 样式具有下划线 -->
<ins>插入的文本</ins>
<!-- 样式具有中划线 -->
<del>删除的文本</del><br>
<!-- 应用 -->
¥ 998 <del>1999</del><br>
<!-- 上角标和下角标 -->
<!-- 10的平方 -->
<span>10<sup>2</sup></span><br>
<!-- 水分子 -->
<span>H<sub>2</sub>O</span><br>
<!-- 右标：小号字体 -->
<span>你很帅<small>真的是帅</small></span><br>
<!-- 拼音 -->
<ruby>
牛逼<rt>niǔ bī</rt>
</ruby>
其他标签
<section></section> 块
<small></small> 小号字体
标签分类
单双标签
<!-- 1.单双标签 -->
<!-- 标签都需要闭合 -->
<!-- 单标签：闭合操作在本身的尾部，并且可以省略（自定义标签要自我标注闭合）==》 但标签一般具有特殊功能，但标签主功能 -->
<!-- 双标签：闭合操作有对应的结束标签完成，也可以省略（强烈不建议）==》双标签一般具有文本（普通文本与超文本），双标签主内容 -->
<br>
<div>123<!-- </div> -->
<div>456</div>
<!-- </div> -->
行块标签
<!-- 2.行块标签 -->
<!-- 行：内联，不具备自身宽高，通常同行显示 -->
<!-- 块：块级，具备自身宽高，通常换行显示 -->
<!-- 自定义标签均属于内联标签 -->
<!-- span{我是span$}*2+div{我是div$}*2 -->
<span>我是span1</span>
<a href=#> hello </a>
<div>我是div1</div>
<p> p标签</p>
组合标签
<!-- 3.组合标签 -->
<!-- 组合标签必须组合出现，协同下才能显示产生相应的内容与效果 -->
<ruby>
你真棒<rt > <h2>J</h2> <h2>8</h2> </rt>
</ruby>
