重学前端基础

最新推荐文章于 2023-02-03 13:48:54 发布

杭家y

最新推荐文章于 2023-02-03 13:48:54 发布

阅读量252

点赞数

分类专栏：前端文章标签： css javascript js html

本文链接：https://blog.csdn.net/chenhangx/article/details/111299628

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML/ CSS 入门

html

文件标签

<!DOCTYPE html> //告诉浏览器这个 HTML 文档是 HTML 5 的版本 HTML 文档的类型：Doctype。
<html>
<head>
<meta charset="utf-8"> //不加的话,中文会乱码
<title>html教程</title>
</head>
<body>
<h1>我的第一个标题</h1>
<hr> //水平线
<p>我的第一个段落。</p>
</body>
</html>

在这里插入图片描述

图片标签

在这里插入图片描述

列表标签

在这里插入图片描述

链接标签

在这里插入图片描述

块标签(div span)

表格标签

在这里插入图片描述

表单标签

在这里插入图片描述

操作表单（验证）

在这里插入图片描述

MD5加密密码-表单优化

CSS:页面美化和布局控制

CSS的使用

在这里插入图片描述

<style> //同3
@import "css/a.css";
</style>

css语法

在这里插入图片描述

选择器

在这里插入图片描述

--class--
.date {
  color: red;
}

<p class="date">
  我是红色的css
</p>
<p>
  The event will be on <em class="date"> 我是红色的css </em>.
</p>

在这里插入图片描述

在这里插入图片描述
###属性

JS

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

* ECMAScript：客户端脚本语言的标准
	1. 基本语法：
		1. 与html结合方式
			1. 内部JS：
				* 定义<script>，标签体内容就是js代码
			2. 外部JS：
				* 定义<script>，通过src属性引入外部的js文件

			* 注意：
				1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
				2. <script>可以定义多个。

函数

事件

在这里插入图片描述

电灯开关

<body>
	<img id="light" src="img/off.gif">
	
	<script>
	    /*
	        分析：
	            1.获取图片对象
	            2.绑定单击事件
	            3.每次点击切换图片
	                * 规则：
	                    * 如果灯是开的 on,切换图片为 off
	                    * 如果灯是关的 off,切换图片为 on
	                * 使用标记flag来完成
	     */
	
	    //1.获取图片对象
	    var light = document.getElementById("light");
	
	    var flag = false;//代表灯是灭的。 off图片
	
	    //2.绑定单击事件
	    light.onclick = function(){
	        if(flag){//判断如果灯是开的，则灭掉
	            light.src = "img/off.gif";
	            flag = false;
	
	        }else{
	            //如果灯是灭的，则打开
	
	            light.src = "img/on.gif";
	            flag = true;
	        }
	 }
	</script>
	</body>

轮播图

<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */


        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);

    </script>
</body>

自动跳转

在这里插入图片描述

常见的事件

  <script>
        /*


        常见的事件：
            1. 点击事件：
                1. onclick：单击事件
                2. ondblclick：双击事件
            2. 焦点事件
                1. onblur：失去焦点。
                    * 一般用于表单验证
                2. onfocus:元素获得焦点。

            3. 加载事件：
                1. onload：一张页面或一幅图像完成加载。

            4. 鼠标事件：
                1. onmousedown	鼠标按钮被按下。
                    * 定义方法时，定义一个形参，接受event对象。
                    * event对象的button属性可以获取鼠标按钮键被点击了。
                2. onmouseup	鼠标按键被松开。
                3. onmousemove	鼠标被移动。
                4. onmouseover	鼠标移到某元素之上。
                5. onmouseout	鼠标从某元素移开。


            5. 键盘事件：
                1. onkeydown	某个键盘按键被按下。
                2. onkeyup		某个键盘按键被松开。
                3. onkeypress	某个键盘按键被按下并松开。

            6. 选择和改变
                1. onchange	域的内容被改变。
                2. onselect	文本被选中。

            7. 表单事件：
                1. onsubmit	确认按钮被点击。
                    * 可以阻止表单的提交
                        * 方法返回false则表单被阻止提交。
                2. onreset	重置按钮被点击。
         */





        //2.加载完成事件  onload
        window.onload = function(){
            /*//1.失去焦点事件
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");
            }*/
            /*//3.绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function(){
                alert("鼠标来了....");
            }*/

           /* //3.绑定鼠标点击事件
            document.getElementById("username").onmousedown = function(event){
               // alert("鼠标点击了....");
                alert(event.button);
            }*/

          /*  document.getElementById("username").onkeydown = function(event){
                // alert("鼠标点击了....");
               // alert(event.button);
                if(event.keyCode == 13){
                    alert("提交表单");
                }

            }*/

           /* document.getElementById("username").onchange = function(event){

                alert("改变了...")

            }

            document.getElementById("city").onchange = function(event){

                alert("改变了...")

            }*/

            /*document.getElementById("form").onsubmit = function(){
                //校验用户名格式是否正确
                var flag = false;


                return flag;
            }*/
        }

        function checkForm(){
            return true;
        }


    </script>

</head>
<body>

<!--
    function fun(){
       return  checkForm();
    }

 -->

<form action="#" id="form" onclick="return  checkForm();">
<input name="username" id="username">

<select id="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>

杭家y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
重学前端基础

文章目录html文件标签html文件标签<!DOCTYPE html><html><head><meta charset="utf-8"> //不加的话,中文会乱码<title>html教程</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html&g
复制链接

扫一扫