ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML总结

2019-08-15 22:02:24  阅读:221  来源: 互联网

标签:总结 javaME 标签 北京 width 学堂 HTML javaSE


    一.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>

 

标签:总结,javaME,标签,北京,width,学堂,HTML,javaSE
来源: https://blog.csdn.net/yangbiaosb/article/details/99657477

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有