目录
一、前端三剑客
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>