文章目录
一、块元素
特点:
- 块元素在网页中就是以块的形式显示,所谓的块状就是元素显示为矩形区域。
- 默认情况下,块元素都会独占一行,按顺序自上而下排列,不会出现两块相邻的块状元素并列显示的现象
- 块状元素都可以自定义自己的宽度和高度
- 块状元素一般作为其他元素的容器,常把这种容器比喻为一个盒子。
类似在元素后面添加换行符,也就是说其他元素不能再其后面并列显示### 盒子:div
<div>
没有具体含义,统称为块标签,用来设置文档区域,是文档布局常用对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
</script>
</html>
标题:h1-h6
<h1>
:定义最大的标题,<h6>
: 定义最小的标题,都自带上下外边距(margin)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<h1>h1 标题大小及样式</h1>
<h2>h2 标题大小及样式</h2>
<h3>h3 标题大小及样式</h3>
<h4>h4 标题大小及样式</h4>
<h5>h5 标题大小及样式</h5>
<h6>h6 标题大小及样式</h6>
</div>
</body>
<script>
</script>
</html>
段落:p
- 段落是通过
<p>
标签定义的,自带上下外边距(margin)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</div>
</body>
<script>
</script>
</html>
水平线:hr
<hr />
标签在 HTML 页面中创建水平线,自带上下外边距(margin)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<hr /><hr /><hr />
</div>
</body>
<script>
</script>
</html>
列表:ul、ol、dl
参考:https://blog.csdn.net/qq_45677671/article/details/123874633
表单:form
参考:https://blog.csdn.net/qq_45677671/article/details/111718381
表格:table
参考:https://blog.csdn.net/qq_45677671/article/details/123866131
二、行内元素(内联元素)
特点:
- 内联元素的表现形式是始终以行内逐个进行显示
- 内联元素也会遵循盒模型基本规则,如可以定义padding、border、margin等属性,但个别属性不能正确显示(padding/margin-top/bottom)
- 内联元素没有自己的形状,不可以自定义自己的宽度和高度,它显示的宽度和高度由内容确定。它只能根据所包含内容的高度,最小单元也会呈现矩形形状。
换行:br
<br />
标签常用于文本换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
这是一段文本内容。<br />
这是一段文本内容。<br />
这是一段文本内容。<br />
</div>
</body>
<script>
</script>
</html>
自定义:span
<span>
文本节点标签,可以是某一小段文本或是某一个字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<span>这是一个span标签的文本内容。</span>
<span>这是一个span标签的文本内容。</span>
<span>这是一个span标签的文本内容。</span>
</div>
</body>
<script>
</script>
</html>
斜体:i、em
<i>
和<em>
标签都是用来设置文本字体的倾斜效果,但是 em 比 i 的语义化更好,不推荐使用 i 。- 其实就是内置了 css 属性:
font-style: italic;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<i>这是一段文本内容。</i>
<em>这是一段文本内容。</em>
</div>
</body>
<script>
</script>
</html>
粗体:b、strong
<b>
和<strong>
标签都是用来设置文本字体的加粗效果,但是 strong 比 b 的语义化更好,不推荐使用 b 。- 其实就是内置了 css 属性:
font-weight: bold;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<b>这是一段文本内容。</b>
<strong>这是一段文本内容。</strong>
</div>
</body>
<script>
</script>
</html>
下划线:u
<u>
标签:用于设置文本下划线。- 其实就是内置了 css 属性:
text-decoration: underline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
<u>这是一段文本内容。</u>
<u>这是一段文本内容。</u>
</div>
</body>
<script>
</script>
</html>
上下标:sub、sup
- 上标标签
<sup>
,下标标签<sub>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px greenyellow solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
上标<sup>上标内容</sup>
下标<sub>下标内容<sub>
</div>
</body>
<script>
</script>
</html>
超链接:a
参考:https://blog.csdn.net/qq_45677671/article/details/123876601
三、行内块元素(内联块元素)
内联块元素:可以理解为块状元素和内联元素的结合
- 特点:
1. 位于块状元素或其他内联元素内
2. 可容纳其他块状元素或内联元素
3. 设置宽度和高度生效
图片:img
参考:https://blog.csdn.net/qq_45677671/article/details/125969007