欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

标签 第一部分

程序员文章站 2022-05-30 22:49:22
...

(http://www.imooc.com/learn/9)

<head> <title> <body> <p> <h1>
<em><strong> <span> 
<q> <blockquote>
<br /> <hr /> &nbsp; <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样式表之后,都可以对其修改。

空格

&nbsp;

标签9 address

一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
在浏览器上显示的样式为斜体,并且另起一行。

标签10 code pre

在文章中加入一行代码code
多行代码pre

<code>代码语言</code>
<pre>语言代码段</pre>

被包围在 pre 元素中的文本通常会保留空格和换行符。