前端概念：
广义：用户能看见并且交互的展示界面
狭义：运行在浏览器上的页面
学习的语言：
HTML5 =>（h5架构 + CSS布局 + JavaScript逻辑）
网页编写 | 移动端编写 | （客户端编写）
前后台分离 开发方式 =>通过接口完成数据交互 => 后台可以千千万，前端就是h5
一：HTML：超文本标记语言
学习HTML的目的：完成页面结构的搭建（什么时候用什么标签）HTML属于标记语言：标记语言为非编程语言，不具备编程语言具备的程序逻辑HTML三大组成：标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记 ???eg：系统标签，自定义标签指令：被尖括号包裹，由！开头的标记。 ???eg:<!doctype html> <!-- -->转义字符：被&与;包裹的特殊字母组合或#开头的的十进制数。 ???eg:< > ???
1.1标签
标签的概念：被<>包裹由字母开头，可以结合合法字符（-|数字），能被浏览器解析的特殊符号标签具有特定的功能：换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频注意：标签都有头有尾，用/来标识标签的结束（用来标识尾）
1.2页面
<!-- html的注释: 一个html页面有且只有一个页面模板 --><html> ???<head> ???????<!-- 字符编码 --> ???????<meta charset="utf-8"> ???????<!-- 页面标签的标题 --> ???????<title>页面</title> ???????<!-- 内部或外部的css样式 | js脚本 | 页面其他设置 --> ???</head> ???<body> ???????<!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... --> ???????<!-- js脚本 --> ???</body></html>
1.3常用标签
目的：使用标签的语义与功能 | 完成页面架构的搭建（div）1.div：“三无”，无语义，无功能，无样式，完成页面架构的搭建2.h1：页面总标题，代表页面“整体含义”，出现一次即可3.列表：ul>li*54.p:段落标签5.img：图片标签，src（数据源），alt（资源加载失败的文本提示）6.a：超链接标签，href（超链接地址），target（跳转方式_self | _blank:_self是在本页面跳转，_blank是跳转打开新页面），锚点7.常用的文本类标签：span ,i (斜体), b （加粗）
二：CSS层级样式表
学习CSS的目的：完成页面布局（还原设计稿）三大组成部分： ???选择器：由标签、类、ID 单独或组合出现 ???作用域：一组大括号包含的区域 ???样式块：满足CSS连接语法的众多样式
2.1选择器
?用来将CSS与HTML建立关联的桥梁，称之为CSS选择器 ?将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率 ?本质：就是页面标签的各种名字
2.2CSS三种引入方式
1.行间式 ???i)写在标签的style属性中 ???ii)属性与属性值间用：赋值 ???iii)属性与属性之间用;隔开2.内联式 ???i)写在style标签中（style标签一般出现在head标签中） ???ii)用选择器与HTML建立连接 ???iii)样式块书写在作用域内3.外联式 ???i)CSS样式完全与HTML文件脱稿，形成单独的.css文件，样式书写在.css文件中 ???ii)用选择器与HTML建立连接 ???iii)样式块书写在作用域内 ???iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径">注：选择器的应用场景在内联式与外联式总结：开发：最常用的是外联式，内联与行间辅助样式布局测试：内联式，可读性最强，且解耦有复用性行间的应用场景：最简单粗暴，js操作的样式都是行间式
HTML和CSS
原文地址：https://www.cnblogs.com/liuxiaolu/p/10273598.html