html中文本标签的控制
实例
<!DOCTYPE html><!-- 定义我们的文档类型 xml xhtml -->
<!-- 定义网页头部 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<title>08-13作业</title><!-- 定义网页头标签 -->
<style type="text/css">/*内联样式*/
#one{
width: 100%;/*定义宽度*/
height: 50px;/*定义高度*/
background: #000;/*定义颜色*/
}
#one span{
font-size: 30px;/*定义字体大小*/
}
#two{
font-weight:bold;/*定义粗体*/
font-size:30px; /* 定义字体大小*/
font-family:楷体; /*定义字体*/
}
#three{
text-align:center;/*left right文本居中 居左 居右*/
height: 100px;
background: #ccc;
line-height:100px;/*定义行高*/
}
#four{
font-size: 40px;
font-weight: bold;
font-family: georgia;}
.five{
width: 300px;
height: 400px;}
#six{
display: block;/*转换成块元素*/
width: 200px;
height: 20px;
border-style: solid;
background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;/*设置下外边距100*/
}
#six:hover{overflow: visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外；*/
</style>
</head>
<body>
<p style="color:red">------------block块元素 （div,h1~h6,p,table,ul,li,form)-------------------</p>
<p style="color:red">------------块元素可以设置width宽度，height高度，且独占一行---------------</p>
<div>这是一个div块</div>
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
<p>这是一个p标签</p>
<p style="background: #ccc;width: 300px;height: 200px;">给p标签设置宽300像素，高200像素，块元素可以起到作用</p>
<p style="color:red">------------inline行元素 （span,i,b,strong,em,code,adress,tel)-------------------</p>
<p style="color:red">------------行内元素不可以设置width宽度，height高度，且相互挤在一行---------------</p>
<br><!-- 换行 -->
<strong>定义重要的文本(其实也就是加粗了点)</strong>
<b>这是粗体标签b</b>/<b>这是粗体标签b</b>
<i>呈现为斜体字标签</i>
<em>呈现为被强调的文本</em>
<del>呈现为删除文本</del>
<br><!-- 换行 -->
列子：给span 加宽高没有任何的作用
<br>
原价为<del>499</del>现价<span style="background: pink;width: 300px;height: 200px;">399元</span>
<pre>预格式化文本（pre）---我 空 格
我
换
行
都是可以生效的</pre>
<p style="color:red">------------图片是一个行内块级元素,设置宽高可以生效------------</p>
<span>399元</span>
<img src="images/1.jpg" style="width: 200px;height: 300px;" />
<span>123</span>
<p style="color:red">----------行内块级相互转换：
<br>
----------display: inline 将块级元素转换为行内<br>
----------display: inline-block;将块级元素转换为行内块元素<br>
----------display: block;将行内元素转换为块级</p>
<div style="width: 100px;height: 100px;background: pink; display: inline;">这是一个div，它是一个块元素，用display: inline转换成行内，设置宽高不起作用
</div>
<div style="width: 100px;height: 200px;background: pink; display: inline-block;">这是一个div，它是一个块元素，用display: inline转换成行内块元素，设置宽高起作用，且与第一个行内元素并排</div>
<span style="width: 100px;height: 200px;background: pink;display: block;">这是一个span，它是一个行内元素，用display: block转换成块元素，设置宽高起作用，独立一行</span>
<span style="width: 100px;height: 200px;background: red;display: inline-block;">这是一个span，它是一个行内元素，用display: block转换成行内块元素，设置宽高起作用，共享一行</span>
<span style="width: 100px;height: 200px;background: red;display: inline-block;">这是一个span，它是一个行内元素，用display: block转换成行内块元素，设置宽高起作用，共享一行</span>
<p>----------------------------------分割线-------------------------------------</p>
<h1 id="three">php中文网</h1>
<p id="two">php中文网</p>
<!-- 谷歌logo -->
<div id="one">
<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>
<!-- 图文混排 -->
<br>
<p id="two" style="display: inline-block;width: 300px;height: 400px;">像孩子依赖著肩膀，像眼泪依赖着脸庞，你就像天使一样给我依赖给我力量；像诗人依赖着月亮，像海豚依赖海洋，你是天使，你是天使，你是我最初和最后的天堂。
</p>
<img class="five" src="images/1.jpg">
<br>
<img class="five" src="images/1.jpg">
<b id="six">鼠标移动到这里,出现内容
<br>像孩子依赖著肩膀，像眼泪依赖着脸庞，你就像天使一样给我依赖给我力量；像诗人依赖着月亮，像海豚依赖海洋，你是天使，你是天使，你是我最初和最后的天堂。
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
课堂笔记：
block块元素 （div,h1~h6,p,table,ul,li,form)
inline行元素 （span,i,b,strong,em,code,adress,tel)
img行内块元素
display：block（转换成块元素） dispaly：inline-block（转换成行内块元素）display：inline（转换成行内元素）
将p标签转换成行内块元素和图片混合排版
css中的 overflow 用法
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示（gun）动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示（gun）动条以便查看其余的内容。
margin-bottom 属性设置元素的下外边距。
----------------------------------------------------分割-------------------------------------------------------
今日作业：
实例
<!DOCTYPE html><!-- 定义我们的文档类型 xml xhtml -->
<!-- 定义网页头部 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<title>08-13作业</title><!-- 定义网页头标签 -->
<style type="text/css">/*内联样式*/
body{
padding:0px;
margin:0px;
background: rgba(0,0,0,0.1);
font-family: 微软雅黑;
}
#main{
width: 40%;
height: 100%;
background: #fff;
margin:0 auto;
padding: 10px 20px 10px 20px;/*上右下左*/
}
p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}
span{
font-size: 10px;
color:rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div id="main">
<h1 style="text-align: center;">黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h1>
<span>2018-8-14 13:55:14</span><span>来源：搜狐娱乐</span><span style="float: right;"><a style="color: blue" href="https://baike.baidu.com/item/%E9%BB%84%E6%99%93%E6%98%8E/6597?fr=aladdin">黄晓明</a></span>
<img style="width: 100%;margin: 0 auto; padding-top: 10px" src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg" alt="">
<p style="font-size: 10px;color:rgba(0,0,0,0.3); text-align: center;">黄晓明(资料图)</p>
<p>搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。</p>
<p>而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被利用进行操纵，这些账户也不会被冻结。</p>
<p>8月10日晚，证监会通报了5宗操纵案件，其中，高勇控制16个账户，操纵“精华制”，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚8.97亿元。</p>
<p>根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。</p>
<p>媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其母亲张某霞，正好一一对应！”</p>
<p>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
