HTML学习笔记
HTML定义
HTML超文本标记语言
- 超文本是什么? 链接
- 标记是什么? 标记也叫标签,带尖括号的文本
标签语法
-
开始标签需要加工的文字结束标签
-
标签成对出现
-
<>里面放标签名
-
结束标签在标签名前加一个’/’
-
拓展
- 双标签:成对出现
- 只有开始,没有结束
HTML骨架
HTML基本骨架是网页模版
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
<html>
- html:整个网页
- head:网页头部,存放给浏览器看
- body:网页主体,存放给用户看
- title:网页标题
基本语法
标签的关系
作用:明确代码的书写位置
- 父子关系(嵌套关系)
- 兄弟关系(并列关系)
<!--html和其它的是父子级关系-->
<html>
<!--head和body是兄弟关系-->
<head></head>
<body>
</body>
</html>
注释
作用:对代码的解释和说明,易于对程序的理解
格式:<!--文本内容-->
注释不会在浏览器中显示
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等
标签名:h1~h6(双标签)
显示特点:
- 文字加粗
- 字号逐渐减小
- 独占一行
格式:<h1..6>标题</h1..6>
经验分享:
- h1标签一个网页只能用一次,用来放新闻标题或网页的logo
- h2~h6没有使用次数的限制
段落标签
一般用在新闻、文章段落或产品描述信息等等
显示效果:
- 独占一行
- 段落之间有间隙
标签名:p(双标签)
格式:<p>text</p>
换行与水平线标签
换行:<br>
水平线:<hr>
文本格式化标签
作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线
标签名 | 效果 |
---|---|
strong | 加粗 |
em | 倾斜 |
ins | 下划线 |
del |
图像标签
作用:在网页中插入图片
格式:<img src="图片的URL" alt="图片不出现显示的文字" title="鼠标悬停在图片上显示的文字">
src用于指定图像的位置和名称,是
<img>
的必须属性,图片的URL即图片的路径,在本地上可以使用./表示本文档所在的路径
属性 | 作用 | 说明 |
---|---|---|
alt | 替换文本 | 图片无法显示的时候显示的文本 |
title | 提示文本 | 鼠标悬停在图片上的时候显示的文本 |
width | 图片的宽度 | 值为数字,没有单位 |
height | 图片的高度 | 值为数字,没有单位 |
![小鸡毛拍照 这是一只小鸡毛](./HTML.assets/小鸡毛01.jpg)
路径
路径指的是查找文件时,从起点到终点经历的路线
路径分类:
- 相对路径:从当前文件位置出发查找目标文件
- ./:表示当前文件所在文件夹
- …/:表示进入上一级文件夹
- 绝对路径:从盘符出发查找目标文件
- 绝对路径的应用场景:友情链接,跳到在线网址
超链接
格式:<a href="路径">文本</a>
视频标签
基本格式:<vedio src="视频的URL"></vedio?
常见属性
属性 | 作用 | 特殊说明 |
---|---|---|
src(必须属性) | 视频URL | 支持格式:MP4、WebM |
controls | 显示视频控制面板 | |
loop | 循环播放 | |
muted | 静音播放 | |
autoplay | 自动播放 |
<vedio src="" controls loop muted></vedio>