实例
<!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> <p>食用方法：未经保存处理的荔枝有“一日色变，二日香变，三日味变，四日色香味尽去”的特点。为了保存荔枝的色香味，可以把荔枝喷上点水装在塑料保鲜袋中放入冰箱，利用低温高湿保存。<br>功效：荔枝味甘、酸、性温，入心、脾、肝经；可止呃逆，止腹泻，是顽固性呃逆及五更泻者的食疗佳品，同时有补脑健身，开胃益脾，有促进食欲之功效；因性热，多食易上火。荔枝果肉香甜汁多，有生津止渴、益肝补脾的作用，夏季炎热，人的胃口略有不佳，<br>食用些荔枝可改善食欲不振情况。此外，荔枝对大脑组织有补养作用,能明显改善失眠、忘记、神疲等症。能够增强免疫功能荔枝肉含丰富；作用的物质,对糖病患者十分适宜。荔枝还能消肿解毒,止血止痛荔枝除广为人知的滋补作用外,还可用于外科。 </p> <br> <!-- 换行，标签换行 --> <br> <br> <strong>PHP中文网</strong> <!-- 加重语气 粗体 --> <i>斜体</i> <!-- 斜体 --> <em>定义着重字</em> <!-- 斜体 --> <del>定义删除字标签</del> <span style="background:pink; width:300px;height:200px;">399元</span><del>499</del> <pre>定义 预格 式 化文本</pre> <!-- 可以输出空格 换行 --> <p style="background:#ccc;width:300px;height:200px;">123</p> <!-- 独占一行 --> <span>399元</span> <!-- 块级元素 P标签 自带换行符 独占一行 宽高间隙属性值生效 --> <!-- 行类元素 可以共存一行 对宽高属性值不生效 --> <!-- 行内块元素；结合了块级以及行内的特点 既可以对宽高属性值生效，还可以共存于一行 --> <img src="2.jpg" style="winth:200px; height:300px;" /><span>123</span> 行内块级相互转换； display：inline 将块级元素转换为行内元素 display:inline-block; 将块级元素转换为行内块元素 display:block; 将行内转换为块级 <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> <spen style="width:100px;height:100px;background:pink;display:block;">3</spen> <spen style="width:100px;height:100px;background:pink; display:inline-block;">4</spen> <spen style="width:100px;height:100px;background:pink; display:inline-block;">5</spen> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<title>文本控制2</title>
<meta charset="utf-8">
<style type="text/css">
p {font-weight: bold; /*定义粗体*/
font-size: 30px; /*定义字体大小*/
}
h1 {font-family: 方正超粗黑简体;
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> <!-- 16进颜色值 -->
<span style="color:rgb(245,28,39)">o</span> <!-- RGB颜色值 -->
<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;">功效：荔枝味甘、酸、性温，入心、脾、肝经；可止呃逆，止腹泻，是顽固性呃逆及五更泻者的食疗佳品，同时有补脑健身，开胃益脾，有促进食欲之功效；因性热，多食易上火。荔枝果肉香甜汁多，有生津止渴、益肝补脾的作用，夏季炎热，人的胃口略有不佳，食用些荔枝可改善食欲不振情况。此外，荔枝对大脑</p>
<img src="2.jpg">
<br><br>
<img src="2.jpg">
<b>功效：荔枝味甘、酸、性温，入心、脾、肝经；可止呃逆，止腹泻，是顽固性呃逆及五更泻者的食疗佳品，同时有补脑健身，开胃益脾，有促进食欲之功效；因性热，多食易上火。荔枝果肉香甜汁多，有生津止渴、益肝补脾的作用，夏季炎热，人的胃口略有不佳，食用些荔枝可改善食欲不振</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<title>国产重磅新机宣布：全球首发高通10nm新U</title>
<meta charset="utf-8">
<style type="text/css">
h1{font-weight: bold;font-size: 30px;text-align:center;font-family: 黑体;}
span{font-size: 13px; color: rgb(153, 153, 153); }
p{text-align:left}
b{display: block;height: 35px;
overflow: hidden; /*溢出隐藏*/
margin-bottom: 100px;
}
b:hover{overflow: visible;
</style>
</head>
<body>
<h1>国产重磅新机宣布：全球首发高通10nm新U</h1>
<span>凤凰科技 08-13 17:53</span>
<br>
<br>
<div style="text-align:center">
<img src="http://pic176.nipic.com/file/20180808/3554136_093134624000_2.jpg" style="winth:500px; height:500px;text-align:center"/><span></span>
<p>8月13日消息，OPPO官方宣布R17系列即将发布，现在官方已经公布了该系列的部分信息。</p>
</div>
<p>官方介绍，OPPO R17首发骁龙670移动平台，这颗片是高通最新推出的中端处理器，它基于10nm LPP工艺制程打造，也是高通骁龙600系列首款10nm片。</p>
<p>它采用Kryo 360架构、八核心设计，CPU主频为2.0GHz，GPU为Adreno 615，性能强悍。</p>
<p>此外，OPPO R17采用6.4英寸水滴屏，首发康宁第六代大猩猩玻璃，屏占比达到了91.5%，最高配备8GB内存+128GB存储，前置2500万像素摄像头，支持AI智慧美颜，后置AI智能双摄，电池容量为3500mAh，支持VOOC闪充，运行ColorOS 5.2系统（基于安卓深度定制）。</p>
<p>值得一提的是，OPPO R17配备光感屏幕指纹，这是OPPO旗下首款屏幕指纹收集，拥有4mm?超大传感器，秒速解锁。</p>
<b>该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约该机将于8月18日开启预约</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
这节课程学习了标签的文本控制，个人感觉内容有多，信息量大，现在能基本都理解，但是如果单独敲，还有些背不下来比如:display:inline-block 这些
元素分为：块级、行内、行内块级，三种，且可以相互转换：
块级元素 P标签 h1~h6 div 自带换行符 独占一行 宽高间隙属性值生效
行类元素 可以共存一行 对宽高属性值不生效
行内块元素；结合了块级以及行内的特点 既可以对宽高属性值生效，还可以共存于一行
行内块级相互转换；
display：inline 将块级元素转换为行内元素
display:inline-block; 将块级元素转换为行内块元素
display:block; 将行内转换为块级
