前端学习笔记-1-基础认知

最新推荐文章于 2024-09-21 14:09:22 发布

H051015

最新推荐文章于 2024-09-21 14:09:22 发布

阅读量147

点赞数

分类专栏：前端笔记文章标签： html5 css3 Powered by 金山文档

本文链接：https://blog.csdn.net/H051015/article/details/128732160

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了网页的基本构成，包括文字、图片、音频、视频和超链接，以及前端代码如何通过浏览器的渲染引擎转化为网页。重点讲解了HTML的结构，如标题、段落、文本格式化标签，并详细阐述了图片、音频和视频标签的使用，以及链接标签的属性。推荐使用VScode作为开发工具，并强调了代码规范和路径的相对与绝对路径概念。

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

1.1 基础概念（了解）

网页组成部分：文字、图片、音频、视频、超链接

前端代码通过浏览器转化成网页

渲染引擎（了解即可）

定义：浏览器中专门对代码进行解析渲染的部分

特点：不同引擎解析相同代码时的速度、性能、效果不同

Web标准

构成：html（页面元素和内容）、 CSS（外观和页面样式）、 JavaScript（负责交互效果）

1.2 HTML（超文本标记语言）

网页体验——字体加粗

创建文档进行网页代码编写（.html文件）

在文档中直接进行编写即可

<strong>字体加粗</strong>  <!-- 加粗标签 -->

骨架结构

<html>
  <head>
    <title>网页标题</title>
  <head>
  <body>
     网页主体内容
  </body>
</html>

开发工具

VS code(强推)等

VS code 的快速编程方式（需要安装插件）

!   <!--新建文件（.html）后在首行输入 ！ （英文状态下）然后回车可得下文-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

只需知道body标签怎么用即可，不用记head标签中的单词

语法规范

注释

VS code中 Ctrl+/

直接输入

标签构成

双标签：有文字的 < >文字</ >

单标签：无文字，只由一部分组成 e.g. <br>

标签名：<>中的字母

标签之间关系：嵌套、并列

1.3标签学习

1.3.1 排版标签

标题标签——h系列标签

<!--Ctrl+D 按两次可以选中所有该字母，利于改变标题级数-->
<h1>1级标题</h1>
......
<h6>6级标题</h6>

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

特点：文字都会变大，变大程度递减。文字都有加粗。独占一行。

段落标签——p标签

<p>一段文字</p>

【补充】换行：VS code 查看--开启自动换行或 <br>

特点：段落之间存在间隙。独占一行。

换行标签——<br>

水平分割线——<hr>

<h1>标题</h1>
<hr>
<p>段落</p>

在标签之间用单独一行写

1.3.2 文本格式化标签

都为双标签

尽量用右侧编写，有利于他人查看代码

【扩展】标签语义化：不同标签有着不同的意思

1.3.3 媒体标签

图片标签——<img>

特点：标签可以同时存在多个属性。属性之间以空格隔开。属性无顺序之分。

src属性

找到图片位置

<!--src相当于找图片位置-->
<img src="cat.gif">
<!-- ./ 是指在当前文件夹内找到该动图-->
<img src="./cat.gif">

alt属性

替换文本：当图片显示失败时，才显示alt的文本

<img src="cat.gif" alt="加载不出">

title属性

鼠标悬停时显示的文字。

也可用于其他标签，不仅仅是图片。

width、height属性

如果只设置其中一个，另一个没设置的会自动等比例缩放（图片不会变形）

若同时设置两个，设置不当会变形

路径

绝对路径（了解）

可直接到达目标位置，通常从盘符开始

可能导致他人无法使用。如：盘符开头D但是你的电脑上只有C盘

相对路径（常用）

从当前文件开始找目标文件的过程=将源码与目标文件放在同一文件夹

分类：

../往上返一级

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

下级目录：存放源码的文件与存放目标文件的文件夹同级

上一级文件名/目标文件

音频标签——<audio>

代码：

常用属性：

播放控件样式：

手动控制播放与暂停

音频播放方式目前支持：MP3、wav、ogg

视频标签——<video>

代码：

常见属性：与音频标签类似 autoplay（谷歌）浏览器中必须需要配合muted实现静音播放

链接标签——<a></a>

要写完整网址地址

转到文件用路径

不知道链接跳到哪是写 #，代表空的

P.S. 多写代码练习！12月份就想入门了，结果现在才开始（悲）