美文网首页
HTML 常用块级标签

HTML 常用块级标签

作者: Biosciman | 来源:发表于2019-04-13 19:07 被阅读0次

    超文本标记语言(HyperText Markup Language,HTML)是一种用于创建网页的标准标记语言。

    HTML的标准结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>
    
    

    HTML的标准结构相应解释

    <!DOCTYPE html>
    <!--第一行为声明文档,告诉浏览器用什么html格式解析代码(不区分大小写)-->
    <html lang="en">
    <!--html是网页中最大的标签-->
    <head>
    <!--head头:主要写不直接显示在页面中的内容,一般是网页的一些设置-->
        <meta charset="UTF-8">
        <!--设置网页的编码格式-->
        <title>我的第一个网页</title>
        <!--设置网页的标题-->
    </head>
    <body>
    <!--body体:主要写显示早页面中的内容-->
        welcome to html
        <!--标题标签:有默认样式;独占一行-->
            <h1>这是一级标题</h1>
            <h2>这是二级标题</h2>
            <h3>这是三级标题</h3>
            <h4>这是四级标题</h4>
            <h5>这是五级标题</h5>
            <h6>这是六级标题</h6>
            <!--没有七级标题-->
        <!--段落标签:有默认样式;独占一行-->
            <p>这是段落</p>
            <P>这是换<br>行</P>
            <!--br标签强制换行-->
        <!--列表-->
            <!--无序列表:有默认样式;独占一行-->
            <!--ul标签中只能写li标签-->
            <ul>
                <li>这是无序列表</li>
                <li>这是无序列表</li>
                <li>这是无序列表</li>
            </ul>
            <!--有序列表-->
            <ol type="I", start="2">
                <li>这是有序列表</li>
                <li>这是有序列表</li>
                <li>这是有序列表</li>
            </ol>
            <!--自定义列表-->
            <dl>
                <dt>自定义列表的标题</dt>
                <dd>这是自定义列表</dd>
            </dl>
        <!--表格标签:table声明表格:th表头、tr行、td列-->
            <table border="1" cellpadding="10px" cellspacing="0" width="800px" height="800px">
            <!--声明表格-->
            <!--
            表格属性:
            width:设置单元格的总体宽度
            height:设置单元格的总体高度
            border:边框
            cellpadding:内容距离表框的距离
            cellspacing:单元格和单元格之间的距离
            rowspan:设置垂直方向一个单元格占据的高度
            colspan:设置水平方向一个单元格占据的宽度
            anglin:内容水平对其方式:默认居左
            valign:内容垂直对其方式:默认居中
            -->
                <th colspan="4">这是表格中的表头</th>
                <!--声明表格,默认居中加粗-->
                <tr align="center">
                <!--这是表格中的第一行 居中:center;居右:right;居左:lift-->
                    <td colspan="4">这是第一行的第一列</td>
    <!--                <td>这是第一行的第二列</td>-->
    <!--                <td>这是第一行的第三列</td>-->
    <!--                <td>这是第一行的第四列</td>-->
                </tr>
                <tr align="lift" valign="bottom">
                <!--这是表格中的第二行 居下:bottom;居上:top;居中:medial-->
                    <td rowspan="2">这是第二行的第一列</td>
                    <td>这是第二行的第二列</td>
                    <td>这是第二行的第三列</td>
                    <td>这是第二行的第四列</td>
                </tr>
                <tr align="right" valign="top">
                <!--这是表格中的第三行-->
    <!--                <td>这是第三行的第一列</td>-->
                    <td>这是第三行的第二列</td>
                    <td>这是第三行的第三列</td>
                    <td>这是第三行的第四列</td>
                </tr>
            </table>
        <hr>
        <!--hr为水平分割线-->
        <!--区块元素div:没有默认样式,独占一行。一般用来划定一块区域,配合css在布局中使用-->
    <div>这是一个div</div>
    <br>
    <br>
    <br>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML 常用块级标签

          本文链接:https://www.haomeiwen.com/subject/uiyrwqtx.html