HTML5块级标签

块级标签特点

独占一行,不允许其他元素和自己同行显示

 

标题标签<h1-6></h1-6>
标题标签默认是加大粗体效果
h1最大,h6最小

 

段落标签<p></p>

<!--例如:<p style="text-align: justify;text-indent: 2em;">文本</p>-->

技巧

在文本的开始处添加空格没有任何效果
在文本之间的多个空格或者回车换行,浏览器默认为一个空格
justify作用是使文本前后都整齐对齐

 

换行标签<br>

技巧
文本内换行在字后边加个空格,然后才能用Tab补全br

 

分割线标签<hr>

 

引用标签<blockquote></blockquote>

<!--例如:<blockquote cite="网址">文字</blockquote>-->

<p>
谦虚使人进步,骄傲使人落后!---毛主席
</p>
<!--cite指明引用途径-->
<blockquote cite="www.baidu.com">
谦虚使人进步,骄傲使人落后!---毛主席
</blockquote>

运行图

 

特点
定义引用标签, 浏览器在blockquote元素前后添加了换行,并增加了外边距。
cite指明引用途径

 

预格式标签<pre></pre>

保留文本的默认样式

<body>
<!--保留文本的默认样式-->
<pre>
    青岛理工大学
        理学院
            电子专业
                电子一班
</pre>
</body>

运行图

 

列表

<!--有序列表-->
<ol><!--Orderlist-->
    <li>填写信息</li><!--listItem列表项-->
    <li>接收邮件</li>
    <li>注册成功</li>
</ol>


<!--无序列表-->
<ul><!--unorderlist-->
    <li>如何激活会员</li>
    <li>如何注册会员</li>
    <li>设置密码的要求</li>
    <li>权限认证</li>
</ul>


<!--定义列表-->
<dl><!--definelist-->
    <dt>咖啡</dt><!--标题definelisttitle-->
    <dd><!--描述definelistdescription-->
        一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料。
    </dd>
</dl>

运行图


列表可以互相嵌套

 

组合标签
<!--图文混合用-->

<!--图文混合-->
<figure>
    <img src="../../img/city.jpg" width="150" height="100"><!--图片-->
    <figcaption><!--文字-->
        百度一下,你就了
    </figcaption>
</figure>

 

运行图

 

分区标签div

<div style="height: 100px;background-color: red"></div><!--px是像素密度-->
<div style="height: 50px;background-color: yellow">
    <ul>
        <li>首页</li>
        <li>IOS课程</li>
        <li>Android课程</li>
        <li>HTML5课程</li>
        <li>JAVAEE课程</li>
        <li>视频课程</li>
        <li>就业保障</li>
        <li>走进杰瑞</li>
    </ul>
</div>
<div style="height: 300px;background-color: blue"></div>
<div style="height: 1000px;background-color: yellow"></div>

运行图

 

 

posted @ 2017-07-20 10:14  哈喽杏红  阅读(678)  评论(0编辑  收藏  举报