HTML学习笔记3——HTML常用标签

学习目标

• 理解：
  • 相对路径三种形式
• 应用
  • 排版标签
  • 文本格式化标签
  • 图像标签
  • 链接
  • 相对路径，绝对路径的使用

HTML常用标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。

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

排版标签

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

标题标签h (熟记)

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

标题标签语义：

作为标题使用，并且依据重要性递减。其基本语法格式如下：

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

显示效果如下：

小结 :

• 加了标题的文字会变的加粗，字号也会依次变大
• 一行是只能放一个标题的

2）段落标签p ( 熟记)

单词缩写：paragraph，段落 [ˈpærəgræf]。

作用语义：

可以把 HTML 文档分割为若干段落。

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

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

3）水平线标签hr(认识)

单词缩写：horizontal 横线，[ˌhɔrəˈzɑntl]

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

<hr />

就是创建横跨网页水平线的标签。其基本语法格式如下：

<!--单标签-->
<hr />
           

在网页中显示默认样式的水平线。

课堂练习：新闻页面。

4）换行标签br (熟记)

单词缩写： break，打断，换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，这时如果还像在word中直接敲回车键换行就不起作用了，就需要使用换行标签。

5）div 和 span标签(重点)

div，span：是没有语义的，是我们网页布局主要的2个盒子

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

span 跨度，跨距，范围

语法格式：

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

他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们主要记住使用方法和特点就好了：

• div标签 用来布局的，但是现在一行只能放一个div
• span标签 用来布局的，一行上可以放好多个span

排版标签总结

标签名	定义	说明
<hx></hx>	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把 HTML 文档分割为若干段落
<hr />	水平线标签	没啥可说的，就是一条线
<br />	换行标签
<div></div>	div标签	用来布局的，但是现在一行只能放一个div
<span></span>	span标签	用来布局的，一行上可以放好多个span