HTML与CSS学习第1天

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 结构图

HTML结构图

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>

posted @ 2022-02-07 11:19 凌歆阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML与CSS学习第2天

· HTML与CSS学习第3天

· 第一天总结

· HTML+CSS学习01

· html和css

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

	<!-- 注释语句--> vscode快捷键：ctrl+/
	/* 注释语句 */ 标签内的注释样式