html、html5、浏览器内核差异(乾坤未定，你我皆是黑马2）

本篇讲HTML标签、浏览器内核差异、HTML5标签
HTML（Hypertext Markup Language）全称是“超文本标记语言”.标记语言一般以ML结尾，与编译语言的区别就是没有逻辑与行为，是一堆被动的信息.

使用记事本，随便写点字，文件重命名，后缀名从".txt"改成".html"

双击或拖拽至浏览器打开

经过我们初步认识，发现html不就是网页吗！
HTML 文档 = 网页

html这玩意有个基本结构

在这里插入图片描述

<!DOCTYPE html>
这是一个声明，告诉浏览器按照哪个HTML版本进行处理，它必须写在第一行，凡是第一行写了别的东西，将使用怪异模式渲染。
<html></html>
html标签告诉浏览器这是一个html文档
<head></head>
文档的头部描述了文档的各种属性和信息,都有啥呐？
<title></title>标签，<link/>化妆的，<style></style>也是化妆的，<script></script>唱歌跳舞的，<meta/>忽悠浏览器的
<body></body>
body元素定义文档的主体,我们的<script></script>标签就放在这里面

标签与元素有啥区别？

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 元素指的是从开始标签到结束标签的所有代码

w3chool
这个网址对应着一些常用标签

在这里插入图片描述

在这里插入图片描述补充一点跨行跨列，colspan=‘2’ rowspan=‘2’

定义列表
<dl>
<dt></dt>
<dt></dt>
</dl>
无序列表
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
</ol>

复习一遍：

在这里插入图片描述

浏览器内核差异

1.我们用的谷歌、火狐，内核是 webkit,这玩意火的一批

2.opera浏览器用presto内核，presto的内核
3.臭名昭著的IE浏览器的内核------三叉戟（Trident）,当年很火
4.还有khtml，速度快，其实webkit是从khml衍生出来的

html5语义化

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200626194643256.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p2aGJp,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200626180137710.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p2aGJp,size_16,color_FFFFFF,t_70) 不行就背几个凑合凑合：**header** **footer** **nav** **article** **section** **aside**

多媒体标签：
在这里插入图片描述

需要记住的有：width height src loop autoplay muted
audio跟video用法一样，是用来播放音频的，常用属性：autoplay loop src contronls

表单：
在这里插入图片描述

<input type="image" src=""/>是个图片按钮，长得好看的按钮

在这里插入图片描述

学了上面的普通标签，语义化标签，多媒体标签，表单标签之后，HTML你就会用了。

补充知识点

<canvas></canvas>这个标签是用来当画布的，配合js使用

canvas快速入门
<svg/>里面放了一个矢量图形，是一个图
区别是：SVG 指可伸缩矢量图形，而Canvas是一个像素一个像素画上去的，放大缩小相当于重新画

<iframe src="网址1" name='zs' frameborder="0"></iframe>
<a href='网址2' target="zs">nini</a>

iframe标签，它会创建一个子窗口，name名字 frameborder边框宽度
a标签 ，target 控制哪个在窗口打开，默认是_self，在当前窗口打开，设置成_blank就会新窗口打开，也可以写上iframe的name，就会这相应窗口打开

今日超纲案例：灰太狼

下面是用 canvas画的**灰太狼**，后面我们一起学这玩意儿

<!DOCTYPE html>

<html>


<head>


    <meta charset="UTF-8">


    <title>Canvas绘制的灰太狼 </title>


</head>

<body>

    <div id="num">

    </div>

    <canvas id="demo" width="400" height="500" style="position:absolute;left:30px;top:100px;border:1px solid #000;">当前浏览器不支持canvas</canvas>

    <script>
        //http://www.j--d.com/bezier

        var d = document.getElementById('demo');


        function funLoad() {

            //创建绘画环境,2d平面图;在这个环境里面进行绘画;

            var cxt = d.getContext('2d');

            cxt.beginPath();

            cxt.lineWidth = 2;

            cxt.strokeStyle = 'green';

            //耳朵

            cxt.moveTo(33, 43);

            cxt.quadraticCurveTo(55, 40, 124, 73); //创建二次贝尔曲线

            cxt.moveTo(33, 43);

            cxt.lineTo(68, 140);

            cxt.moveTo(33, 43);

            cxt.quadraticCurveTo(73, 92, 89, 130);

            cxt.quadraticCurveTo(75, 127, 81, 136);

            cxt.lineTo(73, 136);

            cxt.lineTo(74, 139);

            //耳朵左下方

            cxt.quadraticCurveTo(36, 164, 24, 213);

            cxt.bezierCurveTo(52, 215, 49, 223, 41, 233);

            cxt.quadraticCurveTo(61, 235, 76, 243);

            //脸下面

            cxt.bezierCurveTo(88, 350, 290, 350, 309, 252);

            //耳朵右下方

            cxt.quadraticCurveTo(320, 239, 353, 234);

            cxt.bezierCurveTo(338, 223, 354, 215, 371, 214);

            cxt.quadraticCurveTo(360, 169, 325, 144);

            //右耳朵

            cxt.lineTo(333, 121);

            cxt.quadraticCurveTo(317, 100, 341, 97);

            cxt.lineTo(361, 43);

            cxt.quadraticCurveTo(307, 48, 266, 75);

            cxt.moveTo(361, 43);

            cxt.quadraticCurveTo(332, 72, 304, 133);

            cxt.quadraticCurveTo(318, 127, 313, 134);

            cxt.quadraticCurveTo(323, 132, 318, 140);

            cxt.quadraticCurveTo(324, 136, 325, 144)

            cxt.moveTo(266, 75);

            cxt.quadraticCurveTo(265, 90, 243, 94);

            cxt.lineTo(133, 112);

            //帽子

            cxt.quadraticCurveTo(90, 116, 107, 91);

            cxt.quadraticCurveTo(147, 29, 223, 27);

            cxt.quadraticCurveTo(272, 38, 266, 75);

            cxt.moveTo(107, 91);

            cxt.quadraticCurveTo(111, 110, 144, 100);

            cxt.lineTo(244, 80);

            cxt.quadraticCurveTo(264, 76, 267, 61);

            cxt.moveTo(196, 30);

            cxt.lineTo(176, 51);

            cxt.quadraticCurveTo(224, 43, 240, 66);

            cxt.quadraticCurveTo(252, 55, 264, 53);

            cxt.moveTo(186, 38);

            cxt.lineTo(198, 37);

            cxt.moveTo(176, 43);

            cxt.lineTo(190, 43);

            cxt.moveTo(186, 53);

            cxt.lineTo(194, 45);

            cxt.moveTo(200, 45);

            cxt.lineTo(196, 54);

            cxt.moveTo(210, 47);

            cxt.lineTo(205, 54);

            cxt.moveTo(219, 49);

            cxt.lineTo(213, 54);

            cxt.moveTo(229, 50);

            cxt.lineTo(222, 59);

            cxt.moveTo(237, 52);

            cxt.lineTo(232, 65);

            cxt.moveTo(244, 56);

            cxt.lineTo(250, 66);

            cxt.moveTo(252, 52);

            cxt.lineTo(261, 62);

            cxt.stroke();

            //画眉毛  线条加粗

            cxt.beginPath();

            cxt.lineWidth = 10;

            cxt.moveTo(99, 123);

            cxt.lineTo(169, 164);

            cxt.moveTo(220, 172);

            cxt.lineTo(291, 130);

            cxt.stroke();

            //脸部表情

            cxt.beginPath();

            cxt.lineWidth = 2;

            //眼睛横线

            cxt.moveTo(88, 168);

            cxt.lineTo(174, 188);

            cxt.moveTo(212, 180);

            cxt.lineTo(297, 199);

            //脸部伤疤

            cxt.moveTo(87, 173);

            cxt.lineTo(126, 286);

            cxt.moveTo(80, 204);

            cxt.lineTo(108, 191);

            cxt.moveTo(91, 220);

            cxt.lineTo(111, 211);

            cxt.moveTo(96, 236);

            cxt.lineTo(114, 226);

            cxt.moveTo(106, 248);

            cxt.lineTo(119, 243);

            cxt.moveTo(106, 267);

            cxt.lineTo(124, 259);

            cxt.moveTo(117, 276);

            cxt.lineTo(126, 272);

            //眼睛画法

            cxt.moveTo(106, 171);

            cxt.bezierCurveTo(109, 200, 142, 204, 159, 185);

            cxt.moveTo(230, 184);

            cxt.bezierCurveTo(233, 210, 267, 218, 284, 197);

            //嘴巴画法

            cxt.moveTo(123, 253);

            cxt.quadraticCurveTo(193, 275, 272, 253);

            cxt.bezierCurveTo(260, 300, 120, 290, 123, 253);

            cxt.stroke();

            //牙齿的画法

            cxt.beginPath();

            cxt.lineWidth = 1;

            cxt.moveTo(125, 260);

            cxt.lineTo(134, 263);

            cxt.lineTo(136, 259);

            cxt.lineTo(139, 265);

            cxt.lineTo(155, 270);

            cxt.moveTo(237, 270);

            cxt.lineTo(252, 266);

            cxt.lineTo(254, 258);

            cxt.lineTo(258, 264);

            cxt.lineTo(268, 261);

            cxt.stroke();

            //眼珠和鼻子的画法

            cxt.beginPath();

            cxt.lineWidth = 2;

            cxt.fillStyle = 'green';

            cxt.save();

            cxt.translate(133, 179);

            cxt.rotate(Math.PI * 2 / 20);

            cxt.arc(0, 0, 5, 3, Math.PI * 2, true);

            cxt.fill();

            cxt.restore();

            cxt.beginPath();

            cxt.save();

            cxt.translate(254, 190);

            cxt.rotate(Math.PI * 2 / 20);

            cxt.arc(0, 0, 5, 3, Math.PI * 2, true);

            cxt.fill();

            cxt.restore();

            //鼻子的画法

            cxt.beginPath();

            cxt.moveTo(190, 212);

            cxt.bezierCurveTo(150, 214, 150, 246, 190, 246);

            cxt.bezierCurveTo(230, 246, 230, 214, 190, 212);

            cxt.fill();

            cxt.beginPath();

            //鼻子上的白点

            cxt.fillStyle = '#fff';

            cxt.moveTo(162, 224);

            cxt.quadraticCurveTo(171, 212, 180, 224);

            cxt.quadraticCurveTo(171, 234, 162, 224);

            cxt.fill();

            //身体的总体画法

            //领口的画法

            cxt.beginPath();

            cxt.moveTo(119, 306);

            cxt.quadraticCurveTo(132, 334, 205, 363);

            cxt.quadraticCurveTo(256, 334, 264, 310);

            //胳膊的画法

            cxt.moveTo(110, 300);

            cxt.quadraticCurveTo(86, 334, 81, 370);

            cxt.quadraticCurveTo(67, 371, 66, 394);

            //左边手指头的画法

            cxt.bezierCurveTo(60, 418, 71, 427, 76, 421);

            cxt.moveTo(76, 399);

            cxt.bezierCurveTo(70, 419, 85, 434, 89, 421);

            cxt.quadraticCurveTo(79, 414, 85, 399);

            cxt.moveTo(89, 421);

            cxt.bezierCurveTo(98, 430, 102, 430, 99, 400);

            cxt.moveTo(101, 410);

            cxt.quadraticCurveTo(119, 419, 112, 400);

            cxt.bezierCurveTo(105, 388, 114, 378, 101, 371);

            cxt.moveTo(100, 376);

            cxt.quadraticCurveTo(109, 324, 126, 315);

            //右边胳膊的画法

            cxt.moveTo(280, 299);

            cxt.quadraticCurveTo(310, 340, 312, 371);

            cxt.quadraticCurveTo(326, 376, 326, 398);

            cxt.bezierCurveTo(330, 415, 326, 426, 318, 420);

            cxt.moveTo(317, 399);

            cxt.bezierCurveTo(323, 419, 313, 433, 305, 422);

            cxt.moveTo(309, 400);

            cxt.bezierCurveTo(310, 425, 291, 442, 292, 403);

            cxt.moveTo(292, 410);

            cxt.bezierCurveTo(284, 416, 274, 413, 282, 397);

            cxt.quadraticCurveTo(280, 375, 293, 371);

            cxt.moveTo(294, 376);

            cxt.quadraticCurveTo(289, 338, 267, 314);

            cxt.stroke();

            //肚子的画法线条为3px

            cxt.beginPath();

            cxt.lineWidth = 3;

            cxt.moveTo(127, 319);

            cxt.bezierCurveTo(90, 470, 310, 460, 262, 317);

            //肚脐眼的画法边框是个圆

            cxt.moveTo(188, 389);

            cxt.lineTo(197, 399);

            cxt.moveTo(190, 402);

            cxt.lineTo(195, 391);

            cxt.stroke();

            cxt.beginPath();

            cxt.save();

            cxt.translate(194, 396);

            cxt.arc(0, 0, 10, 1, Math.PI * 2, false);

            cxt.restore();

            cxt.stroke();

            //左️腿部画法

            cxt.beginPath();

            cxt.lineWidth = 2;

            cxt.moveTo(144, 406);

            cxt.lineTo(127, 434);

            cxt.lineTo(136, 449);

            cxt.moveTo(152, 417);

            cxt.lineTo(142, 434);

            cxt.moveTo(139, 431);

            cxt.lineTo(151, 450);

            //左边脚趾头的画法

            cxt.bezierCurveTo(110, 441, 90, 464, 105, 476);

            cxt.lineTo(156, 476);

            cxt.bezierCurveTo(175, 473, 170, 459, 151, 450);

            cxt.moveTo(126, 455);

            cxt.quadraticCurveTo(106, 456, 108, 474);

            cxt.moveTo(139, 457);

            cxt.quadraticCurveTo(121, 459, 125, 474);

            //右腿画法

            cxt.moveTo(244, 416);

            cxt.lineTo(252, 433);

            cxt.moveTo(255, 430);

            cxt.lineTo(245, 450);

            cxt.moveTo(254, 406);

            cxt.lineTo(269, 433);

            cxt.lineTo(261, 448);

            //右边脚趾头的画法

            cxt.bezierCurveTo(218, 456, 220, 472, 234, 475);

            cxt.lineTo(289, 475);

            cxt.bezierCurveTo(304, 467, 302, 452, 261, 448);

            cxt.moveTo(255, 457);

            cxt.quadraticCurveTo(275, 461, 268, 474);

            cxt.moveTo(270, 455);

            cxt.quadraticCurveTo(291, 462, 285, 474);

            //尾巴的画法

            cxt.moveTo(198, 428);

            cxt.quadraticCurveTo(203, 453, 228, 458);

            cxt.moveTo(236, 453);

            cxt.bezierCurveTo(213, 440, 214, 437, 248, 448);

            cxt.bezierCurveTo(230, 430, 230, 428, 251, 433);

            cxt.moveTo(275, 450);

            cxt.quadraticCurveTo(287, 432, 287, 416);

            cxt.quadraticCurveTo(270, 420, 255, 412);

            cxt.stroke();

        }

        funLoad();

        //这是鼠标移动到画面任何位置的坐标，，，自己可以照着画哦。。。


        var x = 0,
            y = 0;

        var num = document.getElementById("num");

        d.onmousemove = d.onmouseenter = function(e) {

            x = e.clientX - d.offsetLeft;

            y = e.clientY - d.offsetTop;

            //console.log("x:"+x,"y:"+y);

            num.innerHTML = "x:" + x + "y:" + y;

        }
    </script><br>



</body>

</html>

在这里插入图片描述

只有拥有了css后html才会变好看呦

html

整个网页

下一篇css、css3快速入门

html、html5、浏览器内核差异(乾坤未定，你我皆是黑马2）

猜你喜欢