Collection
Collection
我们常常会看到一篇文章，他有标题，正文，日期，图片，署名等等信息，那这样一篇文章用HTML/CSS也是可以做出来的。首先，我们来看一段代码：
<!DOCTYPE html> <html> <head> <title>HTML/CSS基础-文本控制(一)</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> <!-- 粗体 加重语气 --> <br> <i>这是一个斜体字标签</i> <em>定义着重字</em> <br> <del>定义删除字标签</del> <span style="background: pink">399元</span><del>499元</del> <pre>欲格式化文本</pre> <pre>在这里 换行</pre> <pre>在这里 空格</pre> <p style="background: #ccc;width: 300px;height: 200px;">123</p> <!-- 块级元素:div h1-h6 p 特点:独占一行 对宽高属性设置生效 行内元素:span 可以共存于一行 对宽高属性设置不生效 行内块级元素：结合了块级以及行内的特点 <img/> --> <img src="static/images/1.jpg" style="width: 200px;height: 300px;"><span>123</span> <!-- 行内块级相互转换 display:inline 将块级元素转换成行内元素 display:inline-block 将块级元素转换成行内块级元素 display:block 将行内元素转换成块级元素 --> <div style="width: 100px;height: 100px;background: pink;display: inline;">123</div> <div style="width: 100px;height: 100px;background: pink;display: inline-block;">456</div> <span style="width: 100px;height: 100px;background: pink;display: block;">4561</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4562</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4562</span> </body> </html>
上面的代码中新加入了<p></p>、<h1></h1>~<h6></h6>、<b></b>、<strong></strong>、<i></i>、<em></em>、<span></span>、<br>、<pre></pre>标签，又新增了行内元素，块级元素，行内块级元素，下面对提及的知识进行一下描述和总结
<p></p>：p标签是段落标签，块级元素，对宽高属性设置生效，举个栗子：
<h1></h1>~<h6></h6>:标题标签，块级元素。举个栗子：
<h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6>
<b></b>/<strong></strong>:都起到对文字加粗的效果，strong加重语气举个栗子：
<i></i>/<em></em>:斜体字标签，em加重语气，举个栗子：
<span></span>:span元素用于对行内元素进行组合，可以进行文字修饰，举个栗子：
<br>:br标签是换行标签，举个栗子：
<pre></pre>:pre标签是欲格式化文本标签，在这里你可以输入换行符回车和空格，举个栗子：
本节又加入了块级元素，行内元素，行内块级元素三个知识点，三个元素是可以互相转换的，举个栗子：
<div style="width: 100px;height: 100px;background: pink;display: inline;">块级元素转行内元素</div> <div style="width: 100px;height: 100px;background: pink;display: inline-block;">块级元素转行内块级元素</div> <span style="width: 100px;height: 100px;background: pink;display: block;">行内转块级</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">行内转行内块</span>
了解了以上知识，我们结合上一节的知识，进行一下整合，看一段代码：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS基础-文本控制(二)</title>
<meta charset="utf-8">
<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值相同文字垂直居中显示*/
}
span{
font-size: 40px;
font-weight: bold;
font-family: georgia;
}
img{
width: 300px;
height: 400px;
}
b{
display: block;
background: pink;
width: 300px;
height: 40px;
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>
<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: rgb(245,28,39);">e</span>
<br>
<!-- 图文混排 -->
<p style="display: inline-block;width: 300px;height: 400px;">短视频近两年实在是太火了，占据了网民们大部分的碎片化时间，在内涵段子等分享平台被下架后，广电总局又对热门短视频平台集中整治，</p>
<img src="static/images/1.jpg">
<br><br>
<img src="static/images/1.jpg">
<b>短视频近两年实在是太火了，占据了网民们大部分的碎片化时间，在内涵段子等分享平台被下架后，广电总局又对热门短视频平台集中整治，</b>
</body>
</html>此段代码整合了两节所学的知识点，那么我们前面提到的新闻类文章也就可以实现了，看一段代码：
<!DOCTYPE html>
<html>
<head>
<title>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</title>
<meta charset="utf-8">
<style type="text/css">
p{
width: 700px;
}
</style>
</head>
<body>
<h1 style="display: block; width: 700px;">黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h1>
<p style="color: grey">2018-08-13 21:18</p>
<img src="static/images/hxm.jpeg" style="width: 700px;">
<p style="text-align: center;">黄晓明（资料图）</p>
<p>(来源：财新报)</p>
<br>
<p>搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。</p>
<br>
<p>而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被利用进行试场操纵，这些账户也不会被冻结。</p>
<br>
<p>8月10日晚，证监会通报了5宗试场操纵案件，其中，高勇控制16个账户，操纵“精华制要”，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚8.97亿元。</p>
<br>
<p>根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。</p>
<br>
<p>媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其母亲张某霞，正好一一对应！”</p>
<br>
<p>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。<b style="color: blue">返回搜狐，查看更多</b></p>
<p style="text-align: right;">责任编辑：xxx xxx</p>
<p style="color: grey;font-size: 10px;">声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。</p>
</body>
</html>总结：
标签分为行内、块级、行内块级元素
行内、块级、行内块级元素可以通过display属性进行转换
行内元素可以共存一行，对宽高属性不生效
块级元素独占一行，对宽高属性生效
行内块级元素可以共存一行且对宽高属性生效