一、标签写法分类
☞ 双标签: 有开始和结束的标签.
总结:
1. 如果页面中出现嵌套关系,父元素一定是双标签,子元素可以是双标签或者单标签
☞ 单标签: 只有开始没有结束
总结:
1. 单独标签一定不能作为父元素
#### 单标签
☞ 换行标签: <br>
☞ 横线: <hr>
☞ 文档类型: <!doctype html>
☞ 注释标签: <!-- 内容 --> ctrl + /
#### 双标签
☞ 双标签: <head></head> <body></body>
二、常用的标签
1、标题标签
用来设置页面中的内容标题:<h1></h1> - <h6></h6>
注意:
1.数字越大,标题标签中的默认字体越小
2.一个页面一般只有一个h1标签,给logo使用
2、段落标签<p></p>
用来表示文章段落或者一段文本: <p></p>
注意:独占一行
3、换行标签<br />
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
这时如果还像在word中直接敲回车键换行就不起作用了。
4、水平线标签<hr />
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,<hr />就是创建横跨网页水平线的标签。其基本语法格式如下:
<hr />是单标签
在网页中显示默认样式的水平线。
5、格式化(修饰)标签[双标签]
☞ 设置文字颜色或者设置文字大小: <font></font>
1. 改变文字颜色需要添加color属性 <font color="red">我是红颜色的文字</font>
2. 改变文字大小需要添加size属性 <font color="orange" size="7">我是红颜色的文字</font>
☞ 设置文字是否加粗: <strong> </strong> 或者 <b> </b>
☞ 设置文字斜体显示: <em></em> 或者 <i> </i>
☞ 设置文字删除线效果: <del></del> 或者 <s></s>
☞ 设置文字下划线效果: <ins></ins> 或者 <u></u>
```
6、div span标签(重点)
div span 是没有语义的 ,是我们网页布局主要的2个盒子。
div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。
span, 跨度,跨距;范围 。
语法格式:
<div> 这是头部 </div> <span>今日价格</span>
7、图片标签【多媒体标签】
☞ 图片标签: <img>
☞ 属性:
src:设置要显示的图片路径 <img src="1.jpg">.
width: 设置标签宽度.
height: 设置标签高度.
title: 鼠标悬停到图片上的文字提示.
alt: 当图片无法正常显示时候的文字提示.
8、路径(重点)
☞ 绝对路径:
1. 如果路径中包含具体的磁盘目录: d:/img/1.jpg
2. 如果路径中具有具体的网址: www.baidu.com/img/1.jpg
☞ 相对路径: 必须在同一个根目录下.
1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称
2. 如果当前页面在被访问资源的上一级目录中, 路径=文件所在的文件夹名称/文件名
3. 如果当前页面在被访问资源的下一级目录中,路径=../文件名称
9、超链接(重点)
本质: 就是用来实现页面跳转。
<a href="目标页面路径"></a>
属性:
target:设置目标页面打开方式(默认在当前页面中打开_self | _blank 新窗口中打开)
总结:
如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可.
10、锚链接
本质: 在当前页面中跳转. 网页中的返回顶部效果
<a href="#"></a>
"#": 返回当前页面开始位置