博客列表 >html文本标签和元素转换---2018年8月14日

html文本标签和元素转换---2018年8月14日

王大利的博客
王大利的博客原创
2018年08月14日 14:47:411419浏览
实例
<!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>

内容关键点都带了注释。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议