主要想记录整理一下跟着学习HTML的笔记,方便以后回看,也能起一个督促学习的作用。
基础认识
web标准
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色等) |
行为 | JavaScript | 网页模型的定义与页面交互 |
HTML的概念
-
专用于网页开发的语言,通过HTML标签对网页中的文本、图片等进行编辑
-
骨架结构
-
html标签:整体
-
head标签:头部
-
body标签:身体
-
title标签:标题
<html> <head> <title>网页标题</title> </head> <body> 网页主体内容 </body> </html>
-
-
注释
<!-- VS code中快捷键Ctrl+/ -->
-
标签之间的关系
-
父子关系(嵌套关系)
<html> <head> </head> </html>
-
兄弟关系(并列关系)
<head> </head> <body> </body>
-
标签
排版标签
-
标题标签
-
代码:h系列标签
<h1>1级标签</h1> <h2>2级标签</h2> <h3>3级标签</h3> <h4>4级标签</h4> <h5>5级标签</h5> <h6>6级标签</h6>
- 重要程度依次递减
- 文字有加粗,独占一行,大小递减
-
-
段落标签
<p> 段落文字 </p>
- 特点:
- 段落之间存在空隙
- 独占一行
- 特点:
-
段落中文字的行间距:
<p style = "line-height : 2em"> 段落文字 </p>
-
换行标签
<br>
- 单标签
- 强制换行
-
水平线标签
<hr>
- 文本下方加水平线
文本格式化标签
-
让文字加粗、下划线、斜线、
删除线标签 标签 说明 b strong 加粗 u ins 下划线 i em 倾斜 s del 删除线
媒体标签
-
图片标签
<img src=" " alt=" "> <!-- 标签属性:src="属性值" ; 属性名:src -->
- 特点:
- 单标签
- img标签需要展示对应的效果,需要借助标签的属性进行设置
- 属性:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
- src属性:
- 属性名:src
- 属性值:目标图片的路径
- 注意点:
- 当前网页和目标图片在同一个文件夹中,直接写目标图片的名字即可
- alt属性:
- 属性名:alt
- 属性值:替换文本
- 图片加载失败时会显示alt的文本
- title属性:
- 属性名:title
- 属性值:提示文本
- 鼠标悬停时出现的文本
- 注意点:
- title属性不仅可以用于图片标签,也可以用于其他标签
- width和height属性
- 属性名:width height
- 属性值:宽度和高度(数字)
- 注意点:
- 如果只设置width或height中的一个。另一个没设置的会自动等比例缩放(图片不变形)
- 特点:
-
路径
-
分类
-
绝对路径(了解)
- 指目录下的绝对位置,可以直达目标位置,一般从盘符开始
-
相对路径(常用)
-
概念:
- 当前文件:当前的html网页
- 目标文件:要找的文件
-
从当前文件开始出发找目标文件的过程
-
分类:
- 同级目录
<img src="./目标文件名.后缀"> <img src="目标文件名.后缀">
- 下级目录
<img src="./下级目录文件夹/目标文件名.后缀"> <img src="下级目录文件夹/目标文件名.后缀">
- 上级目录
先返回上级文件夹:…/
<img src="../目标文件名.后缀"
-
-
-
-
音频标签
<audio src=" " controls></audio>
-
常见属性:
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持) loop 循环播放
-
-
视频标签
<video src="./video.mp4" controls></video>
-
常见属性
属性名 功能 src 视频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持,谷歌浏览器、edge中需要配合muted实现静音播放) loop 循环播放
-
链接标签
- 称呼:a标签、超链接、锚链接
<a href="./目标网页.html">超链接</a>
-
特点:
- 双标签,内部可以包裹内容
-
target属性:
- 目标网页的打开形式
取值 效果 _self 默认值,在当前窗口中跳转 _blank 在新窗口中跳转(保留原网页)
<!--跳转百度 原网页打开-->
<a href="https://www.baidu.com/" target="_self">跳转到百度</a>
<br>
<!--新页面打开-->
<a href="./目标网页.html/" target="_blank">目标网页</a>