一.html常用标签
实例
<h1>这是一个h1标签</h1> <h2>这个是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6> <b>这是粗体标签b</b> <p>坚决打赢脱贫攻坚战， </p> <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> <!-- 块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效 行内：可以共存于一行对宽高属性值设置不生效 --> <!-- 行内块元素：结合了块级以及行内的特点 --> <img src="images/1.jpg" style="width: 200px;height: 300px;" /><span>123</span>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二.块级元素和行内元素的转换
1. 行内块级相互转换：
display: inline 将块级元素转换为行内
display: inline-block;将块级元素转换为行内块元素
display: block;将行内元素转换为块级
2.块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效
行内：可以共存于一行对宽高属性值设置不生效
行内块元素：结合了块级以及行内的特点
实例
<!-- 行内块级相互转换： display: inline 将块级元素转换为行内 display: inline-block;将块级元素转换为行内块元素 display: block;将行内元素转换为块级 --> <div style="width: 100px;height: 100px;background: pink; display: inline;">我是块元素display:inline,变成行元素</div> <hr> <div style="width: 100px;height: 100px;background: pink; display: inline-block;">我是块元素display:inline-block,变成行内块元素</div> <hr> <span style="width: 100px;height: 100px;background: pink;display: block;">我是行内元素,display:block变成元素</span> <hr> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">5</span>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三:文字的控制
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*定义粗体*/
font-size:30px; /* 定义字体大小*/
font-family:楷体; /*定义字体*/
}
h1{ text-align:center;/*left right 文本的对齐效果*/
height: 100px;
background: #ccc;
line-height:100px;/*定义行高*/
}
垂直居中的效果 height的值line-height值一样的
span{font-size: 40px;font-weight: bold;font-family: georgia;}
img{width: 300px;height: 400px;}
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四.简单图文混编 overflow的使用
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*定义粗体*/
font-size:30px; /* 定义字体大小*/
font-family:楷体; /*定义字体*/
}
b{ display: block;
width: 300px;
height: 40px;
background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;
}
b:hover{overflow: visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外；*/
</style>
</head>
<body>
<!-- 图文混排 -->
<p style="display: inline-block;width: 300px;height: 400px;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五.作业练习(图文混排简单练习)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的图片混排作业</title>
<style type="text/css">
div {
width: 800px;
margin:0 auto;
}
img{
text-align: center;
width: 800px;
margin:0 auto;
}
h1{
text-align: center;
}
p{
text-indent: 2em;
}
.myTitle{
margin-bottom: 64px;
}
.leftTitle{
float: left;
}
.rightTitle{
float:right;
}
.author1{
text-align: right;
}
.memo{
text-align: left;
font-size: 12px;
color:#9999B1;
}
</style>
</head>
<body>
<h1 >上海旧影1937年，八·一三淞沪会战爆发</h1>
<div class="myTitle">
<span class="leftTitle">上海旧影，1937年淞沪会战。摄影：福尔曼</span>
<span class="rightTitle">凤凰新闻 08-13 16:05 </span>
</div>
<div>
<img src="https://img.php.cn//upload/image/976/785/479/1534226067857811.jpg" alt="">
</div>
<div>
<p>
淞沪会战开始于1937年8月13日。是中日双方在抗日战争中的第一场大型会战，也是整个中日战争中进行的规模最大、战斗最惨烈的一场战役。淞沪会战彻底粉碎了日 本“三个月灭亡中国”计划。
</p>
<p>
1937年日 本帝国主义制造卢沟桥事变，企图在华北制造第二个满洲国。为确保首都安全，中国统帅部遵照国防计划甲案，陆军集中兵力准备歼灭上海的三千日军海军陆战队，海军堵塞江阴全歼日军长江舰队。
</p>
<p>
后机密泄露，日 本长江舰队仓皇逃出长江口。1937年8月9日，日 本海军中尉大山勇夫等两人驾车闯入上海虹桥机场挑衅，被驻军保安队击毙。
</p>
<p>
在全民抗日浪潮推动下，国民政府第二天发表了《自卫抗战声明书》，宣告“中国决不放弃领土之任何部分，遇有侵略，惟有实行天赋之自卫权以应之。”“八一三”淞沪抗战由此展开 。
</p>
<p>
1937年8月14日，当地国民党驻军第九集团军在总司令张治中的指挥下，指挥87、88师等部开始总攻，中国空军也到上海协同作战，并于8月13日奉令向日 本驻沪海军陆战队虹口基地发起围攻，试图赶敌下海
</p>
<p>
“八一三”淞沪会战开始时，中国军队占了绝对优势，除2个精锐师外，还有2个装备德国火炮的重炮团，即炮兵第10团（150毫米榴弹炮）和炮兵第14团（150毫米榴弹炮），加上坦克、空军助战，按理应具有压倒性优势。
</p>
<p>
10月20日，日军秘密组建第10军准备对中国军队实行大包围，11月5日，日军第10军8万人在金山卫登陆。几天后，日军包围网即将形成，前线中国军队大乱，部分部队为避免被围已经自行组织撤退。
</p>
<p>
最终撤退时，因没有讲明各部队撤退顺序，三四十万中国将士挤在几条公路上，被日军空军轰炸，大撤退变成了大溃逃，数十万将士在撤往南京时分散，为南京保卫战的失利埋下伏笔。12万守军各自为战，无法统一作战，数天上海就告陷。
</p>
</div>
<div class="author1">
摄影：福尔曼
</div>
<div class="memo">
产品建议及投诉请联系：shoujibaidu@baidu.com
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
