Blogger Information
Blog 5
fans 0
comment 0
visits 3720
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文本标签 元素转换8.13作业
1999权限的博客
Original
966 people have browsed it

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>8.13第二课文本控制</title>

</head>
<body>
<h1>这是一个H1标签</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<B>这是一个粗体B标签</B>
<p>公路上车来车往,5岁的小女孩独自行走在路边。<br>8月13日一大早,温州市永嘉县枫林派出所的民警戴柏清就遇到了这样的一幕。

   小女孩用沉默拒绝了他的帮助,他只好开着警车慢慢在孩子身后护送,暖心的8分钟后,孩子终于进了家门。\
</p><!--定义段落标签-->
<br>
<br>
<br>
<strong>PHP中文网</strong><!--定义着重字-->
<i>这是这是斜体字</i>
<em>定义着重字</em>
<del>定义删除字标签</del>
<span style="background: deeppink; width: 300px; height: 200px;">399</span> <del>588</del>
<pre>定义
   预格式    化</pre><!--直接内部文本有换行就有换行  空格也是-->

<!--块级元素 宽高定义生效 自带换行符-->
<!--
块级元素:div h1~~h6 p  对宽高属性值设置生效
行内:可以共存在一行 对宽高属性设置不生效
-->
<!--行内块级元素:结合了块级元素和行内的特点-->
<img src="images/img.gif" style="width: 500px; height: 300px" /><span>123</span>
行内块级相互转换:
display:inline 将块级元素转换为行内
display: block  将行内转换为块级
display: inline-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>
<span style="width: 100px; height: 100px; background:pink; display: block">3</span>
<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>

</body>
</html>1..png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.13第二课文本控制</title>

</head>
<body>
<h1>这是一个H1标签</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<B>这是一个粗体B标签</B>
<p>公路上车来车往,5岁的小女孩独自行走在路边。<br>8月13日一大早,温州市永嘉县枫林派出所的民警戴柏清就遇到了这样的一幕。

    小女孩用沉默拒绝了他的帮助,他只好开着警车慢慢在孩子身后护送,暖心的8分钟后,孩子终于进了家门。\
</p><!--定义段落标签-->
<br>
<br>
<br>
<strong>PHP中文网</strong><!--定义着重字-->
<i>这是这是斜体字</i>
<em>定义着重字</em>
<del>定义删除字标签</del>
<span style="background: deeppink; width: 300px; height: 200px;">399</span> <del>588</del>
<pre>定义
    预格式    化</pre><!--直接内部文本有换行就有换行  空格也是-->

<!--块级元素 宽高定义生效 自带换行符-->
<!--
块级元素:div h1~~h6 p  对宽高属性值设置生效
行内:可以共存在一行 对宽高属性设置不生效
-->
<!--行内块级元素:结合了块级元素和行内的特点-->
<img src="images/img.gif" style="width: 500px; height: 300px" /><span>123</span>
行内块级相互转换:
display:inline 将块级元素转换为行内
display: block  将行内转换为块级
display: inline-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>
<span style="width: 100px; height: 100px; background:pink; display: block">3</span>
<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>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post