人生苦短，要学就只学有用的

【前端教学-Html-2】

HTML常用标签和路径

学习方针

理解：

相对路径三种形式

应用

排版标签

文本格局化标签

图像标签

链接

相对路径，绝对路径的使用

1. HTML常用标签

首先 HTML和CSS是两种完全差此外语言，我们学的是布局，就只写HTML标签，认识标签就可以了。 不会再给布局标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

这里多嘴一下：必然要多去查手册，因为对付我们后面的学习来说，大部分内容都是需要本身去琢磨的

1.1 排版标签

排版标签主要和css搭配使用，显示网页布局的标签，是网页构造最常用的标签。

1）标题标签h (熟记)

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面顶用到标题标签，HTML供给了6个品级的标题，即

标题标签语义： 作为标题使用，并且依据重要性递减

其根基语法格局如下：

<h1> 标题文本 </h1> <h2> 标题文本 </h2> <h3> 标题文本 </h3> <h4> 标题文本 </h4> <h5> 标题文本 </h5> <h6> 标题文本 </h6>

显示效果如下：

小结 :

加了标题的文字会变的加粗，字号也会依次变大

一行是只能放一个标题的

2）段落标签p ( 熟记)

单词缩写： paragraph 段落 [?p?r?gr?f] 无须记这个单词

感化语义：

可以把 HTML 文档支解为若干段落

在网页中要把文字有层次地显示出来，离不开段落标签，就如同我们泛泛写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p> 文本内容 </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会按照浏览器窗口的巨细自动换行。

3）程度线标签hr(认识)

单词缩写： horizontal 横线 [?h?r??zɑntl] 同上

在网页中每每看到一些程度线将段落与段落之间离隔，使得文档布局清晰，条理明白。这些程度线可以通过插入图片实现，也可以简单地通过标签来完成，就是创建横跨网页程度线的标签。其根基语法格局如下：

<hr />是单标签

在网页中显示默认样式的程度线。

小操练！：

4）换行标签br (熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次摆列，直到浏览器窗口的右端，然后自动换行。如果但愿某段文本强制换行显示，就需要使用换行标签

<br /> 5）div 和 span标签(重点)

div span 是没有语义的 是我们网页构造主要的2个盒子 想必你听过 css+div

div 就是 division 的缩写 支解， 分区的意思 其实有很多div 来组合网页。

span 跨度，跨距；范畴

语法格局：

<div> 这是头部 </div> <span>今日价格</span>

他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，此刻我们主要记住使用要领和特点就好了:
关于他们的区别，我们会专门的写一篇总结放给大家。

div标签 用来构造的，但是此刻一行只能放一个div

span标签 用来构造的，一行上可以放好多个span

后面后面讲显示模式的时候，会报告大家

排版标签总结 标签名 界说 说明
  标题标签   作为标题使用，并且依据重要性递减  
  段落标签   可以把 HTML 文档支解为若干段落  
  程度线标签   没啥可说的，就是一条线  

  换行标签    

  div标签   用来构造的，但是此刻一行只能放一个div  
  span标签   用来构造的，一行上可以放好多个span  
1.2 文本格局化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格局化标签，使文字以特殊的方法显示。

区别：

b 只是加粗 strong 除了可以加粗还有 强调的意思， 语义更强烈。
还有一点，我们在写页面的时候，一般都不适用XHTML保举的语法

1.3 标签属性