简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML中文标签及CSS 基本知识(标签及元素分类 字体及边框设定 图文混排2018-8-13
Blogger Information
Blog 16
fans 0
comment 1
visits 18546
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML中文标签及CSS 基本知识(标签及元素分类 字体及边框设定 图文混排2018-8-13
安丰的博客
Original
1217 people have browsed it

实例

<!DOCTYPE html>
<html>
<head>
	<title>文本控制</title>
	<mata 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>
<P>2018七夕将要来临，php中文网给大家准备了七款程序员表白专用源码，让你可以一举俘获美人心，下面就来看一看这七款表白代码大全，包含html、html5、CSS、JQ编写的一些非常简单实用的表白代码，非常炫酷、浪漫！</P>
<br> <!-- 这是换行标签 需要换行就加入-->
<strong>PHP中文网</strong><!--  着重标签 类似<B> 粗体字 -->
	<br>
<i>这是斜体字</i>
<br>
<em>定义着重斜体字</em>
<br>
<del>定义删除字标签</del>
<br>
<span>399元</span><del>499元</del>
<pre style ="background:pink";>定义  预  格  式
文本</pre> <!-- 可以按照格式输出,空格 或换行 -->

<P style ="background:pink" >2</P>
<span></span>

<!-- 块级元素:独占一行,自带换行,可以设置宽高属性(默认宽度100%)  包含div,h1~ h6,P  -->

<!-- 行内元素:可以共存于一行,对宽高的属性值不生效 包含 span,em,del,pre -->
<img src ="images/20180811230025.png" style ="width :100px;height:200px;">
行内块级 相互转换:
display: inline 将块级元素 转化为行内元素
display: inline-block;将块级元素转换为行内块元素
display: block :将行内元素转化为块级元素
display: inline-block
<br>
<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>

运行实例 »

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


实例

<!DOCTYPE html>


<html>
<head>
	<title>文本控制</title>
	<meta charset ="utf-8">
	<style type ="text/css">
		g{ font-size:40px;  /*定义字体大小为40像素*/
			 font-weight:bold; /*定义粗体*/
			 font-family: 楷体;	/*定义字体,字体必须在系统中包含*/
			 
			}
		h1{
			text-align:center;  /*center:居中,left:左边,right:右边;*/
			height:100px;  /*行高100*/
			background:#ccc; 
			line-height:100px;  /*定义行高 于行高一致 字体就出现高度居中*/
			}
		span{
			font-size:50px; /*字体大小50px*/
			font-family:Georgia; /*设置文字字体*/
			font-weight:bold; /*定义粗体*/
		}
		img{width:300px;height:300px;}
		b{
			display:block;
			width:300px;
			height:100px;
			background:pink;
			overflow:hidden; /*设置溢出隐藏*/
			margin-bottom:100px;/* 设置外边距100像素点 */
		}
		b:hover{overflow:visible;color:#39ff18;} /*默认值,内容不会被修剪*/
		p{ 			 font-weight:bold; /*定义粗体*/
			 font-family: 楷体;	/*定义字体,字体必须在系统中包含*/
			 
			}
	</style>

</head>
<body>
		<h1>PHP中文网</h1>
	<g>PHP中文网</g>
	<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:#FFE80E">e</span>

<!-- 	color:#0388f1" 10进制取色 -->
<!-- 	color:rgb(245,28,39) RGB去色 -->


<!-- 图文混排 -->
<br>

<p style ="display:inline-block;width:300px;height:300px;">云优YUNUCMS企业网站管理系统三网合一，跨平台兼容，让企业快速、高效的展示在广大客面前，为企业带来更多潜在客，提升企业曝光率和品影响力。
云优YUNUCMS企业网站管理系统 1.1.2 更新日志：2018-08-02
[新增]表单邮件提醒增加携带变量；
[新增]htm和txt格式站点地图文件，每次登录后台自动生成；
[新增]数据统计主菜单；
[新增]集成平台主词排名监控；</p>

<img src="images/20180811230025.png">
<br><br>
<img src="images/20180811230025.png">
<b>
云优YUNUCMS企业网站管理系统三网合一，跨平台兼容，让企业快速、高效的展示在广大客面前，为企业带来更多潜在户，提升企业曝光率和品影响力。

云优YUNUCMS企业网站管理系统 1.1.2 更新日志：2018-08-02
[新增]表单邮件提醒增加携带变量；
[新增]htm和txt格式站点地图文件，每次登录后台自动生成；
[新增]数据统计主菜单；
[新增]集成平台主词排名监控；	
</b>
</body>
</html>

运行实例 »

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


实例

<!DOCTYPE html>
<html>
<head>
	<title>黄晓明</title>
	<meta charset="utf-8">
	<style type="text/css">
	body{

		background:#887;
		}
	div{
				width:800px;

		background:#fff;
		text-align:center;
		margin:0 auto;


	}

	h1{text-align:center;
		}
	p{font-size:23px;width:95%;
			text-align:left;
			font-family:楷体;
			margin:0 auto;
		}
	pre{
		width:95%;
		text-align:left;
		}
	img{
		margin:0 auto;
	}

	</style>

</head>
<body>
<div>
<H1>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</H1>
<pre>搜狐娱乐     2018-08-13</pre>
<br>
<img src="images/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg">
<br>
<br>

<p>黄晓明（资料图）</p>
<br>
<p>(来源：财新报)</p>

<p>搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。</p>

<p>
	而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被利用进行市2场操纵，这些账户也不会被冻结。
</p>

<p>8月10日晚，证监会通报了5宗市2场操纵案件，其中，高勇控制16个账户，操纵“精华制x”，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚8.97亿元。</p>
<p>根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。</p>
<p>媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其母亲张某霞，正好一一对应！”</p>
<p>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。返回搜狐，查看更多</p>
</div>
</body>
</html>

运行实例 »

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

27524a41-1984-4182-a9fe-7a3d924487c5.jpg

总结:本节课程重点 标签

标签分为 :

行标签:独占一行 如{P标签,H1-H6标签, div标签} 

块标签: 一行内可以多个存在 的 如{span  em del pre}  

per 标签 是唯一一个可以空格/ 换行 等直接呈现输出的标签, 因可控性较差 不建议使用

行内元素与行内块元素相互转换

display: block  {行内元素转化为块元素}

display:inline {块元素转化为行内元素}

display:inline-block {行内元素与行内块元素 进行互换}


Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！