跟小甲鱼学Web开发笔记03（最新进展不按进度顺序）

最新推荐文章于 2022-11-12 21:45:59 发布

敲代码的小朋友

最新推荐文章于 2022-11-12 21:45:59 发布

阅读量119

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/a392544151/article/details/120674844

版权

跟小甲鱼学Web开发笔记03

行内元素和块级元素

在这里插入图片描述
行内元素：一行一行的出现（形单影只）
如图踽踽独行、形单影只
块内元素：一块一块的出现(抱团出现)
如图博客01、博客02

打破规则

让块内元素换行出现
未换行的效果：
在这里插入图片描述

1.添加<br>

<!DOCTYPE html>
<html>
<head>
	<title>相拥和独行</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="keywords" content="小甲鱼，Web开发，HTML5,CSS3,Web编程教学">
	<meta name="desciptions" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
	span{
	color:red
	}
	</style>
</head>
<body>
	<a href="https://blog.csdn.net/a392544151/article/details/120646013?spm=1001.2014.3001.5501">博客01</a>
	<a href="https://blog.csdn.net/a392544151/article/details/120672708?spm=1001.2014.3001.5501">博客02</a>
	<p>黑夜给了我黑色的<br><span>眼睛</span>，</p>
	<p>我却用它寻找<br><span>光明</span></p>

</boay>
</html>

实现效果：
（不仅换行，还在style里添加颜色效果）
在这里插入图片描述
2.（更多办法以后更新…）

行内元素与块级元素对比

一般情况，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。
这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构。

为什么要将内容分为块级和行内？

在p内加很多空格

<!DOCTYPE html>
<html>
<head>
	<title>相拥和独行</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="keywords" content="小甲鱼，Web开发，HTML5,CSS3,Web编程教学">
	<meta name="desciptions" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
	span{
	color:red
	}
	</style>
</head>
<body>
	<a href="https://blog.csdn.net/a392544151/article/details/120646013?spm=1001.2014.3001.5501">博客01</a>
	<a href="https://blog.csdn.net/a392544151/article/details/120672708?spm=1001.2014.3001.5501">博客02</a>
	<p>黑夜给了我黑色的




<span>眼睛</span>，</p>
	<p>我却用它寻找     <span>光明</span></p>

</boay>
</html>

(结果显示只有一个空格，why？？？)
在这里插入图片描述

原因是：
HTML要求浏览器将连续的空白字符合并为一个空格
所以想要有换行的效果，要用正确的换行标签或者正确的HTML的语法。（我的地盘听我的，🐕）

最后问题的回答是——规范规则，方便管理（个人认为，有错请告知，非常感谢！！）

敲代码的小朋友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟小甲鱼学Web开发笔记03（最新进展不按进度顺序）

跟小甲鱼学Web开发笔记03行内元素和块级元素打破规则行内元素与块级元素对比为什么要将内容分别块级和行内？行内元素和块级元素行内元素：一行一行的出现（形单影只）如图踽踽独行、形单影只块内元素：一块一块的出现(抱团出现)如图博客01、博客02相关代码如下：<!DOCTYPE html><html><head> <title>相拥和独行</title> <meta name="viewport" content="widt
复制链接

扫一扫