JS基础

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button id="btnlike" onclick="dolike()"></button>
	</body>
</html>

var k=0;
function dolike(){
		k++;
	var btnlike = document.getElementById('btnlike');
	btnlike.innerHTML= k;
}

声明变量格式

Var 变量名称：

同时初始化

var k（变量名称）=1（初始化的值）；// 为变量初始化

自定义函数

Function 自定义函数名称（参数1，参数2）{ //这里是函数具体要执行的代码 }

如果有返回值，那么将返回值用return来返回

DOCUMENT

代表上下文，这里有所有html代码组成的元素

innerHTML代表元素内部的所有html代码

document.write 表示直接输出到网页当中

总结：

掌握 js变量的声明和 html元素的获取和写入
js的另一种写在网页端与html一起混写的写法， document.write 表示直接输出到网页当中
实战能更快的进行理解

css浮动

float:浮动往往和html中父级节点的overflow：auto 连用确保父级节点的高度不会因失去文档流而失去

首先要搭建网页的html结构
结构需要首先观察，分析出有几块构成
要实践去写出来，写一步观察一步

CSS设置

background-image:url()设置背景图片

设置背景图片压迫结合容器的高度，这样才能完整显示

background-repeat：no-repeat 背景不重复显示

background-position:botton 背景图片位置居下

border-width 边框宽度

border-width边框圆角

border-top-left-radius左上角圆角

iframe

Iframe标签可以用在表单提交处理信息，可以用在访问其它网址，内容可以呈现html显示出来的风格

#form表单的常用元素

主要功能：用来提交用户服务器 Select option 下拉列表 Textarea 文本域，可以多行 单选框type使用radio的时候，name属性值如果相同代表同一组，同一组的单选框一时间只能选择一个

form表单用来存放需要提交给服务器的元素，form表单提交的是，内部带有name标签的元素给服务器页面，action对应的页面
数据提交方式method的值为post的时候可以提交大量的数据，如果数据较少，就使用get

contentEditable

简单的文本编辑效果可以直接使用html5的全局属性contentEditable

data-属性自定义数据

		<meta charset="utf-8" />
		<title></title>
	<!-- 	<link rel="stylesheet" type="text/css" href="css/main.css"/> -->
		<script type="text/javascript">
			function getljydata(){
				var log =document.getElementById("log")
				alert(log.dataset.liyDb)
				console.log(log.dataset.liyDb)
			}
		</script>
	</head>
	<body>
		<div class="log"  id="log" data-liy-db="编程创造城市http://ljy.kim">
			这里是数据
		</div>
		<br>
		<button id="btndt" onclick="getljydata()">获取数据</button>
	</body>

1、dom数据的存取在html5中直接使用data-自定义属性来存储数据的值 2、数据的获取需要配合js来获取 3、dom中存储数据一般都是临时使用的数据 4、使用data-自定义属性的数据可以通过js直接赋值来改变

hidden属性

			function onk () {
				var txt= document.getElementById('txt');
				txt.removeAttribute('hidden')
			}
			
			function ong(){
				var txt= document.getElementById('txt');
				txt.setAttribute('hidden','hidden')
			}
		</script>
	</head>
	<body>
		<div id="txt">
			这里是数据
		</div>
		<button type="button" onclick="onk ()">打开</button>
		<button type="button" onclick="ong()">关闭</button>
	</body>

1. removeAttribute('属性名称')：移除元素的属性

3. setAttribute(属性名称，属性值)：设置元素的属性

5. hidden属性是h5中特有的新特性，用来控制元素是否显示，有hidden隐藏，没有显示

css选择器鼠标经过的事件设置数百样式

1、分组选择器 , 2、兄弟选择器~ 3、相邻选择器+ 4、子选择器> 5、包含选择器符号是空格

table tr:hover{  /* 伪类选择器,鼠标经过时触发的事件 */
	cursor: pointer;   /* 鼠标的样式 */
}

锚点伪类去掉默认的下划线

text-decoration：none 去掉默认的下划线

.nav a:visited{  /* 伪类选择器,访问之后的状态 */}

绝对定位position:absolute;

1、绝对定位使用的时候一定要和相对定位一起使用，这样效果最佳

    position: relative;
    position:absolute;

js控制元素鼠标事件

window.onload 表示执行完html代码之后执行的代码

window.onload=function(){}当页面加载完成之后执行一个匿名函数

js鼠标事件

Onmouseover=function(){}=function(){} 当鼠标经过时

Onmouseout=function(){} 当鼠标移开时发生的事件

如何让网页自适应各个屏幕？

1、从小屏幕做到大屏幕，那么使用min-width

2、从大屏幕做到小屏幕，那么使用max-width

3、@media(min-width/max-width:像素值)

HTML,CSS,JASCSCRIPT学习笔记