zoukankan      html  css  js  c++  java
  • HTML行为元素和块级元素及语义化

    块级元素

    div - dl - form 交互表单
    h1 - h6 标题
    hr 水平分割线
    p 段落
    ul 非排序列表
    table 表格

    行内元素

    a 链接
    br 换行
    em 强调
    i 斜体
    img 图片
    input 输入框
    label 表格标签
    select 项目选择
    span 文本内区块
    label 标签
    strong 粗体强调
    textarea 多行

    换行是块级元素不换行的是行内元素

    <!DOCTYPE html>
    <!--当前文档为html5-->
    <html>
    
    <head>
        <!--设置文档编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <!--设置关键字和描述方便SEO-->
        <meta name="keywords" content="关键字">
        <meta name="description" content="网站描述">
        <!--设置移动端开发缩放比例-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
    </head>
    
    <body>
        <div>div</div>
        <div>
            <p>P</p>
        </div>
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
        </dl>
        <h1>标题h1</h1>
        <h2>标题h2</h2>
        <h3>标题h3</h3>
        <h4>标题h4</h4>
        <h5>标题h5</h5>
        <hr/>
        <!-- 无序列表 -->
        <ul>
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
        </ul>
        <!-- 有序列表 -->
        <ol>
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
        </ol>
        <b>b是加粗</b>
        <u>u是下滑线</u>
        <i>i是斜体</i>
        <s>s是删除</s>
        <strong>strongs是非常强壮</strong>
        <img src="" alt="图片显示失败时显示的文字" title="鼠标在图片上时的提示" width="100" height="100">
        <a href="https://www.baidu.com/" target="_blank">新的页面打开</a>
        <a href="https://www.baidu.com/" target="_self">在本身打开</a>
        <table border="1">
            <thead>
                <tr>
                    <th>
                        头一
                    </th>
                    <th>
                        头二
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2">
                        12
                    </td>
                </tr>
                <tr>
                    <td rowspan="2">
                        35
                    </td>
                    <td>
                        4
                    </td>
                </tr>
                <tr>
                 
                    <td>
                        6
                    </td>
                </tr>
            </tbody>
        </table>
    
        <iframe src="https://www.baidu.com/" width="200" height="200"></iframe>
    </body>
    
    </html>
  • 相关阅读:
    C#与C++中struct和class的小结
    C#中string的小结
    树的一些操作——遍历,前序和中序建立后续
    一个快速、高效的Levenshtein算法实现——代码实现
    整数拆分
    阶乘结果中0的个数
    普莱菲尔密码矩阵生成算法
    CTF密码学总结
    盲文对照表
    实验吧-古典密码
  • 原文地址:https://www.cnblogs.com/lgxlsm/p/5603369.html
Copyright © 2011-2022 走看看