HTML基础 - 常用标签

1.标题和段落标签

标题标签,只有h1 ~h6 这6个标题标签,字体大小依次减小。

1级标题

2级标题

3级标题

4级标题

5级标题
6级标题

段落标签p标签

段落内容

2.图片标签

支持图片格式:gif、jpg、jpeg、png、bmp、webp。

百度logo

属性:
src:图片的资源地址,支持本地图片、网络图片;
alt:图片说明,当图片加载失败时会显示该内容
title:用于鼠标放到图片上时显示文字;

3.超链接

页面跳转

标签:


百度
新标签打开百度
parent方式打开百度
top方式打开百度

属性:

href:超链接跳转地址,可以是本地路径/相对路径、url地址,若是url地址时务必添加httphttps,否则无法正常跳转页面;
target:定义超链接页面的打开方式,有以下几个值:

  • _self:内容在当前页面显示
  • _blank:内容在新的页面显示;
  • _parent:在父窗体中打开链接,在窗口与顶级框架中,等同于_self
  • _top:在当前窗体打开链接,并替换当前的整个窗体(框架页),清除所有包含的框架

锚点跳转

即页面内部位置跳转,通过给超链接的href属性设置以#{id值}的方式实现页面内部锚点跳转。

示例如下:

锚点跳转1 锚点跳转2

...

...

...

回到顶部

上述代码定义了几个p标签,给其设置了id值,然后给超链接a标签的属性href设置跳转锚点。

4.文本修饰标签
标签 标签功能说明
bold的缩写,文字加粗
文字加粗,阅读时会被加重读音,推荐使用
italic的缩写,字体倾斜
字体倾斜,有加强语气
underline的缩写,文字下划线
strike的缩写,文字带删除线
delete的缩写,文字带删除线
文字上标签,如:22
文字下标签,如:O2

示例如下:

b标签 文字加粗

strong标签 文字加粗,阅读时会被加重读音

我会倾斜

我会倾斜,有强调作用

我是下划线标签

删除线标签

del删除线标签

π * 32

CO2

5.列表标签

HTML中列表分为:有序列表、无序列表、自定义列表。

类型 标签 说明
有序列表
有顺序
无序列表
无序
自定义列表
——

有序列表

语法:

规定ol标签中不能有其它内容,若想添加其它内容,必须放在li标签中。

列表的序号默认为阿拉伯数字,从1开始。

可以通过ol标签的type属性进行设置序号的类型。

  • 1,阿拉伯数字顺序
  • A,大写字母顺序
  • a,小写字母顺序
  • I,大写罗马数字顺序,I、II、III、IV、V、VI、VII、VIII、IX、X ······
  • i,小写罗马数字顺序,i ii iii iv v vi vii viii ······

可以通过ol标签的start属性进行设置列表的起始序号,数值形式。

如下示例:

  1. 小米
  2. 华为
  3. OPPO

无序列表

无序列表

  • 小米
  • 华为
  • OPPO

type属性有以下几个值:

  • disc:实心圆
  • circle:空心圆
  • none:无样式
  • square:方块

自定义列表


dl:definition list的缩写,定义列表;
dt:definition term的缩写,可以理解为标题,定义术语;
dd:definition description的缩写,定义描述

如下示例:

自定义列表

自定义列表的标题
小米
华为
OPPO
6.table标签

涉及标签

标签 描述
表格
表格头部,标题
单元格
单元格,文字加粗
表格头,内包含
表格正文内容,内包含
表格尾,内包含
列分组

table属性

  • border:表格边框粗细;
  • cellspacing:单元格的间距;
  • cellpadding:单元格的内边距;
  • width:表格宽度
  • height:表格高度
  • align:表格在父布局中居中
  • bgcolor:表格背景色
  • bordercolor:表格边框颜色

td属性

  • rowspan:单元格跨行的数量
  • colspan:单元格跨列的数量
  • bgcolor:单元格背景色
  • align:单元格文字居中

示例:

阿里职级与薪资
序号 技术岗与管理岗的职级薪资
P序列 P级名称 M序列 M级名称 薪资 股票
1 P6 资深工程师 M1 主管 20W-35W 几乎不授予
2 P7 技术专家 M2 经理 30W-50W 2400股
3 P8 高级专家 M3 高级经理 45W-80W 6400股
4 P9 资深专家 M4 总监 80W-100W 16000股
5 P10 研究员 M5 高级总监 150W+ 20000股
说明 P-Profession M-Manager,马云在阿里的级别是M10
7.块级元素和内联元素

块级元素:独占一行,block块元素

常见块级元素:

  • 标题元素:h1 ~ h6
  • 段落元素:p
  • 列表元素:olullidldtdd
  • 表格元素:tabletrtdththeadtbodytfootcaption
  • 分块元素:div

inline内联元素:不会独占一行,只占用必要的宽度。

常见内联元素:

  • 文本修饰元素:bstrongiemsubsupudels
  • 链接元素:a
  • 换行元素:br
  • 图片元素:img
  • 范围元素:span

**注意:内联元素不能嵌套块级元素

8.表单

标签:

form属性

  • action,用来指定处理提交表单格式,通常是一个url地址或一个电子邮件地址
  • method,默认为get,值为post/get,数据提交方式
  • name,对表单进行标记
  • enctype,数据提交给服务器时的形式,默认:application/x-www-form-
    urlencoded
  • target,指定提交后文档显示位置,值:_blank_self_parent_top
  • accept-charset=“gbk”,设置编码格式,针对非IE浏览器
  • _charset=“gbk”,设置编码格式,针对IE浏览器

表单标签需要放在标签内使用,常用标签如下

标签 描述 属性
单行文本框 type(值参考后内容)、name、id、readonly(只读)、disable禁用