HTML总结

    一.HTML中meta标签：
        1.<meta charset="utf-8" />
        <title></title>
        
        2.<!--搜索优化引擎-->
        <meta name="author"  content="朱自清"/>
        <meta name="description" content="盼望着盼望着春天来了" />
        <meta name="keywords" content="盼望， 东风" />
        
        3.<!--刷新网页-->
        <meta http-equiv="refresh" content="4,http://www.baidu.com"/>
        
        4.<!--禁止缓存-->
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="expires"  content="0"/>
        
    二.HTML标签
        1.常用标签：<!--1.标题标签h1-h6 ：自动加粗加黑   自动换行  h1-h6逐渐变小   align：left左(默认)，center:中，right：右  -->
                <!--2.分割线标签hr：居中(默认)  px:像素-->
                <!--3.段落标签p   br:换行   &nbsp:空格-->
                <!--4.预文本标签pre  :按照指定格式输出，灵活性比较大，不建议使用-->
        2.小标签：<!--下划线小标签-->
                <u>北京尚学堂</u>
                <!--斜体小标签-->
                <i>北京尚学堂</i>
                <!--加粗加黑小标签-->
                <b>北京尚学堂</b>
                <!--中划线小标签-->
                <del>北京尚学堂</del>
                <!--上标标签-->
                2⁴
                <!--下标标签-->
                log₂8
                <!--字体变小-->
                <small>北京尚学堂</small>
                <!--字体变大-->
                <big>北京尚学堂</big>
                
                <!--字体标签-->
                <font color="red " size="20px">北京尚学堂</font>
                
                <!--span 在style中使用-->
                <span>北京尚学堂</span>
                <hr />
                
                <!--列表标签：1.有序标签ol 2.无序标签ul 3。自定义标签dl-->
                <ol type="1">
                    <li>javaSE</li>
                    <li>javaEE</li>
                    <li>javaME</li>
                </ol>
                
                <ul type="circle">
                    <li>javaSE</li>
                    <li>javaEE</li>
                    <li>javaME</li>
                </ul>
                
                <dl>
                    <dt>java</dt>
                    <dd>javaSE</dd>
                    <dd>javaEE</dd>
                    <dd>javaME</dd>
                </dl>
                <!--跑马灯标签-->
                <marquee direction="right" scrollamount="10">北京尚学堂</marquee>
                
        3.超链接标签：<!--超链接标签功能：1.实现页面跳转 ：跳转本地    跳转网络地址
                      2.实现锚点功能：返回底部，返回顶部
                     target="_blank":打开方法      _blank：另起一样    _relf:本身    
        
                    <a href="02body中常用的小标签.html" target="_blank">小标签</a>
                    
                    <a href="http://www.bjsxt.com" >北京尚学堂</a>
                    
        4.图片标签：<!--相对路径-->
                <img src="img/1.jpg" />
                <!--绝对路径:保存下来在桌面上可以显示，在此处不显示-->
                <img src="F:\四.网络编程和设计\代码\01HTML\img\2.jpg" />
                <!--网络路径-->
                <img src="https://www.baidu.com/img/bd_logo1.png?where=super" />
                img:  不会自动换行
    
                      src:插入路径
                      
                      title:图片标题
                      
                      border：边框
                      
                      align:位置，但是必须有参照物
                      
                      alt:图片没有正确插入
                      
                      width/height:宽/高   只写一个的话会等比例放大缩小  写两个按写的大小
        
        5.表格标签：table>tr*3>th*3+tab 快速三行三列
                table:  具有自适应能力
                        默认隐藏，需要加border显示
                        border="1px" width="300px" height="300px" 
                        align="center" 在表格中设置，整个都是相对表格而言
                        cellpadding="20px":内容和单元格距离
                        cellspacing="20px":单元格与单元格距离
                        
                    tr:行  height
                    td:普通列  width
                    th:标题列  width  自动居中，加粗
                    
                    colspan="2":列合并
                    
                    rowspan="2"：行合并
                    
                    bgcolor:背景颜色，最靠近哪个显示哪个
        
        6.表单标签：https://www.baidu.com/s：键1=值1&键2=值2
                form表单：   action：提交地址
                 method：提交方法
                         get：   1.请求参数依赖于地址之后  2.请求参数有长度限制     3.提交数据不安全
                         post：1.请求参数不依赖地址之后  2.请求参数没有长度限制 3.提交数据安全
                
                <!--1.普通文本框-->
            <input type="text" name="" value="123"/><br />
            <!--2.密码框-->
            <input type="password" name="" value="123"/><br />
            <!--3.单选框：必须有相同的name属性才能实现单选  checked="checked":默认选择  -->
            男：<input type="radio" name="sex" checked="checked"/>
            女：<input type="radio" name="sex"/><br />
            <!--4.多选框    value:真正传入到地址的值  checked="checked":默认选择 -->
            抽烟：<input type="checkbox" value="1" checked="checked"/>
            喝酒：<input type="checkbox" value="2"/>
            烫头：<input type="checkbox" value="3"/><br />
            <!--5.多行文本框-->
            个人介绍：<textarea rows="10" cols="15" value="">我在北京尚学堂</textarea><br /><br /><br /><br />
            
            <!--11.文件选择框-->
            文件选择：<input type="file" value="file"/><br />
            
            <!--6.下拉框-->
            <select>
                
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">杭州</option>
                <option value="4">深圳</option>
            </select>
            
            <!--7.隐藏框  :不显示，但是可以传内容-->
            <input type="hidden"  value="123"/><br />
            
            <!--8.提交按钮：提交表单数据-->
            <input type="submit" value="提交"/><br />
            
            <!--9.普通按钮：不能提交表单数据，和js中的事件一起使用，绑定事件-->
            <input type="button" value="提交"/><br />
            
            <!--10.重置/清除按钮：清除写的数据，但原有的数据不会清除-->
            <input type="reset" value="清除"/>
            
            <!--邮箱标签：遵循邮箱格式-->
            <p>
                邮箱：<input type="email" />
                
            </p>
            <!--数字标签：只能写数字 字母e可以-->
            <p>
                数字：<input type="number" />
                
            </p>
            <!--滑动器：控制声音等大小-->
            <p>
                滑动器：<input type="range" />
                
            </p>
            <!--日期：选择日期-->
            <p>
                日期：<input type="date" />
            
            H5表单增强属性：placeholder="手机号/邮箱"：显示字
               autofocus="autofocus"：自动获取焦点
               max：最大值
               min：最小值
               minlength最小长度
               maxlength：最大长度
        
        7.框架标签：1.<!--框架标签  一个网页嵌套另一个网页：宽    高    名   默认地址-->
                <iframe width="1000px" height="500px" name="ifr" src="http://www.baidu.com"></iframe>
                2.<!--框架标签：把网页划分成几个部分     上中下      中：左右     使用的不多没有iframe流量-->
                    <frameset rows="150px,*,100px">
                        <!--顶部部分-->
                        <frame src="demo/top.html" noresize="noresize"/>
                        <!--中间部分-->
                            <frameset cols="10%,*,10%">
                                <!--左边部分-->
                                <frame src="demo/left.html" />
                                <!--中间部分-->
                                <frame src="demo/center.html" name="cen"/>
                                <!--右边部分-->
                                <frame src="demo/right.html"/>
                                
                            </frameset>
                        <!--尾部部分-->
                        <frame src="demo/bottom.html"/>
                    </frameset>
        
        8.div标签：用于把页面分成几部分<!--头部分-->
                            <div class="top"></div>
                            <!--导航部分-->
                            <div class="tipe"></div>
                            <!--中间部分-->
                            <div class="center">
                                
                                <div class="login"></div>
                                
                            </div>
                            <!--底部部分-->
                            <div class="bottom"></div>
                            
        9.视频音频标签：1.<!--音频标签：需要有controls才能显示播放-->
                    <audio>
                        <source src="img/1.mp3" controls="controls"></source>
                        <source src="img/1.ogg" controls="controls"></source>
                        该网页不支持媒体标签
                    </audio>
                   2.<!--视频标签:需要有controls才能播放-->
                    <video>
                        <source src="img/movie.mp4" controls="controls" width="200px" height="200px"></source>
                        <source src="img/movie.ogg" controls="controls"></source>
                        <source src="img/movie.webm" controls="controls"></source>
                        该网页不支持媒体标签
                    </video>
                   3.<!--媒体标签：既支持音频又支持视频-->
                    <embed src="img/1.mp3"></embed>
                    <embed src="img/movie.mp4"></embed>
        11.<!--1.figure标签：开始处边框和内容有间隔，  和自定义标签的dd很类似-->
                <figure>
                    回电话
                    <figcaption>IT程序员</figcaption>
                </figure>
        
        12.<!--2.details标签：展示文章细节   默认标题为详细信息 通过summary可以改变标题 ，  和select选择标签很类似
                         mark:着重突出的内容
        -->
                <details>
                    <summary>请选择</summary>
                    <p>北京</p>
                    <p><mark>上海</mark></p>
                    <p>南京</p>
                </details>
        
        13.<!--3.刻度标签
                   max:最大值
                   min:最小值
                   value：当前值
                   low：自己定义的最小值
                   high：自己定义的最大值
            
        
        <meter max="100" min="0" value="90" low="20" high="80"></meter>
        
        14.<!--4.进度标签:用于文件上传-->
        <progress max="100" value="50"></progress>
        
        15.画布标签

        <canvas id="mycat">
            <script>
                var cat=document.getElementById("mycat");
                var t=cat.getContext("2d");
                t.fillStyle="#FF0000";
                t.fillRect(0,0,100,100);
                
            </script>
            
        </canvas>