HTML/CSS基础知识第二课(字体效果标签,行内元素,块级元素,行内块级元素,以及相互转换)
1、字体效果标签
<h1>-<h6>标签,双标签
<h1>-<h6>标签标识不同文字大小,<h1>标签字号最大<h6>标签字号最小
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>h1-h6标签效果</title> <meta charset="utf-8"> </head> <body> <h1>这是h1标签</h1> <h2>这是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
-----------------------------------------------------------------------------------------------------------------------------
<b></b> <strong></strong>粗体标签,双标签
两者均为粗体字标签,展示效果一样
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>粗体字标签</title> <meta charset="utf-8"> </head> <body> <b>粗体字标签b</b> <br> <strong>粗体字标签strong</strong> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
--------------------------------------------------------------------------------------------------------------------------------
<i></i>,<em></em>斜体字(着重字)标签,双标签
两者均为粗体字标签,展示效果一样
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>斜体字标签</title> <meta charset="utf-8"> </head> <body> <i>斜体字标签i</i> <br> <em>斜体字标签em</em> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
-------------------------------------------------------------------------------------------------------------------------------
<del></del>删除字标签,双标签
定义删除字标签
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>删除字标签</title> <meta charset="utf-8"> </head> <body> <del>定义删除字标签del</del> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
------------------------------------------------------------------------------------------------------------------------------
2、格式标签
<p></p>段落标签,双标签
用于区分段落
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>段落标签</title> <meta charset="utf-8"> </head> <body> <p>这是第一段文字</p> <p>这是第二段文字</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
------------------------------------------------------------------------------------------------------------------------------
<br>换行标签,单标签
用于区分行
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>换行标签</title> <meta charset="utf-8"> </head> <body> <br>这是第一行文字</br> <br>这是第二行文字</br> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
------------------------------------------------------------------------------------------------------------------------------
<pre></pre>预格式化文本
预格式化文本
效果如下:
实例
<!DOCTYPE html> <html> <head> <title>预格式化文本</title> <meta charset="utf-8"> </head> <body> <pre>预格式化文本</pre> <br> <pre>可以识别文本中的空格 和 换行格式 但是它会改变文字本身的字体,一般不推荐使用 </pre> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
-------------------------------------------------------------------------------------------------------------------------------
3、行内块级相互转换
块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效
行内元素：可以共存于一行对宽高属性值设置不生效
行内块级元素：结合了块级以及行内的特点
display: inline 将块级元素转换为行内
display: inline-block;将块级元素转换为行内块元素
display: block;将行内元素转换为块级
效果如下：
实例
<!DOCTYPE html> <html> <head> <title>行内块级元素的转换及效果</title> <meta charset="utf-8"> </head> <body> <div style="width: 100px;height: 100px;background: pink; display: inline;">1</div> <div style="width: 100px;height: 100px;background: pink; display: inline-block;">2</div> <span style="width: 100px;height: 100px;background: pink;display: block;">3</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">5</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
--------------------------------------------------------------------------------------------------------------------------------
4、元素转换及样式应用实例
如下：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*bold定义粗体*/
font-size:30px; /* 定义字体大小*/
font-family:楷体; /*定义字体*/
}
h1{ text-align:center;/*居中显示,还可以是left right*/
height: 100px;
background: #ccc;
line-height:100px;/*定义行高*/
}
span{font-size: 40px;font-weight: bold;font-family: georgia;}
img{width: 300px;height: 400px;}
b{ display: block;/*定义为块级元素,独立成行显示*/
width: 300px;
height: 40px;
background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;/*底部预留距离*/
}
b:hover{overflow: visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外；*/
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<!-- 谷歌logo -->
<span style="color:#0388F1">G</span>
<span style="color: rgb(245,28,39);">o</span>
<span style="color: #FFE80E">o</span>
<span style="color:#0388F1">g</span>
<span style="color:#39FF1B">l</span>
<span style="color: #FFE80E">e</span>
<!-- 图文混排 -->
<br>
<p style="display: inline-block;width: 300px;height: 400px;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
