HTML与CSS学习第一天
目录
1. 网页
1.1 网页介绍
-
网页是网站的一“页”,通常是HTML格式的文件,通过浏览器来阅读。
-
网站是在因特网上根据一定的规则,使用HTML等制作的用于展示特点内容相关的网页集合
-
网页本质是HTML文件,通常由图片,链接,视频,音频,文字等元素组成。
1.2 HTML本质
-
HTML是 超文本标记语言(Hyper Text Markup Language)
-
是标记语言,和markdown类似,不是编程语言
2. web标准
2.1 web标准定义
web标准是有W3C组织和其他标准化组织制定的一系列标准的的集合。
W3C:万维网联盟。
2.2 web标准作用
不同的浏览器解析各自标准的HTML文件得到的效果不同,为了让在不同浏览器解析的效果相同,就需要web标准。
2.3 web标准的构成
- 主要由结构,表现,行为三个方面
- 结构,行为,样式分离
- 表格
标准 | 说明 |
---|---|
结构 | 结构用于对网页元素进行整理和分类,现阶段主要学HTML。 |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指CSS。 |
行为 | 行为是指网页模型的定义及其交互的编写,现在主要学JavaScript。 |
3. HTML语法介绍
3.1. 基本语法
-
HTML标签是由尖括号包围的关键词,如
<Html>
。 -
双标签:成对出现,如
<HTML></HTML>
,前面的称开始标签,后面为结束标签。 -
单标签:
<br>
,<img>
标签。
3.2 结构图
4. VSCode编译器使用
4.1 快捷键使用
-
!+table/回车 :生成文档类型声明标签(<!DOCTYPE>),告诉浏览器使用何种HTML版本显示网页。
-
Ctrl+D:在选中一个关键字或内容的情况下,加选相同的内容。
-
alt+鼠标左键:加选光标,配合crtl+shift+左方向键使用。
-
crtl+shift+左方向键:选择所有光标的左边部分。
5. HTML常用标签
5.1 标题标签
-
<H1>-<H5>
-
标签语义:标题使用,根据重要性从1到6递减。
-
特点:1. 文字会变粗,字号会变大。
2.一个标题独占一行。
5.2 段落标签
<p></p>
- 标签语义:可以把HTML文档分割成若干段落。
- 特点:1. 一个段落中的文本会根据浏览器窗口的大小自 动换行。
2. 段落和段落之间保有间隙。
5.3 换行标签
<br>
标签- 标签语义:强制换行。
- 特点:
- 单标签。
- 标签简单的开始下一行,和段落间隙不一样(段落之间有垂直间距)。
5.4一些格式化标签
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong> 或<b></b> | 推荐使用strong标签,加粗 |
倾斜 | <em></em> 或<i></i> | 推荐使用em标签倾斜,倾斜 |
删除线 | <del></del> 或<s></s> | 推荐使用del标签加上删除线 |
下划线 | <ins></ins> 或<u></u> | 推荐使用ins标签加上下划线 |
5.5 div和span标签
标签 | 相同点 | 不同点 |
---|---|---|
div | 无语义标签 | 一行放一个,大盒子 |
span | 无语义标签 | 一行放多个,小盒子 |
5.6 图像标签
-
<img>
- 特点:单标签
- 语义:图像
- src属性是该标签必须的
-
标签属性介绍
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像加载失败时显示 |
title | 文本 | 提示文本,鼠标悬停在图片上显示的文字 |
width | 像素(px) | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像边框的粗细 |
注意点
- 图像标签拥有多个属性,每个属性写在标签的后面,如
<img src="xxx" alt="加载失败">
- 属性之间不分先后顺序,属性与属性之间用空格隔开
- 属性与属性值的书写格式:key=“value”格式
5.7 音频标签
- 目前支持三种格式:MP3,wav,ogg
- 格式
<audio src="音频路径" controls></audio>
- 常用属性
属性名 | 功能 |
---|---|
src | 音频路径 |
controls | 显示播放控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
- 插图
5.8视频标签
- 目前支持三种格式:MP4,webm,ogg。
- 格式
<video src+"视频路径" controls></video>
- 常用属性
属性名 | 功能 |
---|---|
src | 视频路径 |
controls | 显示播放控件 |
autoplay | 自动播放(谷歌浏览器需配合mutex实现静音播放) |
loop | 循环播放 |
5.9 水平线线标签
- 单标签
- 在页面中显示一条水平线
- 格式
<hr>
6.文件路径
6.1路径的相对路径
- 定义:以引用文件所在位置为参考基础,而建立出的目录路径
- 图表介绍
相对路径类别 | 符号 | 说明 |
---|---|---|
同级目录 | 直接写路径名 | |
下级目录 | / | 当前目录下的文件 |
上级目录 | …/ | 回到上级目录 |
6.2 路径的绝对路径
- 绝对路径:通常为以盘符开始的路径。
7.超链接标签
7.1链接的语法格式
- a即英文单词anchor,锚点
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
7.2 链接的属性
属性 | 作用 |
---|---|
href | 用于指定链接的URl(统一资源定位符)地址,必须属性,标签具有href属性时,他就拥有了超链接的功能 |
target | 指定链接页面的打开方式,_self为默认值,当前窗口打开, _ blank在新窗口打开 |
7.3 链接分类
链接类别 | 举例 | 说明 |
---|---|---|
外部链接 | <a href="https://www.baidu.com">百度一下</a> | 外部的资源链接 |
内部链接 | <a href="index.html">内部资源</a> | 链接访问本地资源,网站内部页面之间的相互链接,直接链接内部名称即可。 |
空链接 | <a href="#">回到顶部</a> | 没有确定链接时,单击可以回到页面顶部 |
下载链接 | <a href="一个文件或压缩包地址">下载</a> | 下载地址对应的文件 |
网页元素链接 | 网页中的各种元素,如文本,音频,视频,表格,图像都可以添加超链接 | |
锚点链接 | 目标位置:<h3 id="two">HTML介绍</h3> 链接位置: <a href="#two">html介绍</a> | 通过点击,可以迅速定位到页面中的某个位置 |
8.HTML注释和特殊字符
8.1 HTML注释格式
<!-- 注释语句--> vscode快捷键:ctrl+/
/* 注释语句 */ 标签内的注释样式
8.2特殊字符
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
9. HTML标签与标签之间的关系
- 父子关系(嵌套关系)
<head>
<title></title>
</head>
- 兄弟关系(并列关系)
<head></head>
<body></body>