文本,列表的学习
一.文本
常用的文本标签:
1 .em(两端带<>)的作用是定义着重文字
2 .b(两端带<>)的作用是定义粗体文本
3 .i(两端带<>)的作用是定义粗体文本
4 .strong(两端带<>)的作用是定义加重语气
5 .del(两端带<>)的作用是定义删除字
6 .span(两端带<>)元素没有特定的含义
特别提醒: 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇。
下面的一张图片展示的是各种情况的效果:
在这里,上述的各种标签之间是可以嵌套使用的:
上述效果实现的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<em>
不
<strong>
我很强
</strong>
是的
</em>
</body>
</html>
在em标签里面嵌套了一个strong的标签。
二.列表
1.有序列表
有序列表是一列项目,列表项目使用数字进行标记。有序列表始于ol(两端带<>)标签。每个列表项始于li(两端带<>)标签列表项目使用数字进行标记。 展示代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
</body>
</html>
下面是上述代码实现的效果图如下:
ol标签具有的一些属性(type):
1 .1 表示列表项目用数字标号 (1,2,3...)
2 .a 表示列表项目用小写字母标号 (a,b,c...)
3 .A 表示列表项目用大写字母标号 (A,B,C..)
4 .i表示列表项目用小写罗马数字标号 (i,ii,iii...)
5 .I表示列表项目用大写罗马数字标号 (l,ll,l...)
具体使用的方法是在使用ol标签的时候指定其type属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="1">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="a">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="A">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="i">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="I">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
</body>
</html>
上述代码的效果图如下:
列表也是可以嵌套的,下面我将给出一个嵌套的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="1">
<li>
水果
<ol>
<li>
梨
</li>
<li>
大菠萝
</li>
<li>
小菠萝
</li>
</ol>
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="a">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="A">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="i">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
<ol type="I">
<li>
苹果
</li>
<li>
香蕉
</li>
<li>
橘子
</li>
</ol>
</body>
</html>
上述代码的实现效果如下:
上述的代码中,我们在第一个ol标签里为其中的多个li标签指定了其独特的类型(type)如何在其中的第一个li标签中我们又布置了一个ol标签,最后达到的效果就是这样的.
2.无序列表
无序列表的实现:无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记,无序列表始于ul标签(两端带有<>)。每个列表项始于li标签(两端带有<>)。
演示的代码如下:
<ul>
<li>水果</li>
<li>蔬菜</li>
</ul>
上述的部分代就是无序列表的实现的代码。完整的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
</body>
</html>
上述代码的实现效果如下:
同有序列表,无序列表也是具有type属性的,下面一些是type属性的一些描述:ul(两端带有<>)的属性type拥有的选项：
1 .disc 默认实心圆
2 .circle空心圆
3 .square 小方块
4 .none 不显示
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="disc">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
<ul type ="circle">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
<ul type="square">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
<ul type ="none">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
</body>
</html>
上述代码的演示效果如下:
ul标签(两端带<>)标签会根据所指定的type的值然后显示出不同的效果。无序列表也是可以嵌套的,实现的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="disc">
<li>
我
<ul type ="disc">
<li>
又高
</li>
<li>
又帅
</li>
<li>
又有钱
</li>
</ul>
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
<ul type ="circle">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
<ul type="square">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
<ul type ="none">
<li>
我
</li>
<li>
你
</li>
<li>
他
</li>
</ul>
</body>
</html>
上述代码的实现效果如下:
像这样,在第一个无序列表的第一个li标签中嵌套了一个新的无序列表,当然在这里我们嵌套的还可以是有序的列表,总之列表之间都是可以嵌套的,在这里还有个小小的建议,我们可以使用快捷键快快速的生成ul标签加li标签的无序列表:ul>li*n(n根据自己需要的li标签个数来修改)
三.个人总结
通过对文本的学习，我们可以掌握在文档流中一些规定的字体样式的设计，通过对列表的学习，我们了解到了列表实现对各类不同集合元素的分类，列表的嵌套在后续的网页制作中也是起到了很大的作用。
