博主信息
博文 16
粉丝 0
评论 1
访问量 17503
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html文本标签和元素转换---2018年8月14日
王大利的博客
原创
1592人浏览过
实例
<!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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学