块级标签特点
独占一行,不允许其他元素和自己同行显示
标题标签<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>
运行图