前端笔记（黑马）

预备役码农第一年

已于 2023-09-18 16:24:11 修改

阅读量55

点赞数

文章标签：前端笔记

于 2023-09-02 13:31:52 首次发布

本文链接：https://blog.csdn.net/m0_74045803/article/details/131722296

版权

01网页制作注意事项

网页制作思路：从上到下，先整体在局部，逐步分析制作

分析内容-> 写代码->保存->刷新浏览器，看效果

03网页的相关概念

网页

什么是网页

网页是网站中的一页，通常是HTML格式的文件，要通过浏览器来阅读。

网页时构成网站的基本元素

图片、文字、声音、视频是网页的元素

什么是HTML

超文本标记语言，不是编程语言

超文本标记语言！！！

标记语言是一套标记标签

1.超越了文本限制
2.超级链接标签

网页的形成

网页总结

网页是图片、链接、文字、声音、视频等元素组成，其实是一个HTML文件

网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到网页

HTML：超文本标记语言，用来制作网页的一门语言，有标签组成的，比如图片标签，链接标签，视频标签等…

04常用浏览器以及内核

常用浏览器

火狐、谷歌、IE…

查看浏览器市场份额：http://tongji.baidu.com/data/browser

浏览器内核

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

web标准

web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要web标准

浏览器不同，显示页面或者排版就有些差异

web标准构成

结构、表现、行为

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

Web标准提出的最佳体验方案：结构、样式、行为相分离

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中

结构最重要！！！

06HTML标签导读

能够说出标签的书写注意规范
能够写出HTML骨架标签
能够写出超链接标签
能够写出图片标签并说出alt和titile的区别
能够说出相对路径的三种形式

HTML语法规范

基本语法概述

1.HTML标签是由尖括号包围的关键词，例如<html>
2.HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签，第二个是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如<br/>,我们称为单标签。

标签关系

包含关系和并列关系在这里插入图片描述

HTML基本结构标签

第一个HTML网页

每个网页都会后一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

HTML页面也称为HTML文档
在这里插入图片描述

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，我们称为根标签
`<head></head>`	文档的头部	注意在head标签中我们必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面基本内容基本都是放在body里面的

基本结构标签总结

在这里插入图片描述

开发工具

vscode快捷键：

CTRL+N：新建文件
CTRL+加号：视图放大
CTRL +减号：视图缩小
生成页面骨架结构：！
快速复制一行：shift+alt+下箭头/上箭头
选定多个相同的单词：CTRL+d
添加多个光标：ctrl+alt+上箭头/下箭头
全局替换某个单词：CTRL+H
快速定位到某一行：CTRL+g
选择某个区块：shift+alt
注释：CTRL+/

vscode常用插件：

1.Chinese（Simplified）汉化
2.Auto RenameTag
3.One Dark Pro 设置颜色主题
4.Open in browser 浏览器预览页面
5.Live Server 实时预览
6.easy less 自动把less文件转换成css文件
7.会了吧

vscode工具生成骨架标签新增代码

1.<!DOCTYPE>标签

文档类型声明标签：告诉浏览器使用哪种HTML版本来显示网页

声明位于文档最前面的位置，处于<html>标签之前

不是HTML标签，就是文档类型声明标签

2.lang语言

当前文档显示语言

en定义语言为英语
zh-CN定义语言为中文

3.charset字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签中，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
常用的值有：GB2312、BIG5、GBK、UTF-8（也被称为万国码，基本包含全世界所有国家需要用到的字符）

HTML常用标签

标签语义：标签的含义

标题标签

<h1>-<h6>标签语义：作为标题使用，并且依据重要性递减
特点：
1.加了标题的文字会变得加粗，字号也会依次变大
2.一个标题独占一行
在这里插入图片描述

段落和换行标签（重要）

<p>我是一个段落标签</p>
标签语义：可以把HTML文档分割为若干段落

特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有空隙

<br /> 换行标签

标签语义：强制换行

特点：
1.<br />是个单标签
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

水平线标签

<hr> 标签：分割不同内容的水平线
语义：主题的分割转换

特点：

单标签
在页面中显示一条水平线

文本格式化标签

为文字设置粗体，斜体，下划线等效果
标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	`<strong></strong>或者<b></b>`	更推荐使用`<strong>`标签加粗语义更加强烈
倾斜	`<em></em>或者<i><.i>`	更推荐使用`<em>`标签语义更加强烈
删除线	`<del></del>或者<s></s>`	更推荐使用`<del>`标签语义更加强烈
下划线	`<ins></ins>或者<u></u>`	更推荐使用`<ins>`标签语义更加强烈

重点加粗倾斜

`<div>`和`<span>`标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容。

<div>这是头部</div> 
<span>今日价格</span>

特点
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签和路径（重点）

1.图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL"/>

image “图像”

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

2.路径

目录文件夹：普通文件夹，只不过里面存放了我们做页面所需要的相关素材，比如HTML文件、图片等
根目录：打开目录文件夹的第一层就是根目录

1.相对路径
以引用文件所在位置为参考基础，而建立出的目录路径
简单说，图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如`<img src="baidu.gif">`
下一级路径	/	图像文件位于HTML文件下一级如`<img src="image/baidu.gif">`
上一级路径	…/	图像文件位于HTML文件上一级如`<img src="../baidu.gif">`

2.绝对路径
是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

可移植性不好，通常不推荐。

音频标签

<audio src=" "><audio/> 在页面中插入音频

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

注意：

目前支持三种格式：MP3、Mav、Ogg（flac也可以）

视频标签

<video src="./video.mp4"></video> 在网页中插入视频

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

目前支持三种格式：MP4，WebM，Ogg

超链接标签（重点）

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1.超链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 <a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，他就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值(当前窗口打开页面)，_blank（新窗口中打开页面）