前端入门 常用的HTML标签

常用的标签分为块级标签和行级标签. 

块级标签

常用的块级标签有:标题标签<1>--<h6>六个不同的级别标题，h1 级别最高，而 h6 级别最低。标题标签带有以下的默认的样式:独占一行 文字加粗 字号依次变小 默认带有间距

不要使用标题元素来加大、加粗字体

使用标题保持页面结构清晰【对于无障碍访问 和 搜索引擎优化 等问题非常有意义】

避免跳过某级标题：始终要从 h1开始，接下来依次使用。

避免在一个页面上重复使用h1

通常包含文字 图片 和其他行内元素

在浏览器中的效果如下

    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>

 段落标签 p标签

表示段落,用于将网页中的文字有条理的显示出来

有默认间距 默认间距一般用于文章中的段落和页面中的文字块

段落标签通常用来包含文字 图片 不可以包含他自己

无序列表ul>li

创建可使用快捷键ul>li*数字创建几个li

无序列表,用于将没有数字顺序的一组数据或内容进行分组

默认样式 默认间距(外边距 内边距)

列表样式:实心圆

一般用于:新闻列表 产品列表 导航 分页 选项卡

li必须包含在一个父元素中

type属性 控制列表样式

disc列表样式实心圆

circle 列表样式空心圆

square列表样式为小方块

有序列表:ol>li

有序列表,用于将顺序是有意义的一组数据或内容进行分组

默认间距 列表样式：数字编号

排行榜 烹饪食谱中的各个步骤 指路时的各处转弯方向 营养信息标签上 按含量排序的成分列表 面包屑导航

有序列表的属性

a : 小写字母 A : 大写字母 i : 小写罗马数字 I : 大写罗马数字1：数字

定义列表：dl>dd>dt

包含术语定义以及描述的列表， dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）, 用于将一组项目及其相关的描述进行分组

允许使用多条 项目定义与描述

允许使用带有多个描述的单个项目定义

行级标签

图像:img

图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像

图片有默认样式:多张早前可以在一行显示 默认产生间隙

图片img标签的常用场景:作为内容的展示图像:产品图 广告图 详情页 文章中插图

img有以下的几种标签属性,

src属性:

作用：用于指定图像文件的路径和文件名   注意：是标签的必须属性

引入标签的时候路径时分为相对路径和绝对路径

相对路径:

相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系,常用的相对路径包括当前目 录，上一级目录，下一级目录

同级目录 直接写 ./可以省略./表示当前目录

上一级目录:( ../)后跟文件名

下一级目录:目标文件名的所在目录/目标文件名

绝对路径:

网络绝对位置:直接从网页复制

本地绝对位置

类似于这种 D:\webset\images\logo.jpg

绝对路径: 绝对URL始终指向同一位置，无论在何处使用

注意:在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用 绝对链接。

alt属性:

作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于 用户体验

width/height属性:

作用:指定图片宽度/高度 注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放

超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接 到文档的特定部分

<a href="">文字或图片</a>

超链接有以下默认样式

不独占一行

默认当前窗口打开

默认带有下划线

文字颜色

鼠标样式为手形

超链接的属性

href属性:指定链接跳转的地址 

target属性:指定目标地址的打开方式

_blank 新窗口打开

_self 当前窗口打开(默认)

链接的类型

空链接 描述：如果当时没有确定链接的目标时使用空链

外部链接 描述：链接到站外其他 网站的链接 （绝对地址）

内部链接 （相对地址）描述：网站内部页面之间的相互链接。直接链接内部页面的名称 

下载链接 描述：如果href里面的地址是一个文件或压缩包，会下载这个文件。

<a href="1.doc">下载文本文件</a>

 锚点链接【重要】 描述：当我们点击锚点链接时，可以快速定位到页面中的某个位置。

跳转至当前页面指定位置的锚点

定义目标：<p id="box"></p>
定义跳转：<a href="#box"></a>

 跳转至其它页面的锚点

定义目标：a.html页面的 <div id="box"></div>
定义跳转：<a href="a.html#test"></a>

重点掌握内部链接，外部链接，锚点链接

em标签 语义:强调,用于标记强调内容 默认样式 斜体显示 不独占一行

strong标签 语义:着重强调 默认样式 不独占一行 加粗显示

作用：标记重要强调的内容 为了强调重要的词

在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的 效果

del标签 语义:删除的内容 默认样式 带有中划线 不独占一行

作用：被从文档中删除的文字内容 

常用于:价格中的原价 待办事项中已完成的项

i标签 无语义 默认样式 斜体显示 不独占一行

作用:区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

b标签 无语义 默认样式加粗 不独占一行

作用:区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

span标签 无语义 无默认样式

作用：作为行内容器包含短语内容，通常用来区分文本样式

换行<br/>