HTM5的一些大概讲解

最新推荐文章于 2022-04-19 13:21:36 发布

cwd_python

最新推荐文章于 2022-04-19 13:21:36 发布

阅读量454

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41781877/article/details/79872019

版权

html三大类

html三大类

在网页制作中说简单点就是分为3个大的类，通过三个类来一步步制作成一个网页。
分别为：标签函数、类样式、javaspric
一个网站标准开头为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

标签样式

标签样式我们都写在’body中间/body’。通常的标签分为
标题h和段落p；列表：有序ol无序ul（适合导航菜单）定义dl（图文混排）
链接：页面，锚链接，功能连接；img：alt表示图片无法显示时候显示文字
；表格table；表单form，一般写post如果上传了文件需要写enctypee=”multipart/form-data”
写required表示必填，一般用input。iframe内联框架

重点需要理解的就是div块级元素
表示在整个浏览器中分别设置一块一块的区域然后你在区域里面写相应的样式排版等

类样式

通常有两种写法:

类都写在head 中间/head

1:内部装饰
写在网页内部通过style去调用相应的模块给他们订样式
2:外部装饰
写在外部文件下格式为.css内，不用加style，需要用link函数去调用文件的位置，通常选用相对路径

颜色color，文本text，字体fount，行间距line-height，对齐text-align,
萎类：link/:hover:/
first-letter首字母
盒子模型：大小width height，边框：border、margin，显示隐藏display

这里类太多不用死记硬背需要的时候上网查找就是
菜鸟教程[http://www.runoob.com/html/html-tutorial.html]

javaspric

前端逻辑行为处理，运用原理和python几乎一样只是某些函数处理格式不同
window对象 location、history
Document.

下面来一些实际联系

将一个块通过鼠标点击可以拖动他

(function () {//表示自己调用自己
            var div1 = $('d1');
            handleEvent(div1,'mousedown',function (evt) {
                evt = evt||window.event;
                div1.x = evt.clientX;//绑定鼠标做表同时给div1绑定属性
                div1.y = evt.clientY;
                div1.mos = true;
                //通过元素的style属性我们只能修改样式并不能获取元素的样式
                //如果想获取一个元素当前的样式那么可以通过defaultView
                // 属性的getComputedStyle(elem)方法来获取elem元素当前样式的对象
                var c = document.defaultView.getComputedStyle(div1);//计算样式
                div1.l = parseInt(c.left);
                div1.t = parseInt(c.top)
            });
            handleEvent(div1,'mousemove',function (evt) {
                if (div1.mos){
                evt = evt||window.event;
                dx = evt.clientX - div1.x;
                dy = evt.clientY - div1.y;
                div1.style.left  = div1.l + dx +'px';
                div1.style.top  = div1.t + dy +'px';
                }
            });
            handleEvent(div1,'mouseup',function (evt) {
                div1.mos = false
            });

将两个按钮设置按一下换另一个按

 (function () { //这样写及时函数避免使用全局变量
            var but1 = $('button1');
            var but2 = $('button2');
            handleEvent(but1,'click',function () {
                but1.setAttribute('value','不可点');//将前面的值 改成后面的值
                but1.setAttribute('disable','');
                but2.setAttribute('value','可点');
                but2.removeAttribute('disable')

            });
            handleEvent(but2,'click',function () {
                but1.setAttribute('value','可点');
                but1.removeAttribute('disable');
                but2.setAttribute('value','不可点');
                but2.setAttribute('disable','');

            });
        }());

addEventListener 和 window.setInterval形成图片切换

前者表示将一个元素通过该属性绑定后后面写该元素通过什么样的行为（如按下“chiclk”）然后做什么事（function）

(function () {
            var coun = 0;
            var aaa;
            var a = ['print-02','print-03','print-04','print-05','print-01'];//有多少图片分别写在列表里方便取出
            var ii = document.getElementById('change');
            ii.addEventListener('mouseout',satr);
            function satr() {
                aaa = window.setInterval(function () {
                    ii.src = 'img/' + a[coun] + '.jpg';
                    coun += 1;
                    coun %= 5;
                },1000);//表示每1000毫秒做中间的事
            }
            ii.addEventListener('mouseover',function () {
                clearInterval(aaa)//鼠标移上去停止上面aaa的操作
            });
            satr();
            }())