认识body标签
2018-03-15 本文已影响0人
淘代码者
文章标题标签<hx>
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
屏幕快照 2018-03-12 上午11.00.32.png
如果需要修改各级标题可以这样做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>各级标题</title>、
<style type="text/css">
h1{
font-size: 20px;
color: #98DF54;
text-align: left;
}
h2{
font-family: "微软雅黑";
font-style: normal;
color: darkgreen;
}
h3{
color: red;
}
h4{
color: yellow;
}
h5{
color: darkcyan;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
屏幕快照 2018-03-12 上午11.05.37.png
段落<p>
加入强调语气，使用<strong>和<em>标签
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
语法：
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
使用<span>标签为文字设置单独样式
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>各级标题</title>、
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
<q>标签，短文本引用
<blockquote>标签，长文本引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本引用</title>、
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<h2>心似桂花开</h2>
<p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？<q>暗淡轻黄体性柔，情疏迹远只香留</q></p>
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
<p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。</p>
</body>
</html>
使用<br>标签分行显示文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行</title>、
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<h2>《咏桂》</h2>
<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p>
</body>
</html>
在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。
添加空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>空格</title>、
<style type="text/css">
</style>
</head>
<body>
<h2>《咏桂》</h2>
<p>暗淡 ，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p>
</body>
</html>
认识<hr>标签，添加水平横线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>水平横线</title>、
<style type="text/css">
</style>
</head>
<body>
<h2>《咏桂》</h2>
<p>暗淡 ，<br/>情疏迹远只香留。<br/><hr/>何须浅碧深红色，<br/>自是花中第一流。</p>
</body>
</html>
<address>标签，为网页加入地址信息
一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
语法：
<address>联系地址信息</address>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>addre</title>、
<style type="text/css">
</style>
</head>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br/>
Visit us at:<br/>
Example.com<br/>
Box 564, Disneyland<br/>
USA
</address>
</body>
</html>
想加入一行代码吗？使用<code>标签
语法：
<code>代码语言</code>
使用<pre>标签为你的网页加入大段代码
语法：
<pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
如下代码：
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
