• html5的行标签与列标签


    html5的标签很多,这里不一一列举。下面只将常用的一些html5的行标签和列标签进行了分类总结,方便大家学习借鉴。注意:一些标签可在css样式中进行行标签与列标签的互相转换,这里所列举的标签没有进行任何样式的设置,所有列标签和行标签经本人亲测有效。
    块标签:

    <h1>一级标题 

    <h2>二级标题
    <h3>三级标题
    <h4>四级标题
    <h5>五级标题
    <h6>六级标题

    <ul>无序列表

    <ol>有序列表

    <dl> 自定义列表

    <dt>

    <dd>

    <p>段落

    <pre>格式化文本

    <blockquote>块引用

    <div>常用块

    <figure>

    <figcaption>

    <video>视频

    <nav>

    <address>地址

    <option>选择

    <fieldset>自定义字段

    <legend>说明

    <form>表单

    <table>表格

    行标签:

    <strong>加粗 

    <em>倾斜

    <i>倾斜

    <b>加粗

    <a>超链接

    <small>小字体文本

    <sub>下标

    <sup>上标

    <iframe>内联框架

    <img>图片

    <abbr>缩写

    <bdo>文字顺序

    <time>时间

    <tr>

    <td>

    <th>

    <caption>标题

    <colgroup>表格列合集

    <button>按钮

    <input>输入框

    <select>选择框

    <textarea>文本内容

    <mark>标记

    <audio>音频

    <u>下划线

    <label>表格标签

    <span>定义文本内区块

    <var>定义变量

    块标签

    H标签

    <h1>我是字体最大的标签</h1>

    <h2>我是字体第二大的标签</h2>

    无序列表

    <ul>
        <li>无序列表第一段</li>
        <li>无序列表第二段</li>
        <li>无序列表第三段</li>
    </ul>
     

    有序列表

    <ol>
        <li>我是有序列表</li>
        <li>有序列表第二段</li>
        <li>有序列表第三段</li>
    </ol>
     
    自定义列表
    <dl>
        <dt>我是自定义列表类似于段落</dt>
        <dd>自定义列表</dd>
    </dl>
     
    P标签
    <p>段落标签我是一个段落标签 <span class="color:red">a</span></p>
     
    Pre标签
    <pre>定义编排文本 保留文件原有格式例如 空格和列标签</pre>
     
    Blockquote标签
    <blockquote>定义引用文本,首行会空两格</blockquote>
     
    Div标签
    <div>
        <a href="">asdf </a>
    </div>
     
    Figure标签
    <figure>
        <figcaption>这是一个logo</figcaption>
        <img src="QQ截图20160405205734.png" width="200" height="100"/>
    </figure>
     
    Video标签 视频
    <video width="200" height="100"  controls autoplay loop muted>
        <source src="视频.MP4" type="video/MP4" >
    </video>
     
    Nav标签  一般是页码
    <nav>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </nav>
     
    Address标签
    <address>这是一个地址标签,倾斜显示</address>
     
    Datalist标签与optioon标签    放在表单内
    <input type="text" list="ilist">
    <datalist id="ilist">
        <option value="男装" label="男装" >男装</option>
        <option value="男裤" label="男裤">男裤</option>
        <option value="女装" label="女装">女装</option>
        <option value="女鞋" label="女鞋">女鞋</option>
    </datalist>
     
     
    Fieldset标签   放在表单内
    <fieldset>
        <legend>F26名单</legend>
        班长:<input type="checkbox"/>
        学委:<input type="checkbox"/>
    </fieldset>
     
    Form表单
    <form action="外部链接路径" method="get" name="myForm">
        <input type="text" value="username"/>
        请输入您的用户名称: <input type="text" placeholder="username" maxlength="10"/>
        请输入您的密码:<input type="password" /><br/>
        <input type="button" value="按钮"  /><br/>
        <input type="submit" value="提交"/><br/>
        <input type="reset" value="重置"/><br/>
        <input type="file" value="请选择你的文件"/><br/>
        <p>请选择你想要的水果</p>        //复选框
        苹果 <input type="checkbox"/>
        香蕉<input type="checkbox"/>
        梨子 <input type="checkbox"/>
        <p>请选择你的性别</p>             //单选框
        男 <input type="radio" name="sex"/>
        女 <input type="radio" name="sex"/>
        <br/>
    </form>
     
    Table标签
    <table border="1" style="border-collapse: collapse" cellpadding="5">
        <caption>这是一个表格</caption>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
        </tr>
        <tr>
            <td colspan="2">1-1</td>//横向合并单元格

            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>//纵向合并单元格
            <td>2-2</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>

            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
    </table>
     
     
     
     
     
     
     
     
     

    行标签

     
    Strong标签
    <strong>我是strong标签,起强调作用。显示加粗效果。</strong>
     
    Em标签
    <em>我是em标签,起强调作用。显示倾斜效果</em>
     
    I标签
    <i>我是i标签,起强调作用,显示倾斜效果。</i>
     
    B标签
    <b>我是b标签,显示加粗效果</b>
     
    A标签
    <a href="http://www.baidu.com" target="_blank">我是a标签,是一个链接标签。</a>
     
    Small标签
    <small>版权归作者所有&copy</small>
     
    Sub下标和上标标 sup
    我是<sup>上标</sup>
    我是<sub>下标</sub>
     
    Iframe标签
    <iframe scrolling="auto" src="http://www.baidu.com" frameborder="0" name="iframe"></iframe>
     
    Img标签
    <img src="QQ截图20160405205734.png" alt="这是一个图片"/>
     
    Abbr标签
    The <abbr title="People`s Republic of China" >PRC</abbr> was founded in 1949.
     
    Bdo标签
    <bdo dir="rtl">123456789</bdo>
     
     
     
    Time标签
    <time>11:37</time>
     
     
    Caption标签  一般用作表格标头
    <caption>这是一个标题</caption>
     
    Colgroup标签
    <table border="1" style="border-collapse:collapse" >
        <colgroup>
            <col style="background: red">//纵向设置单元格颜色
            <col style="background: blue">
            <col style="background: yellow">
            <col style="background: red">
            <col style="background: red">
        </colgroup>
        <tr>
            <th>1-1</th>
            <th>1-1</th>
            <th>1-1</th>
            <th>1-1</th>
            <th>1-1</th>
        </tr>
    </table>
     
    Button标签
    <button>按钮</button>
     
    Input标签
    <input type="text" value=""/>
     
     
    Select标签   放在表单内
    <input type="range" min=0 max=100 step=10 />
    <select name="option" id="chance">
        <option value="苹果">苹果</option>
        <option value="梨子">梨子</option>
        <option value="香蕉">香蕉</option>
    </select>
     
    Textarea标签  放在表单之外
    <textarea name="mingzi" id="text" cols="30" rows="10">多行文本</textarea>
     
    Mark标签
    早上记得<mark>吃早餐</mark>
     
     
    Audio标签 音频
    <audio controls autoplay>
        <source src="181漂亮男孩 m2m.wmv" type="audio/wmv"/>
    </audio
     
    Label标签
    <label for="nan">男</label>
    <input type="checkbox" id="nan"/>
    <label for="nv">女</label>
    <input type="checkbox" id="nv"/>
     
    Span标签
    <b>我是一个 <span style="color:red">span</span> 标签</b>
     
  • 相关阅读:
    C# 函数
    截取字符串 超长 用冒号显示
    免费的webservice接口
    Visual Studio 2010扩展让JS与CSS实现折叠
    两个div同时滚动
    cn_office_professional_plus_2010_x86_515 安装激活方法解决方案64bit
    Info.plist配置相关文件访问权限
    iOS 同一个View识别单击和双击手势
    WKWebView简单使用
    TabBar背景颜色设置
  • 原文地址:https://www.cnblogs.com/shengliang74/p/5376540.html
Copyright © 2020-2023  润新知