返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

HTML5文档的标签认识

2020-04-20 文章标签: HTML5 浏览次数:

我们讲解下HTML5和CSS3,包含知识点HTML5文档,设置段落样式,设置对齐和缩进,添加分隔线,设置标题样式,设置字形样式

HTML5教程

1.HTML5文档,详解header里面标签各属性作用

<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- 声明文档语言编码--> 
    <head> <!-- 文档头部区域 --> 
        <meta charset=utf-8> <!-- 定义字符集,设置字符编码,utf-8是通用编码 -->
        <!--[if IE]><![endif]--> <!-- IE专用标签,兼容性写法 -->
        <title>文档标题</title> <!-- 文档标题 -->
        <!--[if IE 9]><meta name=ie content=9><![endif]--> <!--兼容IE9 -->
        <!--[if IE 8]><meta name=ie content=8 ><![endif]--><!--兼容IE8 -->
        <meta name=description content=文档描述信息><!-- 定义文档描述信息-->
        <meta name=author content=文档作者><!--开发人员署名 -->
        <meta name=copyright content=版权信息><!--设置版权信息 -->
        <link rel=shortcut icon href=favicon.ico><!--网页图标 -->
        <link rel=apple-touch-icon href=custom_icon.png><!-- apple设备图标的引用 -->
        <!--不同接口设备的特殊声明-->
        <meta name=viewport content=width=device-width, user-scalable=no >
        <link rel=stylesheet href=main.css><!--引用外部样式文件-->
        <!--兼容IE的专用样式表 --><!--[if IE 7]>
        <!--[if IE]><link rel=stylesheet href=win-ie-all.css><![endif]-->
        <link rel=stylesheet type=text/css href=win-ie7.css><![endif]--><!-- 兼容IE7浏览器 -->
        <!--[if lt IE 8]><script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.   js></script><![endif]--><!--让IE8及其早期版本也兼容HTML5的JavaScript脚本-->
        <script src=script.js></script><!-- 调用JavaScript脚本文件-->
    </head>
    <body>
        <header>HTML5文档标题</header>
        <nav>HTML5文档导航</nav>
        <section>
            <aside>HTML5文档侧边导航 </aside>
            <article>HTML5文档的主要内容</article>
        </section>
        <footer>HTML5文档页脚</footer>
    </body>
</HTML>

2.设置段落样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>黄鹤楼送孟浩然之广陵</p> 
<p>李白</p>
<p>
故人西辞黄鹤楼,<br />
烟花三月下扬州。<br />
孤帆远影碧空尽,<br />
唯见长江天际流。 
</p>
</body>
</html>

3.设置对齐和缩进,使用pre标签和blockquote

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>黄鹤楼送孟浩然之广陵</p> 
<p>李白</p>
<pre>
故人西辞黄鹤楼,
   烟花三月下扬州。
孤帆远影碧空尽,
   唯见长江天际流。 
</pre>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>黄鹤楼送孟浩然之广陵</p> 
<p>李白</p>
<blockquote>
故人西辞黄鹤楼,
烟花三月下扬州。
孤帆远影碧空尽,
唯见长江天际流。 
</blockquote>
</body>
</html>

4.添加分隔线

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>黄鹤楼送孟浩然之广陵</p> 
<p>李白</p>
<hr>
<blockquote>
故人西辞黄鹤楼,
烟花三月下扬州。
孤帆远影碧空尽,
唯见长江天际流。 
</blockquote>
<hr>
</body>
</html>

5.设置标题样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 style="text-align: center">黄鹤楼送孟浩然之广陵</h1> 
<h2 style="text-align: center">李白</h2>
<hr>
<blockquote>
故人西辞黄鹤楼,
烟花三月下扬州。
孤帆远影碧空尽,
唯见长江天际流。 
</blockquote>
<hr>
</body>
</html>

6.设置字形样式,常见的字体标签有p标签,b标签,u标签,i标签等等。我们看看都是些什么效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2 style="text-align: center">黄鹤楼送孟浩然之广陵</h2> 
<h4 style="text-align: center">李白</h4>
<hr>
<blockquote>
<b>故人西辞黄鹤楼,</b>
<i>烟花三月下扬州。</i>
<b>孤帆远影碧空尽,</b>
<u>唯见长江天际流。 </u>
</blockquote>
<hr>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2 style="text-align: center">黄鹤楼送孟浩然之广陵</h2> 
<h4 style="text-align: center">李白</h4>
<hr>
<blockquote>
<span style="font-weight:bold">故人西辞黄鹤楼,</span>
<span style="font-style:italic">烟花三月下扬州。</span>
<span style="font-weight:bold">孤帆远影碧空尽,</span>
<span style="text-decoration:underline">唯见长江天际流。 </span>
</blockquote>
<hr>
</body>
</html>


你可能还感兴趣···

关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。