Blogger Information
Blog 16
fans 0
comment 1
visits 14945
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文本标签和元素转换---2018年8月14日
王大利的博客
Original
1422 people have browsed it
实例
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html文本控制</title>
</head>
<body>
<h1>这是h1标签</h1> <!--标题标签h  从h1到h6,文字逐渐变细变小-->
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<p>斐讯的这几年的疯狂成长大家还是有目共睹的,但随着壁联事件的爆发,这个合作也受到了严重的冲击。
城门失火殃及池鱼,斐讯的日子不好过,<br><!--这个是换行标签-->那么之前和斐讯打的火热的合作商们,自然也陷入到了网友的声讨之中。
京东作为电商平台,自然受到了不小的影响,刘强东个人微博和京东官方微博一度陷入骂战之中,同时斐讯路由器的还有老牌的苏宁易购和国美。
</p><!--p标签是段落标签-->
<b>我是粗体</b>  <!--b标签是粗体标签-->
<strong>我很粗,语气加重</strong> <!--strong标签也是是粗体标签-->
<i>我是斜体</i>
<br><!--br换行在标签里也能用-->
<em>我也是斜体</em>  <!--斜体体家中标签-->
<del>我要降价了</del><!--删除字的标签-->
<span>我是行标签</span> <!--行内元素是不可以设置长宽的-->
<pre>斐讯的这几年的疯狂成长大家还是有目共睹的,但随着壁联事件的爆发,这个合作也受到了严重的冲击。
城门失火殃及池鱼,斐讯的日子不好过,        那么之前和斐讯打的火热的合作商们,自然也陷入到了网友的声讨之中。
京东作为电商平台,自然受到了不小的影响,刘强东个人微博和京东官方微博一度陷入骂战之中,同时斐讯路由器的还有老牌的苏宁易购和国美。</pre><!--格式化标签源码什么格式就显示什么格式字体都不一样-->

<!--块级元素自带换行宽高自动默认为浏览器百分之百,当然也可以自定义宽高:div  h1到h6 p 独占一行,  
行内元素是可以共存于一行,对于宽高设置不生效有 I标签 strong b 标签,和span标签
行内块级元素有img标签 有块的可以设置长宽还可以同在一行-->
<p style="width:100px;height:100px;background:red;">我要长宽和背景红</p>
<img style="width:200px;height:200;"src="images/dede.jpg">
<span>我是span和图片好像是一行?img果然有行内元素属性</span>

<!--下面演示块级转行内,行内转块级用相互转换 display inline inline-block  -->

<div style="width:100px;height:150px;background: pink; display:inline;">我是div块级标签马上我就用inline变成行内元素了,可惜我1米8大个没法显示</div>
<div style="width:100px;height:200px;background:pink; display:inline-block;">我是div块级标签马上我就用inline-bolck变成行内块元素,我1米8大个可以显示</div>
<span style="width:100px;height:200px;background:pink;display:block;">我是span行内元素马上我就用bolck变成块元素,我1米8大个可以显示了,哈哈!</span>
<span style="width:100px;height:200px;background:pink;display:inline-block;">我是参考物</span>
<span style="width:100px;height:200px;background:pink;display:inline-block;">我是span马上用display:inline—block变行内块</span>

</body>
</html>
内容关键点都带了注释。
运行实例 »
点击 "运行实例" 按钮查看在线实例<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html文本控制</title>
</head>
<body>
<h1>这是h1标签</h1> <!--标题标签h  从h1到h6,文字逐渐变细变小-->
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<p>斐讯的这几年的疯狂成长大家还是有目共睹的,但随着壁联事件的爆发,这个合作也受到了严重的冲击。
城门失火殃及池鱼,斐讯的日子不好过,<br><!--这个是换行标签-->那么之前和斐讯打的火热的合作商们,自然也陷入到了网友的声讨之中。
京东作为电商平台,自然受到了不小的影响,刘强东个人微博和京东官方微博一度陷入骂战之中,同时斐讯路由器的还有老牌的苏宁易购和国美。
</p><!--p标签是段落标签-->
<b>我是粗体</b>  <!--b标签是粗体标签-->
<strong>我很粗,语气加重</strong> <!--strong标签也是是粗体标签-->
<i>我是斜体</i>
<br><!--br换行在标签里也能用-->
<em>我也是斜体</em>  <!--斜体体家中标签-->
<del>我要降价了</del><!--删除字的标签-->
<span>我是行标签</span> <!--行内元素是不可以设置长宽的-->
<pre>斐讯的这几年的疯狂成长大家还是有目共睹的,但随着壁联事件的爆发,这个合作也受到了严重的冲击。
城门失火殃及池鱼,斐讯的日子不好过,        那么之前和斐讯打的火热的合作商们,自然也陷入到了网友的声讨之中。
京东作为电商平台,自然受到了不小的影响,刘强东个人微博和京东官方微博一度陷入骂战之中,同时斐讯路由器的还有老牌的苏宁易购和国美。</pre><!--格式化标签源码什么格式就显示什么格式字体都不一样-->

<!--块级元素自带换行宽高自动默认为浏览器百分之百,当然也可以自定义宽高:div  h1到h6 p 独占一行,  
行内元素是可以共存于一行,对于宽高设置不生效有 I标签 strong b 标签,和span标签
行内块级元素有img标签 有块的可以设置长宽还可以同在一行-->
<p style="width:100px;height:100px;background:red;">我要长宽和背景红</p>
<img style="width:200px;height:200;"src="images/dede.jpg">
<span>我是span和图片好像是一行?img果然有行内元素属性</span>

<!--下面演示块级转行内,行内转块级用相互转换 display inline inline-block  -->

<div style="width:100px;height:150px;background: pink; display:inline;">我是div块级标签马上我就用inline变成行内元素了,可惜我1米8大个没法显示</div>
<div style="width:100px;height:200px;background:pink; display:inline-block;">我是div块级标签马上我就用inline-bolck变成行内块元素,我1米8大个可以显示</div>
<span style="width:100px;height:200px;background:pink;display:block;">我是span行内元素马上我就用bolck变成块元素,我1米8大个可以显示了,哈哈!</span>
<span style="width:100px;height:200px;background:pink;display:inline-block;">我是参考物</span>
<span style="width:100px;height:200px;background:pink;display:inline-block;">我是span马上用display:inline—block变行内块</span>

</body>
</html>

内容关键点都带了注释。

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