Collection
Collection
8.13号:html之文本控制
代码:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<title></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>
<b>坚决地址乱七八糟的。。。这里是b标签，加粗</b><br>
<p>这里是p标签。。。</p>
块级元素:独占一行,自带换行符,宽度默认100%,对宽高属性值生效 <br>
行内元素:共存于一行,并且对宽高的属性值不生效 <br>
行内块级元素:结合了块级以及行内的特点 <br>
<strong>这里是strong标签。。。</strong><br>
<em>这里是em标签。。。</em><br> <!-- 定义着重字 -->
<i>这里是i标签。。。</i><br>
<del>定义删除自标签，del标签</del><br>
<span>123元</span><del>199元</del>
<span>这里是span标签</span><br>
<pre>
预 格式
文本</pre>
<img src="images/1.jpg" style="width:400px"> <!-- 行内块级元素 --><span>123</span> <br>
display:inlie; 将块级元素转换为行内;
display:inline-block; 将块级元素转换为行内块级元素;
display:block; 将行内元素转换为块级元素; <br>
<div style="width:100px;height:100px;background:black;display:inline">1</div>
<div style="width:100px;height:100px;background:black;display:inline-block">2</div>
<span style="width:100px;height:100px;background:black;display:inline">3</span>
<span style="width:100px;height:100px;background:black;display:inline">4</span>
<span style="width:100px;height:100px;background:black;display:block">5</span>
</body>
</html>
demo2:
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<style type="text/css">
span{
font-weight: bold; /*字体加粗*/
font-size: 30px; /*字体大小*/
font-family:"楷体"; /*字体*/
}
h1{
text-align:center;/*文本居中/左/右*/
height: 100px;
line-height:100px; /* 定义行高*/
background: red;
}
p span{
font-size: 30px;font-weight: 700;font-family: georgia;
}
img{width:300px;height:400px;}
b{display: block;width: 300px;height: 40px;background: red;overflow: hidden;margin-bottom:100px;} /*overflow:hidden 溢出隐藏*/
b:hover{overflow: visible;} /*默认值，内容不会被修剪，元素会被呈现在元素框之外*/
</style>
</head>
<body>
<h1>php中文网</h1>
<span>php中文网</span><br>
<!-- google logo -->
<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:red">e</span>
</p>
<!-- 图文混排 -->
<p style="display:inline-block;width:300px;height: 300px">今天，沈阳铁西公安通报，8月11日，在我区发生一起民事纠纷。当日15时15分许，居民墨某某驾车带其在农村饲养的一条英国斗牛犬到宠物医院看病，途中该犬从墨某某私家车后窗跳出，追咬拉水果车的毛驴，毛驴受到惊吓后狂奔，撞损了停在路边的一台轿车。接到报警后，交警和属地派出所民警赶到现场，经过调解，墨某某和轿车车主崔某某达成赔偿协议，纠纷已于当日圆满解决。
</p>
<img src="./images/lv.jpg"> <br><br>
<div class="box" style="width:500px;margin: auto">
<img src="images/1.jpg" style="margin:auto">
<b>今天，沈阳铁西公安通报，8月11日，在我区发生一起民事纠纷。当日15时15分许，居民墨某某驾车带其在农村饲养的一条英国斗牛犬到宠物医院看病，途中该犬从墨某某私家车后窗跳出，追咬拉水果车的毛驴，毛驴受到惊吓后狂奔，撞损了停在路边的一台轿车。接到报警后，交警和属地派出所民警赶到现场，经过调解，墨某某和轿车车主崔某某达成赔偿协议，纠纷已于当日圆满解决。</b>
</div>
</body>
</html>总结:
display的使用,行,行块,块级元素转换使用;
块级元素:独占一行,自带换行符,宽度默认100%,对宽高属性值生效;
行内元素:共存于一行,并且对宽高的属性值不生效;
行内块级元素:结合了块级以及行内的特点;
2.voerflow:hidden/visible;溢出隐藏及默认值;
3.del标签的使用;
