收藏
批改状态：合格
老师批语：
再设计WEB页面中,HTML和CSS布局是重中之重,本节课程着重讲了html中的几个标签的功能和使用,以及块元素，行内元素之间的相互转化！
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
</head>
<style type="text/css">
.box{width: 100px;height: 100px;background: pink}
</style>
<body>
<!-- 标题标签 总共有6个 h1到h6 -->
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<b>这是2b粗体标签</b> <!-- 换行标签 -->
<p>坚持在php中文网学习，永远不放弃</p> <!-- 行标签 -->
<strong>努力学习</strong> <!-- 着重字标签，加粗字体 -->
<i>坚决完成老师作业</i> <!-- 斜体标签 -->
<em>定义着重字</em> <!-- 斜体加粗标签 -->
<del>定义删除字标签</del> <!-- 删除字标签,为了突出字-->
<span style="background:yellow;width: 300px;height: 200px">399元</span><del>499元</del>
<pre>预格式 文本</pre>
<!-- 块级元素 独占一行, 自带换行符 对宽高度设置生效 默认百分一百 div h1-h6 p -->
<!-- 行内元素:可以共存于一行,并且对宽高属性值设置不生效 -->
<!-- 行内块元素:结合了快级以及行内的特点 image标签 -->
<img src="images/test1.jpg" style="width: 300px;height: 300px">
<!--快级元素转换为行内 使用 display的 inline -->
<div style="width: 100px;height: 100px;background: pink; display: inline;" >1</div>
<!--将快级元素转换为行内快级元素 inline-block -->
<div style="width: 100px;height: 100px;background: pink; display: inline-block;">2</div>
<!-- display: block将行内元素转换为快级 -->
<span style="width: 100px;height: 100px；background: pink;display: block;">3 </span>
<!--将快级元素转换为行内快级元素 inline-block -->
<span style="width: 100px;height: 100px;background: pink;display:inline-block;">4 </span>
<!--将快级元素转换为行内快级元素 inline-block -->
<span style="width: 100px;height: 100px;background: pink;display:inline-block;">5 </span>
</body>
</html>点击 "运行实例" 按钮查看在线实例：
在web页面中,图片排版，以及字体样式也是布局中重要的一步，在以下的代码中，就是设置各种字体样式，以及图片和字体的图片排列方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
/*
font-weight 字体粗体
font-size字体大小
font-family 定义字体
text-align 文本位置(默认left，right，center)
line-height 定义行高
*/
span{
font-weight: bold;
font-size: 30px;
font-family: 楷体
text-align:center;
}
h1{
text-align: center;
height: 80px;background:pink;
line-height: 100px;
}
span{
font-size: 40px;
font-weight: bold;
font-family: georgia
}
image{width:400px;height: 400px }
b{
display: block;
width: 300px;
height: 40px;
background: gray;
overflow: hidden; /*超出隐藏*/
margin-bottom: 100px; /*margin表示外边距,padding表示内边距*/
}
/*伪类*/
b:hover
{
overflow:visible; /*隐藏部分元素显示*/
}
</style>
</head>
<body>
<h1>php英文网</h1>
<P style="width:100px;height:100px;display:block;">php英文网</P>
/*以下是通过内联方式设置行内元素的颜色*/
<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>
<!-- 图文混排 -->
<p style="display: inline-block;width:300px;height: 400px ">
参考消息网8月13日报道 外媒称，自从2010年退出中国后，谷歌在尝试各种方式重返这块大陆。在谷歌公司释放出开发出针对中国的安卓智能手机专用搜索引擎的消息后，关于谷歌公司可能重返中国的消息甚嚣尘上，但一直未正式坐实，显得神神秘秘，虚虚实实。而中国搜索巨头百度CEO李彦宏则在微信朋友圈回应称：“如果谷歌决定回到中国，我们非常有信心再PK一次，再赢一次。”引起外界关注。
</p>
<img src="images/test1.jpg">
<br>
<img src="images/test1.jpg">
<b>
参考消息网8月13日报道 外媒称，自从2010年退出中国后，谷歌在尝试各种方式重返这块大陆。在谷歌公司释放出开发出针对中国的安卓智能手机专用搜索引擎的消息后，关于谷歌公司可能重返中国的消息甚嚣尘上，但一直未正式坐实，显得神神秘秘，虚虚实实。而中国搜索巨头百度CEO李彦宏则在微信朋友圈回应称：“如果谷歌决定回到中国，我们非常有信心再PK一次，再赢一次。”引起外界关注。
</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是手抄总结：
通过这节课，总结出以下几点
1,标题标签 总共有6个 h1到h6
2,粗体标签 p标签 （快级标签） (独占一行)使用br换行
3,<strong>php中文语言</strong> 加重语气 ，粗体
4,<i></i> 斜体标签
5，<em><em/> 斜体标签,注重着重字
6，<del>定义删除字标签</del>
7，<pre>预定义标签</pre> 输出页面中的空行和换行
8，学到块级元素，行内元素，行块元素的区别
a,块级元素 独占一行, 自带换行符 对宽高度设置生效 默认百分一百
b,行内元素:可以共存于一行,并且对宽高属性值设置不生效
c,行内块元素:结合了快级以及行内的特点 image标签
9,块行元素互相转换
a,将快级元素转换为行内元素使用display 的inline属性
b,将快级元素转换为行内块元素使用 diplay的inline-block
c,将行内元素转换为快级元素使用display的block
10,使用内部,内联样式控制文本样式属性
11，对字体的几种样式了解掌握，
font-weight 字体粗体
font-size字体大小
font-family 定义字体
text-align 文本位置(默认left，right，center)
line-height 定义行高
12，学习了伪类保护（鼠标悬浮事件，隐藏overflow,显示overflow:visible）
13,通过c盘匹配字体，从而设置字体样式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
