1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的body标签中，输入html代码：<p>床前明月光，疑是地上霜。</p>。
3、浏览器进入index.html页面中，此时成功在html中输出了唐诗。
内容基于html标签结构。
h5标签：
诗标题用h1，分割线hr，文字p，斜体i，下划线u，删除线del。
特殊符号：
版权标识 ©。
排版用css实现（行内样式很麻烦而且难改，不建议）。
css属性：文字位置（中左右）text-align，宽度width（用了占屏幕百分比），高度height（用了具体像素px值），颜色color，背景background（直接给分割线设置了背景灰色免得变矩形）。
css选择器：前面没有符号的是标签，有.是class，有#是id。
进一步内容可以查询有关概念或改动编码看其变化。
<!DOCTYPE html>
<html>
<head>
<title>山居秋暝</title>
<style type="text/css">
h1 {text-align:centercolor:red}
hr {width:50%height:3pxtext-align:centerbackground:grey}
footer {text-align:center}
.bluepoem {color:blue}
#author {text-align:right}
</style>
</head>
<body>
<header>
<h1>山居秋暝</h1>
<hr />
<p id="author"><i>唐 王维</i></p>
</header>
<div>
<p class="bluepoem">空山新雨后，天气晚来秋。</p>
<br />
<p><u>明月松间照，清泉石上流。</u></p>
<br />
<p class="bluepoem">竹喧归浣女，莲动下渔舟。</p>
<br />
<p><del>随意春芳歇，王孙自可留。</del></p>
</div>
<footer>
©版权所有 <网页设计与制作>
</footer>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）