(http://www.imooc.com/learn/9)
<head> <title> <body> <p> <h1>
<em><strong> <span>
<q> <blockquote>
<br /> <hr /> <address>
<code> <pre>
认识head标签
文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
标题
在<title>和</title>
标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。
如:
hello world
注释
<!--注释文字 -->
标签1 body
网页上显示的内容放在这里.
在网页上要展示出来的页面内容一定要放在body标签中.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<body>
<h1>了不起的盖茨比</h1>
<p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
标签2 p
<p>
显示文章,文章的段落放到<p>
标签中。
一段一个标签!
标签3 hx
<hx>
(x为1-6)标签来制作文章的标题
标题标签一共有6个,h1、h2、h3、h4、h5、h6
分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>
是最高的等级。
标签4 em strong
强调某几个文字,这时候就可以用到<em>
或<strong>
标签。
<em>
斜体
<strong>
粗体
标签5 span
<span>
标签是没有语义的,它的作用就是为了设置单独的样式用的。
声明span{}函数时要放到<style></style>
标签里,另外如果想直接使用<span></span>
进行一次样式设置也可以<span style='color:red'></span>
<span></span>
的使用,在<head></head>
标签内部,声明span{}函数,在span的主体设定,字体样式,例如 color:blue;
然后对<body></body>
中要是用的文字两头分别加上<span></span>
标签就好。
aqua 浅绿色black 黑色blue 蓝色fuchsia 紫红色gray 灰色green 绿色lime 绿黄色maroon 栗色navy 深蓝色olive 橄榄色purple 紫色red 红色silver 银白色teal 蓝绿色white 白色
“美国梦”设置成蓝色:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
标签6 q
<q>
标签,短文本引用
注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。
标签6 blockquote
<blockquote>
的作用也是引用别人的文本。但它是对长文本的引用.
浏览器对<blockquote>
标签的解析是缩进样式.
标签7 br
在需要加回车换行的地方加入<br />
,<br />
标签作用相当于word文档中的回车。
<br />
标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />
、<hr />
和<img />
。
在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />
。
标签8 hr
用于分隔的横线
在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。
空格
标签9 address
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>
标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
在浏览器上显示的样式为斜体,并且另起一行。
标签10 code pre
在文章中加入一行代码code
多行代码pre
<code>代码语言</code>
<pre>语言代码段</pre>
被包围在 pre 元素中的文本通常会保留空格和换行符。