要做行动的巨人
学习前端知识的同时,梳理知识,也便于以后查找
tags:html、列表
文章目录
HTML 列表
html有有序、无序和定义列表三种。
成员都使用<li>
标签
有序
- 适合各项目之间存在顺序关系的情况。
- 列表项项使用数字来标记
- 使用
<ol>
标签
demo
<ol>
<li>Java</li>
<li>JS/li>
</ol>
无序
- 无序列表是使用粗体圆点(典型的小黑圆圈)进行标记。
- 适合成员之间无级别顺序关系的情况。
- 使用
<ul>
标签
demo
<ul>
<li>张三</li>
<li>Tom</li>
</ul>
自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 在<dl>
标签开始。每个自定义列表项以 <dt>
开始。每个自定义列表项的定义以<dd>
开始。
自定义列表中的一个术语名,可以对应多重定义,或者多个术语名对应同一个定义。如果只有也术语名或者只有定义也是可行的。也就是说 <dt>
与 <dd>
在其中数量不限、对应关系不限。
demo
<dl>
<dt>Java</dt>
<dd>- SE</dd>
<dd>- EE</dd>
<dd>- ME</dd>
<dt>C++</dt>
<dd>- C</dd>
</dl>
显示:
HTML列表更多
HTML 区块
关键词:div、span
通过<div>
和 <span>
将元素组合起来。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML div 元素
div 标签可以把文档分割为独立的、不同的部分。
HTML<div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,div 元素可用于对大的内容块设置样式属性。
div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。
HTML span 与元素
HTML span>元素是内联元素,可用作文本的容器
<span>
元素也没有特定的含义。
当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
demo
<span>
demo
<p>我有一双
<span style="color:gold">金色</span> 的
<span style="font-size:50px">滑板鞋</span>和
<span style="color:blue">时尚</span></p>
运行截图:
HTML <div>
demo
<div style="color:#001111">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>这是一些文本。</p>
运行截图:
HTML布局
网页布局对改善网站的外观非常重要。
要慎重
所有的 HTML 元素本质上都是一些小矩形块。
有三个重要的属性控制每个HTML元素的布局:padding(内边距)、margin(外边距)、border(边框)
。
padding属性
元素的 padding 控制元素与其边框 border 之间的距离。
- 增大方块的
padding
时, 它将增加元素内容和元素边框之间的距离。
示例
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
}
.green-box {
background-color: green;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box" >padding</h5>
</div>
运行截图
margin布局页面标签
元素的 margin (外边距)控制元素 border (边框)和周围元素实际所占空间的距离
示例
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
margin: 20px;
}
.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
运行截图
使用负值设置页面元素的margin属性
如果将一个元素的 margin 设置为负值,则元素将会变大。
尝试将 margin设置为负值,如红方块
把 green-box 的 margin 设置为 -15px
,以使它将父容器(黄方块)的横向宽度填充。
设置之后,绿方块就覆盖住了父容器(黄方块)
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
margin: -15px;
}
.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
不同方向padding设置不同的值
有时你将需要自定义一个元素,使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left
属性来控制元素四个方向的 padding。
示例
设置的 green-box class的顶部和左侧具有 40px 的 padding,而底部和右侧则是 20px。
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
.green-box {
background-color: green;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
运行截图:
为不同方向margin设置不同的值
有时你将需要自定义一个元素,使它的每一个边具有不同的 margin。
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 属性来控制元素四个方向的margin。
示例
设置的 green-box class的顶部和左侧具有 40px 的 margin,而底部和右侧则是 20px。
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
.green-box {
background-color: green;
margin-top: 40px;
margin-left: 40px;
margin-bottom: 20px;
margin-right: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
运行截图:
CSS中padding简写
除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left
属性外,还可以集中起来指定它们,如下所示:
padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左。
示例
使用顺时针表示法,给".green-box" class在其顶部和左侧具有 40px 的 padding,而底部和右侧具有 20px 的 padding。
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: red;
padding: 20px 40px 20px 40px;
}
.green-box {
background-color: green;
padding: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
运行截图:
CSS中margin简写
用 margin 再试一次。
除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left
属性外,你还可以集中起来指定它们,如下所示:
margin: 10px 20px 10px 20px;
这四个值以顺时针方式排列:
顶部、右侧、底部、左侧,简称:上右下左。
示例
使用 顺时针表示法 ,给 “green-box” class 的元素在其顶部和左侧具有 40px 的 margin,而底部和右侧具有 20px 的 margin。
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
}
.green-box {
background-color: green;
margin: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
运行截图:
CSS继承Body元素样式
<style>
body {
background-color: black;
color: green;
font-family: Monospace;
}
</style>
<h1>Hello World</h1>
运行截图:
CSS样式的继承
每一个 HTML 页面都有一个 body 元素。
我们可以证明body元素的存在,将其 background-color 设置为黑色。
<!-- 这是完整的代码 -->
<style>
body {
background-color: black;
}
</style>
运行截图:
提高效率
- 使用CSS
- 使用模板,减少时间花费
demo
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:800px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © w3cschool.cn</div>
</div>
</body>
</html>
运行截图:
–END–