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>标签配合,定义下拉表单元素中的选项