欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【前端开发】HTML常用标签

程序员文章站 2022-03-04 10:07:14
因为这学期的课程设计需要用到一些简单的前端知识,所以我打算这学期利用一些课余时间简单学习一下。1. 标题标签HTML提供了6个等级的网页标题,即

,

,

,

,

,
。h是head的缩写。标题标签是双标签,基本语法如下:

我是一级标题

标签语义:作为标题使用,并且根据重要性递减。特点:加了标题标签的文字会加粗,字号变大。每个标题独....

1. 标题标签

HTML提供了6个等级的网页标题,即<h1>, <h2>, <h3>, <h4>, <h5>, <h6>。h是head的缩写。
标题标签是双标签,基本语法如下:

<h1>我是一级标题</h1>

标签语义:作为标题使用,并且根据重要性递减。
特点:

  • 加了标题标签的文字会加粗,字号变大。
  • 每个标题独占一行。

2. 段落和换行标签

2.1 段落标签

在HTML中,<p>用于定义段落,它可以将整个网页分为若干个段落。p是paragraph的缩写。
段落标签是双标签,基本语法如下:

<p>我是一个段落标签</p>

标签语义:可以把HTML文档分割为若干段落。
特点:

  • 文本在一个段落中会根据浏览器窗口的大小自动换行。
  • 段落和段落之间保有空隙。

2.2 换行标签

在HTML中,如果希望某段文本强制换行显示,就需要使用换行标签<br />。br是break的缩写。
换行标签是单标签。
标签语义:强制换行。
特点:

  • <br />是单标签。
  • <br />只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

3. 文本格式化标签

语义 标签 说明
加粗 <strong></strong><b></b> 更推荐使用<strong></strong>标签加粗文本,语义更强烈
倾斜 <em></em><i></i> 更推荐使用<em></em>标签倾斜文本,语义更强烈
删除线 <del></del><s></s> 更推荐使用<del></del>标签添加删除线,语义更强烈
下划线 <ins></ins><u></u> 更推荐使用<ins></ins>标签添加下划线,语义更强烈

4. <div><span>标签

<div><span>标签是没有语义的,它们就是一个盒子,用来装内容。div是division的缩写,表示分割、分区。span意为跨度、跨距。
<div><span>标签都是双标签,基本语法如下:

<div>这是头部</div>
<span>今日价格</span>

特点:

  • <div>标签用来布局,但是现在一行只能有一个<div>
  • <span>标签用来布局,一行上可以有多个<span>

5. 图像标签和路径

5.1 图像标签

在HTML中,<img>标签用于定义HTML页面中的图像。img是image的缩写。
图像标签是单标签,基本语法如下:

<img src="图像URL" />

src<img>标签的必需属性,它用于指定图像文件的路径和文件名。所谓属性,简单理解就是属于这个图像标签的特性。
下表列出了图像标签的其他属性:

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

图像标签属性需要注意以下几点:

  • 图像标签可以拥有多个属性,必须写在标签名的后面。
  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  • 属性采取键值对的格式,即属性=属性值的格式。

6. 超链接标签

在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。a是anchor的缩写,意为锚。
超链接标签是双标签,基本语法如下:

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

<a>标签的属性如下:

属性 作用
href 用于指定链接目标的URL地址,是必需属性,当为标签应用href属性时,它就具有了超链接功能
target 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开

链接分为外部链接、内部链接、空链接、下载链接、网页元素链接和锚点链接等。
外部链接例如<a href="http://www.baidu.com">百度</a>
内部链接是网站内部页面之间的相互链接。
空链接表示当时没有确定链接目标,例如<a href="#">首页</a>
如果href的地址是一个文件或压缩包的下载链接,会下载这个文件。
网页元素链接表示在网页中的各种网页元素,如文本、图像、表格、音频、视频等。
锚点链接指的是当我们点击链接的时候可以快速定位到页面的某个位置。

  • 在链接文本的href属性中,设置属性值为#名称的形式,例如<a href="#two">第2集</a>
  • 找到目标位置标签,里面添加一个id属性,属性值为刚才的名称,例如<h3 id="two">第2集介绍</h3>

本文地址:https://blog.csdn.net/qq_45554010/article/details/114270125