web实训html知识点整理

时间:2022-11-17 14:17:11

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>
结果如下:
web实训html知识点整理

3.基本样式

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