关于H5的知识点（HTML+CSS+JS）

最新推荐文章于 2022-04-11 16:24:00 发布
最新推荐文章于 2022-04-11 16:24:00 发布
阅读量1.2k 收藏 28
点赞数 14
分类专栏： JavaWeb 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49050026/article/details/120908778
版权

H5的使用

文章目录

标签

<!---<title>网页标题</title>--->

 <!---<link rel="shortcut icon" href="img/favicon.ico" type="路径"/>--->网页logo

#<h1>~<h6> 
 表示从一级标题标签到六级标题标签

 #<p>

 表示段落标签

 #<br/>表示换行标签

#<hr/>表示分隔标签
 <!---图片标签：img

 ​		src：图片资源

 ​	width：宽度（px-像素       %：浏览器的宽度比）

 ​	height：高度

 ​			alt：图片加载失败后展示的内容

 --->

 //<img src="图片路径" width="像素/屏幕宽度比例"  height="像素/屏幕高度比列" alt="加载失败"/>

 无序列表：ul

 type：样式（circle-空心圆  disc-实心圆  square-实心方块）

 li：项

有序列表：ol

type：样式（1-数字  a-小写字母  A-大写字母  i-小写罗马数字 I-大写罗马数字）

 li：项

	<ol type="I">
		<li>有序1</li>
		<li>有序2</li>
		<li>有序3</li>
		<li>有序4</li>
	</ol>

定义列表：dl

dt：列表标签

dd：列表内容

列表案列
<ul>
	<li>
     <h3>
         电脑
     </h3>
 	<ol>
         <li>联想</li>
         <li>华硕</li>
         <li>戴尔</li>
     </ol>
 </li>
 <li>
     <h3>
         手机
     </h3>
 	<ol>
         <li>华为</li>
         <li>苹果</li>
         <li>小米</li>
     </ol>
 </li>
</ul>

超链接标签：a

href：链接地址

target：目标（_self 当前页面 _blank 新增页面）

锚链接：在超链接中通过href="#锚点名"进行的

法制

国际

娱乐

<!—锚点—>

法制新闻

法制新闻

法制新闻

  <h1>国际新闻</h1>
  <h1>国际新闻</h1>
  <h1>国际新闻</h1>


娱乐新闻


娱乐新闻


娱乐新闻

table -表格

border=“1” 边框为1

tr-行

th-列(居中加粗)

td-列

rowspan=“2” -占两行

colspan=“2” 占两列

form–表单

H5的新特性：

<form action="#" method="post">
		        日期选择器：<input type="date"/><br/>
	        时间选择器：<input type="time"/><br/>
	        邮箱输入框：<input type="email"/><br/>
			数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
			
			URL输入框： <input type="url" list="url_list"/>
		<datalist id="url_list">
			<option label="W3School" value="http://www.w3school.com.cn" />
			<option label="谷歌" value="http://www.google.com" />
			<option label="百度一下" value="http://www.baidu.com" />
		</datalist><br/>
		
		<input type="submit" value="提交"/>
		</form>

语义化标签

<style type="text/css">
	            header,nav,article,aside,footer,section{
	                background-color: #87A442;
	                text-align: center;
	                border: black 1px solid;
	                border-radius:20px;
	                margin: 10px;
	                padding: 10px;
	            }
	
	            header{
	                height: 120px;
	            }
	
	            nav{
	                height: 50px;
	            }
	
	            article{
	                width: 40%;
	                height: 120px;
	                float: left;
	            }
	
	            aside{
	                width: 40%;
	                height: 120px;
	                float: right;yu
	            }
	
	            footer{
	                clear: both;
	                height: 120px;
	            }
	
	            section{
	                height: 70px;
	            }
			
		</style>
		
		<header>头部标签 - header</header>
		<nav>导航标签 - nav</nav>
		<div>
			<article>内容标签 - article
				<section>块级标签 - section</section>
			</article>
			<aside>侧边栏标签 - aside</aside>
		</div>
		<footer>	footer</footer>

选择器

1.通配符选择器：

*:通配符选择器

*{

}

2.基本选择器：

  1. 标签选择器：p{}

  2. 类选择器：.类名{}

    <h1 class="myClass">类选择器</h1>

  3. id选择器：#id名{} ------注意：项目中的id都是唯一的，不能重复，而类名选择器中类名可以重复

    <h2 id="myId">
    id选择器
</h2>

3.基本选择器的优先级别：ID > CLASS >标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				color: red;
			}
			
			.myClass{
				color: green;
			}
			
			#myId{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		
		<p id="myId" class="myClass">段落标签</p>

	</body>
</html>

4.群组选择器：

h1,h2,h4{color :red;}

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

5.派生选择器：

又被称之为：上下文关系选择器

  1. 后代选择器：ul a{ color: red;}
  2. 子代选择器：li>a{ color：blue;}
  3. 相邻兄弟选择器：a+a{color：yellow;}注意：效果作用在后者
<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接3</a>
			</li>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
		</ul>
		
		<a href="#">超链接6</a>
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>

6.属性选择器：

input[type]{color:red;}

input[type] [placeholder]{color: red;}

input[type=‘text’] [name=‘username1’]{color:red;}

<body>
    <form action="服务器地址" method="get/post">//method内填获取方法get或者发送方法post
    </form>
</body>

7.锚伪类：

作用于：记录各个状态

a:link{color:#FFB6C1;} -----为访问的链接

a:visited{color:#000000;} —已访问的链接

a:hover{color:#00FFFF;}-----鼠标移动到链接上

a:active{color:#B22222;}----选定的链接

8.样式优先级别：

样内样式表 > (内部样式表和外部样式表看加载顺序)

内部样式表:

<style type="text/css">p{color:red;}</style>

外部样式表：

<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>

new_file.css:

p{color:green;}

行内样式表：

<body>
    <p style="color:blue;">段落标签</p>
</body>

9.常用样式：

<style type="text/css">
    p{
        color:white;
        font-family:"微软雅黑";
        font-size:50px;
        font-weight:bolder;/*字体粗细：加粗*/
        font-style:italic;/*字体样式：斜体*/
        background-color:red;
        background-image:url(路径);
        letter-spacing:10px;/*字体间隔*/
        text-align:center;/*对齐方式*/
        border:red 10px solid;/*边框*/
    }
    a{
        text-decoration:none;/*装订线*/
    }
</style>

div盒子模型

div的基本属性：

div{
    border:1px red solid;
    width:200px;
    height:200px;
    margin:0 auto;/*居中*/
    /*设置外边距*/
    margin-top:50px;上外边距
    margin-left:50px;左外边距
    margin-right:50px;右外边距
    margin-bottom:50px;下外边距
    margin:50px;上下左右外边距
    
    /*设置内边距*/
    padding-top:50px;上内边距
    padding-left:50px;左内边距
    padding-right:50px;右内边距
    padding-bottom:50px;下内边距
    padding:50px;上下左右内边距
}

2.相对定位：

postion:relative;//相对定位：保留原有位置，针对原有位置进行移动

3.绝对定位：

postion:absolute;

//绝对定位：不保留原有位置，向上找父级标签，查看是否有position的属性，如果没有再向上找，知道找到body标签

4.固定定位：

postion:fixed;//固定定位

top:70%;left:90%;

5.浮动：

float: left;左浮动

float: right;右浮动

css扩展:

<style type="text/css">
    #btn{
        width:100px;
        height:50px;
        color:white;
        font-weight:bolder;
        background-color:orange;
        border-radius:10px;边框圆角属性
        box-shadow:10px 10px 5px gainsboro;添加按钮阴影 x轴偏移量 y轴偏移量 阴影模糊半径
        text-shadow: 5px 5px 5px black;添加文本阴影 x轴偏移量 y轴偏移量 阴影模糊半径
    }
    body{
        background:url(#) center top repeat-x #EAF4FF;
    }
</style>

JS核心语法

1.基础弹框打印

<script type="text/javascript">
	alert("HelloWorld...1");//弹框
    console.log("Helloworld...111");//在控制台中打印数据
</script>
<body>
    <script type="text/javascript">
	alert("HelloWorld...2");//弹框
    console.log("Helloworld...222");//在控制台中打印数据
</script>
</body>

2.变量定义：

var–变量

var v=123;

console.log(v);

v=true;

console.log(v);

v=“abc”;

console.log(v);

3.基本数据类型：

JS的基本数据类型：number、string、boolean、undefined（未定义类x型） 、null

4.基本数据类型的特殊点：

number的特殊点：（Infinity 表示无穷大）

console.log(Infinity+(-Infinity));//NaN:Not a Number

String的特殊点：

​ Var v1=“12”;

​ Var v2=“3”;

​ console.log(v1+v2);//做拼接

​ console.log(parseInt(v1)+parseInt(v2));//相加

​ console.log(v1 - v2);//相减

​ console.log(v1 * v2);

​ console.log(v1 / v2);

​ console.log(v1 % v2);

boolean的特殊点：0、" "、undefined、null都表示false

if(null){
	console.log("true");
}else{
	console.log("false");
}

undefined VS null

var v1;
console.log(typeof v1);//undefined

var v2;
console.log(typeof v2);//object(空对象)

== VS ===

var v1 = 123;
var v2 = "123";

console.log(v1 == v2);//只判断值 ，true
console.log(v1 === v2);//false： 既判断值，又判断类型

5.流程控制语句：

<scrip type="text/javascript">
	//1. 求1-100之间的偶数之和
    var sum=0;
    for(var i=0;i<=100;i++){
        if(i%2==0){
             sum+=i;
        }
    }
    console.log(sum);
    
    //2.第一个月存3000，每年递增1000，问多少个月后可以存满10万院
     var money=3000;
     var month=0;
     var allMoney=0;
     while(allMoney<100000){
    	month++;
    	allMoney+=money;
    	if(month%12==0){
    		money+=1000;
    	}
    }console.log(month);
    //3.打印三角形
    for(var i=0;i<5;i++){
    	for(var j=0;j<=i;j++){
    		document.write("*");
    	}document.write("<br/>");
    }
</scrip>

6.数组：

<script type="text/javascript">
	//数组的声明及初始化
    var arr=["榮","沝","桜"];
    //设置数据
    arr[2]="null";
    //添加数据
    var[3]="I";
    var[10]="Like";
    //删除数据
    delete arr[2];
    //遍历--for循环
    for(var i=0;i<arr.length;i++){
        console.log(arr[i]);
    }
    //遍历---for_in(遍历有效下标)
    for(var index in arr){
        console.log(arr[index]);
    }
</script>

7.函数：

<script type="text/javascript">
	//函数：特定功能的代码块
    //无返回值无参数的方法
    function fun01(){
        alert("aaa");
    } fun01();
    
    //有参数的方法(参数不用些var)
    function fun01(a,b){
        alert(a+b);
    }
    fun02("10","20");
    
    //有返回值的方法
    function fun03(a,b){
        return a+b;
    }
    var v=fun03("10","20");
    alert(v);
</script>

8.预定义函数：

<script type="text/javascript">
	alert(parseInt("10")+parseInt("20"));//字符串转int
    alert(parseFloat("10.5")+parseFloat("20"));//字符串转float
    alert(isNaN("100.5"));//判断该字符串是否是一个非数字
    alert(isFinite("10.5"));//判断该字符串是否是一个数字
    eval("alert('榮十一在线教学')");//把该字符串认为是一个js代码去执行
</script>

DOM操作元数

1.查找元素：

<p id="p_id01" class="p_class">段落标签1</p>		
<p id="p_id02" class="p_class">段落标签2</p>		
	
	<input type="text" name="text"/>
	<br />
	<input type="text" name="text"/>

  • 通过id查询的元素-------获取的是对象

    <script type="text/javascript">
	var pId01=document.getElementById("p_id01");
	pId01.onclick=function(){
        this.innerText="榮十一在线教学";
    }
</script>

  • 通过class查找的元素----获取的是数组

    <script type="text/javascript">
	var p1=document.getmentsByClassName("p_class")[0];
   	p1.onclick=function(){
        this.innerText="榮十一在线教学";
    }
</script>

  • 通过标签查找的元素-----获取的是数组

    <script type="text/javascript">
	var p2=document.getElementsByTagName("p");
    p2.onclick=function(){
        this.innerText="榮十一在线教学";
    }
</script>

  • 通过name查找的元素-----获取的数组

    <script type="text/javascript">
	var text01 =document.getElementsByName("text")[0];
    text01.onclick=function(){
        this.style.color="red";
    }
</script>

2.操作内容：

<p>
    段落标签
</p>
<script type="text/javascript">
    var p1=document.getElementsByTagName("p")[0];
    p1.onclicke=function(){
        //获取内容
        var text=this.innerText;
        alert(text);
var text01=this.innerHTML;
    alert(text01);
    
    //设置内容
    this.innerText="<h1>榮十一在线教学</h1>";
    this.innerHTML="<h1>榮十一在线教学</h1>";//认为内容是html代码块
   
}
</script>

3.操作属性：

<img src="../img/HerImg.jpg" width="10%" height="10%"/>
<script type="text/javascript">
	var img=document.getElementsByTagName("img")[0];
    img.onclick=function(){
        //获取属性1-----像素
        console.log(this.width);
        console.log(this.height);
        
        //获取属性2------百分比
        console.log(this.getAttribute("width"));
        console.log(this.getAttribute("height"));
        
        //设置属性1------像素
        this.width="200";
        this.height="200";
        
        //设置属性2------键值对，百分比
        this.setAttribute("width","20%");
        this.setAttribute("height","20%");
    }
</script>

4.操作样式：

<input type="button" value="显示图片" onclick="fun01()"/>
<input type="button" value="隐藏图片" onclick="fun02()"/>
<br />
<img src="../img/HerImg.jpg" width="10%" height="10%" />
<script type="text/javascript">
	var img=document.getElementsByTagName("img")[0];
    function fun01(){
        //获取样式
        console.log(img.style.backgroundColor);
        
        //设置样式
        img.style.visibility="visible";
        
    }
    
    function fun02(){
        //设置样式
        img.style.visibility="hidden";
        
    }
</script>

DOM事件

1.点击事件：

  1. <h1 onclick="this.innerText='沝桜成null'">
    榮十一之星
</h1>

  2. <h1 onclick="fun01(this)">
    榮十一之星
</h1>
<script type="text/javascript">
	function fun01(obj){
        obj.innerText="沝桜成null";
    }
</script>

  3. <input type="button" value="使h1标签改变内容" onclick="fun01()"/>
<h1>
    沝桜成null
</h1>
<script type="text/javascript">
	function fun01(){
        var h1 =document.getElementsByTagName("h1")[0];
        h1.innerText="榮十一之星";
    }
</script>

  4. <input type="button" value="使用h1标签改变内容"/>
<h1>
    沝桜成null
</h1>
<script type="text/javascript">
	document.getElementsByTagName("input")[0].onclick=function(){
        var h1=document.getElementsByTagName("h1")[0];
        h1.innerText="榮十一之星";
    }
</script>

2.网页加载事件：

onload事件：叫做网页加载事件，等页面的标签和图片资源加载完毕后，才调用的事件

头部内容：

<script type="text/javascript">
	window.onload=function(){
        document.getElementsByTagName("input")[0].onclick=function(){
            var h1=document.getElementsByTagName("h1")[0];
            h1.innerText="沝桜成null";
        }
    }
</script>


<body>
    <input type="button" value="使h1标签改变内容"/>
    <h1>
        榮十一之星
    </h1>
</body>

3.键盘事件：

<input type="text" onkeydown="down01()" onkeypress="press01" onkeyup="up01"/>
<script type="text/javascript">
	function down01(){
        console.log("键盘按下事件");
    }
   function press01（）{
       console.log("键盘持续事件");
   } 
   function up01() {
       console.log("键盘松开事件");
   }
</script>

案例：

<!--
需求：输入英文内容，把内容变成大写
-->
<input type="text" onkeyup="up01(this)" />
<script type="text/javascript">
	function up01(obj){
        //获取到value值
        var v=obj.value;
        //转大写
        v=v.toUpperCase();
        //将大写的内容赋值给value
        obj.value=v;
        
    }
</script>

4.鼠标事件：

<img src="../img/HerImg.jpg" width="40%" onmousedown="down01()" onmouseup="up01()" onmousemove="move01" onmouseover="over01()" onmouseout="out01()" />

<script type="text/javascript">
	function down01(){
        console.log("鼠标按下事件");
    }
   function up01(){
       console.log("鼠标松开事件");
   } 
   function move01(){
       console.log("鼠标移动事件");
   } 
   function over01(){
       console.log("鼠标移出事件");
   } 
</script>

案列：

<style type="text/css">
    img{opacity:0.4;}
</style>

<body>
    <!--
需求：捉迷藏
-->
    <img src="../img/HerImg01.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)" />
    <img src="../img/HerImg02.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)" />
    <img src="../img/HerImg03.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)" />
    <script type="text/javascript"> 
    	function over01(obj){
            obj.style.opacity=1;//设置透明度：1完全不透明  0 完全透明
        }
       function out01(obj){
           obj.style.pacity=0.4;
       } 
    </script>
</body>

5.焦点事件：

账号：<input type="text" value="请输入账号" onfocus="focus01()" onblur="blur01()" />
<script type="text/javascript">
	function focus01(){
        console.log("获取焦点事件");
    }
   function blur01(){
       console.log("失去焦点事件");
   } 
</script>

案例：

账号：<input type="text" value="请输入账号" onfocus="focus01(this)" onblur="blur01(this)" />
<script type="text/javascript">
	function focus01(obj){
        if(obj.value=="请输入账号"){
            obj.value="";
        }
    }
   function blur01(obj){
       //obj.value.trim(兼容返回带函数的代码的字符串，不兼容返回underfind)
       if(obj.value.trim){//兼容
           if(obj.value.trim()==""){
               obj.value="请输入账号";
           }
       }else{//不兼容
           if(obj.value.replace(/(^\s+)|(\s+$)/g),"")==""){
               obj.value="请输入账号";
           }
       }
   }
</script>

DOM操作节点

<input type="button" value="新增段落标签" onclick="addP()"/>
<input type="button" value="新增图片标签" onclick="addImg()"/>
<input type="button" value="克隆图片标签" onclick="cloneImg()"/>
<input type="button" value="删除图片标签" onclick="deleteImg()"/>
<input type="button" value="删除段落标签" onclick="deleteP()" />

<div id="manager">
    <p>
        段落标签
    </p>
</div>

<script type="text/javascript">
	var manager=document.getElementById("manager");
   function addP(){
       //创建节点
       var p=document.createElement("p");//<p></p>
       //创建内容
       var text=document.createTextNode("新增段落标签");//新增段落标签
       //将内容添加到p标签中
       p.appendChild(text);//<p>新增段落标签</p>
       //将p标签添加到div标签中
       manager.appendChild(p);
       
   } 
    function addImg(){
        //创建节点
        var img=document.createElement("img");
        //设置属性
        img.setAttribute("width","100px");
        img.setAttribute("height","100px");
        img.setAttribute("src","../img/HerImg.jpg");
        //将br标签添加到div标签中
        manager.appendChild(br);
    }
    function cloneImg(){
        //获取img标签
        var img=document.getElementsByTagName("img")[0];
        //克隆标签
        var newImg=img.cloneNode(true);//true--深入克隆
        //将newImg标签添加到div中
        manager.appendChild(newImg);
        
        //获取br标签
        var br=document.getElementsByTagName("br")[0];
        //克隆标签
        var newBr=br.cloneNode(true);//true--深入克隆
        //将newBr标签添加到div标签中
        mannager.appendChild(newBr);
    }
    function deleteImg(){
        var img=document.getElementsByTagName("img")[0];
        var br=document.getElementsByTagName("br")[0];
        
        manager.removeChild(img);
        manager.removeChild(br);
    }
    function deleteP(){
        var p = document.getElementsByTagName("p")[0];
        var br = document.getElementsByTagName("br")[0];
        
        manager.removeChild(p);
        manager.removeChild(br);
			}
</script>

DOM案例

1.计算器案例：

<input id="num01" type="number"/>
+
<input id="num02" type="number"/>
<input type="button" value="=" onclick="add()"/>
<input id="num03" type="number"/>
<script type="text/javascript">
    var num01=document.getElementById("num01");
    var num02=document.getElementById("num02");
    var num03=document.getElementById("num03");
    
    function add(){
        var v1=num01.value;
        var v2=num02.value;
        var result=parseInt(v1)+parsent(v2);
        num03.value=reult;
    }
</script>

2.二级联动：

<select id="province">
    <option value="sc">四川</option>
    <option value="jx">江西</option>
    <option value="hn">湖南</option>
    <option value="hb">湖北</option>
</select>省
<select id="city">
    <option>成都</option>
    <option>自贡</option>
    <option>雅安</option>
    <option>内江</option>
    <option>雅安</option>
    <option>简阳</option>
</select>市
<script type="text/javascript">
	var city=document.getElementById("city");
    //onchange---改变
    document.getElementById("province").onchange=function(){
        if(this.value="sc"){
            city.innerHTML="<option>成都</option》<option>自贡</option><option>雅安</option><option>内江</option><option>雅安</option><option>简阳</option>"
        }else if(this.value="jx"){
				city.innerHTML = "<option>南昌</option><option>赣州</option><option>九江</option><option>新余</option><option>上饶</option><option>景德镇</option>";
		}else if(this.value == "hn"){
				city.innerHTML = "<option>长沙</option><option>湘潭</option><option>永州</option><option>娄底</option>";
		}else if(this.value == "hb"){
				city.innerHTML = "<option>武汉</option><option>黄冈</option><option>咸宁</option><option>仙桃</option>";
		}
    }
</script>

BOM

1.window对象

所有浏览器都支持Window对象。它表示浏览器窗口。

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

全局变量是window对象的属性

全局函数是window对象的方法

甚至HTML DOM document window

1.1 window.location

Location属性是一个用于存储当前载入页面URL信息的对象。

常常用作页面跳转和页面刷新：

<body>
    <input type="button" value="跳转到百度" onclick="fun01()"/>
    <input type="button" value="刷新页面" onclick="fun02()"/>

    <script type="text/javascript">
        function fun01(){
            //三种方式都可
            // window.location.href = "http://www.baidu.com";
            // window.location = "http://www.baidu.com";
            location = "http://www.baidu.com";
        }
        function fun02(){
            location.reload();
        }
    </script>
</body>
1.2 window.history

操作同一个浏览器会话中的已访问页面

常用方法：

back()跳转到上一页

forward()跳转到下一页

go(n)跳转到上n页

go(-n)跳转到下n页

注意：n为0时，go()效果和location.reload()相同为：刷新页面

<body>
    <input type="button" value="上两页" onclick="fun01()"/>
    <input type="button" value="上一页" onclick="fun02()"/>
    <input type="button" value="刷新" onclick="fun03()"/>
    <input type="button" value="下一页" onclick="fun04()"/>
    <input type="button" value="下两页" onclick="fun05()"/>

    <script type="text/javascript">
        function fun01(){
            window.history.go(-2);
        }

        function fun02(){
            //window.history.go(-1);
            history.back();
        }

        function fun03(){
            window.history.go(0);
        }

        function fun04(){
            //window.history.go(1);
            history.forward();
        }

        function fun05(){
            window.history.go(2);
        }
    </script>
</body>
1.3 window.open()

摊开一个新的页面（流氓广告）

<script type="text/javascript">
	window.open("http://www.baidu.com")
</script>

2.弹出框

2.1警告框alert()

无返回值，界面直接弹出消息。

img

2.2确认框confirm()

有返回值，会根据用户点击的按钮(确认or取消)返回一个Boolean值

img

2.3提示框prompt()

有返回值，提示框中用户能够填写信息，并返回。(如果点击取消，会返回一个null)

img

<body>
    <input type="button" value="警告窗" onclick="fun01()"/>
    <input type="button" value="确认窗" onclick="fun02()"/>
    <input type="button" value="提示窗" onclick="fun03()"/>

    <script type="text/javascript">
        function fun01(){
            alert("警告框");
        }
        function fun02(){
            console.log(confirm("确认框"))
        }
        function fun03(){
            console.log(prompt("提示框","默认值"))
        }
    </script>
</body>

3.定时器

3.1延时定时器

过多少毫秒就执行行次函数(只执行一次)

setTimeout语法：var t=setTimeout(“javascript语法”，毫秒)

clearTimeout清楚定时器：clearTimeout(t)

示例：隔三秒，图片自动切换一次

<body>
    <input type="button" value="取消定时" onclick="fun01()"/>
    <br />
    <img src="../img/1.jpg" >

    <script type="text/javascript">
        var img = document.getElementsByTagName("img")[0];

        //定时器:过多少毫秒就执行次函数(只执行一次)
        var time = setTimeout(function(){
            img.src ="../img/2.png";
        },3000);

        function fun01(){
            clearTimeout(time)
        }
    </script>
</body>
3.2循环定时器

美国多少毫秒就执行该函数(不限一次)

setInterval()方法可按照指定的周期(以毫米计)来调用函数或计算表达式

setInterval()方法会不停地调用函数，知道clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

语法：var time =setInterval(“javascript语法”,毫秒)

clearInterval()：清除定时器：clearInterval(time)

示例：循环切换图片

<body>
    <img src="../img/3.jpg" width="20%">
    <input type="button" value="取消切换" onclick="fun01()"/>
    <script type="text/javascript">
        var time01;
        window.onload = function(){
            var img = document.getElementsByTagName("img")[0];
            var imgSrcs=["../img/1.jpg","../img/2.png","../img/3.jpg"];
            var index = 0;
            time01 = window.setInterval(function(){
                img.src = imgSrcs[index];
                index++;
                if(index==imgSrcs.length){
                    index=0;
                }
            },1000)
        }
        function fun01(){
            clearInterval(time01);
        }
    </script>
</body>

示例：时钟

<body>
    <h1></h1>

    <script type="text/javascript">
        var h = document.getElementsByTagName("h1")[0];

        function setTime(){
            //创建日期对象
            var date = new Date();
            //获取日期信息
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();

            var time = hour + ":" + minute + ":" +second;
            h.innerText = time;
        }
        setTime();
        setInterval(function(){
            setTime();
        },1000)
    </script>
</body>

4.cookie

cookie是以键值对的形式保存的，即key=value的格式

cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名的时候，即使这个可用。因此可以跨越一个域名下的多个网页，但不能跨越多个域名使用

4.1 cookie可以做什么？
  1. 保存用户的登录状态
  2. 定制页面，如换皮肤，选择所在地区等等
  3. 购物车的实现
  4. 记录用户的浏览器历史记录
4.2 cookie的缺点
  1. cookie可能被禁用
  2. cookie是与浏览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也不能相互访问
  3. cookie可能被删除，英文cookie实际就是硬盘上的一个文件的安全性不够高，所有的都是以纯文本的形式记录于文件中
4.3 设置cookie

设置cookie内容

每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie

document.cookie=“userId=888”;

如果要一次存储多个名/值对，可以使用逗号加空格(;)隔开，例如：

document.cookie=“userId=888”;

document.cookie=“userName=1601”;

如果要改变一个cookie的值，只需要重新赋值，例如：

document.cookie=“userId=999”;

这样就将名为userId的cookie值设置为999.

4.4设置cookie过期时间

到现在为止，所有的cookie都是内存会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘

在实际开发中，cookie常常想要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：document…cookie=“userId=828;expires=GMT_String”;

注：群众GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。

<script type="text/javascript">
    function updateCookie(key,value,time){
        var date = new Date();
        date.setTime(date.getTime()+time)
        document.cookie = key + "=" + value + "; expires=" +date.toGMTString();
    }
</script>
4.5获取cookie

var strCookie=document.cookie;

浙江获取得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。（想要获取特定的值还需要进一步处理）

<script type="text/javascript">
    function queryCookie(key){
        var cs = document.cookie.split(";");
        for(var index in cs){
            var k=cs[index].trim().split("=")[0];
            var v=cs[index].trim().split("=")[1];
            if(k==key){
                return v;
            }
        }
    }
</script>
4.6删除cookie

为了删除一个cookie，可以将其过期时间设定为一个过去的时间（(new Date().getTime()-1或者直接是-1等等)

操作示例：
<body>
    <input type="button" value="添加Cookie" onclick="fun01()"/>
    <input type="button" value="删除Cookie" onclick="fun02()"/>
    <input type="button" value="修改Cookie" onclick="fun03()"/>
    <input type="button" value="查询Cookie" onclick="fun04()"/>

    <script type="text/javascript">
        function fun01(){
            updateCookie("username","dengshuo",1000*60*60*60*24*10);
            updateCookie("password","1234",1000*60*60*60*24*10);
        }
        function fun02(){
            updateCookie("username","",-1);
            updateCookie("password","",-1);
        }
        function fun03(){
            updateCookie("username","dengshuo_ddd",1000*60*60*60*24*10);
            updateCookie("password","123456",1000*60*60*60*24*10);
        }
        function fun04(){
            var username = queryCookie("username");
            var password = queryCookie("password");
            alert(username+"--"+password)
        }

        function updateCookie(key,value,time){
            var date = new Date();
            date.setTime(date.getTime()+time)
            document.cookie = key + "=" + value + "; expires=" +date.toGMTString();
        }
        function queryCookie(key){
            var cs = document.cookie.split(";");
            for(var index in cs){
                var k=cs[index].trim().split("=")[0];
                var v=cs[index].trim().split("=")[1];
                if(k==key){
                    return v;
                }
            }
        }
    </script>
</body>
榮十一
关注
专栏目录
H5知识点整理——1
Chenjingxvan的博客
06-05 808
H5基础知识点总结。
H5基础知识点
y1314999的博客
06-24 3089
1、标题HbuildX常用的快捷键： 1. ctrl+/ 注释代码 2. ctrl+y 恢复撤销 3. ctrl+x 剪切 4. ctrl+p 在当前项目查找文件 5. ctrl+f 在当前文件查找字符串 6. ctrl+alt+f 在当前目录查找字符串 7. ctrl+k 格式化代码 8. ctrl+g 跳转到某行代码 9. ctrl+o 打开文件 10. 鼠标左键+ctrl选中多行(可进行多行修改操作) 11 ...
H5 知识点
yunzhonghe5786的专栏
01-19 304
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <
H5知识点
qq_32886855的博客
10-30 328
一、link： link标签也存在于&lt;head&gt;中，作用如下  1.可以把样式引入到网页中  &lt;link ref="stylesheet" href="css样式地址.css"/&gt; 2.给网页title前面加个图标  &lt;link rel="icon" href="图标地址.icon"/&gt;  最好是使用后缀名是.icon的图片，.png的或其
H5的小知识点
YCM1101743158的博客
10-08 1630
/* */ 屏蔽; 换行; 一些值可以用百分比 比如 width:50%;标签:p 段落;h1 大标题; style 可多写; 1:html 也是一种文档格式,网页也是一种文档。 2:html 发展历史。 html4.01 html1.0 html5(最新) 3:DOCTYPE 是 document type 的简写,用来说明你用的 xhtml 或者 html 是什
h5知识点（1）
m0_69458840的博客
04-11 158
H5文件命名的规范： 小写英文字母、数字、下划线组合 其中不能包含汉字、空格和特殊字符 必须以英文字母开头 语义化规范 常规标记与空标记的区别： 常规标记：有开始有结束;属性使用空格隔开 例如：div、p 空标记：又开始没结束 例如：hr、br 目录的相对位置表示： /：从根目录出发 ./:从当前位置出发，和不写的效果是一样的 ../：返回上一层 ...
使用html+css+javascript实现聊天室的展示界面，并给出源码
06-03
知识点 * 使用 HTML、CSS 和 JavaScript 实现聊天室的展示界面 * 使用 HTML elemental structre 实现基本的聊天室结构 * 使用 CSS 设置聊天室的样式，包括背景颜色、字体、边框等 * 使用 JavaScript 实现聊天室的...
原生 H5 商城静态页面(HTML+ CSS+ JS)
最新发布
06-19
下面将分别介绍HTML、CSS和JavaScript在构建H5商城静态页面中的应用及其重要知识点。 1. HTML (HyperText Markup Language)： HTML是构成网页的基本框架，用于定义页面的结构和内容。在原生H5商城中，HTML元素如`...
HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap--思维导图
04-08
内容概要：思维导图涵盖知识包括HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap，每个模块包括基础知识点，还有一些注意点，介绍仔细，某些知识点会有图解，代码，以及本人学习过程的笔记。 适合人群： 比较...
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
通过以上知识点的学习和实践，学生可以掌握如何使用HTML5、CSS3和JavaScript构建一个具有基础交互功能的旅游网站。这些技能不仅适用于完成学业项目，也为未来从事前端开发工作打下了坚实的基础。
爱旅游网站H5+CSS3+JS+JQuery
06-03
下面我们将详细探讨其中涉及到的关键技术和知识点。 首先，H5（HTML5）是现代网页开发的标准，它增强了HTML的语法，提供了更多的多媒体支持，如音频、视频、图像以及画布（canvas）元素。在"爱旅游"网站中，HTML5的...
H5知识点总结(html/css/js)包含xmind文件
10-11
H5知识点总结(html/css/js)包含xmind文件,还包含了图片格式,svg格式以及网页格式的文件
H5+CSS+JS+jquery参考手册（API）
06-02
包含css2.0 css3 h5 jq1.3 jq 1.4 jq1.7 不同版本的参考手册
H5知识点一
07-02 202
1.<div>标签默认占用一行，若要使div在一行，可以使用displaced将其设置为inline-block元素，或给div设置浮动float 2.宽width，高height可以设置占比xx% 3.盒子模型 4.margin：0 auto 设置水平居中（离顶部0px，其他auto就是自动居中）。 5.backgroud-img后面在输入路径时应该写在url()中。 ...
H5基本知识点
hello250sunshine的博客
01-29 579
SVG SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速...
H5知识点总结
weixin_39354532的博客
07-04 462
比较简单基础的H5知识点总结
HTML5+CSS+JS
iku_whf的博客
01-07 1549
软件和文件内容的格式 HBuilder X 格式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 关于网页的一些属性 --> <!-- css样式 --> </head> <body> <!-- 主体内容 --> </body> </
h5知识点总结
NotBad_的博客
07-19 1163
Web Workers javaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。  Web Worker的目的:就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。  当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到
H5知识点2
07-04 230
1.下划线是通过设置边框形成的。 2.若一个元素的容器(如div父元素)，没有边框border，那么调整该元素的margin时，会连父容器的大小也被改变，解决方案1：给父容器设置边框；解决方案2：将子元素设置浮动。 3.在css中引用图片时，因为css文件的默认路径是css文件夹，所以引用不在css文件夹得图片时，要先写上../返回上一级目录 4.也可以在img元素中设置text-align...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

榮十一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值