网页基础布局
html
html实体转义符+html块级标签和行级标签
1.html实体转义符
列如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 代表 空格
在输单纯打空格的时候 只能编译一个空格 如果需要多个空格输入 -->
<p> werwr tger</p>
<p> werwr tger</p>
<p>1×2</p>
</body>
</html>运行结果
2.块级元素和行级元素
2.1 块级元素和行级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级标签和行级标签</title>
</head>
<body>
<!-- 块级标签：（相当执行了display：block：操作
1.独占一行
2.宽度，高度可控，若没有设置，默认铺满整行
3.可以包含块级标签和行级标签-->
<div>div</div>
<p style="width: 300px;height:50px;background: gold;">p</p>
<!-- 行级标签：（相当执行了display：inline：操作 dispaly是css语句后续会学到
1.不会独占一行，与相邻行级标签同占一行，直到行被占满，自动掉到下一行
2.宽度，高度不可控
3.只可以包含行级标签-->
<strong>strong</strong>
<span style="width: 300px;height:50px;background: gold;">span</span>
</boby>
</html>运行结果
2.2块级标签转为行级标签
<!-- 块级标签转为行级标签
display: inline-->
<p style="width: 300px;height:50px;background: gold;display: inline;">p</p>运行结果
2.3行级标签转为块级标签
<!-- 行级标签转为块级标签
display: block-->
<span style="width: 300px;height:50px;background: gold;display: block;">span</span>运行结果
完整学习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级标签和行级标签</title>
</head>
<body>
<!-- 块级标签：（相当执行了display：block：操作
1.独占一行
2.宽度，高度可控，若没有设置，默认铺满整行
3.可以包含块级标签和行级标签-->
<div>div</div>
<p style="width: 300px;height:50px;background: gold;">p</p>
<!-- 行级标签：（相当执行了display：inline：操作 dispaly是css语句后续会学到
1.不会独占一行，与相邻行级标签同占一行，直到行被占满，自动掉到下一行
2.宽度，高度不可控
3.只可以包含行级标签-->
<strong>strong</strong>
<span style="width: 300px;height:50px;background: gold;">span</span>
<!-- 块级标签转为行级标签
display: inline-->
<p style="width: 300px;height:50px;background: gold;display: inline;">p</p>
<!-- 行级标签转为块级标签
display: block-->
<span style="width: 300px;height:50px;background: gold;display: block;">span</span>
</body>
</html>
标签：块级,行级,span,标签,html,nbsp 来源： https://blog.csdn.net/starbiu/article/details/122060626
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。