HTML的基本标签使用，文本控制，以及简单的图文混排2018-8-15

例子代码如下：

1）常用标签：

实例

<!DOCTYPE html>
<html>
<head>
	<title>文本控制</title>
	<meta 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>我是段落标签</p><!--段落标签-->
<br> <!--换行-->
<i>我是斜体</i>
<em>我是着重子！</em>
<del>我身上有一横</del>
<span style="background: blue">300元</span><del>999元</del>
<pre>与格式化文本可以输出换行符，
等等   空格等等，字体也不一样</pre>


<img src="/Users/drk/Desktop/test.jpeg " style="width: 100px;height: 100px"><span>qeqeqeqeqe</span>
<div style="width: 100px;height: 100px;background: blue; display: inline-block;">1</div>
<div style="width: 100px;height: 100px;background: blue; display: inline-block;">2</div>
<span style="width: 100px;height: 100px;background: blue; display: block;">3</span>
<dspan style="width: 100px;height: 100px;background: blue; display: inline-block;">4</span>
</body>
</html>

运行实例 »

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

2）图文混排以及简单的动画

实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		span{
			font-weight: bold;
			font-size: 20px;
			font-family: 楷体;
			text-align: center;
		}
		h1{
			text-align: center;
			height: 100px;
			background: #ccc;
			line-height: 100px;
		}
		p{
			font-size: 30px;
			font-family: 楷体;
			font-weight: bold;
		}
		#a{
			color: #0388F1;
		}
		#b1{
			color: rgb(245,28,39);
		}
		#c{
			color: #FFE80E;
		}
		.e{
			color: #39FF1B;
		}
		img{
			width: 300px;
			height: 400px;
		}
		b{
			display: block;
			width: 300px;
			height: 40px;
			overflow: hidden;/*修剪过长的文字*/
			background: blue;
		}
		b:hover{
			overflow: visible;/*默认值*/
			height: 400px;
		}

	</style>
</head>
<body>
<h1>php中文网</h1>
<span>php中文网</span>
<br>
<!-- 谷歌logo -->
<span id="a">G</span>
<span id="b1">o</span>
<span id="c">o</span>
<span id="a">g<span>
<span class="e">l</span>
<span id = "c">e</span>
<br>
<!-- 图文混排 -->
<p style="display: inline-block; width: 300px; height: 400px">百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</p>
<img src="/Users/drk/Desktop/apple.jpeg">
<br>
<img src="/Users/drk/Desktop/apple.jpeg">
<b>百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</b>
</body>
</html>

运行实例 »

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

内容解释
块级元素：独占一行，设置各种属性都生效
行内元素：可共存于一行宽高属性不生效
行内块元素：合了快捷以及行内的特
dispaly:inline 将块元素转换为行内
display;inline-block 转为行内块元素
dispay:block 将行内转为块级元素

实例

实例

相关文章