网页基础布局
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>