zoukankan      html  css  js  c++  java
  • HTML标签笔记

    换行符:<br/>
    首部:
    <!DOCTYPE>: 说明html文档使用的标准, 在HTML5中仅为 <!DOCTYPE html>
    1、头标签

    • <head></head>:在head里使用的标签为头标签
      • <title></title>:在标签上显示的内容  
      • <meta>:设置页面的一些相关内容  
        • 实现页面定时跳转:<meta http-equiv="refresh" content="秒数;url=路径" />    
      • <base />:设置超链接的一些内容  
      • <link />:引入外部文件  
        • 属性:    
          • rel:当前文档与被链接文档之间的关系      
          • type:被链接文档的 MIME 类型      
          • href:文件路径      
        • 引入css文件:<link rel="stylesheet" type="text/css" href="文件路径" />    
      • <style></style>:定义样式信息,与css文件相同  

    2、文字标签和注释标签

    • 文字标签:修改文字样式
      • <font></font>  
      • 属性:  
        • size:文字的大小,取值范围1-7,超出7,默认是7    
        • color:文字颜色    
          • 两种表示方式:      
            • 英文单词:red green ......        
            • 使用十六进制数表示 #ffffff        
      • <b></b>:加粗  
      • <s></s>:删除线  
      • <u></u>:下划线  
      • <i></i>:斜体  
      • <pre></pre>:原样输出  
      • <sub></sub>:上角标  
      • <sup></sup>:下角标  
      • <p></p>:段落标签,比br标签多一行  
    • 注释标签
      • <!-- html的注释 -->  

    3、标题标签、水平线标签和特殊字符

    • 标题标签
      • <h1></h1> <h2></h2> ......<h6></h6>  
      • 从h1到h6,大小依次变小,同时自动换行  
    • 水平线标签
      • <hr/>  
      • 属性:  
        • size:水平线的粗细,取值范围1-7    
        • color:颜色    
    • 特殊字符
      • < &lt;  
      • > &gt;  
      • 空格 &nbsp;  
      • & &amp;  

    4、列表标签

    • <dl> </dl>:表示列表的范围
      • 在dl里面 <dt> </dt>:上层内容  
      • 在dl里面 <dd> </dd>:下层内容  
    • <ol> </ol>:有序列表的范围
      • 属性:type 设置排序方式 1 a i  
      • 在ol里面 <li> 具体内容 </li>  
    • <ul> </ul>:无序列表的范围
      • 属性:type 空心圆 circle 实心圆 disc 实心方块 square 默认 disc  
      • 在ul里面 <li> </li>  

    5、图像标签

    • <figure>
      • 一般用于图片的布局  
    • <img />
      • 属性:  
        • src:图片路径    
        • width:图片宽度    
        • height:图片高度    
        • title: 当鼠标放上去时显示的文字    
        • alt:图片读取异常时显示文字(图片上显示文字(兼容性差))    

    6、超链接标签

    • 链接资源
      • <a> </a>  
        • 属性:    
          • href:链接的资源地址      
          • target:设置打开方式      
            • _blank: 在新窗口打开        
            • _self: 在当前页打开(默认)        
            • framesetName: 在指定名称的框架中打开        
    • 定位资源
      • 定义位置  
        • <a> </a>    
          • 属性:      
            • name: 位置名称,定义一个位置        
            • href: 定位到指定名称的位置处( this.html#name)        

    7、表格标签

    • <table> </table>: 表示表格的范围
      • <thead>和<tbody> 定义表格的标题与主题,标识作用  
      • 在table里面 <caption> </caption>:设置标题  
      • 在table里面 <tr> </tr>:表示行  
        • 在tr里面 <td> </td>:表示列    
        • 在tr里面 <th> </th>:相当于td的基础上做了居中和加粗的操作    
      • table属性:  
        • border:设置表格边框的宽度    
        • bordercolor:设置表格边框颜色    
        • cellspacing:设置单元格之间的距离    
        • width:表格宽    
        • height:表格高    
      • tr属性:  
        • align:设置显示方式 居左(left),居中(center),居右(right)    
      • td属性:  
        • align:设置显示方式 居左(left),居中(center),居右(right)    
        • rowspan:跨行的数量    
        • colspan:跨列的数量    

    8、表单标签(注册)

    • <form> </form>: 定义一个表单的范围
      • 属性:  
        • action:数据提交地址,默认当前路径    
        • method:表单提交方式,有get(默认) post    
    • <input />:输入项
      • input属性:  
        • type:输入项的类型    
          • text:普通输入项      
          • number: 数字项      
          • password:密码输入项      
          • radio: 单选输入项      
          • checkbox:复选输入项      
          • file:文件输入项(为表单添加 enctype="multipart/form-data" 属性, 且method="post")      
            • accept: 指定上传文件格式        
          • hidden:隐藏项      
          • submin:提交按钮      
          • image:图片形式提交按钮,src指定路径      
          • reset:重置按钮      
          • button:普通按钮      
          • placeholder: 提示信息(HTML5)      
          • name:元素名称      
          • value: 元素值      
          • checked:预先选定复选框或单选按钮      
          • readonly: 指定输入框为只读,不可编辑(布尔值)      
          • disabled: 禁用输入(布尔值), 不可与 type 为 hidden 的同时出现      
          • required: 该项必须填写      
          • pattern: 指定正则表达式, 与该表达式匹配才可以提交      
          • autofocus: 自动聚焦      
          • maxlength: 限制最大输入长度      
    • <label></label>: 绑定表单控件  
      • for: 控件id, 当点击其中文字时, 焦点到该控件上  
    • <textarea> </textarea>:文本域  
      • textarea属性:  
        • cols:列的数量    
        • rows:行的数量    
    • <select> </select>:下拉的输入项
      • <option> </option>:选择列表  
    • select 属性:
      • name  
    • option 属性:
      • value:元素值  
      • selected: 预选值  

    9、框架标签

    • <frameset></frameset>:定义框架集
      • 在frameset里面 <frame></frame>:frameset 中的一个特定的窗口  
    • frameset属性:
      • rows:按照行进行划分,*代表剩下所有(200px, *)  
      • cols:按照列进行划分,*代表剩下所有(200px, *)  
    • <noscript></noscript>: 其中的内容只有在浏览器不支持js或禁用了js时执行

    10、内容标签

    • 无意义标签(用来布局):
      • <div></div>:自动换行  
      • <span></span>:在一行显示  
      • <nav>: 导航块(HTML5)  
      • <header>: 头部(HTML5)  
      • <footer>: 在页面尾部显示(HTML5)  
      • <section>: 表示页面一个内容区块,如章节,页眉等(HTML5)  
      • <article>: 表示独立的内容,如文章等(HTML5)  
      • <aside>: 表示 article 的辅助信息(HTML5)  
      • <bgroup>: 页面中的标题(HTML5)  


    11. 影音标签

    • <video></video>: 视频标签(HTML5)
    • <audio></audio>: 音频标签(HTML5)
  • 相关阅读:
    springsecurity 注解开发
    springsecurity 授权
    【ElasticSearch】集群搭建
    【CentOS7.9】防火墙配置使用
    【CentOS7.9】创建及挂载共享文件夹
    查看Linux发行版
    【Spring Cloud】spring-cloud2020和spring-cloud-alibaba2021问题记录
    【Spring Cloud】spring.factories
    三剑客-----grep
    git安装
  • 原文地址:https://www.cnblogs.com/hujingnb/p/10228398.html
Copyright © 2011-2022 走看看