第四篇 HTML常用块级元素
原创
一、常用的元素块级元素<div>、<ul>、<dl>、<ol>、:<h1>~<h6>、<p>、<address>、<table>、<article>、
(1)区/章节：<div>
<div style="background-color:red">父区域
<div style="background-color:blue;width:90%;margin-left:5%">子区域1</div>
<div style="background-color:green;width:90%;margin-left:5%">子区域2</div>
</div>
<div>使用
(2)列表元素<ul>、<dl>、<ol>
<ul>使用
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
<ul>使用
<dl>使用
<dl>
<dt>登鹳雀楼</dt>
<dd>白日依山尽，黄河入海流。</dd>
<dd>欲穷千里目，更上一层楼。</dd>
</dl>
<dl>使用
(3)标题元素:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<h1>第1章节</h1>
<h2 style="margin-left:20px">第1.1章节</h2>
<h3 style="margin-left:40px">第1.1.1章节</h3>
<h4 style="margin-left:60px">第1.1.1.1章节</h4>
<h5 style="margin-left:80px">第1.1.1.1.1章节</h5>
<h6 style="margin-left:100px">第1.1.1.1.1.1章节</h6>
标题元素h
(4)<address>组织联系信息、<p>段落元素
<p>联系方式</p>
<address>
<a href=kk@rock.com">kk.com</a><br>
<a href="tel:+13115552368">(+86) 010-5555-5555</a>
</address>
(5)表格元素<table>,<tr>表头,<td>行记录，<thead>表格标题
<table>
<thead>
<tr>
<th colspan="2">期末考试成绩</th>
</tr>
</thead>
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>张三</td>
<td>94</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>96</td>
<td>98</td>
</tr>
</table>
表格元素
(6)页脚<footer>页脚、<article>文章章节元素
<article>
<h1>我们的服务</h1>
<ol>
<li>产品技术A.</li>
<li>产品技术B.</li>
<li>产品技术C.</li>
</ol>
<footer>
<p>© 2022版权所有kk科技</p>
</footer>
</article>
<footer>页脚元素
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录