前端三层：HTML（用来制作网页的一种标记文件）、CSS、JavaScript
纯文本格式：.txt，只保存文字（更小，利于传输；可通过更改扩展名更改保存格式；可用任意编辑器进行更改；html等都用这个）
富文本格式：.rtf，可保存文本得样式、图片~
一个中文字符占四个字节
功能：搭建网页基本结构，添加语义，描述超文本内容
概念：超文本：可链接到另外一个文件
标记：（HTML tag），有特殊书写规范，实现特殊语义，在浏览器中不显示
标签：
（一级标题）（不负责样式）
（二级标题）
~
（段落）
（图片）
规范版本【w3c：万维网联盟（专门发布和维护互联网的规范和标准）（HTML4.0，1997年，引入css）】
标签语法：
1.标签名必须书写在一对尖括号内部<>(eg:)
2.单标签：
或者
双标签：
（/是关闭符号）
HTML元素：开始标签和结束标签之间的所有内容（包括：开始标签、元素内容，结束标签）
元素内容：
1.可以是纯文本，也可以是其他HTML元素。（嵌套：
）
2.可以是多个其他元素（兄弟级关系）（单标签无法嵌套）
标签级别
1、容器级：没有任何限制（h1、div等）
2、文本级：只能存文字或类似文字的内容，不能放容器级标签（p）
元素特性
1、对空间、换行、缩进等没有任何加载效果的影响
2、空白折叠现象：无论换行、缩进、空格多少，加载出来只显示一个空格
属性规范
1、书写位置：开始标签或单标签之内，与标签名之间用空格分隔
2、属性名key、属性值value。属性名和属性值之间的写法叫键值对写法。k="v"
（
）
3、一个标签内可以有多个属性，用空格隔开，都是k="v"
（
）
4、一个标签里的多个属性值，属性值之间用空格隔开
（
）
ctrl+shift+X（扩展）
新建文件夹（ctrl+N）；保存格式，如.html、.css、.js）；编写程序
基本结构：
基本骨架：<body>
:页面标题，提高搜索引擎排名，内部内容显示搜索结果的标题内容，默认的收藏夹网页标题，尽量简洁
DTD：文档类型声明<!DOCTYPE html>
命名空间：在开始标签设置命名空间xmlns属性
（xml：传输和存储数据xmlns：用于该属性所在元素的所有内容）
（语言：xml:lang="en"表示为英文；lang="zh-cn"表示为中文）
字符集：<head>标签内的<meta>标签通过http-equiv属性定义了网页所使用的字符编码，编写和保存的编码要一致
（char：character，字符 set：集合）
（国际通用字库：UTF-8,一个汉字为三个字节，1024字节=1kb；中文国标字库：gb2312、gbk，一个汉字为两个字节）若没有加载速度要求，用utf-8，中文多且要求快，用中文的
注释（ctrl+/）
**标题**：<h1>-<h6>，从大到小，都是容器级标签，标题之间不能嵌套，一个页面中只出现一次h1。（快捷键：h$*6，出现为h1~h6的标签，其他标签也同理可用）
**段落标签**：prograph<p></p>,双标签，解释标题，只放文本，一个标签内的内容属于同一个段落。
换行标签：<br />（breaking），换行符，单标签，强制换行
eg：<p>~~~<br />~~~</p>
文本格式化：用标签包裹要修饰的文本（b：加粗，i：斜体，u：下划线，ins：下划线，em：斜体效果，small：小号字，big：加大字号，strong：加粗，sub：下标字，sup：上标字，del、s、strike：删除，中间加横线）
**图像标签**：<img>,单标签，特殊的文本，jpg、png、gif
常用属性：（src：查找路径<img src=“~”>,相对路径：同级查找，文件名+后缀格式；子级查找：，文件名/文件/~；上级查找：上级文件表示为.../。绝对路径：
1·从盘符出发，但文件夹中的路径斜线是反着的，可将图片拖到网页中，复制路径即可。
2·从网上搜索到的图片，右键点检查，复制里面的src路径即可）
width：宽度（以px为单位数值）
height：高度
border：边框，设置边框宽度数值（属性可通过css设置）
title：鼠标悬停时的提示文本
alt：若路径查找错误，替换文本
**音频视频标签**：（音频）<audio>，格式为mp3、ogg、wav，开始暂停播放，添加属性标签控制台controls="controls"，（视频）<video>,格式为mp4、ogg、webm
**超级链接标签**：<a>,anchor，双标签，锚的意思，跨页面跳转；页面内跳转。
href属性：hyperyext reference，超文本引用，规定链接的目标地址
target属性：定义超链接在何处显示，_self原窗口显示超链接，_blank显示在新窗口
title属性：鼠标悬停时的提示文本
**页面内锚点跳转**：
1、设置锚点：找到锚点，添加id属性（以字符开头，需要区分大小写）
2、在目标位置添加一个空的<a>标签，只设置name属性，设置方法和id一样，是唯一的
3、锚点的链接设置，在需要点击的地方设置<a>标签，属性值设为：#id属性值或者#+a的name属性值
**跨页面锚点跳转**：
1、设置锚点：同上
2、锚点的链接设置，添加超级链接时herf属性要改，属性值写为页面的路径#id
（<a herf="~超链接~#~">~</a>）
**列表**
【1】无序列表：<ul>unordered list ，定义大结构；<li>list item ，定义某一项。
<ul><li>是嵌套关系（快捷键：ul>li），一个列表中可以有任意各列表项
1、ul内部只能嵌套li标签，li不能单独定义
2、li是容器级标签，li没有顺序先后之分
【2】有序列表：<ol>ordered list 定义大结构；<li>，同上
<ol><li>是嵌套关系（快捷键：ol>li）
1、<ol>标签内部可嵌套任意多个<li>标签
2、ol内部只能嵌套li标签，li不能单独定义
3、li是容器级标签，可嵌套另一个ol标签，li标签有先后顺序之分
【3】定义列表：<dl><dt><dd>(<dl>内部只能嵌套<dt><dd>,<dt><dd>是同级关系）
（快捷键dt+dd，表示同级标签）
dl：definition list，定义大结构
dt：definition term，定义一个主题或术语
dd：definition description，定义解释前面的主题
【4】布局标签：
div：division，分割、区域、跨度，大盒子，统一管理，辅助布局双标签，容器级标签
span：小区域，小盒子，双标签，容器级标签，不改变整体的前提下调整局部
**表格**
1、基础：至少三个标签
（<table>大结构；<tr>table rows行；<td>table data一行内的单元格）
（table>tr>td.）
<table>属性：border属性（表示像素值），单元格之间有默认空隙，导致出现双线边框，需设置style属性（border-collapse）其中collapse表示边框塌陷
（<table border="1" style="border-collapse:collapse;">）
表头单元格：<th>,对应每行多少单元格
2、合并单元格<th><td>
属性：rowspan，上下合并；colspan，左右合并（属性值都是数字）
（先列出行tr；再添加每一行td或th；划分行时，定边对齐的属于同一行；所有行和列写完后再进行跨行跨列，属性值个数参考最小的单元格数）
3、表格分区
<table>内的四个分区标签，都是双标签，四个分区可选择性进行组合。
1、caption：文字标题
2、thead：table head，表头，内部嵌套tr>th
3、tbody：table body，表格主体，内部嵌套tr>td
4、tfoot：table foor，表格页脚，内部嵌套tr>td
（先进行分区；再划分行；跨行跨列合并）
**表单**
组成：表单域、表单控件（表单元素）、提示信息
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息（<form>,双标签，容器级标签）
提示信息：说明性的文字，提示用户进行填写和操作
表单控件：具体的表单功能项，如单行文本输入框、密码输入框等
eg：<form action="xxx.php"method="post/get"name="message">
</form>
（提示信息及表单控件的书写位置）
<input>标签：单标签，特殊的文本
（常用属性：type{text为单行文本输入框<input type="text" value="默认输入文本" >
；password为密码框<input type="password">输入内容会做掩码处理
；radio为单选框<input type="radio" name="sex" />男
<input type="radio" name="sex" />女，需要设置相同name属性达到互斥关系
；checkbox为复选框<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />代码
<input type="checkbox" name="hobby" />运动，最好也设置相同的name属性
；checked为默认选中设置<input type="radio" name="sex" checked="checked" />男，则男直接被选中
；按钮标签1 button 不同按钮，点击没有反应
；按钮标签2 reset 重置按钮，恢复为默认，不提交
；按钮标签3 submit 提交按钮，提交数据到后台并重置清空信息
；按钮标签4 image 图片按钮 和提交按钮效果一样，点击的图片要用src查找正确路径
；file 文件上传
；multiple 可上传多个文件<input type="file" multiple="multiple" />}）
<textarea>，双标签，标签之间为默认文字
属性：rows：行，属性值是数字，表示文本框显示的最大行数
cols：列，属性值是数字，表示在出现滚动条之后，一行最大字节数（一个汉字按2字节计算）
（<textarea cols="30" rows="10">默认输入文字</textarea>）
<select>：选择，定义下拉菜单整体结构。
<option>：选项，定义下拉菜单的每一项。
两个标签都是双标签
（select>option，option可以有任意多项）
默认情况是选择第一项
属性selected，更改默认选项，属性值为selected
<optgroup> 分组管理，不能被点击，可以设置label属性
（select>optgroup>option）
（<select> <optgroup label="国内"> <option>广州</option><option selected="selected">北京</option> </optgroup> </select>）
<label>标签，绑定内容扩大触发点范围
方法一：1、设置id属性
2、给需要绑定的内容用<label>标签包裹
3、给<label>标签加上for属性，属性值为绑定元素的id属性值
<input type="checkbox" name="hobby" id="sport" />
<label for="sport">运动</label>
方法二：直接将标签和表单元素进行嵌套
<label><input type="radio" name="sex" /></label>
css基础语法
层叠式（加载特性：层叠性、继承性）样式（定义如何显示HTML元素）表，静态地修饰网页
css规则：由选择器(p)和一条或多条声明{}两部分组成
书写方式：
1.内联式（行内式，在标签内的style属性中写，缺点是没有完全脱离HTML，只能给一个标签使用）
2.内嵌式（写在style标签中，title>style，style标签属性为type，属性值是text/css<style type="text/css">p{font-size:30px;}，多个标签可以用一段代码设置相同样式，但不能用在多个文件中，没有完全脱离HTML）
3.
外联式（写在单独的扩展名为.css的文件中，必须引入到HTML文件中，才能加载，用标签，属性有三个，rel="stylesheet";href="css文件路径";type="text/css"按纯文本形式加载，HTML5中type可省略，多个页面可同时显示，可插入多个文件，可以分层设置）
4.导入式（在内部或外联式样式表内部，导入外部的.css文件，用@import url引入@import url(css/01.css);div{border-color:#00f;},和外联式基本相同，但因为式先加载HTML结构，再加载css样式，如果网速较慢，导致出现没有css的效果，会降低用户体验感)
css样式规则（以内嵌式样表为例）：
1、css代码必须在标签内部的标签内
2、在设置样式前，必须用选择器选中标签
3、属性名和属性值写法k：v；
4、每个选择器添加的样式属性必须在{}内
5、所有样式要在{}内部罗列
6、注释语法：/注释内容/ （快捷键：ctrl+/）
7、大写小写都可以，建议用小写
ps：每条属性后面都要加“；”，不换行不影响；空格规范（选择器和大括号之间保留一个空格，冒号后面和属性值前面保留一个空格）
css样式格式：
1、展开格式：有空白换行缩进，可读性强，便于调错
2、紧凑格式：没有空白换行缩进上传服务器时使用，压缩文件大小，利于传输
文字：
color：设置颜色，k=color，v=颜色名或颜色值（rgb颜色写法：rgb（0，0，0））
font-family：综合属性，字体设置，k=font-family，v=字体名称（包裹在一堆引号中，可用多个，浏览器中只加载一种字体，从前到后查找）（常用中文字体【宋体：SimSun 微软雅黑：Microsoft Yahei】 英文字体【Arial consolas】,若不设置，浏览器中有自己的默认字体）
font-size：文字大小，chrom最小支持8px，IE最小支持1px，两个浏览器默认为16px，建议最小是12px，普遍用14+px，尽量用偶数字号
实体化属性：
width：px属性值，宽度
height：px属性值，高度
background-color：颜色名或值，背景颜色
选择器：选择要添加样式的HTML标签的一种方法、模式
【基础选择器】
1、标签选择器：书写为标签名，选择范围是HTML中所有同名标签，会忽视嵌套关系
2、id选择器：书写为#id属性值，选择范围只有一个标签，必须以字母开头，区分大小写，每个id属性值是唯一的，不能和其他id同名
3、类选择器：书写为.class属性值，必须以字母开头，区分大小写，属性值可以和其他的class相同，一个class属性可以有多个属性值，值之间用空格分隔，都可以选中一个标签（特殊应用：原子类【提前设置一些类名，每个类选择器后面加一条css样式属性，后期不需要多次书写，只要将对应的类名嫁给需要的标签即可】）
4、通配符选择器：通过特殊符号选择页面内所有标签，书写方式为*，实现全选，选择效率低
【高级选择器】
5、后代选择器（包含选择器）：通过嵌套关系选择元素，书写方式是空格表示后代，基础选择器中间用空格分开，空格前面的选择器选中的标签是后面选择器选中标签的祖先级，缩小选择范围，必须满足所有后代关系，选择效率更高
6、交集选择器：通过一个标签上满足所有基础选择器的需求去选择标签，书写方式为在基础选择器上进行连续书写，如果有标签选择器参与交集，必须写在开头，选择范围要满足所有基础选择器需求，常见的是标签与类的交集
7、并集选择器：书写方式是将多个选择器中间用“，”隔开，最后一个不加“，”，选择范围是所有单独选择器选中的标签的并集集合，替换通配符选择器
继承性：继承祖先级的部分样式，只有文本可以继承，在控制台可以检查
层叠性：
1、权重高的叠权重低的，范围越大权重越小。【*<标签选择器<类选择器<id选择器（基础选择器）】；比较id个数，类的个数，标签的个数（高级选择器）
2、如果选择器个数相同，后写的层叠先写的
