Web前端学习笔记
第一章 HTML常用标签
前言
Web前端包含了许多内容，其中HTML是前端的重要基础之一，这篇文章主要对HTML做了一些基本介绍，同时列出了一些常见的标签。
一、HTML是什么？
- 作用： 负责搭建页面结构和内容 （盖房子 房）
- HyperTextMarkupLanguage： 超文本标记语言
- 超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
- 标记语言：
- <开始标签 属性=“xxx”>标签体</结束标签>
二、常见标签
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
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="top" href="https://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.jpg">超链接3</a><br>
<a href="http://www.tmooc.cn"><img src="a.jpg" width="100"></a><br>
<img src="a.jpg"><br>
<img src="a.jpg"><br>
<a href
最低0.47元/天 解锁文章
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
