收藏
批改状态：合格
老师批语：
进行web页面的设计过程中html和css是不可缺失的工具，其中标签和样式的使用会提升整体页面的可观赏性，因此对于基础标签和属性的理解要透彻。
下面这段代码是我对基础标签和属性的一点理解
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
.zt{
font-weight: bold; /*定义字体粗体*/
font-size: 30px; /*定义字体大小*/
font-family: 楷体; /*定义字体的形状*/
text-align: center; /*定义字体的位置，left，right向左和向右。*/
display: inline-block;
width: 100%;
height: 100px;
background: blue;
line-height: 100px; /*设置行高*/
}
.guge{font-size: 40px;
font-family: georgia;
}
.wz1{
width: 300px;
height: 400px;
font-size: 30px;
display: inline-block;
}
.test1{
width: 300px;
height: 400px;
background: #000;
}
.test2{
width: 300px;
height: 400px;
background: pink;
display: block;
}
.wz2{
display: block;
width: 300px;
height: 40px;
background: blue;
overflow: hidden; /*溢出部分隐藏掉*/
margin-bottom: 100px;/*底部边框*/
}
.wz2:hover{overflow: visible;}/*默认内容不会隐藏，鼠标经过时内容会显示，*/
</style>
</head>
<body>
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
<b>这是粗体标签</b>
<p>这是一个段落标签这是一个段落标签<br>这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签<br>>这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签</p>
<br>
<strong>加重语气的标签（也是加粗标签）</strong><br>
<i>这是一个斜体标签</i><br>
<em>定义着重字（也是斜体标签）</em><br>
<del>定义删除字标签</del>
<span style="background: pink; width: 300px; height: 300px;">399元</span><del>499</del>
<p style="background: #333; width: 300px; height: 300px;">test</p>
<pre>预格式标签</pre><!-- 可以输出空格，换行等不常用样式比较难控制 -->
<img src="images/1.jps" style=" width: 300px; height: 300px; background: blue;">
<span>test</span><!-- 典型的行内块元素标签 -->
<div style=" width: 100px; height: 100px; background: pink; display: inline;">123</div>
<div style=" width: 100px; height: 100px; background: pink; display: inline-block;">456</div>
<span style="width: 100px; height: 100px; background: pink; display: block;">789</span>
<span style=" width: 100px; height: 100px; background: pink; display: inline-block">111</span>
<span style=" width: 100px; height: 100px; background: pink; display: inline-block">222</span>
<span class="zt">字体测试</span>
<!-- 谷歌logo和图文混排 -->
<!-- 谷歌的logo -->
<div class="guge">
<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>
</div>
<!-- 图文混排 -->
<p class="wz1">这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试</p>
<img class="test1" src="images/1.jps">
<img class="test2" src="images/1.jps">
<b class="wz2">这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是我的笔记
总结
行内块级相互转换：
display： inline 将块级元素转换为行内元素。
display: inline-block 将块级元素转换为行内块元素。
display: block 将行内元素转换为块级元素
常见的块级元素：DIV H1到H6，p 等标签，特点是独占一行的标签对宽高属性设置生效，自带换行功能，如果没有设置宽度默认的是100%
行内元素：特点是可以共存于一行，对宽高的属性设置不生效
行内块元素：结合了块级和行内的一个特点
今天所学知识点较多。需要多多练习才能加深印象。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
