1. 三大标准
一个网页是由三大语言去组成的一个网站。
u 结构标准
HTML
HTML负责的是网页的结构，好比人的骨骼。
u 表现（样式）标准
CSS
CSS负责网页端美化。好比人的化妆师
u 行为标准
JavaScript
JS负责与后端进行数据交互。页面的交互效果
Edge
2. 单双标签
标签有些是单标签，没有封闭的。
有些是双标签的，有封闭的。。
单：
<br>
双：
<div></div>
<span></span>
索引
<a href=’’></a> 可以加上属性target=“_blank”保留原来的网页不被覆盖
3. 常用的特殊符号
空格符：
左尖括号：<
右尖括号：>
4. 几个功能标签
加粗：<b></b> <strong></strong>
倾斜：<i></i> <em></em>
下划线：<u></u> <ins></ins>
删除线：<s></s> <del></del>
背景图片：backgroup：url（）加上可不加 repeat-x水平平铺/-y垂直平铺/no-repeat不平铺 center垂直居中 pink背景颜色
红色部分代表强调语气：更加容易让搜索引擎搜索到
5. 图片标签
网页只能接受的图片格式：jpg png gif
6. 居中的方法
文本垂直居中height:40px;line-height:40px;
行高的值等于盒子的高度就能做垂直居中
文本水平居中：text-align：center
框居中：margin：0 auto
7. 今日CSS属性
字体颜色：color:red;
背景半透明颜色 background：rgba(0,0,0,0.5)
字体大小：font-size:30px;
宽高：width:30p;height:30px;
边框：border:1px solidred; border-top:1px solid blue;
行高：line-height:30px;
首行缩进：text-indent:2em; 1em代表一个中文字
加粗否：font-weight:bold/normal; bold加粗 normal不加粗
下划线：text-decoration:underline/none; underline加下划线。None去掉下划线
左右浮动：float:left;float:right;
外边距：margin:0; 盒子与盒子之间的间距
三大特性：权重，层叠，继承
display:none 显示隐藏且不占位置
。。。。。。。。：block显示
图片
内边距：padding:10px; 盒子与内容之间的间距
图片插入：<img src=‘’titlte=‘描述图片’>
图片加载不出来：<img src=‘’alt=‘描述图片’>
8. 外链式
在Html页面引入CSS文件。
好处：1.可以重复调用。2.页面整洁。3.便于管理
步骤：
1. 新建一个CSS文件
2. 在html的head标签中写上：link回车 – 回车
9. Hbuilder快捷键
注释：Ctrl+?
新建文件：Ctrl+n
快速输入标签：div按tab
1.添加多个类名
一个标签可以添加多个类名的，类名与类名之间敲上空格
<div class=”aa bb”></div>
2.相对定位特点
1. 走动的位置，是在原本自己的位置上开始移动的
2. 占位置的
3.绝对定位特点
1. 默认以body为起点
2. 不占位置
3. 能够设置宽高
4. 子绝父相
作用：解决因为不同用户的分辨率问题，位置也会受到移动
子级绝对定位、父级相对定位。
原理：以父盒子为起点，去进行移动
5.定位盒子居中的方法
Div{
Height:50px;
Position:absolut;
Top:50%;
Margin-top:-25px;
}
通过margin往回拉自身宽或高的一半
6.Z-index
作用：解决定位元素，谁压着谁的问题
z-index:1;数值越大，越靠前
条件：只有定位的元素才能使用z-index
7.固定定位
作用：永远固定在用户的可视区域
特点：
1. 以可视窗口为起点
2. 不占位置
3. 都可以设置宽高
8.背景颜色半透明
background:rgba(0,0,0,0.5);
9.CSS继承性问题
子级会继承父级写的一些字体样式
只能继承字体样式：color,font-size,text-decoration,text-align,line-height
10. CSS权重值
不同的选择器，也会分谁是老大
标签 < 类 < id选择
11. PS使用技巧
u 打开图片
把图片拖拽到PS上方， 直到出现+号，松手
u 放大图片
Alt+上下滚轮
u 如何量尺寸
Ctrl+r – 在尺子上右键– 像素 – 用矩形工具去量尺寸
假如量得不顺手，可以按住空格键去拖拽你的选区
u 吸取颜色
点击左下角的色块 - 去吸取你想要的颜色 – 复制#XXX的色值
1. 表格注意事项
1. 单元格默认会有间距。如果要去掉间距，在table标签上加上cellspacing=”0
”
2. 设置表格边框合并。需要把此属性写在table标签的css中
3. 单元格合并。
colspan=“2”水平合并.如果是水平合并，把相邻的单元格去掉
垂直合并：rowspan=”2” 需要把下一行的对应的td去掉
2. 内外边距术语
父子级之间的间距用padding
兄弟级之间的间距用margin
3. 盒子居中的方法（版心居中）
margin:0 auto;
使用条件：
1. 必须有宽度
2. 必须是块级元素（div）
4. 边框
solid 实线
dotted 点线
dashed 虚线
border:1px dashed pink;
5. 显示模式
每个标签有它不同的显示情况，特性
u 块级的显示模式
特点：
1. 能够设置宽高
2. 独占一行
代表性标签：div/p/h1~h6/ul,li/table/tr
u 行内的显示模式
特点：
1. 不能设置宽高
2. 并排显示
代表性标签：span/a/b/strong/u/em…
u 行内块的显示模式
特点：
1. 能够设置宽高
2. 又能并排显示
代表性：表单类的元素、img
6. 显示模式的转换
有时候，超链接必须要写宽高，但因为超链接是行内，所以不能设置。这时候我们就需要去转显示模式了
转为行内块：display:inline-block;
转为块：display:block;
转为行内：display:inline;
uhtml表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签定义整体的表单区域
· action属性定义表单数据提交地址
· method属性定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签为表单元素定义文字标注
3、<input>标签定义通用的表单元素
· type属性
o type="text" 定义单行文本输入框
o type="password" 定义密码输入框
o type="radio" 定义单选框
o type="checkbox" 定义复选框
o type="file" 定义上传文件
o type="submit" 定义提交按钮
o type="reset" 定义重置按钮
o type="button" 定义一个普通按钮
· value属性定义表单元素的值
· name属性定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签定义多行文本输入框
5、<select>标签定义下拉表单元素
6、<option>标签与<select>标签配合，定义下拉表单元素中的选项