html5&css&js代码 015 列表元素
- 一、代码
- 二、解释
这段HTML代码定义了一个网页，展示了不同类型的列表（无序列表、有序列表和定义列表）的示例。网页使用了自定义的样式，包括字体颜色、背景颜色、边距、字体大小和布局。页面底部包含一个页脚，显示了代码作者的信息。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>编程笔记 html5&css&js 列表</title>
<meta charset="utf-8"/>
<style>
body {
color: cyan;
background-color: teal;
margin: 0 0;
font-size: 1.5rem;
}
div {
position: relative;
left: 50%;
transform: translateX(-50%); /* 将容器向左移动自身宽度的一半 */
margin: 50px 300px;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div>
<h1>列表元素示例</h1>
<h2>无序列表 (unordered list)</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子
<ul>
<li>脐橙</li>
<li>血橙</li>
</ul>
</li>
<li>葡萄</li>
</ul>
<h2>有序列表 (ordered list)</h2>
<ol>
<li>打开浏览器</li>
<li>输入网址</li>
<li>点击搜索按钮
<ol>
<li>等待页面加载</li>
<li>浏览搜索结果</li>
</ol>
</li>
<li>关闭浏览器</li>
</ol>
<h2>定义列表 (definition list)</h2>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于网页内容结构化的标签语言</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页样式的语言</dd>
<dt>JavaScript</dt>
<dd>一种运行在客户端的脚本语言，用于实现网页的动态效果和交互功能</dd>
</dl>
</div>
</body>
<footer style="
text-align: center;
margin-bottom: 30px;
font-size: 1.5rem;
font-weight: bold;
color: #ffcc00;
">
HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>
二、解释
这段HTML代码定义了一个网页，展示了不同类型的列表（无序列表、有序列表和定义列表）的示例。网页使用了自定义的样式，包括字体颜色、背景颜色、边距、字体大小和布局。页面底部包含一个页脚，显示了代码作者的信息。
<!DOCTYPE html> 宣告文档类型为HTML5
<html lang="zh-cn"> 定义文档的语言为中文
<head> 包含了网页的元数据，如标题和样式
<title> 定义了网页的标题
<meta charset="utf-8"/> 定义文档的字符编码为UTF-8
<style> 定义了页面的样式规则
body 样式规则设置了页面主体的颜色、背景颜色、边距和字体大小
div 样式规则设置了容器的相对定位、左偏移、布局和内边距
<body> 包含了网页的主体内容
<div> 容器包含了列表元素示例和标题
<h1>、<h2> 定义了标题的级别
<ul> 定义了无序列表
<li> 定义了列表项
<ol> 定义了有序列表
<dl> 定义了定义列表
<dt> 定义了定义术语
<dd> 定义了定义描述
<footer> 包含了页面底部的信息
