前端学习笔记

阿胶丁

已于 2022-04-11 21:34:13 修改

阅读量885

点赞数

文章标签： javascript css css3 html

于 2022-04-07 21:05:07 首次发布

本文链接：https://blog.csdn.net/weixin_53407594/article/details/124026542

版权

本文详细介绍了前端开发的基础知识，包括HTML的结构、CSS的引入方式和选择器、以及网页中的各种标签使用，如图片、音频、视频、链接和表格等。同时强调了Web标准的重要性，推荐使用Google浏览器，并讲解了浏览器渲染引擎对代码解析的影响。

摘要由CSDN通过智能技术生成

DAY1学习笔记——前端介绍

认识网页

网页由哪些部分构成

文字、图片、音频、视频、超链接

我们看到的网页背后本质是什么

前端程序员写的代码

前端的代码是通过什么软件转换成用户眼中的页面的？

通过浏览器转化（解析和渲染）成用户看到的网页

五大浏览器

太熟悉了，这里就不多介绍了。。。

渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

浏览器出品公司不同，内在的渲染引擎也是不同的

注意点：

渲染引擎不同导致解析相同代码时的速度性能效果也不同的

前端工程师日常推荐使用哪一个浏览器

------Google

web标准

为什么需要了解web标准

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

web标准要求页面实现：结构，表现，行为三层分离

结构：HTML

表现：CSS

行为：JavaScript

Day2–HTML

HTML骨架

<html>

	<head>
	    <title>标题</title>
	</head>
	<body>
        网页的主体
	</body>

</html>

选取开发工具

越快越好

实际开发中，注重开发的效率和便捷性

Alt+B快捷键（打开浏览器）

语法规范

注释

添加注释方便下一次看到想起功能和含义

ctrl+/注释快捷键

排版标签

段落标签

独占一行

段落之间存在缝隙

标签：

换行标签

标签：

水平分割线

标签：

文本格式化标签

标签（语义）	说明
b（strong）	加粗
u（ins）	下划线
i（em）	倾斜
s（del）	删除线

语义：突出重要性的强调语境

注意：效果相同

媒体标签

图片标签

在网页中显示图片

标签：<img src="” alt=“”/>

标签属性属性值

alt 属性

属性值：替换文本

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

title属性

鼠标悬停显示title文本

width和height

如果只设置其中一个，会进行等比例缩放

Day3——标签

路径

绝对路径

通常从盘符开始的路径

相对路径

从当前文件开始出发找目标文件的过程

同级目录

当前文件和目标文件在同一目录中

写法：一.img src=“目标图片.gif”

二 ./目标图片.gif

下级目录

目标文件在下级目录中

上级目录

目标文件在上级目录

代码步骤：

1.先出当前文件夹，到上一级目录**…/**

音频标签

代码：

<audio src="./music.mp3" controls></audio>

常见属性：

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

注意点：

音频标签目前支持三种格式：MP3 WAV Ogg

视频标签

代码:

<video src="./video.mp4" controls autoplay muted></video>

常见属性：

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

注意点:

视频标签目前支持三种格式：MP4 WebM Ogg

链接标签

代码：

<a href="./目标网页.html" target="_blank">超链接</a>
<a href="#">空链接</a>

target属性

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

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

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

Day4——标签

列表标签

列表的应用场景

场景：在网页中按照行展示关联性内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐展示内容
种类：无序列表，有序列表，自定义列表

无序列表

标签组成

标签名	说明
ul	表示无序列表的整体，用于包裹标签
li	便是无序列表的每一项，用于包含每一行的内容

有序列表

标签组成

标签名	说明
ol	表示有序列表的整体，用于包裹标签
li	便是有序列表的每一项，用于包含每一行的内容

规则：ol内只能放li

自定义列表

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

注意点：

dd前会默认显示缩进效果
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容

表格标签

表格的基本标签

标签名	说明
table	表格整体，包裹多个tr
tr	表格的行，包裹td
td	表格单元格，包裹内容

注意点：

标签嵌套关系table>tr>td

表格的相关属性

属性	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：

实际开发是推荐使用css设置

表格标题和表头单元格标签

其他标签：

标签名	名称	说明
caption	表格大标签	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

caption标签书写在table标签内部
th表现书写在tr标签内部(用于替换td标签)

合并单元格

明确合并那几个单元格

跨行合并(垂直合并)

跨列合并(水平合并)

通过左上原则，确定保留谁删除谁

上下合并→只保留最上的，删除其他的
左右合并→只保留最左的，删除其他的

属性

属性名	属性值	说明
rowspan	合并单元格个数	跨行合并，将多行单元格垂直合并
colspan	合并单元格个数	跨列合并，将多列单元格水平合并

注意点：

只有同一结构标签中的单元格才能合并，不能跨结构标签合并(不能跨：thead、tbody、tfoot)

表单标签

input标签

可以通过typr属性值的不同，展示不同效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OdJDxRM-1649683974880)(C:\Users\JC\AppData\Roaming\Typora\typora-user-images\image-20220410132747096.png)]

占位符：placehoder

文件选择

在文件选择的表单控件

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

button按钮标签

type属性值（同input按钮系列）

注意点：

谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容:文字，图片等

select下拉菜单标签

提供对各选择项的下拉菜单表单控件

标签组成

select标签：下拉菜单整体
option标签：下拉菜单每一项

常见属性：

selected：下拉菜单的默认选中

textarea文本域标签

常见属性：

cols：规定了文本与内可见宽度
rows：规定文本域内可见行数

label标签

作用：常用于绑定内容与表单标签的关系

使用方法：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法②：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

字符实体

只需记住空格**&nbsp；**

Day5——CSS

介绍

CSS:层叠样式表

CSS作用：让网页变得更漂亮

写在哪里：

css卸载style标签中，style标签一般卸载head里

CSS引入方式

内嵌式

CSS写在style标签中

外联式

需要通过link标签在网页中引入

行内式

写在标签的style属性中

CSS常见引入方式特点区别

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的CSS文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的stytle属性中	当前标签	配合js使用