zoukankan      html  css  js  c++  java
  • 标签学习

    1、格式

    <bdi></bdi>:允许您设置一段文本,使其脱离其父元素的文本方向设置。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <p id="one" style="color:red;font-size:10pt;">Let's
    <bdi id="one_sub" style="color:blue;font-size:20pt"> begin</bdi>
    </p>
    
    </body>
    </html>
    bdi标签

    html标签结果展示截图:     

    <meter></meter>:定义度量衡。仅用于已知最大和最小值的度量。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <p id="one" style="color:red;font-size:10pt;">Let's
    <bdi id="one_sub" style="color:blue;font-size:20pt"> begin</bdi>
    </p>
    
    <p><meter value="2" min="0" max=10>2 out of 10</meter> 20%</p>
    <p><meter value="0.5">50%</meter> 50%</p>
    
    </body>
    </html>
    meter标签

    html标签结果展示截图:

    <progress></progress>:定义运行中的任务进度(进程)。注释:IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <p id="one" style="color:red;font-size:10pt;">Let's
    <bdi id="one_sub" style="color:blue;font-size:20pt"> begin</bdi>
    </p>
    
    <p><meter value="2" min="0" max=10>2 out of 10</meter> 20%</p>
    <p><meter value="0.5">50%</meter> 50%</p>
    
    <p>下载进度30% <progress value=30 max="100"></progress></p>
    
    </body>
    </html>
    progress标签

    html标签结果展示截图:

    <q></q>:定义短的引用。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <p id="one" style="color:red;font-size:10pt;">Let's
    <bdi id="one_sub" style="color:blue;font-size:20pt"> begin</bdi>
    </p>
    
    <p><meter value="2" min="0" max=10>2 out of 10</meter> 20%</p>
    <p><meter value="0.5">50%</meter> 50%</p>
    
    <p>下载进度30% <progress value=30 max="100"></progress></p>
    
    <p>He said:<q>do what you want.</q></p>
    
    </body>
    </html>
    q标签

    html标签结果展示截图:

    <ruby></ruby>:定义 ruby 注释(中文注音或字符)。<rt></rt>:定义字符(中文注音或字符)的解释或发音。<rp></rp>:定义不支持 ruby 元素的浏览器所显示的内容。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <p id="one" style="color:red;font-size:10pt;">Let's
    <bdi id="one_sub" style="color:blue;font-size:20pt"> begin</bdi>
    </p>
    
    <p><meter value="2" min="0" max=10>2 out of 10</meter> 20%</p>
    <p><meter value="0.5">50%</meter> 50%</p>
    
    <p>下载进度30% <progress value=30 max="100"></progress></p>
    
    <p>He said:<q>do what you want.</q></p>
    
    <ruby><rp>(</rp><rt>Han</rt><rp>)</rp><rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>
    
    </body>
    </html>
    ruby、rp、rt标签

     html标签结果展示截图:

    <u></u>:underline定义下划线文本。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <p id="one" style="color:red;font-size:10pt;">Let's
    <bdi id="one_sub" style="color:blue;font-size:20pt"> begin</bdi>
    </p>
    
    <p><meter value="2" min="0" max=10>2 out of 10</meter> 20%</p>
    <p><meter value="0.5">50%</meter> 50%</p>
    
    <p>下载进度30% <progress value=30 max="100"></progress></p>
    
    <p>He said:<q>do what you want.</q></p>
    
    <ruby><rp>(</rp><rt>Han</rt><rp>)</rp><rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>
    
    <p>Here we <u>go</u></p>
    
    </body>
    </html>
    u标签

     html标签结果展示截图:

    2、表单

    <form></form>:定义一个 HTML 表单,用于用户输入。

    <form> 元素包含一个或多个如下的表单元素:
        <input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>

    <form>属性:

    action                  URL                        规定当提交表单时向何处发送表单数据。
    autocompleteNew        on / off                    规定是否启用表单的自动完成功能。
    method                get / post                    规定用于发送表单数据的 HTTP 方法。
    name                  text                                规定表单的名称。
    novalidateNew        novalidate                    如果使用该属性,则提交表单时不进行验证。
    target        _blank / _self / _parent / _top            规定在何处打开 action URL
    View Code

     <input>:定义一个输入控件。

    <textarea></textarea>:定义多行的文本输入控件。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Learn to use it</title>
    
    </head>
    <body>
    
    <form>
    <textarea rows="5" cols="30">
    It is never too old to learn.
    </textarea>
    </form>
    
    </body>
    </html>
    textarea标签

     html标签结果展示截图:

    <button></button>:定义按钮。

    <button>属性

    name                    name                                        规定按钮的名称。
    type               button/reset/submit                                 规定按钮的类型。
    value                       text                                规定按钮的初始值。可由脚本进行修改。
    formmethod               get/post                    规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
    formnovalidate        formnovalidate            如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
    formtarget        _blank / _self / _parent / _top    / framename                规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
    formactionNew            URL                        规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
    button属性
  • 相关阅读:
    如何解决js跨域问题
    前端开发群推荐:鬼懿IT
    Highcharts中文API详解
    搜索弹层交互
    js中判断Object、Array、Function等引用类型对象是否相等的方法
    各种之父
    UNIX简介
    MATLAB二维正态分布图
    Albert Einstein says
    GNU简介
  • 原文地址:https://www.cnblogs.com/windyrainy/p/10722210.html
Copyright © 2011-2022 走看看