CSS基础

SS(Cascading Style Sheets) ，层叠样式表（级联样式表），用于设置HTML页面中的文本内容的字体、大小、对齐方式等，图片的宽高、边框样式、边距等以及页面的布局排版等各种外观显示样式。

CSS以HTML为基础，可以针对不同的浏览器设置不同的样式。CSS的出现可以说拯救了我们的页面，让HTML 专注去做结构呈现，而样式全部交给 CSS来美化。

CSS样式规则，具体格式如下：

CSS语法由两部分组成：选择器和声明。声明包括：属性和属性值
选择符 {属性: 属性值 ; 属性:属性值}

规则：

每个CSS样式由两部分组成，即选择器和声明。选择器用于指定CSS样式作用的HTML对象，声明又分为属性和属性值；
属性是对选择器选定的对象设置的样式属性，例如字体大小、文本颜色等。必须放在花括号中，属性与属性值用英文冒号连接，以“键值对”的形式出现。
每条声明用英文分号结束。当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。在书写样式过程中，空格、换行等操作不影响属性显示。

注释规则

注释规则
/* 需要注释的内容 */
示例
p { color: red; /* 所有段落标签字体颜色是红色*/ }

三、CSS样式表引入方法

CSS放到什么位置呢？怎么让它跟我们的HTML文件关联起来呢？

内联样式（行内式）

内联样式，又称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。

语法

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<h2 style="color:red;">
    红色标题
</h2>

说明
（1）style是标签的属性，任何HTML标签都有style属性，用来设置行内样式。
（2）属性和值的书写规范与CSS样式规则相同。
注意
行内样式只对其所在的标签及嵌套在其中的子标签起作用。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

语法
<head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} p{ color:#000;font-size:14px;} </style> </head>
说明
（1）style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
（2）type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

外部样式表（外链式）

当我们页面比较复杂，大量的内部样式，会导致页面看上去不美观，而且不利于维护。这时我们通常将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

格式
<head> <link rel="stylesheet" type="text/CSS" href="CSS文件的路径" /> </head>
说明
（1）rel：用于定义文档关联（当前文档与被链接文档之间的关系），在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件，表示关联样式表。
（2）type：用于定义文档类型，通常指定为“text/css”，表示链接的外部文件为CSS样式表。
（3）href：用于定义所链接外部样式表文件的URL，通常是相对路径。
注意
link 是单标签哦 _！
使用link元素导入外部样式表时，需将该元素写在文档头部，即与之间。

三种样式表总结

样式表	特点	使用	控制范围	优先级
行内样式表	书写方便，权重高	较少	控制单个标签（小）	高
内部样式表	结构和样式部分分离	较多	控制一个页面（中）	与书写的顺序有关，后书写的高
外部样式表	结构和样式完全分离，需要引入	最多，推荐使用	控制整个网站（多）	与书写的顺序有关，后书写的高

四、标签的类型(显示模式)

网页中的标签很多，为了更好的完成我们的网页布局，我们需要在不同地方会放不同类型的标签。

根据标签在网页中的显示模式，可以将HTML标签一般分为块级标签和行内标签两种类型，即块元素和行内元素。

块级元素(block-level)

说明
每个块元素通常都会独自占据一行或多行，可以设置其宽度、高度、对齐方式等属性，常用于网页布局和网页结构的搭建。
举例
常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素，非常适合布局，所以我们常称之为 “CSS+DIV布局”。
特点

块元素总是从新行开始，宽度是容器的100%。
块状元素都可以定义自己的宽度、高度、外边距以及内边距。
两个相邻块元素不会出现并列显示的现象；默认，块元素会按自上而下顺序排列。
块级元素一般可以容纳内联元素和其他块元素，故将其比喻为一个盒子。

注意
文字类块级标签，里面不能放其他块级元素。比如，只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt。

行内元素(inline-level 或内联元素)

说明
行内元素（内联元素）不占独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
举例
常见的行内元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>标签最典型的行内元素。
特点

和相邻行内元素在一行上显示
设置宽、高无效，可设置水平方向的padding和margin，但垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。（a除外）

注意

链接里面不能再放链接！

行内块元素（inline-block）

说明
在行内元素中有几个特殊的标签，比如<img />、<input />、<td>，可以设置它们的宽、高和对齐方式，故称之为行内块元素。
特点
可同相邻行内元素（行内块）显示在一行上，但之间会有空白缝隙
默认宽度就是它本身内容的宽度
可设置高度，行高、外边距以及内边距

元素显示模式转变（display）

通过设置display的值，改变元素的显示模式。

属性值
block、inline、inline-block、none
说明

行内转块：display:block;
将元素转为块状元素，使该元素拥有块状元素的特点；
显示：
类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
块转行内：display:inline;
将元素转换为内联元素，使该元素拥有行内元素的特点；
显示：
在元素后面删除换行符，多个元素可以在一行内并列显示。
块、行内元素转换为行内块： display: inline-block;
只有这一个元素类型支持vertical-align属性，img,input（行内块元素）。
显示：
元素的内容以块状显示，行内的其他元素显示在同一行。
none 此元素不会被显示

成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式
行为	JavaScript	网页交互

1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

2.1 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.1.1 双标签

<html></html>

2.1.2 单标签

<br>

2.1.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

<head>
</head>
<body>    
</body>

3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

4 head标签

4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta标签

是单标签，用来描述HTML网页文档的属性

4.2.1 name属性

属性值	说明
keywords	网页关键字，多个逗号隔开
description	网页描述
author	作者
copyright	版权信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

4.2.2 http-equiv属性

属性值	说明
Content-Type	定义网页所使用编码
refresh	定义网页自动刷新跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

5 文本标签

5.1 标题标签

是双标签，h是header的缩写

<h1>h1标签：一级标题</h1>
<h2>h2标签：二级标题</h2>
<h3>h3标签：三级标题</h3>
<h4>h4标签：四级标题</h4>
<h5>h5标签：五级标题</h5>
<h6>h6标签：六级标题</h6>

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

5.3 换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

5.4 水平线标签

是单标签，hr是horizon地平线的缩写

<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>

特点：

1、在页面中显示一条水平线

2、单标签

6 文本格式化标签

标签1	标签2	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

6.1 上标标签

sup是superscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下标标签

sub是subscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	与	&
"	双引号	"
x	乘号	×
÷	除号	÷
-	长破折号	—
\|	竖线	\|
‘	左单引号	‘
‘	右单引号	’
©	版权符	©
®	注册商标	®
™	商标	™
°	度	°

7 媒体标签

7.1 图片标签

<img src="./001.jpg" alt="">

img标签常见属性：

属性名	说明
src	图片路径（绝对路径、相对路径）
alt	图片加载失败时，显示的文字
title	鼠标悬停时，显示的文字
width	图片宽度
height	图片高度

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要'px'

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址
相对路径：从当前文件开始出发找目标文件的过程

7.2 音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

属性名	说明
src	音频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp3、wav、ogg三种音频格式

7.3 视频标签

<video src="video.mp4" controls loop autoplay></video>

属性名	说明
src	视频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp4、webm、ogg三种视频格式

7.4 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

<a href="http://www.baidu.com" target="_blank">百度</a>

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>

<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

属性名	说明
href	跳转链接
target	链接打开方式

target属性值

属性值	说明
_self	默认，原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

target属性值一般使用_self（默认）和_blank

8 列表标签

8.1 无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
disc	默认，实心圆
circle	空心圆
square	实心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
1	默认，阿拉伯数字，1,2,3......
a	小写英文字母，a,b,c......
A	大写英文字母，A,B,C......
i	小写罗马数字,i,ii,iii......
I	大写罗马数字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

<dl>
    <dt>称呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格标签

9.1 表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格标签属性

属性名	属性值	描述
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格标题标签

<caption>标题内容</caption>，位于表格内第一行

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表头单元格标签

<th></th>，th，table header cell，表头单元格

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <th>序号</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格语义化结构标签

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
        </tr>
    </tfoot>
</table>

9.6 合并单元格

属性名	属性值	说明
rowspan	合并单元格个数	合并行，单元格垂直合并
colspan	合并单元格个数	合并列，单元格水平合并

<td rowspan="跨越的行数"></td>

<td colspan="跨越的列数"></td>

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>金额</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表单标签

10.1 form标签

双标签，包裹其它表单标签

<form>
    // 表单
</form>

form标签的常用属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

<form name="myForm"></form>

method属性

用来指定表单数据使用哪种提交方式给后端

属性值	说明
get	get方式
post	post方式

<form method="get"></form>

action属性

用来指定表单数据提交到哪个地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

<form target="_blank"></form>

enctype属性

属性值	说明
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为 "+" 加号，但不对特殊字符编码

<form enctype="multipart/form-data"></form>

10.2 input标签

input是单标签

<input type="表单类型">

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button	普通按钮
submit	提交按钮
reset	重置按钮
file	文件上传

单行文本框常用属性

属性	说明
value	设置文本框的默认值
size	设置文本框的长度
maxlength	设置最多可输入字符

<form>
    <input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

<input type="password" value="默认值" size="长度" maxlength="可输入字符">

<form>
    <label>密码：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

单选框

属性	说明
name	组名，同组单选框，组名要相同，必要属性
value	单选框选项取值，必要属性
checked	默认选中项，同组单选框，可以有一个默认选中项

<input type="radio" name="组名" value="取值" checked="checked">

<form>
    性别：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

复选框

复选框和单选框的属性都相同，区别复选框可以多选

<form>
    爱好：
    <input type="checkbox" name="hobby" value="篮球" checked>篮球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="台球">台球
</form>

普通按钮

<input type="button" value="取值">

<form>
    <input type="button" value="普通按钮">
</form>

<button>普通按钮</button>

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把对应表单数据提交给后端服务器

重置按钮

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

点击重置后，所在form表单里所有内容被清空了

文件上传

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名称" cols="列数" rows="行数"></textarea>

<form>
    <textarea name="文本名称" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

下拉列表标签是为了节省页面空间

select标签属性

属性名	说明
name	数据提交后端所需字段
size	下拉选项显示个数
multiple	默认只允许选一个，选多个得加这个属性
disabled	所有下拉选项禁止选中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18岁以下</option>
        <option>18-28岁</option>
        <option>28-38岁</option>
        <option>38岁以上</option>
    </select>
</form>

option标签属性

属性名	说明
selected	默认选中
value	被选中，数据提交后端的值
disabled	该下拉选项禁止选中

<form>
    <select name="age" size="5">
        <option value="1">18岁以下</option>
        <option value="2" disabled="disabled">18-28岁</option>
        <option value="3" selected="selected">28-38岁</option>
        <option value="4">38岁以上</option>
    </select>
</form>

11 框架标签

<iframe src="URL" width="数值" height="数值"></iframe>

框架标签常用属性

属性名	说明
src	嵌入的文档地址
width	标签宽度
height	标签高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文档禁止被嵌入

12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

<p>我是<span>中国人</span></p>

12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>

12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

12.4 标签类型转换

通过css样式display属性转换，这是css的内容

TML（超文本标记语言）中的元素可以分为两类：块级元素和内联元素。块级元素会自动占据一行，并且可以设置宽度和高度。内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。块级元素可以包含其他元素，包括文本、图像、链接等。内联元素通常不包含其他元素。

1. 块级元素具有以下特点：

块级元素会自动占据一行，并且可以设置宽度和高度。
块级元素可以包含其他元素，包括文本、图像、链接等。
块级元素可以设置背景颜色、边框、字体等样式属性。

以下是一些常见的块级元素：

<div>：用于定义一个块级容器，可以包含其他元素。
<p>：用于定义段落，通常包含文本内容。
<h1>到<h6>：用于定义标题，从h1到h6分别表示从大到小的标题级别。
<table>：用于定义表格，包含多个行和列。
<form>：用于定义表单，包含输入框、按钮等元素。
<ul>和<ol>：用于定义无序列表和有序列表，包含多个列表项。
<img>：用于定义图像，用于在网页中显示图片。

这些块级元素可以通过设置 CSS 样式属性来实现不同的布局和样式效果，例如设置背景颜色、边框、字体、大小、颜色等。同时，块级元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left;

2. 内联元素具有以下特点：

内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。
内联元素可以设置字体、颜色、大小等样式属性。
内联元素通常不包含其他元素，而是直接嵌入文本内容中。

以下是一些常见的内联元素：

<a>：用于定义超链接，通常用于链接到其他网页或文件。
<em>：用于定义强调文本，通常呈现为斜体效果。
<strong>：用于定义加粗文本，通常呈现为粗体效果。
<span>：用于定义自定义样式的文本，通常用于应用特定的 CSS 样式。
<img>：用于定义图像，通常用于在网页中显示图片。

这些内联元素可以通过设置 CSS 样式属性来实现不同的样式效果，例如设置字体、颜色、大小等。同时，内联元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left。

<img> 元素在 HTML 中既可以是块元素，也可以是内联元素，这取决于它的 display 属性的值。

默认情况下，<img> 元素是内联元素，它会根据文本的流动方式进行布局。这意味着如果在一行中放置了多个 <img> 元素，它们会在一行中排列，并且不会自动换行。

但是，如果将 <img> 元素的 display 属性设置为 block，那么它就会成为块元素。块元素会占据一行，并且可以设置宽度和高度。在这种情况下，多个 <img> 元素会自动换行，并且可以通过设置 margin 属性来调整它们之间的间距。

html

<img src="image.jpg" alt="图片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 属性被设置为 block，这会使它成为一个块元素。你可以根据需要调整图片的宽度和高度，以及 margin 属性来控制图片之间的间距。

在线咨询

上一篇：教你制作人物遮挡文字的效果#教你制作技巧
下一篇：零基础学习HTML5掌握这些学习方法效率高几倍！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS基础

注释规则

三、CSS样式表引入方法

内联样式（行内式）

内部样式表

外部样式表（外链式）

三种样式表总结

四、标签的类型(显示模式)

块级元素(block-level)

行内元素(inline-level 或内联元素)

行内块元素（inline-block）

元素显示模式转变（display）

1 HTML概念

2 HTML结构

​2.1 标签

2.1.1 双标签

2.1.2 单标签

2.1.3 标签关系

3 注释

4 head标签

4.1 title标签

4.2 meta标签

4.2.1 name属性

4.2.2 http-equiv属性

4.3 style标签

4.4 link标签

4.5 script标签

4.6 base标签

5 文本标签

5.1 标题标签

5.2 段落标签

5.3 换行标签

5.4 水平线标签

6 文本格式化标签

6.1 上标标签

6.2 下标标签

6.3 字符实体

7 媒体标签

7.1 图片标签

7.2 音频标签

7.3 视频标签

7.4 超链接标签

8 列表标签

8.1 无序列表

8.2 有序列表

8.3 自定义列表

9 表格标签

9.1 表格基本结构

9.2 表格标签属性

9.3 表格标题标签

9.4 表格表头单元格标签

9.5 表格语义化结构标签

9.6 合并单元格

10 表单标签

10.1 form标签

10.2 input标签

10.3 多行文本框

10.4 下拉列表

11 框架标签

12 标签类型

12.1 行内标签

12.2 块级标签

12.3 行内块级标签

12.4 标签类型转换

1. 块级元素具有以下特点：

2. 内联元素具有以下特点：

<img> 元素在 HTML 中既可以是块元素，也可以是内联元素，这取决于它的 display 属性的值。

您的项目需求

2.1 标签