html css js
html 回顾
字体:font
属性：
color: 颜色
size: 字号 表格：table
标签：
tr：表格中的行
td: 单元行中的单元格
th：通常使用在table中的第一行， 成为表头， 不经常使用(效果： 字体加粗、居中显示) thead 表格头
tbody 表格体
tr
td
tbody
tr
td tfoot 表格尾 属性:
border: 边框的宽度
bordercolor:边框颜色
width: 元素的宽度
height: 元素的高度
cellspacing: 单元格间距： 单元格之间的距离
cellpadding: 单元格边距： 单元格内的内容 距离单元格边框的距离
align: 对齐方式
colspan: 合并列
rowspan: 合并行 表单：form 常用的表单控件：
<input>输入控件
type:
text: 文本框
password: 密码框
radio: 单选
checkbox: 复选框
submit: 提交
reset: 重置
button: 按钮
image: 图片
file: 上传文件 <textarea> 多行文本框
<textarea>
sadsadsad
dsadsasa
</textarea>
<select> 下拉框
<option>
下拉列表项 常用的属性:
input控件：
type: 类型
name: 元素的名称
value:元素的值
checked: 让元素选中(单选、复选) 点击事件：
onclick: 单击事件 select控件：
size: 显示下拉框可同时显示的条目
multiple: 可以同时选中多个条目
selected:让option选中
selectedIndex: 设置或返回下拉列表中被选项目的索引号。 form控件：
action: 指定表单数据提交的URL位置（服务器）
method: 指定数据提交的方式
get:
地址栏显示提交的信息， 信息不安全
提交的数据大小有限制： 2048个字符 扩展：
数据会提交到服务器，提交的数据会封装在一个容器中，
这个容易叫做http请求头（请求行， 请求体） 提交的URL地址是在请求行的第一行， 所以get方式提交的数据在请求行部分
中文乱码问题：
在服务器端有个对象 叫做请求对象（request）
,有方法可以来处理中文乱码问题setCharacterEncoding(“GBK”)
,但是在get方式下 不可用,在post方式下能用，
所以，通常表单提交采用post方式 post:
地址栏不显示提交的信息， 信息安全
提交的数据大小有限制： 没有限制 提交的数据在请求体中
css :
|-- CSS
|-- 意为: 层叠样式表
|-- style 规定行内样式
|-- 直接在需要加样式的标签里添加style属性,耦合性高,不适用
|-- 在head标签中添加style子标签, 常用
|-- <head>
<style type="text/css>
直接写样式...
</style>
</head>
|-- 在style子标签中导入外部的css样式文件
|-- <style>
@import url(div.css)
</style>
|-- div.css中写样式
|-- 通过link标签实现, 常用
|-- <link rel="stylesheet" type="text/css" href="div.css"/>
|-- rel: 相关的
|-- href: css文件路径
|-- 一个link标签只能引入一个css文件
|-- 优先级
|-- 由外到内, 越来越高
|-- 由上到下, 越来越高
|-- css的注释
|-- /*
注释内容
*/
|-- 选择器
|-- 一般选择器
|-- 标签名选择器
|-- 格式: 无特殊符号
|-- 标签名{
样式内容
}
|-- div{
background-color:red;
}
|-- 使用场景
|-- 可以给所有相同的标签名添加同样的样式
|-- class选择器
|-- 通过标签的class属性来实现, class规定元素的类名
|-- 格式: 用 .
|-- .class类名{
样式内容
}
|-- .div1class{
width:100px;
}
|-- 使用场景
|-- 不同的标签, 相同的class名称, 添加相同的样式
|-- id选择器
|-- 格式: 用 #
|-- #id值{
样式
}
|-- #div2{
height:100px;
}
|-- 使用场景
|-- 用于给唯一的容器添加样式
|-- 扩展选择器
|-- 层次选择器、关联选择器
|-- 格式: 用 空格
|-- 标签 子标签 中的子标签{
样式
}
|-- div ul li {
样式
}
|-- 组合选择器
|-- 格式: 用 ,
|-- 标签, #id, .class{
样式
}
|-- #div1, .div2class, #span3{
样式
}
|-- 伪元素选择器
|-- link 鼠标未点击的时候的样式
|-- hover 鼠标移到上面的时候的样式
|-- active 鼠标点击的时候的样式
|-- visited 鼠标点击后的样式
|-- 格式:
|-- 标签名: 伪元素选择器{
样式
}
|-- a:link{
color:green;
}
|-- 盒子模型
|-- 盒子指的就是div, 也可以叫做箱子
|-- border 边框
|-- border-color 边框颜色
|-- border-width 边框宽度
|-- border-style 边框样式
|-- border-top-color 上部边框颜色
|-- border-top-width
|-- border-top-style
|-- border-right-color
|-- border-right-width
|-- border-right-style
|-- border-right-color
|-- border-bottom-width
|-- border-bottom-style
|-- border-bottom-color
|-- border-left-width
|-- border-left-style
|-- border-left-color
|-- margin
|-- 是div的边框与父对象(如页面)边缘的距离
|-- 内容
|-- margin-top div的边框与父对象上部边缘的距离
|-- margin-right
|-- margin-bottom
|-- margin-left
|-- margin: 50px;
|-- 一个参数的时候, 给 top/right/bottom/left 4个分别设值
|-- margin: 50px 100px
|-- 二个参数的售后, 第一个给top和bottom设值,第二个参数给right和left设值
|-- margin: 50px 100px 150px
|-- 三个参数的时候, 第一个给top设值, 第二个给right和left设值, 第三个给bottom设值
|-- margin: 50px 100px 150px 200px
|-- 四个参数的时候, 第一个给top设值, 第二个给right设值, 第三个给bottom设值, 第四个给left设值
|-- padding
|-- 是div内的文本与div的边框的距离
|-- 内容
|-- padding-top div内的文本与div的上部边框的距离
|-- padding-right
|-- padding-bottom
|-- padding-left
|-- padding: 50px;
|-- 一个参数的时候, 给top等4个分别设值
|-- padding: 50px 100px
|-- 二个参数的售后, 第一个给top和bottom设值,第二个参数给right和left设值
|-- padding: 50px 100px 150px
|-- 三个参数的时候, 第一个给top设值, 第二个给right和left设值, 第三个给bottom设值
|-- padding: 50px 100px 150px 200px
|-- 四个参数的时候, 第一个给top设值, 第二个给right设值, 第三个给bottom设值, 第四个给left设值
|-- display
|-- 设置或检索对象是否以及如何显示
|-- div和span本质上没区别, 只是display默认值不同而已
|-- 取值
|-- block 块级元素
|-- inline 行内元素
|-- none 不显示
|-- float
|-- 设置和检索对象是否以及如何浮动
|-- 取值
|-- none 不浮动
|-- left 对象向左边浮动
|-- right 对象向右边浮动
|-- div默认的效果是页面自然流布局
|-- 格式
|-- div{
样式
folat:right;
}
|-- 设置了float属性(属性值不为none)的对象叫做浮动对象
|-- 跟随浮动对象的对象, 会移动到浮动对象原来的位置空间
|-- 使用场景
|-- 让层叠的多个div在一行上面并列显示的时候, 就用float属性
|-- clear
|-- 清除浮动
|-- 不是清除对象本身的浮动, 而是清除上一个对象的浮动所带来的效果影响
|-- 相当于回复页面的自然流布局
|-- 取值
|-- none 不清楚
|-- right 清除右边的浮动对象带来的效果
|-- left 清除左边的浮动对象带来的效果
|-- both 两边都清除
|-- position
|-- 设置或检索对象是否以及如何定位
|-- 取值
|-- static 无定位
|-- relative 相对定位
|-- absolute 绝对定位
|-- fixed 不支持, 不研究
|-- 当一个对象被进行定位(设置了relative或absolute)以后, 才能够使用 top/right/bottom/left 四个属性
|-- div{
position:relative
top:30px;
left:20px;
}
|-- 绝对定位 absolute
|-- 偏移的参照对象是页面或父对象
|-- 会释放对象本身原有的位置空间
|-- 相对定位 relative
|-- 偏移的参照对象是原有的位置空间
|-- 不会释放对象本身原有的位置空间
|-- z-index
|-- 设置或检索对象的层叠顺序
|-- 取值
|-- number 数值
|-- 数值大, 层叠在上面
数值小, 层叠在下面
|-- z-index的属性值只针对设置了定位属性(属性值为relative或absolute)的对象起作用
盒子模型:
html css js的更多相关文章
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...
- IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求
今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...
- 网站加载css/js/img等静态文件失败
网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...
- 【前端】Sublime text3 插件HTML/CSS/JS prettify 格式化代码
1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...
- CSS+JS实现兼容性很好的无限级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
随机推荐
- IntellJ IDEA 所有快捷键
登录下面网站. http://www.jetbrains.com/idea/documentation/ 下载Keymap for Windows/Linux 后面的PDF文档.
- hdu1231 最大连续子序列
#include<stdio.h> #include<string.h> #define maxn 10010 int a[maxn],dp[maxn]; int main() ...
- 和声搜索算法-python实现
HSIndividual.py import numpy as np import ObjFunction class HSIndividual: ''' individual of harmony ...
- 蝙蝠算法-python实现
BAIndividual.py import numpy as np import ObjFunction class BAIndividual: ''' individual of bat algo ...
- BZOJ-1407 Savage 枚举+拓展欧几里得（+中国剩余定理？？）
zky学长实力ACM赛制测试,和 大新闻(YveH) 和 华莱士(hjxcpg) 组队...2h 10T,开始 分工我搞A,大新闻B,华莱士C,于是开搞: 然而第一题巨鬼畜,想了40min发现似乎不可 ...
- 解决：Angular-cli:执行ng-build --prod后，dist文件里无js文件、文件未压缩等问题
Angular2.0于2016年9月上线,我于9月入坑. 入坑以来,一直让我很困惑的问题 1.angular-cli是个什么鬼东西? 2.为什么我们自己的资源文件还没写什么,就有起码50多个js文件加 ...
- 洛谷P1130 红牌
题目描述 某地临时居民想获得长期居住权就必须申请拿到红牌.获得红牌的过程是相当复杂 ,一共包括N个步骤.每一步骤都由政府的某个工作人员负责检查你所提交的材料是否符合条件.为了加快进程,每一步政府都派了 ...
- java基本类型转换规则
自动类型转换,也称隐式类型转换,是指不需要书写代码,由系统自动完成的类型转换.由于实际开发中这样的类型转换很多,所以Java语言在设计时,没有为该操作设计语法,而是由JVM自动完成. 具体规则为: b ...
- 二、Ubuntu14.04下安装Hadoop2.4.0 （伪分布模式）
在Ubuntu14.04下安装Hadoop2.4.0 (单机模式)基础上配置 一.配置core-site.xml /usr/local/hadoop/etc/hadoop/core-site.xml ...
- codejumper的跳转代码
public void JumpToSource(vsCMPart location = vsCMPart.vsCMPartNavigate) { TextPoint startPoint = Ori ...