如何使用HTML输出内容
阅读 6
2020-11-18
如何让浏览显示内容
<html>
<head>
<title>我的第一个HTML网页</title>
</head>
<body>
</body>
</html>以上代码我们知道，我们只显示出来的浏览器的标题，什么内容都没有显示，如何让浏览器输出内容。
第一，浏览器显示的区域是<body></body>这里面的内容，我们只需要在这里输入内容就可以。
我们输入最简单的，从小就知道到现在都忘不了的《咏鹅》。
<html>
<head>
<title>咏鹅</title>
</head>
<body>
咏鹅
[唐] 骆宾王
鹅，鹅，鹅，
曲项向天歌。
白毛浮绿水，
红掌拨清波。
</body>
</html>
我们可以看到内容显示出来了，你只要在<body></body>标签里面输入内容，浏览器就会显示出来。
第二，排版换行 <br>标签
上面我们输入的内容，显示出在一行了，这样有一点不美观。如何换行呢？
<html>
<head>
<title>咏鹅</title>
</head>
<body>
咏鹅<br>
[唐] 骆宾王<br>
鹅，鹅，鹅，<br>
曲项向天歌。<br>
白毛浮绿水，<br>
红掌拨清波。
</body>
</html>
添加了br标签后，就会在此处换行。增加<br>标签，这个标签就是让浏览器换行。这个标签是单标签，不用成对出现。
第三 增加水平线 <hr>标签
增加一条水平线，把标题和下面的文字隔开
<html>
<head>
<title>咏鹅</title>
</head>
<body>
咏鹅
<hr>
[唐] 骆宾王<br>
鹅，鹅，鹅，<br>
曲项向天歌。<br>
白毛浮绿水，<br>
红掌拨清波。
</body>
</html>
hr标签也是单标签，不用成对出现。hr标签有一些属性，如size表粗细，width长度，align行对齐方式。如何增加属性？只要在开始标签里面 输入一空格 输入属性=“属性值” 这样的方式输入就可以。如<hr size="2"> <hr size="2" width="500px" align="center">
<hr size="粗细“ width="长度" align="行对齐方式" noshade> width长度可以百分比或数值 align行对齐方式：left（左） right（右） center （居中）默认值
<html>
<head>
<title>咏鹅</title>
</head>
<body>
咏鹅
<hr>
[唐] 骆宾王<br>
<hr size="2" align="left" width="80%">
鹅，鹅，鹅，<br>
<hr size="3" align="left" width="60%">
曲项向天歌。<br>
<hr size="4" align="left" width="40%">
白毛浮绿水，<br>
<hr size="5" align="left" width="20%">
红掌拨清波。
</body>
</html>
第四 文字加粗 <b>标签或<strong>
想要突出的文字可以给加粗一下。
<html>
<head>
<title>咏鹅</title>
</head>
<body>
<b>咏鹅</b>
<hr>
[唐] <strong>骆宾王</strong><br>
鹅，鹅，鹅，<br>
曲项向天歌。<br>
白毛浮绿水，<br>
红掌拨清波。
</body>
</html>
第五 文字增加下滑线<u>，删除线<s>
<html>
<head>
<title>咏鹅</title>
</head>
<body>
<b>咏鹅</b>
<hr>
[唐] 骆宾王<br>
鹅，鹅，鹅，<br>
曲项向天歌。<br>
白毛浮绿水，<br>
红掌拨清波。<br>
<!---以下文字增加下滑线-->
<u>骆宾王出身寒门，七岁能诗，号称“神童”。</u>
<br>
<!--以下文字增加中期为删除线-->
唐朝<s>中期</s>的诗人，与王勃、杨炯、卢照邻合称初唐四杰。又与富嘉谟并称“富骆”。
</body>
</html>
<u>是增加下滑线的作用，<s>是删除线，就是错误的内容可以给标出来。
<!-- -->这是注释，方便记录自己的操作及提醒自己这一块记录的内容，浏览器不会显示。 <!--我是单行注释--> 我只有一行内容 <!--我是多行注释 我是不会显示出来 主要记录你的操作记录 --> 我是多行注释，只要输入回车就可以变成多行了。
最后 把上面的标签<br>、<hr>、<b>、<strong>、<u>、<s>综合在一起使用一下。
我们以悯农这一首诗练习，
<html>
<head>
<title>悯农</title>
</head>
<body>
<b>悯农</b>
<hr>
[<s>宋</s>] 李绅<br>
<strong>锄禾</strong>日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
<u>粒粒皆辛苦</u>。<br>
<hr>
<!--以下是《悯农二首》完整版-->
<b>悯农</b>
<br>
<strong>春种一粒粟，秋收万颗子。</strong><br>
<b>四海无闲田，农夫犹饿死。</b><br>
<strong><u>锄禾日当午，汗滴禾下土。</u></strong><br>
<u><b>谁知盘中餐，粒粒皆辛苦。</b></u><br>
<!--
《悯农二首》是唐代诗人李绅的组诗作品。
这组诗深刻地反映了中国封建时代农民的生存状态。
第一首诗具体而形象地描绘了到处硕果累累的景象，突出了农民辛勤劳动获得丰收却两手空空、惨遭饿死的现实问题；
第二首诗描绘了在烈日当空的正午农民田里劳作的景象，概括地表现了农民终年辛勤劳动的生活，
最后以语近意深的格言，表达了诗人对农民真挚的同情之心。
-->
</body>
</html>
标签可以嵌套的，就是标签里面可以有标签，就会组合起来不同的效果。
评论 (0)