Web前端包含了许多内容，其中HTML是前端的重要基础之一，这篇文章主要对HTML做了一些基本介绍，同时列出了一些常见的标签。

一、HTML是什么？

• 作用： 负责搭建页面结构和内容 （盖房子 房）
• HyperTextMarkupLanguage： 超文本标记语言
• 超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
• 标记语言： 标签体

二、常见标签

1.文本标签

• 内容标题：h1-h6，特点： 独占一行， 字体加粗， 自带上下间距
• 水平分割线：hr
• 段落标签：p，特点： 独占一行 自带上下间距
• 换行： br
• 加粗：b
• 斜体：i
• 下划线：u
• 删除线：s

2.列表标签

• 无序列表： ul和 li
• 有序列表： ol和li
• 列表嵌套： 有序列表和无序列表可以任意无限嵌套

3.图片标签img

• src：资源路径
• 相对路径：访问站内资源使用
• 图片和页面在同级目录： 直接写图片名
• 图片在页面的上级目录： `../图片名`
• 图片在页面的下级目录： 文件夹名/图片名
• 绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险
• alt： 当图片不能正常显示时显示的文本
• title: 鼠标在图片上悬停时显示的文本
• width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放
• 无序列表： ul和 li
• 有序列表： ol和li
• 列表嵌套： 有序列表和无序列表可以任意无限嵌套

4.超链接a

• 无序列表： ul和 li
• 有序列表： ol和li
• 列表嵌套： 有序列表和无序列表可以任意无限嵌套

Title超链接1超链接2超链接3



回到顶部

5.表格标签table

• 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
• 相关属性: border边框 colspan跨列 rowspan跨行

Title购物车

编号	商品名	价格
1	华为Mate 40 pro	6799
2	华为Mate 50 pro	6799
3	华为MatePad pro	4999
总价:	18,597元

6.表单form

• 作用: 获取用户输入的各种信息并且把这些信息提交给服务器
• 需要学习form表单中的各种控件, 包括: 文本框,密码框,单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等

Title用户名:密码:
性别:男女
兴趣爱好:抽烟喝酒烫头
生日:
靓照:
所在地:北京上海广州石家庄

7.分区标签

• 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
• 块级分区标签p: 特点是独占一行
• 行内分区标签span: 特点是共占一行
• 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
• HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和p一样都是块级分区标签

header头

footer脚

main主体

section区域

nav 导航

Title

块级分区标签1

块级分区标签2

块级分区标签3

行内分区标签1行内分区标签2行内分区标签3

头

体

脚

总结

本文介绍了比较常用的html标签及分区的概念。

喜欢 (0)