布局常用属性样式:
|
属性
|
作用
|
举例
|
|
width
|
设置元素(标签)的宽度
|
width: 200px;
|
|
height
|
设置元素(标签)的高度
|
height: 200px;
|
|
background
|
设置元素背景色或者背景图片(详看下面)
|
background: pink;
|
|
border
|
设置元素四周的边框
|
border: 1px solid pink;
|
|
border-top
|
设置元素顶部边框
|
border-top: 1px solid pink;
|
|
border-left
|
设置元素左边边框
|
border-left: 1px solid pink;
|
|
border-right
|
设置元素右边边框
|
border-right: 1px solid pink;
|
|
border-bottom
|
设置元素底部边框
|
border-bottom: 1px solid pink;
|
|
padding
|
设置内边距(同时设置四个边,也可以分开设置)
|
padding: 20px;
|
|
margin
|
设置外边距(同时设置四个边,也可以分开设置)
|
margin: 20px;
|
|
float
|
设置元素浮动,浮动可以让块元素在一行排列
|
float:left(左浮动) float: right(右浮动)
|
补充说明:
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-size 背景图片大小
margin:0px auto 外间距居中
cursor:pointer; 鼠标指针变成手
文本常用样式属性:
|
color
|
设置文字的颜色
|
color: red;
|
|
font-size
|
设置文字的大小
|
font-size: 12px;
|
|
font-family
|
设置文字的字体
|
font-family: 'Microsoft Yahei'; (微软雅黑)
|
|
font-weight
|
设置文字是否加粗
|
font-weight: bold; (bold:加粗 normal: 正常)
|
|
line-height
|
设置文字的行高
|
line-height: 24px; (文字高度加上文字上下间距共计24px)
|
|
text-decoration
|
设置文字的下划线
|
text-decoration:none; (取消下划线)
|
补充说明：
text-align:center 设置文字水平居中
ext-indent:32px; 设置文字首行缩进32px(单个字16px)
特殊的一些标签:
空格: 在html中, 空格一般会用:
表示
回车: 在html中回车换行一般用
<br>
表示
小于号( < ): 在html中一般用
<
表示
大于号( > ): 在html中一般用
>
表示
删除标签: del 或者 ( s )
倾斜标签: em 或者 ( i )
下划线标签: ins 或者 ( u )
-----------------------------------------------------------------------------------------------------------
CSS溢出：
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
------------------------------------------------------------------------------------------------------------
display属性转换
作用: 第一个决定了当前元素是否应该显示, 第二个决定了当前元素应该以什么类型显示
display 属性规定元素应该生成的框的类型。
display 的默认属性值是 inline, 此元素会被显示为内联元素
display属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- block 此元素会被显示为块元素
- inline 此元素会被显示为内联元素
-------------------------------------------------------------------------------------------------------------
无序列表——有序列表
无序列表：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
注：<!-- ul>li*4 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
注：<!-- ul+li*4 -->
<ul></ul>
<li></li>
<li></li>
<li></li>
<li></li>
***** 平级用“+”号，子级用“>“
有序列表：
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
------------------------------------------------------------------------------------------------------
HTML表单
<form>
标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
1、<label>
标签
为表单元素定义文字标注
2、<input>
标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名
<textarea>
标签 定义多行文本输入框
<select>
标签 定义下拉表单元素
<option>
标签 与
<select>
标签配合，定义下拉表单元素中的选项
单行文本框文字提示
- placeholder 设置input输入框的默认提示文字。
表单包含很多内容, 例如:
- 单选: radio
- 多选: checkbox
- 密码: password
- 文本: text
- 按钮: reset, submit, file
- 多行文本输入: textarea
- 下拉菜单: select option
表单( form )可以直接提交: 提交方法包含 get post
- action: 提交的服务器地址
- method: 提交的方法
--------------------------------------------------------------------------------------------------------
表格元素及相关样式
1、
<table>
标签
声明一个表格
2、
<tr>
标签
定义表格中的行
3、
<td>
和
<th>
标签
定义列以及列中的标题
td
代表列，
th
表示列中的标题部分(加粗)
它们的常用属性如下：
- colspan 设置单元格水平合并，设置值是数值
- rowspan 设置单元格垂直合并，设置值是数值
表格相关样式属性
- border-collapse 设置表格的边线合并，如：border-collapse:collapse;
- border='1' 可以设置table的边框大小
- text-align 可以设置对齐方式: left right center
--------------------------------------------------------------------------------------------------------------
定位分类:
我们可以使用 CSS 的
position
属性来设置元素的定位类型，
position
的设置项如下：
- static 默认值. 没有定位: 元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)
- relative 生成相对定位，相对box定位
- absolute: 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对border定位
- fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位和固定定位设置后会浮动！
注意
子绝父相
，父元素设置了相对定位后，子元素绝对定位会相对父元素进行定位
-------------------------------------------------------------------------------------------------------------------
元素层级
绝对定位元素是浮动在正常的文档流之上的，可以用
z-index
属性来设置元素的层级
数字大的在上
-------------------------------------------------------------------------------------------------------------------
页面嵌套
在一个页面中可以开一个局部的窗口，嵌入另外一个页面
制作这样的功能我们一般使用:
iframe
标签来实现
使用方法:
<iframe src="" frameborder="">
</iframe>
src:
设置另一个网页的地址
frameborder:
设置这个局部窗口边框的粗细
---------------------------------------------------------------------------------------------------------------------
权重了解
- 内联样式的权重值最高: 1000 (内联: 写在标签上的样式)
- 标签选择器的权重值为最低: 1
- 类选择器的权重值为: 10 ( 了解 )
- 伪类选择器权重值为: 10 ( 了解 )
- id 选择器的权重值为: 100
--------------------------------------------------------------------------------------------------------------------
JavaScript_____________________
HTML 引入 JavaScript 的方式
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok！');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
2. 变量、数据类型及基本语法规范
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
var iNum = 123
var sTr = 'asd'
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45, sTr='qwe', sCount='68';
变量、函数、属性、函数参数命名规范
1、区分大小写2、第一个字符必须是字母、下划线（_）或者美元符号（$）3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck
=================================================================
条件运算符和逻辑运算符:
|
条件运算符
|
说明
|
举例
|
|
==
|
只要求值相等(在比较时会转换数据类型)
|
"1" == true (结果为true)
|
|
===
|
要求值和类型都相等
|
"1" === true (结果为false)
|
|
>
|
大于
|
3 > 5 (结果为false)
|
|
<
|
小于
|
3 < 5 (结果为true)
|
|
>=
|
大于等于
|
3 >= 5 (结果为false)
|
|
<=
|
小于等于
|
3 <= 5 (结果为true)
|
|
!=
|
不等于
|
3 != 5 (结果为true)
|
|
&&(逻辑与)
|
同真为真,一假则假
|
x && y (同真为真,一假则假)
|
|
|| (逻辑或)
|
全假为假, 一真则真
|
x || y (全假为假, 一真则真)
|
|
! (逻辑非)
|
非眞则假,非假则真 (取反)
|
! x (非眞则假,非假则真)
|
------------------------------------------------------------------------------------------------------------------------
获取元素方法
- 第一种方法：将 javascript 放到页面最下边
<body>
<div id="div1">这是一个div元素</div>
<script type="text/javascript">
var oDiv = document.getElementById('div1')
alert(oDiv)
</script>
</body>
- 第二种方法：将 javascript 语句放到 window.onload 触发的函数里面
window.onload 方法会在当前页面加载完成之后触发
获取元素的语句放在这个方法中执行，就可以正常获取了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
<div id="div1">这是一个div元素</div>
===================================================================
操作元素属性
操作元素属性
读取属性:
var 变量 = 元素.属性名
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
改写属性:
元素.属性名 = 新属性值
oA.style.color = 'red';
oA.style.fontSize = sValue;
===================================================================
事件属性
标签上除了可以添加 样式, id, class等属性之外, 还可以添加事件属性.
最常用的事件属性有:
- 鼠标单击事件 onclick
- 鼠标双击事件 ondbclick
- 鼠标移入事件 onmouseover
- 鼠标移除事件 onmouseout
说明: 我们可以通过将函数名赋值给事件属性的形式, 将 事件 和 函数 关联起来
写法：var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
===================================================================
获取数组的长度：
一般我们获取数组长度使用: length
var aList = [1,2,3,4];// 打印输出数组 aList 的长度console.log(aList.length)
2、下标索引的使用：
和python一样, 我们也可以利用下标索引的思想来操作数组中某一个元素: aList[0]
var aList = [1,2,3,4];console.log(aList[0]);
结果:
1
3、join(分隔符)
将数组成员通过一个分隔符合并成字符串
var aList = [1, 2, 3, 4]var newList = aList.join('-')console.log(newList)
结果:
1-2-3-4string
4、push( ) 和 pop( )
从数组最后增加成员或删除成员
var aList = [1,2,3,4];aList.push(5);console.log(aList)aList.pop()console.log(aList)
结果:
[1, 2, 3, 4, 5][1, 2, 3, 4]
5、reverse( )
将数组反转
var aList = [3,2,1,4];aList.reverse();console.log(aList)
结果:
[4, 1, 2, 3]
6、indexOf( )
返回数组中元素第一次出现的索引值:
- 如果有, 则正常返回索引值
- 如果检索的内容不存在于数组中, 则返回 -1
var aList = [1,2,3,4,1,3,4];console.log( aList.indexOf(4) )console.log( aList.indexOf(5) )
结果:
3-1
var aList = ['美少女战士', '犬夜叉', '黄金圣斗士', '猫和老鼠', '美少女战士', '猫和老鼠']
7、splice( )
在数组中增加或删除成员
使用格式: 数组名.splice(index,howmany,item1,.....,itemX)
index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX: 可选。向数组添加的新项目。
例如:
var aList = [1,2,3,4];// 从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素aList.splice(2,1,7,8,9); alert(aList); //弹出 1,2,7,8,9,4
8. 多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];alert(aList[0][1]); //弹出2;
批量操作数组中的数据，需要用到循环语句
===================================================================
2. 循环
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
使用格式:for(var i=0;i<5;i++){ console.log(i)}
打印结果:
01234