博客列表 >HTML文本控制&CSS属性文本控制--2018年8月14日23时46分

HTML文本控制&CSS属性文本控制--2018年8月14日23时46分

APTX4869的博客
APTX4869的博客原创
2018年08月14日 22:47:29654浏览

学习了HTML的文本控制标签:例如b粗体标签、br换行标签、strong标签用于强调文本标签、h定义标题的标签等等

代码手抄截图_20180814_0.jpg

实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>课堂笔记</title>

		<style type="text/css">
			p{
			   font-weight:bold;      /*定义了粗体*/
			   font-size:30px;        /*定义了字体大小*/
			   font-family:楷体;       /*定义字体格式*/
			   line-height:100px;      /*定义了行高*/
			   margin-bottom:100px;    /*设置元素的下外边框*/
			   overflow:hidden;        /*溢出隐藏*/
		    }

		    b:hover{
		    	overflow:visible;      /*默认值,内容不会被修改,元素会被呈现在元素框之外*/
		    }
		</style>
	</head>
	<body>
		<!-- <h1>---<h6>标签可定义标题,字体大小依次从<h1>到<h6>依次减小,<h1>定义了最大的标题,<h6>定义了最小的标题 -->
		<h1>这是一个h1标签</h1>
		<h2>这是一个h2标签</h2>
		<h3>这是一个h3标签</h3>      
		<h4>这是一个h4标签</h4>      
		<h5>这是一个h5标签</h5>      
		<h6>这是一个h6标签</h6>

		<!-- <b>标签规定粗体文本 -->
	    <b>这是粗体标签</b>

	    <!-- <p>标签定义了段落 -->
	    <p>坚决打赢脱贫攻坚战,
	让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来,0总书记的扶贫足迹遍布全国,对坚决打赢脱贫攻坚战作出重要战略部署。      党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述,从说“不”的角度,深入体会总书记对脱贫攻坚工作的重要指示精神。</p>

	<!-- <br>标签可插入一个简单的换行符 -->
	<p>坚决打赢脱贫攻坚战,
	让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。<br>党的十八大以来,0总书记的扶贫足迹遍布全国,对坚决打赢脱贫攻坚战作出重要战略部署。<br>      党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述,从说“不”的角度,深入体会总书记对脱贫攻坚工作的重要指示精神。</p>

	<!-- <strong>标签用于强调文本,和<em>标签一样,但它强调的程度更强一些,通常表现为加粗字体 -->
	<strong>PHP中文网</strong>

	<!-- <i>标签显示斜体文本效果 -->
    <i>这里是斜体字</i>

    <!-- <em>表示其中文本为强调的内容。对于浏览器来说,这段文字要用斜体字表示 -->
    <em>定义着重字</em>

    <!-- <del>定义文档中已被删除的文本,通常与<ins>标签配合使用,来描述文档中的更新与修正 -->
    <del>定义被删除字标签</del>

    <!-- <span>标签被用来组合文档中的行内元素,本身是行内元素 -->
    <span>399元</span>

    <!-- <pre>可定义预格式化的文本,被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>常见应用就是用来表示计算机的源代码 -->
    <pre>预格式
         化文本</pre>

<!--行内元素的特征:
       (1)设置宽高无效;
       (2)对margin仅设置左右方向有效,上下无效,padding设置上下左右都有效,即会撑大空间;
       (3)不会自动换行。
    块状元素的特征:
       (1)能够识别宽高;
       (2)margin和padding的上下左右均对其有效;
       (3)可以自动换行;
       (4)多个块状元素标签写在一起,默认排列方式为从上至下。
    行内块元素特征:
       (1)不自动换行;
       (2)能够识别宽高;
       (3)默认排列方式从左到右。 -->

<!--行内元素&块状元素相互转换:
       (1)display:inline;                    将块级元素转换为行内元素;
       (2)display:inline-block;              将块级元素转换为行内块元素;
       (3)display:block;                     将行内元素转换为块级元素; -->

       

</body>

运行实例 »

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


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