web实训html知识点整理_htmlweb实训课的内容-CSDN博客

本文链接：https://blog.csdn.net/ysxl2537706977/article/details/74370141

1.标签分为单标签和双标签。

单标签：<h1/>

双标签：<h1>123456</h1>

2.基本标签

标题标签（块标签）、无意义标签、无意义文档标签、列表标签（有序列表、无序列表）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--1、标题标签-->
		<h1>我是一级标题</h1>
		<h2>我是二级标题</h2>
		<h6>我是六级标题</h6>
		<!--2、无意义标签-->
		<!--div{我是普通div标签}-->
		<div>我是普通div标签</div>
		<div>我是普通div标签</div>
		
		<!--div：块标签，默认宽度为100%父级-->
		<!--span：内联标签，默认宽度由内容展开-->
		
		<!--3、无意义文本标签-->
		<!--span{我是文本标签}-->
		<span>我是文本标签</span>
		<span>我是文本标签</span>
		
		<!--4、列表标签-->
		<!--ul>li{我是第$列表项}*5-->
		<!--无序列表-->
		<ul>
			<li>我是第1列表项</li>
			<li>我是第2列表项</li>
			<li>我是第3列表项</li>
			<li>我是第4列表项</li>
			<li>我是第5列表项</li>
		</ul>
		<!--有序列表-->
		<ol start="5" type="I">
			<li>我是第1列表项</li>
			<li>我是第2列表项</li>
			<li>我是第3列表项</li>
			<li>我是第4列表项</li>
			<li>我是第5列表项</li>
		</ol>		
	</body>
</html>

结果如下：

3.基本样式

盒模型：

以生活中最常见的快递盒子举例，盒子本身是有大小的，用体积（长*宽*高）来表示；盒模型中，针对对象就是block(display:block 块)，块的大小就用面积宽（width）*高（height）表示。块标签，默认宽度是100%（父级的宽）。所以，盒模型中，默认宽度也依旧是100%（父级的宽）。就盒子本身而言，盒子有厚薄、颜色之分；盒模型中，border 属性就相当于此角色。快递盒子，里面装着物品，通常会在盒子里物品外面包裹一层泡沫等缓震填充物；盒模型中，padding属性当于此角色。物品，则相当于content属性。每一个小的快递盒子，会被运输车运到应该去的地方，在同一空间的各个快递盒子之间的距离，就相当于margin属性。

盒模型，默认高度为0，但可以被子级撑开。

下次再更。