HTML基础6-常用标签

4.HTML常用标签

4.1标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的定义，即这个标签是用来干嘛的 。根据标签的语义，在合适的地方给一个最合理的标签，可以让页面结构更清晰。

4.2标题标签<h1-h6>

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，分别是
如：<h1>我是一级标题<h6>
单词head的缩写意为头部，标题。
标签语义：作为标题使用，并且依据重要性递减。
特点：
1.加了标题的文字会加粗，字号也会一次增大
2.一个标题独占一行

4.3段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个标签段落</p>
单词paragraph的缩写意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

4.3段落和换行标签

在HTML中，一个段落中的文字会从左到右一次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>
单词break的缩写，意为打断，换行。
标签语义：强制转换。
特点：
1.<br/>是个单标签
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要
语义 标签 说明
加粗 <strong></strong>或者<b></b> 更推荐使用<strong>标签加粗 语义更强烈
倾斜 <em></em>或者<i></i> 更推荐使用<em>标签 语义更强烈
删除线 <del></del>或者<s></s> <del>更强烈
下划线<ins></ins>或者<u></u> <ins>更强烈

4.5<div>和<span>标签

<div>和span是没有语义的,他们就是一个盒子,用来装内容的.
div是division的缩写,表示分割,分区.span意为跨度,跨距.
特点:
1.<div>标签用来布局,但是现在一行只能用来做一个

2.<span>标签用来布局一行可以多个<span>

4.6图像的标签和路径

1.图像标签

在HTML中,标签用于定义HTML页面中的图像.
<img src = “图像URL”/>
单词image的缩写意为图像
src是标签的必须属性,它用于指定图像文件的路径和文件名.
所谓属性:简单理解就是属于这个图像标签的特性.

1.图像标签

图像标签的其他属性:
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本 图像不能显示时的文字
title 文本 提示文本,鼠标放到图像上,显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

注意点:
1.图像标签可以拥有多个属性,必须写在标签名的后面
2.属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开.
3.属性采取键值对的格式,即key=“value”,属性=“属性值”.

2.路径

(1)目录文件夹和根目录:
实际工作中,我们的文件不能随便乱放,否则用起来很难快速找到他们,因此我们需要一个文件夹来管理他们.
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件,图片等.
根目录:打开目录文件夹的第一层就是根目录.

2.路径之相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目的路径.这简单来说,图片相当于HTML页面的位置
相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 如<img src=“baidu.gif”/>
下一级路径 / 图像文件位于HTML文件下一级 如\<img src=“images/baidu.gif”/>
上一级路径 …/ 图像文件位于HTML文件上一级 如<img src="…/baidu.gif/">
3.路径之绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径.
例如,"D:\web\img\log0.gif"或完整的网络地址