零基础学习HTML(7)——块级元素和行内元素

最新推荐文章于 2022-02-22 23:45:15 发布

Dragon水魅

最新推荐文章于 2022-02-22 23:45:15 发布

阅读量252

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/106678901

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

span标签：https://man.ilovefishc.com/pageHTML5/span.html
br标签：https://man.ilovefishc.com/pageHTML5/br.html
我们发现，有的标签在一行里显示，有的标签会另起一行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第九节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<a href="http://bbs.fishc.com">论坛</a>
	<a href="fishc.taobao.com">淘宝</a>
	<p>茕茕孑立</p>
	<p>形单影只</p>
</body>
</html>

在这里插入图片描述
这涉及到“块级元素”和“行内元素”。

块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度。
行内元素不会另起一行，它也只占用必要的宽度。

span标签没有特定的样式。只有对它设置样式的时候，才会产生视觉上的表现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第九节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		span {color: red}
	</style>
</head>
<body>
	<a href="http://bbs.fishc.com">论坛</a>
	<a href="fishc.taobao.com">淘宝</a>
	<p>茕茕<span>孑立</span></p>
	<p>形单<span>影只</span></p>
</body>
</html>

在这里插入图片描述
br标签用于插入一个简单的换行符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第九节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		span {color: red}
	</style>
</head>
<body>
	<a href="http://bbs.fishc.com">论坛</a>
	<a href="fishc.taobao.com">淘宝</a>
	<p>茕茕<span><br>孑立</span></p>
	<p>形单<span>影只</span></p>
</body>
</html>

在这里插入图片描述
行内元素和块级元素的对比：

一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。

Dragon水魅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习HTML(7)——块级元素和行内元素

文章目录官方资料学习正文注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文我们发现，有的标签在一行里显示，有的标签会另起一行：<!DOCTYPE html><html
复制链接

扫一扫

专栏目录