简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML中文本标签与文本控制-2018年8月13日22时45分
Blogger Information
Blog 34
fans 0
comment 1
visits 23067
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中文本标签与文本控制-2018年8月13日22时45分
感恩的心的博客
Original
817 people have browsed it

1、HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。

元素主要有以下三类：

（1）块级元素
  块级元素是独占一行，宽高属性设置生效，默认宽100%，自带换行符；
   例如块级元素主要有： div、 h1-h6 、p、 form 、table
（2） 行内元素

 行内元素是可以共存于一行，对宽高属性值设置不生效

strong，em，del，span等是行内元素 

（3）行内块元素：结合了块级及行内的特点

运行示例如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本控制</title>
</head>
<body>
	<h1>这是一个h1标签</h1>
	<h2>这个是h2标签</h2>
	<h3>这个是h3标签</h3>
	<h4>这个是h4标签</h4>
	<h5>这个是h5标签</h5>
	<h6>这个是h6标签</h6>
	<b>这是是b标签</b>
	<p>坚决打赢脱贫攻坚战，<br>让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。<br>党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。</p>
	<br>
	<strong>php中文网</strong><!-- 加重语气粗体 -->
	<i>坚决打赢脱贫攻坚战</i><!-- 斜体 -->
	<em>定义着重字</em>
	<br>
	<del>定义删除字</del>
	<span style="background: pink;width: 300px;height: 200px;">399</span><del>499</del>
	<br>
	<pre>预格   式
	化文本</pre><!-- 字体有变化，不同于正常文本，内部换行、空格有输出 -->
	<br>
	<!-- p标签独占一行，strong，em，del，span等是行内元素 -->
	<!-- 块级元素是独占一行，宽高属性设置生效，默认宽100%，自带换行符； 
    div h1-h6 p form table
	-->
	
	<!-- 行内元素是可以共存于一行，对宽高属性值设置不生效 -->
	<!-- 行内块元素：结合了块级及行内的特点 -->
	<img src="images/1.jpg" style="width: 200px;height: 150px;" /><span>123</span>
    <!-- 行内块级相互转换：
    display: inline 将块级元素转换为行内元素
    display: inline-block 将块级元素转换为行内块元素
    display: block 将行内元素转换为块级元素-->
	<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>

运行实例 »

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

2、在文本控制上

以图文混排为例：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本控制</title>
	<style type="text/css">
		p{font-weight: bold;/*定义粗体*/
			font-size: 40px;/*定义字体大小*/
			font-family: 楷体;/*定义字体，在windows下面font字体库*/
			text-align: center;
		}
		h1{
			text-align: center;
			height: 100px;
			background: #ccc;
			line-height: 100px;/*定义行高*/
		}
		span{font-size: 40px;
			font-weight: bold;
			font-family: georgia;}

		img{width: 300px;height: 400px;}
		b{display: block;width: 300px;height: 40px;background: pink;overflow: hidden;/* 溢出隐藏*/
			margin-bottom: 100px;
		}
		b:hover{overflow: visible;}/*伪类：默认值，内容不会被修剪，元素会被呈现在元素框外,鼠标移动上*/
	</style>
</head>
<body>
	<h1>php中文网</h1>
	<p>php中文网</p>
	<br>
	<!-- google 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:rgb(245,28,39)">e</span>
	<br>
	<!-- 图文混排 -->
	<p style="display: inline-block;width: 300px;height: 400px;">PingWest品玩8月13日讯，日前GitLab发布多条推特表示已经从 Azure迁移到Google Cloud Platform，最终于8月11日正式迁移成功。迁移工作结束后，GitLab 发推表示本次迁移十分成功，并已正常运行 35 分钟。</p>
	<img src="images/1.jpg">
    <br><br>
	<img src="images/1.jpg">
	<b>
	PingWest品玩8月13日讯，日前GitLab发布多条推特表示已经从 Azure迁移到Google Cloud Platform，最终于8月11日正式迁移成功。迁移工作结束后，GitLab 发推表示本次迁移十分成功，并已正常运行 35 分钟。	
	</b>

</body>
</html>

运行实例 »

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

 3、手抄作业


148001567.jpg

4、课程总结

（1）标签意义主要总结如下：

<b>这是是b标签</b>
<p></p>
<br>
<strong>php中文网</strong><!-- 加重语气粗体 -->
<i>坚决打赢脱贫攻坚战</i><!-- 斜体 -->
<em>定义着重字</em>
<del>定义删除字</del>
<pre>预格   式
化文本</pre><!-- 字体有变化，不同于正常文本，内部换行、空格有输出 -->

（2）通过本节课的学习，了解了块级元素与行内元素的区别，并实现了google的logo的制作。

由尖括号包围的关键词，比如 <html>；通常是成对出现的，比如 <div> 和 </div>；标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签，也有单独呈现的标签。

一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />。网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。（总结自网页）

 

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！