抄demo1：
实例
<!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> <p>这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字这是一段很长很长文字 </p><!-- 段落标签 --> <br><!--换行标签--> <strong>PHp中文网</strong><!-- 加重标签跟加粗一样 --> <i>这是一段很长很长文字</i><!-- 斜体标签 --> <del>这是一段很长很长文字</del><!-- 删除字标签 --> <em>这是一段很长很长文字</em><!-- 着重字标签 --> <span style="background:blue;width: 500px;height: 600px;">3900</span><del>599</del><!-- span组合样式加删除样式 --> <pre>这是一段很长 很长文字</pre><!-- 预格式化的文本 --> <p style="background: green;width: 400px;height: 300px;">321</p><!-- 文本块元素 --> <span style="background:blue">699元</span> <!-- 块状元素：div h1-h6 p 独占一行 对宽高属性值生效 行内：可以共存于一行对宽高属性值摄者不生效 --> <!-- 行内块属性：结合快级以及行内的特点 --> <img src="images/1.jpg" style="width:200px;height: 300px;"/><span style="color:red;">5647</span> <!-- 行内块级相互转换： display:inline; 将块状元素转化为行内 display:inline-block;将块级元素转换为行内块元素 display:block; 将行内元素转换为块级 --> <div style="width: 100px;height: 100px;background: yellow;display: inline;">5</div> <div style="width: 100px;height: 100px;background: yellow;display: inline-block;">6</div> <span style="width: 100px;height: 100px;background: yellow;display:block;">3</span> <span style="width: 100px;height: 100px;background: yellow;display:inline-block;">5</span> <span style="width: 100px;height: 100px;background: yellow;display:inline-block;">2</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
抄demo2：
实例
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
p{
font-weight: bold;/*定义粗体*/
font-size: 50px;/*定义文字大小*/
font-family:楷体;/*定义字体*/
}
h1{
text-align: center;/*中间 左：left右：right*/
height: 150px;
background-color: red;
line-height: 150px;/*定义行高*/
}
span{font-size: 50px;font-weight:bold;font-family: georgia}/*文字大小，文字定义粗体，文字字体*/
img{
width: 300px;height: 500px;}
b{
display:block;/*行内元素变块状元素*/
width: 300px;
height:50px;
background-color: red;
overflow: hidden;/*溢出隐藏*/
margin-left-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 ">o</span>
<span style="color:#39FF1B">g</span>
<span style="color:#39FF1B">l</span>
<span style="color: #FFE80E">e</span>
<!-- 图文混排
-->
<br>
<p style="display: inline-block;width: 300px;height: 400px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一字</p>
<img src="images/1.jpg">
<br>
<br>
<img src="images/1.jpg">
<b>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业代码：
实例
<!DOCTYPE html>
<html>
<head>
<title>08-13作业案例</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:auto;
padding:auto;
}
.text1{
width: 750px;
margin:auto;
text-align: center;
display: block;
}
.text2{
width: 750px;
display: block;
text-align: center;
}
.text3{
width: 750px;
display: block;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="text1"><p>和平方舟抵达汤加访问并开展医疗服务</p></h1>
<span class="text2"style="font-size: 15px">发布时间：2018-08-14 11:04:30 来源：央广网 作者：江山 史奎吉 责任编辑：王月</span>
<br>
<hr style="width: 900px;"></hr>
<br>
<img src="http://images.china.cn/site1000/2018-08/14/bac54fb1-296d-44f7-a223-943729cb5f3c.jpg" style="display: block;text-align: center; width: 750px;">
<span class="text3"style="font-size: 16px">8月13日，在汤加努库阿洛法港码头， 中国驻汤加大使王保东 （前左二）陪同汤加代理首相塞密西﹒西卡（Semisi Sika）(前右一)等军政要员在码头迎接中国海军和平方舟医院船。江山摄</span>
<br>
<span class="text2">中国海军和平方舟医院船于8月13日抵达“和谐使命—2018”任务第四站——汤加努库阿洛法港，开始为期8天的友好访问和人道主义医疗服务。和平方舟曾于四年前同月同日成功首访汤加。</span>
<br>
<span class="text2"style="font-size: 16px">上午10时许，在汤海军巡逻艇萨维号（P203）引导下，和平方舟缓缓驶抵努库阿洛法港乌纳（VUNA）码头。汤方隆重举行传统欢迎仪式，汤加皇家军乐队演奏中汤两国国歌，当地民众向“和谐使命-2018”任务指挥员献上花环，表演民族舞蹈，吟诵赞美诗并祈祷，汤加代理首相塞密西﹒西卡（Semisi Sika），中国驻汤加大使王保东，当地民众、华侨华人和中方机构代表等在码头迎接</span>
<br>
<span class="text2"style="font-size: 16px">欢迎仪式上，代理首相西卡代表汤方热烈欢迎和平方舟再次到访，由衷感谢中国政府和人民一直以来对汤加的支持和帮助。王保东大使表示，在中汤共同庆祝建交20周年之际，和平方舟到访汤加具有重要意义，将有助于加强两国卫生、军事等领域互利合作，增进两国人民的友谊。“和谐使命-2018”任务指挥员在致辞中说，和平方舟将一如既往用真诚的爱心、精湛的医术和周到的服务惠及更多民众，以实际行动落实今年3月份两国元首在北京达成的重要共识，在新的历史起点上推动两国战略伙伴关系新的更大发展，使两国人民从双方合作交流中有更多的获得感。</span>
<br>
<span class="text2" style="font-size: 16px">仪式结束后，汤方要员登船参观，对和平方舟专业的布局设计和先进的医疗设备连连称赞。</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
样式图如下：
手抄总结代码：
