一，文本标签
(1)<em>和<strong>,<i>,<b>,<cite>标签
- 通常em显示为斜体，而strong显示为粗体
- <i>,<b>这两个标签和em和strong类似，但是这两 个标签没有语义。
- small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。
- 使用cite标签可以指明对某内容的引用或参 考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。
- blockquote和q表示标记引用的文本。
blockquote用于长引用，q用于短引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<p>
/*em标签用于表示一段内容中的着重点。*/
今天是个<em>好日子<em>
</p>
<p>
/*strong标签用于表示一个内容的重要性。*/
<strong>
注意：你不好好上课，以后就找不到好工作
</strong>
</p>
<p>
/*i标签会使文字变成斜体。*/
<i>i标签</i><br>
/*b标签会使文字变成粗体。*/
<b>b标签</b>
</p>
<p>
<small>我是small标签</small>
</p>
<p>
你是<q>局外人</q>吗？
</p>
</body>
</html>
(2)sup和sub标签
- sup和sub用于定义上标和下标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<p>5<sup>2</sup>0</p>
<p>3<sub>2</sub>0</p>
<p>林志玲<sup><a href="">[1]</a></sup></p>
</body>
</html>
(3)<ins>和<del>标签
- ins表示插入的内容，显示时通常会加上下 划线。
- del表示删除的内容，显示时通常会加上删 除线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<p>
郭敬明的个头<ins>真高啊</ins>
</p>
</body>
</html>
(4)<code>和<pre> 标签
- 如果你的内容包含代码示例或文件名，就 可以使用code元素。
- pre元素表示的是预格式化文本，可以使用
- pre包住code来表示一段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<pre>
<code>
function fun(){ alert("hello");
}
</code>
</pre>
</body>
</html>
(5) 有序列表和无序列表
- 使用ol和li来创建一个有序列表。
- 使用ul和li来创建一个无序列表。
- 使用dl、dd、dt来创建一个定义列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>西门庆</li>
<li>潘金莲</li>
<li>武大郎</li>
<li>武松</li>
</ul>
<ol type="1">
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<li>
鱼香肉丝
<ol>
<li>鱼</li>
<li>香</li>
<li>肉</li>
<li>丝</li>
</ol>
</li>
<dl>
<dt>武松</dt>
<dd>景阳冈打虎</dd>
<dd>为哥哥报仇</dd>
<dd>杀死嫂嫂</dd>
<dd>投奔梁山</dd>
</dl>
</body>
</html>
二，文本样式
(1)，单位
- px
如果我们将一个图片放大的话，我们会发现一个图片 是有一个一个的小色块构成的，这一个小色块就是一 个像素，也就是1px，对于不同的显示器来说一个像素 的大小是不同的。 - 百分比
也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px， 则100%就是16px，200%就是32px。 - em
em和百分比类似，也是相对于font-size说的，1em就相 当于100%，2em相当于200%，1.5em相当于150%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
.box{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色*/
background-color: yellow;
}
.box1{
width: 50%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
(2)颜色单位
- 在CSS中可以直接使用颜色的关键字来代表 一种颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style type="text/css">
/*颜色单位*/
.p1{
color: yellow;
}
/*十六进制颜色单位*/
.p2{
color: #FF0000;
}
/*RGB颜色单位*/
.p3{
color: rgb(200 130 100);
}
</style>
</head>
<body>
<p class="p1">这是一个颜色单位</p>
<p class="p2">这是一个十六进制颜色单位</p>
<p class="p3">这是一个RGB颜色单位</p>
</body>
</html>
(3)字体单位
- font-size用来指定文字的大小。
- 通过font-family可以指定标签中文字使用 的字体
- font-style用来指定文本的斜体。
- font-weight用来指定文本的粗体
- font-variant属性可以将字母类型设置为小 型大写。在该样式中，字母看起来像是稍 微缩小了尺寸的大写字母。
- text-transform样式用于将元素中的字母全都变成大写。
- text-align用于设置文本的对齐方式
font可以一次性同时设置多个字体的样式。
语法 ：– font:加粗 斜体 小型大写 大小/行高 字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的样式</title>
<style type="text/css">
.p1{
color: blue;
font-size: 50px;
font-family: 华文行楷;
/*斜体*/
font-style: italic;
/*粗体*/
font-weight: bold;
/*小型大写字母*/
font-variant: small-caps;
}
/*字体简写*/
.p2{
font: bold small-caps 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p1">我在你眼里到底算什么</p>
<p style="font-size: 50px;font-family: 方正姚体;color: yellow;">我在你眼里到底算什么</p>
<p style="font-size: 50px;font-family: 华文隶书;color: red;">我在你眼里到底算什么</p>
<p style="font-family: 华文彩云;font-size: 50px;color: black">我在你眼里到底算什么</p>
<dl>
<dt>武松</dt>
<dd>武松打虎</dd>
<dd>武松杀嫂嫂</dd>
</dl>
<<p class="p2" style="font-style: italic;">我在你眼里到底算什么</p>
</body>
</html>
三，盒子
一个盒子我们会分成几个部分：
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
- 通过width和height两个属性可以设置内容区的大 小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style type="text/css">
.box1{
width: 100px;
/*高度*/
height: 100px;
/*背景颜色*/
background-color: #bfa;
/*外面的盒子宽度*/
border-width: 60px 60px 60px 60px;
/*颜色*/
border-color: yellow red green blue;
border-style: groove;
}
</style>
</head>
<body>
<div class="box1"> </div>
</body>
</html>
这个盒子运行结果如下：
image.png
网友评论