web前端开发技术笔记 1

.小杜同学.

已于 2023-03-16 16:00:06 修改

阅读量721

点赞数 2

文章标签：前端 html

于 2022-09-11 22:55:49 首次发布

本文链接：https://blog.csdn.net/qq_62198422/article/details/126807067

版权

一、web标准

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色大小等）
行为	JavaScript	网页模型的定义与页面交互

二、HTML

HTML：超文本标记语言
HTML的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述。
案例：文字变粗案例
<strong>文字加粗</strong>
HTML页面固定结构：网页中的固定结构是要通过特点的HTML标签进行描述的

<html>

        <head>

<title>网页的标题</title>

        </head>

        <body>

网页的主体内容

        </body>

</html>

快捷键：！回车或！TAB

HTML的注释：Ctrl + / <！-- -->

三、HTML标签的结构

标签由<、>、/英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名。
常见标签由两部分组成（双标签）：前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。

少数标签由一部分组成（单标签）：自成一体，无法包裹内容。
HTML标签之间的关系
父子关系（嵌套关系）：

兄弟关系（并列关系）：

四、HTML标签

（一）排版标签

1.1标题标签

1~6级标题，重要程度依次递减

代码：h系列标签

<h1>1级标题</h1>

<h2>2级标题</h2>

<h3>3级标题</h3>

<h4>4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

特点：文字都有加粗

文字都有变大，并且从h1-h6文字逐渐减小

独占一行

1.2.段落标签

代码：

<p>一段文字</p>

特点：段落之间存在间隙

独占一行

1.3.换行标签

代码：

<br>

特点：单标签

让文字强制换行

1.4.水平线标签

代码：

<hr>

特点：单标签

在页面中显示一条水平线

（二）文本格式化标签

2.1.文本格式化标签

代码：
标签说明标签说明
b 加粗 strong 加粗
u 下划线 ins 下划线
i 倾斜 em 倾斜
s 删除线 dei 删除线

（三）媒体标签

3.1.图片标签

代码：

<img src = "" alt = ""> 属性名 = 属性值

特点：单标签

img标签需要展示对应的效果，需要借助标签的属性进行设置

标签属性注意点：

标签的属性写在开始标签内部

标签上可以同时存在多个属性

属性之间以空格隔开

标签名与属性之间必须以空格隔开

属性之间没有顺序之分

3.1.1图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点：

当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）

<body>

<img src = "./1.jpg" alt = "" title = ""> ./当前的意思

</body>

3.1.2图片标签的alt属性

属性名：alt

属性值：替换文本

当图片加载失败时，才显示alt的文本

当图片加载成功时，不会显示alt的文本<body>

<body>

＜img src＝＂.／错的路径图片会加载失败”alt＝＊我是替换文本title="">

</body>

3.1.3图片标签的title属性

属性名：title

属性值：提示文本

当鼠标悬停时，才显示的文本

注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

<body>

＜img src＝＊．／1．jpg＊alt＝"我是普换文本"title＝"我是title的效果"

</body>

3.1.4图片标签的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片变形）

如果同时设置了width和height两个，若设置不当此时图片可能会变形

<body>

<img src＝＊．／1．jpg＊alt＝＂我是普换文本"title＝"我是title的效果" width ="200" height = "200">

</body>

3.2.路径标签

路径：绝对路径（了解）

相对路径（常用）

3.2.1绝对路径

指目标下的绝对位置，可直接达到目标位置，通常从盘符开的路径

盘符开头："F:\vscode\实验报告1\freljord\freljord_architecture_01.jpg"

完整的网络地址：

3.2.2相对路径

当前文件：当前的html网页

目标文件：要找的图片

相对路径：从当前文件开始出发找目标文件的过程

相对路径分类：

方法一：<img src = "目标图片.gif">

方法二：<img src = "./目标图片.gif">

格式：文件夹名字/目标文件夹名字

<img src = "文件夹/目标图片.gif">

上级目录

格式：../目标文件名字

<img src = "../目标图片.gif">

3.2.3音频标签

代码：<audio src = "./music.mp3"></audio>

常见属性

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

3. 2.4视频标签

代码：<video src = "./video.mp4" controls></video>

常见属性

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

注意点：视频标签目前支持三种格式：MP4、Webm、Ogg

（四）链接标签

4.1链接标签：超链接（a链接或锚链接）