经典Html教程(3)

2019-03-21 17:29

不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

实例

This is a paragraph

This is another paragraph

亲自试一试

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。注释：在未来的 HTML 版本中，不允许省略结束标签。

提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：

This is
a para
graph with line breaks

亲自试一试

元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

还是

您也许发现
与
很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使
在所有浏览器中的显示都没有问题，使用
也是更长远的保障。

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。亲自试一试

（这个例子演示了一些 HTML 格式化方面的问题）

来自本页的实例

HTML 段落

如何在浏览器中显示 HTML 段落。

换行

在 HTML 文档中使用换行。

诗歌问题

HTML 格式化方面的一些问题。

更多实例

更多段落

段落的默认行为。

HTML 标签参考手册

W3School 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。

标签

描述定义段落。插入单个折行（换行）。 HTML 文本格式化

? ?

Previous Page Next Page

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。下面有很多例子，您可以亲自试试：

HTML 文本格式化实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

“计算机输出”标签此例演示不同的“计算机输出”标签的显示效果。

地址此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写此例演示如何实现缩写或首字母缩写。

文字方向此例演示如何改变文字的方向。

块引用此例演示如何实现长短不一的引用语。

删除字效果和插入字效果

此例演示如何标记删除文本和插入文本。

如何查看 HTML 源码

您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？你有没有看过一些网页，并且想知道它是如何做出来的呢？

要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。

文本格式化标签

标签 “计算机输出”标签描述定义粗体文本。定义大号字。定义着重文字。定义斜体字。定义小号字。定义加重语气。定义下标字。定义上标字。定义插入字。定义删除字。不赞成使用。使用 ~~代替。不赞成使用。使用 ~~代替。不赞成使用。使用样式（style）代替。标签~~~~

~~描述定义计算机代码。定义键盘码。定义计算机代码样本。定义打字机代码。~~

   <xmp> 引用、引用和术语定义 </p><p>定义变量。 定义预格式文本。 不赞成使用。使用 <pre> 代替。 不赞成使用。使用 <pre> 代替。 不赞成使用。使用 <pre> 代替。 标签    <bdo> <blockquote> <q> <cite> <dfn> 延伸阅读： </p><p>改变文本的外观和含义 </p><p>描述 定义缩写。 定义首字母缩写。 定义地址。 定义文字方向。 定义长的引用。 定义短的引用语。 定义引用、引证。 定义一个定义项目。 HTML 样式 </p><p>? ? </p><p>Previous Page Next Page </p><p>style 属性用于改变 HTML 元素的样式。 </p><p>This text is in Verdana and red  </p><p>This text is in Times and blue  </p><p>This text is 30 pixels high</p><p> </p><p> </p><p> </p><p>亲自试一试 </p><p>HTML 的 style 属性 </p><p>style 属性的作用： </p><p>提供了一种改变所有 HTML 元素的样式的通用方法。 </p><p>样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。 您可以在我们的 CSS 教程中学习关于样式和 CSS 的所有知识。 在我们的 HTML 教程中，我们将使用 style 属性向您讲解 HTML 样式。 </p><p>不赞成使用的标签和属性 </p><p>在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。 </p><p>这里传达的信息很明确：请避免使用这些被废弃的标签和属性！ </p><p>应该避免使用下面这些标签和属性： </p><p>标签 <center> <font> 和 <basefont> <s> 和 <strike> <u> 属性 align bgcolor color 描述 定义居中的内容。 定义 HTML 字体。 定义删除线文本 定义下划线文本 描述 定义文本的对齐方式 定义背景颜色 定义文本颜色 对于以上这些标签和属性：请使用样式代替！ </p><p>HTML 样式实例 - 背景颜色 </p><p>background-color 属性为元素定义了背景颜色： </p><p><html>  </p><p><body style=\</p><p><h2 style=\</p><p> </p><p></p>
    <br />
	<p><script type="text/javascript">s("content-m");</script></p>
    </div>
	<div class="m-pages"><li><a>共8页: </a></li><li><a href='532122_2.html'>上一页</a></li><li><a href='532122.html'>1</a></li><li><a href='532122_2.html'>2</a></li><li class="thisclass"><a href='#'>3</a></li><li><a href='532122_4.html'>4</a></li><li><a href='532122_5.html'>5</a></li><li><a href='532122_6.html'>6</a></li><li><a href='532122_7.html'>7</a></li><li><a href='532122_8.html'>8</a></li><li><a href='532122_4.html'>下一页</a></li></div>
<div class="down-word">
   <div class="word-ico"></div>
   <div class="word-tit">
     <span class="docx">经典Html教程(3).doc</span>
     <span>将本文的Word文档下载到电脑</span>
     <span>下载失败或者文档不完整，请联系客服人员解决！ </span>
   </div>
   <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div>
</div>
	</article>
		<div class="art-prenext">
			<p>下一篇：<a href="/wenku/zonghe/532121.html">课题：§4.1 线段的比（第二课时）</a></p>
		</div>
<script type="text/javascript">s("like-m");</script>
	<div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div>
	<div class="tab-box">
		<ul class="main-new on clearfix">
<li><a href="/wenku/zonghe/1263351.html" title="石油大学《化工原理二》2021期末考试答案">石油大学《化工原理二》2021期末考试答案</a></li>
<li><a href="/wenku/zonghe/1157609.html" title="建筑节能检测习题集（84页）">建筑节能检测习题集（84页）</a></li>
<li><a href="/wenku/zonghe/215568.html" title="高考物理(考点解读命题热点突破)专题06 机械">高考物理(考点解读命题热点突破)专题06 机械</a></li>
<li><a href="/wenku/zonghe/215769.html" title="1 2014.10.23第一次财务会计理论与实务课堂笔">1 2014.10.23第一次财务会计理论与实务课堂笔</a></li>
<li><a href="/wenku/zonghe/215778.html" title="通信资源管理系统介绍(GIS)">通信资源管理系统介绍(GIS)</a></li>
<li><a href="/wenku/zonghe/215564.html" title="年产60万吨PTA项目环境影响报告书">年产60万吨PTA项目环境影响报告书</a></li>
<li><a href="/wenku/zonghe/215563.html" title="2016小学生读书笔记范文">2016小学生读书笔记范文</a></li>
<li><a href="/wenku/zonghe/215562.html" title="Dhlrwk谈中学生英语学习策略">Dhlrwk谈中学生英语学习策略</a></li>
<li><a href="/wenku/zonghe/215560.html" title="数电课程设计报告  洗衣机自动控制电路">数电课程设计报告  洗衣机自动控制电路</a></li>
<li><a href="/wenku/zonghe/215558.html" title="2018年最新 湖南省长沙市长郡中学2018届上学">2018年最新 湖南省长沙市长郡中学2018届上学</a></li>

		</ul>
	</div>
	<div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div>
	<div class="tab-box">
		<ul class="main-new on clearfix">
<li><a href="/wenku/zonghe/175782.html" title="云客服基础考试">云客服基础考试</a></li>
<li><a href="/wenku/zonghe/158762.html" title="《红星照耀中国--》名著阅读练习题及答案">《红星照耀中国--》名著阅读练习题及答案</a></li>
<li><a href="/wenku/zonghe/176003.html" title="红星照耀中国练习题及答案">红星照耀中国练习题及答案</a></li>
<li><a href="/wenku/zonghe/171844.html" title="《红星照耀中国》练习题">《红星照耀中国》练习题</a></li>
<li><a href="/wenku/zonghe/159778.html" title="人教部编版2018-2019学年八年级语文上册第一">人教部编版2018-2019学年八年级语文上册第一</a></li>
<li><a href="/wenku/zonghe/183326.html" title="化工导论试题">化工导论试题</a></li>
<li><a href="/wenku/zonghe/182252.html" title="八年级上册名著导读练习——《红星照耀中国》">八年级上册名著导读练习——《红星照耀中国》</a></li>
<li><a href="/wenku/zonghe/162180.html" title="人教版语文八(上)名著导读《红星照耀中国》练">人教版语文八(上)名著导读《红星照耀中国》练</a></li>
<li><a href="/wenku/zonghe/185266.html" title="2018年江苏省第八届就业创业知识竞赛题库(全7">2018年江苏省第八届就业创业知识竞赛题库(全7</a></li>
<li><a href="/wenku/zonghe/168880.html" title="《红星照耀中国》导读及练习题附答案">《红星照耀中国》导读及练习题附答案</a></li>

		</ul>
	</div>	
</div>
<footer class="footer">
    <p class="bt-links"><a href="https://m.77cn.com.cn">手机版</a><span class="v-line">|</span><a href="https://www.77cn.com.cn">PC版</a><span class="v-line">|</span><a href="https://m.77cn.com.cn/fww">范文大全</a></p>
    <p>Copyright &copy; 2019-2022 免费范文网 版权所有<br/>
  声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>客服QQ： 邮箱：tiandhx2@hotmail.com<br/>
  <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-18</a>
  </p>
  <div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e245478384fea490ec3a2317ee103ab";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
  </div>
</footer>
<div class="theme-popover">
    <div class="theme-poptit">
        <a href="javascript:;" title="关闭" class="close">×</a>
        <b>注册会员免费下载</b>（下载后可以自由复制和排版）
    </div>
    <div class="theme-popbod dform">
        <!--<p class="downtit">下载本文档需要支付 <i>7</i> 元</p>-->
        <!--<p class="chose"><span>支付方式：</span><span class="pay1"><img src="https://www.77cn.com.cn/img/wxpay.jpg" class="over"></span> <span class="pay2"><img src="https://www.77cn.com.cn/img/alipay.jpg"></span></p>-->
        <!--<div class="youke_pay">-->
        <!--<div class="wxpay"><a href="javascript:;">微信支付并下载</a></div>-->
        <!--<div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a>-->
        <!--</div>-->
        <!--</div>-->
        <p class='wxpay'><a href='https://www.77cn.com.cn/user/index.php'>马上注册会员</a></p>
        <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</p>
    </div>
</div>
<div class="theme-popover-mask"></div>
<script>
	//menu
	$(".header .menu").on("click", function(){
		$("body").append("<div class=\"mask-bg menu-mask-bg\"></div>");
		$(".menu-slide").show();
		$("html,body").css({height:$(window).innerHeight(), overflow:"hidden"});
		setTimeout(function(){
			$(".menu-slide").css({transform:"translateX(-50px)"});
		},50)
	});
	$("body").on("click", ".menu-mask-bg", function(){
		$(".menu-slide").css({transform:"translateX(-100%)"});
		$(".menu-mask-bg").remove();
		$("html,body").removeAttr("style");
		setTimeout(function(){
			$(".menu-slide").hide();
		},300)
	});
	
	//search
	$(".header .search").click(function(){
		if($(".search-box").is(":hidden")){
			$(this).children("i").removeClass("search-icon").addClass("close-icon");
			$(".search-box").fadeIn("fast");
		}else{
			$(this).children("i").removeClass("close-icon").addClass("search-icon");
			$(".search-box").fadeOut("fast");
		}
	});
	
	//nav
	if($(".nav").length > 0) {
		var nav = new Swiper(".nav",{
			slidesPerView: "auto"
		});
	}	
</script>
<script>
    $(".pay1 img").click(function () {
        $(".wxpay").css("display", "block");
        $(".alipay").css("display", "none");
        $(".pay1 img").addClass("over");
        $(".pay2 img").removeClass("over");
    });
    $(".pay2 img").click(function () {
        $(".wxpay").css("display", "none");
        $(".alipay").css("display", "block");
        $(".pay1 img").removeClass("over");
        $(".pay2 img").addClass("over");
    });
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('.word-pic a').click(function(){
        $('.theme-popover-mask').fadeIn(100);
        $('.theme-popover').slideDown(200);
        $(".vip-up").hide();
		$(".vip-pay").hide();
		var downid = '532122'
		$('.wxpay a').click(function(){
		var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=wx&aid=';
		payurl = payurl.replace('payment', 'youke');
		var gotourl = payurl + downid
		location.href = gotourl;
  		});
		$('.alipay a').click(function(){
		var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=ali&aid=';
		payurl = payurl.replace('payment', 'youke');
		var gotourl = payurl + downid
		location.href = gotourl;
  		});
	})
	$('.theme-poptit .close').click(function(){
		$('.theme-popover-mask').fadeOut(100);
		$('.theme-popover').slideUp(200);
	})
})
</script>
<script src="/js/gobacktop.js" type="text/javascript"></script>
</body>
</html>