一、前端三剑客

1.HTML

HTML为标记语言，非编程语言
自身不具备逻辑，遇到重复操作只能全部手写或复制
HTML由标签、指令、实体组成

标签：由<>包裹，以字母开头，可以结合合法字符，可以被浏览器解析的标记
指令：被<>包裹，以！开头的，可以被浏览器解析的标记

如 <! dcotype>** 、注释
实体：被 &;包裹的#开头的十进制

文档类型:规定该页面的标签遵循的html语法(h5)

		<!doctype html>

2.CSS

选择器:由标签/类/id单独或组合出现
作用域:{}内部区域
样式块:满足css链接语法的各种样式

<style>
	/*选择器zero 作用域{} 样式块color: red;*/
	zero {
		color: red；
		background-color: cyan;
		font-size: 100px
		/*css语法必须书写;
		最后一条样式可以省略*/
	}
</style>

3.js

BOM:js操作浏览器
DOM:js操作页面文档
ES:js语法(ECAMScript)

<script type="text/javascript">
	// js注释: 可以省略;(不建议)
	alert("你丫真帅");
</script>

二、第一个页面

1.基础模板

<!--文档类型；标签语法为h5 -->
<!-- h5语法特点 -->
<!-- 
	1.不区分大小写
	2.有很多系统标签，一般都具有语义
	3.可以随意定义自定义标签
	4.h5不支持空白字符
	5.提倡小写
 -->
<!DOCTYPE html>
<!-- html：文档根标签 -->
<!-- html没有明确规定缩进，但是为了美观性。严格缩进 -->
<html>
    <head>
        <meta charset="utf-8" />
        <title>第⼀个⻚⾯</title>
    </head>
    <body>

    </body>
</html>
<!-- 以上为最简易模板html>head+body -->
<!-- 一个页面只存在一个标准模板 -->
<!-- doctype必须出现在第一行 -->
<!-- 特殊：如果没有书写模板，浏览器解析会按‘自己心情’帮你添加模板

2.模板解读

DOCTYPE：指定⽂档类型，规定html标签语法
html：⽂档根标签，标注着⽂档(⻚⾯)的开始与结束
head：⽂档头标签，可以引⽤脚步⽂件、指定样式表、书写代码逻辑块、提供元信息
body：⽂档主体标签，包含⽂档所有⽂本与超⽂本内容
title：⽂档tag标题标签，设置⽂档tag的标题内容

3.标签

1.meta元标签

<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- SEO -->
<!-- 用于网络搜索的关键字和显示内容 -->
<meta name="keywords" content="培训、Python培训、IT培训、peixun" />
<meta name="description" content="老男孩培训机构" />
<!-- 移动适配 -->
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'>

2.link链接标签

<!-- 外联样式表 -->
<link rel="Stylesheet" type="text/css" href="" />
<!-- tag图片 -->
<link rel="icon" type="image/x-icon" href="https://common.cnblogs.com/favicon.ico">

三、常用标签

1.无语义标签

<!-- div：最常用的标签，没有之一 -->
<!-- span：最常用的纯文本标签 -->
<div></div>
<span></span>

2.常用语义标签

<!-- 标题:h1~h6 -->
<!-- h1标签较经常出现，作为页面最大title形式出现，且一个页面只出现一次 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
......
<h6>六级标题</h6>
<!-- br:换行 -->
<!-- hr:分割线 -->
<br>好<br>的<br>
<hr>呵<hr>呵<hr>

3.文本标签

<!-- i:很常用的标签，一般不作为斜体文本使用，作为字体图片使用 -->
<i>斜体</i>
<em>斜体的方式强调</em>
<b>加粗</b>
<strong>以加粗方式强调</strong>
<!-- p：段多标签具有具体区域，成段出现，段落之间存在段落间距 -->
<p>段落标签</p>
<!-- pre原样文本标签：会保留所有字符，原样显示 -->
<p>123   456        789</p>
<pre>123   456        789</pre>

<!-- ins：具有下划线 -->
<ins>插入的文本</ins>
<!-- del:具有删除线 -->
<del>删除的文本</del>
<!--上角标sup：10的平方  -->
10<sup>2</sup>
<!--下角标sub：水分子 -->
H<sub>2</sub>O
<!-- 右标：小号字体 -->
你<small>我</small>他
<!-- pinyin -->
<ruby>
    牛啊<rt>niua	</rt>
</ruby>

四、标签分类

1.单双标签

<!-- 标签都需要闭合 -->
<!-- 单标签：闭合操作在本身的尾部，并且可以省略(自定义标签要自我标注闭合)-->
<!-- 单标签一般具有特殊功能，单标签主功能 -->
<hr>
<!-- 双标签：闭合操作由对应的结束标签完成，也可以省略(强烈不建议) -->
<!-- 双标签一般具有文本(普通文本与超文本，双标签主内容) -->
<div></div>

2.行块标签

<!-- 自定义标签均属于内联标签 -->
<!-- 行标签：内联标签，不具备自身宽高，通常同行显示-->
<span>我是span</span>
<span>我是span</span>
<!-- 块标签：块级标签，具备自身宽高，通常换行显示-->
<div>我是div</div>
<div>我是div</div>

3.单一组合标签

<!-- 单一标签：单独出现，展示具体的功能-->
<!-- 组合标签：必须组合出现，协同下才能显示相应的内容与效果-->
<ruby>
    组合标签<rt>zuhebiaoqian</rt>
</ruby>