HTML基础笔记_3列表和字体

 3种列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 	去掉项目符号
			 * */
			/*ul{
				list-style: none;
			}*/
			
		</style>
	</head>
	<body>
		
		<!-- 
			列表就相当于去超市购物时的那个购物清单,
				在HTML也可以创建列表,在网页中一共有三种列表:
					1.无序列表
					2.有序列表
					3.定义列表
		-->
		
		<!--
			无序列表
				- 使用ul标签来创建一个无序列表
				- 使用li在ul中创建一个一个的列表项,
					一个li就是一个列表项
					
			通过type属性可以修改无序列表的项目符号
				可选值:
					disc,默认值,实心的圆点
					square,实心的方块
					circle,空心的圆
					
			注意:默认的项目符号我们一般都不使用!!
				如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
				
			ul和li都是块元素	
		-->

         <!--
			定义列表用来对一些词汇或内容进行定义
			使用dl来创建一个定义列表
				dl中有两个子标签
					dt : 被定义的内容
					dd : 对定义内容的描述
			同样dl和ul和ol之间都可以互相嵌套		
		-->
		<dl>
			<dt>武松</dt>
			<dd>景阳冈打虎英雄,战斗力99</dd>
			<dd>后打死西门庆,投奔梁山</dd>
			<dt>武大</dt>
			<dd>著名餐饮企业家,战斗力0</dd>
		</dl>
 
        
		<ul>
			<li>西门大官人</li>
			<li>柴大官人</li>
			<li>许大官人</li>
			<li>唐僧大官人</li>
		</ul>
		
		<!-- 
			有序列表和无序列表类似,只不过它使用ol来代替ul
			有序列表使用有序的序号作为项目符号
			type属性,可以指定序号的类型
				可选值:1,默认值,使用阿拉伯数字
						a/A 采用小写或大写字母作为序号
						i/I 采用小写或大写的罗马数字作为序号
						
			ol也是块元素			
		-->
		<ol type="I">
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ol>
		
		<!-- 
			列表之间都是可以互相嵌套,可以在无序列表中放个有序列表
				也可以在有序列表中放一个无序列表
		-->
		
		<p>菜谱</p>
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li>鱼</li>
					<li>香</li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>
				宫保鸡丁
				<ul>
					<li>宫保</li>
					<li>鸡丁</li>
				</ul>
			</li>
			<li>青椒肉丝</li>
		</ul>
		
	</body>
</html>

 字体长度单位

<style type="text/css">
			
			/*
			 * 长度单位
			 * 		像素 px
			 * 			- 像素是我们在网页中使用的最多的一个单位,
			 * 				一个像素就相当于我们屏幕中的一个小点,
			 * 				我们的屏幕实际上就是由这些像素点构成的
			 * 				但是这些像素点,是不能直接看见。
			 * 			- 不同显示器一个像素的大小也不相同,
			 * 				显示效果越好越清晰,像素就越小,反之像素越大。
			 * 
			 * 		百分比 %
			 * 			- 也可以将单位设置为一个百分比的形式,
			 * 				这样浏览器将会根据其父元素的样式来计算该值
			 * 			- 使用百分比的好处是,当父元素的属性值发生变化时,
			 * 				子元素也会按照比例发生改变
			 * 			- 在我们创建一个自适应的页面时,经常使用百分比作为单位
			 * 
			 * 		em
			 * 			- em和百分比类似,它是相对于当前元素的字
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值