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<sup>4</sup>
                <!--下标标签-->
                log<sub>2</sub>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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值