Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

web前端开发技术笔记 1_web前端开发技术第三版笔记

作者：Gausst松鼠会 | 2024-05-01 06:02:07

踩

web前端开发技术第三版笔记

一、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链接或锚链接）

代码：<a href = "./目标网页.html">超链接</a>

特点：双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

注意：当不知道跳转链接是什么时,引号中输入＃号，＃表示通链接

href：跳转地址

4.2链接标签的target属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

代码：<a herf = "http://www.baidu.com/" target = "_blank">百度一下</a>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/517378

web前端开发技术 笔记 1_web前端开发技术第三版笔记

web前端开发技术笔记 1_web前端开发技术第三版笔记