HTML5 - 分组元素

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Fly_study/article/details/51818795

第二课 分组元素 加油加油

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>分组元素</title>
</head>
<body>
<!-- 段落 p -->
段落
<p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。皇后大道西,皇后大道东</p>
<p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。皇后大道西,皇后大道东</p>
<!-- 段落 div 间隙缩小 -->
通用分组
<div>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。皇后大道西,皇后大道东</div>
<div>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。皇后大道西,皇后大道东</div>
<!-- 引用大段文本 blockquote 居中 -->
大段文本
<blockquote>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。皇后大道西,皇后大道东</blockquote>
<blockquote>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。皇后大道西,皇后大道东</blockquote>
<!-- 分割线 hr -->
分割线<br>
<hr>
<!-- 编辑器格式 简单排版pre -->
简单排版<br>
<pre>
     春眠不觉晓,
              处处闻啼鸟。
     夜来风雨声,
              花落知多少。</pre>
<!-- 分组 ul ol dl -->
分组 无序ul
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
有序  ol
<!-- 倒序 reversed -->
<ol reversed>   
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<!-- 制定开始 -->
<ol start="3">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<!-- 排列方式 -->
<ol type="I">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<!-- 制定value -->
<ol>
    <li>张三</li>
    <li>李四</li>
    <li value="4">王五</li>
    <li>赵六</li>
</ol>
生成说明 dl
<dl>
    <dt>内容简要1</dt>
    <dd>这是一段说明</dd>
    <dd>这是另一段说明</dd>

    <dt>内容简要2</dt>
    <dd>这是一段说明</dd>
    <dd>这是另一段说明</dd>

</dl>
<!-- 加入图片 figure -->
<figure>
    <figcaption>这是一张图片</figcaption>
    <img src="001.jpg">
</figure>

</body>
</html>

没有更多推荐了,返回首页