前端学习第三课（常用标签）

1.排版标签

1）标题标签h

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

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

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

其基本语法格式如下：

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

显示效果如下：

2）段落标签p

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

<p> 文本内容 </p>

3）水平线标签hr

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

<hr />是单标签

4）换行标签br

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

<br />

5）div 和 span标签

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

span 跨度，跨距；范围

<div> this is div </div>    <span>this is span</span>

他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们记住

• div标签 用来布局的，但是现在一行只能放一个div

• span标签 用来布局的，一行上可以放好多个span

排版标签总结

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

2.文本格式化标签

3.图像标签img

语法如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

 例：

 

 

 

4.路径

1）相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

相对于当前目录，可以用./或不写；"./img/123.jpg";"img/123.jpg"

相对于上一层目录，用../;"../img/123.jpg"

（webpack中用@指定到相应的文件，如"@/img/123.jpg"）

2）绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

本地文件绝对路径“D:\web\img\logo.gif”(不要写在网页上)，

或完整的网络地址，例如“http:// www.baidu.com ”。

5.链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

1. 外部链接 需要添加 http:// www.baidu.com

2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

重点掌握点：

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

 

 6.注释标签

 <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /