为了账号安全,请及时绑定邮箱和手机立即绑定

【学习笔记】html基础知识第二更/标签详解①

2016.02.26 14:21 4112浏览

<p>标签,添加段落
如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。
语法:
<p>段落文本</p>

注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。

<p>标签的默认样式,是段前段后都会有空白,可以用css样式来删除或改变标签的默认样式。

特别强调-<em>/<strong>标签
但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。
语法:
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>

如,在网上商城中,某产品的打折后的价格是需要强调的。
<em>的内容在浏览中显示为斜体,<strong>显示为加粗。对于所有你不喜欢的默认样式,都可以在css中改变它。

<span>标签与<em>/<strong>的区别

  1. <em>和<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。
  2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

当只是想为一段文字设置和其它文字不同的样式(而不是为了强调),这种情况下就可以用到<span>标签了。

< q>标签,在你的html中加一段引用
比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。
语法:
<q>引用文本</q>

  1. 如果你需要引用一段话,而这并不是作者自己的文字,这个时候你需要使用<q></q>实现引用。
  2. 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

<blockquote>标签,长文本引用
<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。
区别:<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。
而当引用文本比较长,就应该使用<blockquote>。

语法:
<blockquote>引用文本</blockquote>
浏览器对<blockquote>标签的解析是缩进样式。

如何加入一个折行-<br />标签
在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。语法:
xhtml1.0写法:
<br />
html4.01写法:
<br>
现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

  与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />。
  很遗憾,在 html 中是忽略回车和空格的,你输入的再多回车和空格也显示不出来,所以需要折行的时候必须使用<br/>标签。

为你的网页中添加一些空格
之前我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入空格占位符
语法:&n.b.s.p;(注意,实际使用时无须小数点,此处每个字符间隔加入“.”是为了避免被吞)
 

认识<hr>标签,添加水平横线
在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。
语法:
html4.01版本 <hr>
xhtml1.0版本 <hr />

注意:

  1. <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
  2. <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。
  3. 现在一般使用 xhtml1.0 的版本,这种版本比较规范。

<address>标签,为网页加入地址信息
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
语法:
<address>联系地址信息</address>

如:
<address>文档编写:lilian 北京市西城区德外大街10号</address>
在浏览器上显示的样式为斜体,同样的,如果不喜欢这种默认的效果,可以在后面学习了css样式之后,去改变它。

<code>标签-加入一行代码
当你需要在网页中加入一行代码的时候,你就可以使用<code>标签了,如下:
<code>var i=i+300;</code>
注意:在文章中一般如果要插入多行代码时不能使用<code>标签

语法:
<code>代码语言</code>

注:如果是多行代码,可以使用<pre>标签

<pre>标签-预格式化文本标签
语法:
<pre>语言代码段</pre>

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
注意:<pre> 标签完全按照你的排版来显示你所输入的文本,在你需要在网页中预显示格式时都可以使用它,其中一个常见应用就是用来展示计算机的源代码。

无序列表<ul>标签的应用-添加新闻信息列表
在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表等。
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法:
<ul>
<li>...</li>
<li>...</li>
...
</ul>

有序列表<ol>标签--添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表如,当当网上的书籍热卖排行榜时,又该用什么标签呢?这类信息展示就可以使用<ol>标签制作有序列表来展示。
语法:
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
举例:
下面是一个热点课程下载排行榜:
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始

最后是想告诉大家:这些全是由本站-http://www.imooc.com/learn/9 HTML+CSS基础课程总结而来的笔记,非原创!!

点击查看更多内容
32人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消