前端入门 常用的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/>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值