【HTML】基础知识

1、什么是HTML?
　　Hyper Text Markup Language　　超文本标记语言

　　标记: <标记>

2、浏览器是ie吗？
　　ie是浏览器中的一种而已.
　　浏览器包括：IE 苹果谷歌欧鹏火狐猎豹 360浏览器搜狗等

3、标记格式: <开始标记></结束标记>

　　一般情况下,标记都是成对出现的

4、html的一般结构
html是由多个标记构成的

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
    </body>
</html>

5、html文件的后缀:

　　xxx.html　　xxx.htm

6、Hello World

<html>
    <head>
        <title>第一个html文件,hello</title>
    </head>
    <body>
        Hello World !~ 
    </body>
</html>

显示效果：　　

7、html中的注释

<html>
    <head>
        <title>第一个html文件</title>
    </head>
    <body>
        <!-- 注释 -->
        Hello World !~ 
    </body>
</html>

8、html中常用标记
　

标记中的属性　　<开始标记属性="属性值"></结束标记>

1> 标题 : h1 > h2 > ... > h6

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

2> 段落

<p>段落</p>

3> 链接:

<a href="http://www.baidu.com">百度</a>
<!--超链接添加属性 target="_blank"
锚节点:-->
<a name="top"></a>
<a href="#top">回到顶部</a>

4> <img/> 该标记可以自封闭

<img src="图片路径" width="宽度" height="高度"/>
<img src="imgs/02.gif" alt="美女" width="100" height="100"/>

5> 换行

<br />

6> 水平线

<hr />

7> b 、i、 u

<b><i><u>粗体</u></i></b>

8> 字体颜色

<font color="blue" size="20"></font> 已不推荐使用

9> 背景音乐

<bgsound src="./music/存在.mp3" loop="10"/>

10> 居中显示

<center></center>

11> 滚动显示

<marquee direction="right" loop="2" ><font color="blue" size="20">花落知多少？</font></marquee>

12> 边框

<fieldset style="border:1px solid red;width:500px;">
    <legend>古诗</legend>
</fieldset>

13> 框架

<html>
    <head>
        <title>欢迎来到童话的外挂</title>
    </head>
    <frameset rows="20%,80%">
        <frame src="test01.html" height="30" scrolling="no" noresize="noresize" frameborder="0" />
        <frameset cols="15%,80%">
            <frame src="left.html" frameborder="1" scrolling="no" noresize="noresize"/>
            <frame name="right" frameborder="0"/>
        </frameset>
    </frameset>
</html>

9、路径:
　　1> 绝对路径 :
　　2> 相对路径 : 推荐使用相对路径
　　　　.. : 上级目录
　　　　. : 当前目录

10、实体符号

　　　　空格　　   　　　　　　  
　　< 　　小于号　　< 　　　　　　　 <
　　> 　　大于号　　 > 　　　　　　　 >
　　& 　　和号　　 & 　　　　　　 &
　　" 　　引号　　 " 　　　　　　 "
　　' 　　撇号　　 ' (IE不支持) 　　'

11、表格标记

<!--表格-->
<table>
    <!--行-->
    <tr>
    <!--单元格-->
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    </tr>
</table>

<html>
    <head>
        <title>表格练习</title>
    </head>
    <body>
        <!-- 表格 -->
        <!-- border 边框的宽度  bordercolor边框颜色  -->
        <table border="20" bordercolor="red">
            <!-- 行 -->
            <tr>
                <!-- 单元格 -->
                <td>表格练习1</td>
            </tr>
        </table>
        
        <br />

        <!-- 表格 -->
        <!-- border 边框的宽度  bordercolor边框颜色  -->
        <table border="10" bordercolor="blue" cellspacing="0">
            <!-- 行 -->
            <tr>
                <!-- 单元格 -->
                <td>表格练习11</td>
                <td colspan="2">表格练习12</td>
                <!-- <td>表格练习13</td> -->
                <td>表格练习14</td>
            </tr>
            <tr>
                <!-- 单元格 -->
                <td>表格练习21</td>
                <td>表格练习22</td>
                <td>表格练习23</td>
                <td rowspan="2">表格练习24</td>
            </tr>
            <tr>
                <!-- 单元格 -->
                <td>表格练习31</td>
                <td>表格练习32</td>
                <td>表格练习33</td>
                <!-- <td>表格练习34</td> -->
            </tr>
        </table>
    </body>
</html>

示例

12、表单标记

<!-- text      文本   -->
<input type="text" name="userName" value="值"/>
<!-- password  密码框 -->
<input type="password" name="password"/>
<!-- radio      点选按钮 -->
<input type="radio" name="gender"/> 男 
<!-- checkbox  复选框 -->
<input type="checkbox" name="interest" value="music"/> 音乐
<!-- submit    提交按钮  -->
<input type="submit" name="reg" value="注册"/>
<!-- reset      重置按钮 -->
<input type="reset" name="reset" value="重置"/> 
<!-- 下拉框 -->
<select>
<option>请选择</option>
<option value="1990" selected="selected">1990</option><option value="1991">1991</option>
<option value="1992">1992</option>
</select> 年
<datalist id="url_list">
    <option label="中华人民共和国" value="中国" />
    <option label="CCTV" value="中央电视台" />
</datalist>
<!-- 普通按钮 -->
<input type="button" name="on" value="普通按钮"/>
<!-- 背景音乐 -->
<bgsound src="./music/存在1.mp3" loop="10"/>
<!-- 图片 -->
<img src="./imgs/02.gif" alt="美女" width="100" height="100"/>


<!-- hidden    隐藏的 -->
<xxxx>
<!-- 数字选框 -->
<input type="number" name="age" step="1" min="0" max="10"/>
<!-- 滑动范围 -->
<input type="range" name="range" step="1" min="0" max="10" value="2"/>
<!-- 搜索框 -->
<input type="search" name="search" />
<!-- 邮箱 -->
<input type="email" name="email" />
<!-- url -->
input type="url" name="url" />
<!-- 日期 -->
<input type="date" name="date" />

Canvas

<!DOCTYPE html>
<!-- saved from url=(0065)file:///E:/1+1+1%E4%B8%83%E6%9C%9F/HTML/20141104/hf/html5_01.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>千年王八万年龟</title>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
</canvas>
    
    <script type="text/javascript">
        //画布
        var canvas = document.getElementById("myCanvas");
        //相当于 画笔
        var cxt = canvas.getContext("2d");

        cxt.fillStyle="#339900";
        cxt.beginPath();
        cxt.arc(400,150,60,60,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.beginPath();
        cxt.arc(400,120,40,0,Math.PI*1,true);
        cxt.closePath();
        cxt.fillStyle="#0000FF";
        cxt.fill();

        cxt.beginPath();
        cxt.arc(400,120,45,0,Math.PI*1,true);
        cxt.closePath();
        cxt.fillStyle="#990066";
        cxt.fill();

        cxt.fillStyle="#0000FF";
        cxt.beginPath();
        cxt.arc(400,150,50,50,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#336666";
        cxt.beginPath();
        cxt.arc(400,300,120,120,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#006600";
        cxt.beginPath();
        cxt.arc(400,300,100,100,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(300,200,30,30,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(500,200,30,30,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(300,400,35,35,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(500,400,35,35,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
        
        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(400,432,16,16,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(400,440,16,16,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(400,445,16,16,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
        cxt.fillStyle="#003300";
        cxt.beginPath();
        cxt.arc(406,453,15,15,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
        
    </script>
</body></html>

乌龟

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Happy-Trails</title>
</head>
<body>

<canvas id="canvas" width="400" height="600" style="border: 1px solid;"/>

<script type="text/javascript">


    //绘制树叶树枝 路径
    function createCanopyPath(context){
        context.beginPath();//开启新路径
        
        context.moveTo(-25, -50);
        context.lineTo(-10, -80);
        context.lineTo(-20, -80);
        context.lineTo(-5, -110);
        context.lineTo(-15, -110);
        
        context.lineTo(0,-140);
        
        context.lineTo(15,-110);
        context.lineTo(5,-110);
        context.lineTo(20,-80);
        context.lineTo(10,-80);
        context.lineTo(25,-50);
        
        
        context.closePath();//闭合路径
    }

    //绘制树
    function drawTree(context){
        
        //树叶
        createCanopyPath(context);
        
        context.strokeStyle = "#663300";
        context.lineWidth = 4;
        context.lineJoin = "round";
        context.stroke();
        
        context.fillStyle = "#339900";
        context.fill();
        
        //树干
        //横行 颜色 线性渐变
        var trunkGradient = context.createLinearGradient(-5,0,5,0);
        trunkGradient.addColorStop(0, "#663300");
        trunkGradient.addColorStop(0.4, "#996600");
        trunkGradient.addColorStop(1, "#552200");
        
        context.fillStyle = trunkGradient;
        context.fillRect(-5, -50, 10, 50);
        
        //纵向 透明度 线性渐变
        var trunkAlphaGradient = context.createLinearGradient(0,-50,0,0);
        trunkAlphaGradient.addColorStop(0, "rgba(0,0,0,0.5)");
        trunkAlphaGradient.addColorStop(0.2, "rgba(0,0,0,0.0)");
        
        context.fillStyle = trunkAlphaGradient;
        context.fillRect(-5, -50, 10, 50);

        //倒影
        context.transform(1, 0, -0.5, 1, 0, 0); //矩阵变换
        context.scale(1.0, 0.6);//比例大小    按给定的缩放倍率缩放，1.0,为不变
        context.fillStyle = "rgba(0,0,0,0.2)";
        context.fillRect(-5, -50, 10, 50);
        
        createCanopyPath(context);
        context.fill();
    }

    //绘制封面
    function drawTrails(){
        //获取画笔
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        
        //小树
        context.save();////在绘图状态堆上保存当前绘图状态
        
        context.translate(130, 250);//Canvas 的原点到一个指定的值
        drawTree(context);
        
        context.restore();////弹出堆最上面保存的绘图状态
        
        //大树
        context.save();
        context.translate(260, 500);
        context.scale(2.0, 2.0);
        drawTree(context);
        
        context.restore();
        
        
        //碎石路
        context.save();
        
        context.beginPath();
        context.translate(-10, 350);
        context.moveTo(0,0);
        context.quadraticCurveTo(170, 50, 260, -190);//二次贝赛尔曲线  
        context.quadraticCurveTo(310, -250, 410, -250);//二次贝赛尔曲线  
        context.strokeStyle = context.createPattern(gravel,"repeat");//重复填充
        context.lineWidth = 20;
        context.stroke();
        
        context.restore();
        
        //文字
        context.save();
        
        context.font = "60px impact";//是一款自带撕边特效的英文字体，不会文字处理的朋友们可以使用这款字体
        context.textAlign = "center";//文字 居中
        context.fillStyle = "#996600";
        context.fillText("Happy-Trails", 200,60,400);
        //文字倒影
        context.transform(1, 0, -0.5, 1, 0, 0); //矩阵变换
        context.scale(1.0, 0.8);//比例大小    按给定的缩放倍率缩放，1.0,为不变
        context.fillStyle = "rgba(0,0,0,0.2)";
        context.fillText("Happy-Trails", 230,80,400);
        
        
        context.restore();
        
        
    }

    var gravel = new Image();
    gravel.src = "gravel.jpg";
    gravel.onload = function(){
        drawTrails();
    }

</script>
</body>
</html>

圣诞

posted @ 2022-04-24 21:29 Phoenixy 阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

【HTML】基础知识

Canvas

公告