前端
什么是前端
前端即网站前台部分，运行在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>前端三剑客 页面模板 HTML标签
原文地址：https://www.cnblogs.com/layerluo/p/9676717.html