H5 block-level tag summary-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

H5 block-level tag summary

Jan 10, 2018 am 09:24 AM

html5 Label Summary

This time I will bring you a summary of H5 block-level tags. How to use H5 block-level tags? What are the precautions when using H5 block-level tags? The following is a practical case, let’s take a look.

Block-level elements, simply put, are elements that occupy their own line. Its characteristics:

① always starts on a new line;

② height, line height and outer margin and inner margin can be used Control;

　③The width defaults to 100% of its container, unless a width is set.

④ It can accommodate inline elements and other block elements

The summary code is as follows:

&lt;!doctype html&gt;  
&lt;html&gt;  
&lt;head&gt;  
    &lt;meta charset=&quot;UTF-8&quot;&gt;  
    &lt;title&gt;Document&lt;/title&gt;  
&lt;/head&gt;  
&lt;body&gt;  
    &lt;!-- 块状元素 独占一行 --&gt;  
    &lt;!-- div无语义,称它为盒子 --&gt;  
    &lt;div&gt;盒子&lt;/div&gt;  
    &lt;!-- h1-h6语义 定义标题 --&gt;  
    &lt;h1&gt;标题1&lt;/h1&gt;  
    &lt;h2&gt;标题2&lt;/h2&gt;  
    &lt;h6&gt;标题3&lt;/h6&gt;  
    &lt;!-- p 语义 段落标签 写文字--&gt;  
    &lt;p&gt;文章&lt;/p&gt;  
    &lt;!-- 列表多数用来存一系列的相似的数据 --&gt;  
    &lt;!-- 有序列表 --&gt;  
    &lt;ol&gt;  
        &lt;li&gt;导航1&lt;/li&gt;  
        &lt;li&gt;导航2&lt;/li&gt;  
        &lt;li&gt;导航3&lt;/li&gt;  
    &lt;/ol&gt;  
    &lt;!-- 无序列表 --&gt;  
    &lt;ul&gt;  
        &lt;li&gt;导航1&lt;/li&gt;  
        &lt;li&gt;导航2&lt;/li&gt;  
        &lt;li&gt;导航3&lt;/li&gt;  
    &lt;/ul&gt;  
    &lt;!-- 定义列表 解释某个名词 --&gt;  
    &lt;dl&gt;  
        &lt;dt&gt;名词&lt;/dt&gt;  
        &lt;dd&gt;解释名词的位置&lt;/dd&gt;  
    &lt;/dl&gt;  
    &lt;!-- 表格 渲染性能不好 少用 --&gt;  
    &lt;table&gt;  
        &lt;caption&gt;表格头部&lt;/caption&gt;  
        &lt;!-- tr是行 --&gt;  
        &lt;tr&gt;  
            &lt;!-- th表头 --&gt;  
            &lt;th&gt;星期一&lt;/th&gt;  
            &lt;th&gt;星期二&lt;/th&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;!-- td单元格 --&gt;  
            &lt;td&gt;上课&lt;/td&gt;  
            &lt;td&gt;上课&lt;/td&gt;  
        &lt;/tr&gt;  
    &lt;/table&gt;  
&lt;/body&gt;  
&lt;/html&gt;

Copy after login

I believe you have mastered the method after reading these cases , for more exciting content, please pay attention to other related articles on the php Chinese website!