Web前端 笔记（1-20）

已于 2022-10-23 09:02:41 修改
阅读量2.1k 收藏 3
点赞数 1
文章标签： 前端 javascript css
于 2022-10-21 13:36:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74246969/article/details/127412107
版权

Web前端 笔记（1-20）

一、HTML+CSS系列教程之导学

1、拨云见日

HTML
CSS
切图流程
PC企业站布局
PC游戏站布局

2、溯本求源

扩展HTML
扩展CSS
HTML5新语法
CSS3新语法
兼容与hack

3、风生水起

弹性布局
网格布局
移动端布局
响应式布局
Bootstrap

4、巧夺天工

预编译CSS
Postcss
CSS架构
高级功能
CSS与JS交互

二、什么是HTML和CSS

1、 HTML和CSS是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。

HTML：中文称为超文本标记语言，从语义上来说，它只是一种是一种标识性的语言，并不是一种编程语言。

CSS：Cascading Style Sheets，中文称为：层叠样式表或者级联样式表。它是一种负责页面样式的语言，也就是来修饰HTML（超文本标记语言）的。简单的来说也就是设定网页是以什么样子来表现的。HTML和它的区别在于，HTML只是用来编写网页的结构和内容，而它可以决定网页的表现样式。

2、 编程和网站的关系：

代码写完放入浏览器，浏览器对代码进行解析，然后呈现出网站（网站是浏览器解析后的结果，解析前就是代码）。

3、如何看到网站的源代码?

通过鼠标右键选择查看网页源代码。

4、一个网站是由N多个网页组成的。 每一个网页 .html文件（N多个html文件构成一个网站）

5、如何去写代码？写到哪里呢？

创建一个文本文档，通过记事本的方式

三、宇宙第一编辑器VS Code

1、VS Code，全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器。

2、主要功能：

该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。
Visual Studio Code 提供了丰富的快捷键，用户可通过快捷键[Ctrl]+[K]+[S]（按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift]+[Alt]+[F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl]+[K]+[F]；放大视图，[Ctrl]+[Shift]+[=]；缩小视图，[Ctrl]+[Shift]+[-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl]+[Shift]+[C]。
该编辑器支持多种语言和文件格式的编写，截止2019年9月，已经支持了如下37种语言或文件。

3、编辑器的基本使用：

设置：文件->首选项->设置（大小、是否换行 word wrap
创建文件、创建文件夹、删除和重命名
Ctrl+s：保存（修改代码后要及时保存，否则网页的显示内容不变）
Ctrl+a：全选
Ctrl+x：剪切
Ctrl+c：复制
Ctrl+v：粘贴
Ctrl+z：撤销
Ctrl+y：前进（撤销后再返回）
Shift+end 从头选中一行
Shift+home：从尾部选中一行
Shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab: 向后缩进
tab+shift: 向前缩进
多光标：alt+鼠标左键
ctrl+d:选择相同元素的下一个

四、chorme浏览器

1、chorme简介

Google Chrome是由Google开发的一款设计简单、高效的Web浏览工具。
Google Chrome的特点是简洁、快速。GoogleChrome支持多标签浏览，每个标签页面都在独立的“沙箱”内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭。此外，Google Chrome基于更强大的JavaScript V8引擎，这是当前Web浏览器所无法实现的。

2、使用chorme的原因：

chorme浏览器占据的市场的份额最大，超过50%

3、五大主流浏览器

1.IE浏览器，2.Chrome浏览（谷歌浏览器），3.FirFox（火狐浏览器）4.Safari浏览器（苹果浏览器），5.Opera浏览器（欧朋浏览器）。

4、五大主流浏览器的简介

IE浏览器：它是微软公司为对抗网景公司于1994年夏天开始研发的一款浏览器 ，但微软并没有时间从零开始，而是微软和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来的，最好的版本是IE6。目前微软已经放弃IE品牌，在Windows10上用Microsoft Edge取代了IE。并且停止对IE11以前版本的技术支持。
Chrome浏览器：是一款由Google公司开发的网页浏览器，最开始Chrome采用webkit作为浏览器内核，直到2013年，Google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。它的特点是简洁、快速。它有IOS,Android，Windows、Ponne等多个系统的浏览器。
FirFox浏览器：它由Mozilla基金会与数百个志愿者​所开发的，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟）再改为现在的名字Firefox。目前最新的正式版本为Firefox 53.0.2。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。火狐浏览器是可以自由定制的，一般电脑技术爱好者都喜欢用。它的插件又是世界上最丰富的，这点得到了网友公认。下载来的火狐一般是纯净版，功能比较少，要根据自己的喜好进行定制！最后，Firefox的问世加快了第二次浏览器大战的开始。也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
Safari浏览器：是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。第二次浏览器大战也是从苹果公司发布Safari浏览器开始的，2003年苹果公司在手机上发布Safari浏览器，苹果公司利用其得天独厚的手机市场份额使Safari浏览器成为世界主流浏览器，Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
Opera浏览器：Opera是挪威Opera Software ASA公司旗下的浏览器。于1995年发布，当时使用的是自己研发的Presto内核。因为Opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此Opera也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。Opera是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。它目前的最新版本是58.0(58.0.3135.53）。

五、深入了解网站开发

1、一个大型网站的开发，需要团队的配合，各个岗位不可或缺。

2、开发网站的职位很多

从技术角度上讲，分为UI设计师【设计稿】、 web前端开发工程师（H5开发）【设计稿—>代码、数据库里的数据—>显示到页面、HTML+CSS(HTML:结构 CSS：样式）】、web后端开发工程师【数据库中数据的存储、管理】

六、web前端三大核心技术

HTML：结构
CSS：样式
JavaScript：行为

七、HTML基本结构与属性

1、HTML

超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言。【超文本：文本内容+非文本内容（图片、视频、音频等） 标记：<单词> 语言：编程语言】。

2、标记

也叫做标签，写法分成两种：单标签<header> 双标签<header></header>

3、创建标签的快捷键

单词+tab键—><单词>（快捷键会自动识别单词是单标签还是双标签，单标签生成单标签单词，双标签生成双标签单词）。

4、标签是可以上下排列，也可以组合嵌套

例如：

<header>
    hello world
    <div>
         aaaa
         <div>bbbb</div>
         <div>bbbb</div>
         <div>bbbb</div>
    </div>
    <div>aaaa</div>
    <div>aaaa</div>
    <div>aaaa</div>
</header>

<footer>hi  HTML</footer>

5、HTML常见标签

标签元素周期表

6、标签的属性

来修饰标签的，设置当前标签的一些功能
属性的语法格式：<标签 属性=“值” 属性2=“值2”>

<header title="hello">hello world</header>
<footer title="hi">hi HTML</footer>

八、HTML初始代码

1、什么是初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码，要符合html文件的规范写法。
初始代码：

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

</body>
</html>

<!DOCTYPE html>   文档声明：告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码   
lang="en"表示是一个英文网站   lang="zh-Cn"表示一个中文网站
<head>                   头文件：网页上面部分的内容
<meta charset="UTF-8">   元信息：是编写网页中的一些赋值信息，防止出现乱码
<title>Document</title>  设置网页的标题

！+tab键：快速的创建html的初始代码

九、HTML中的注释

1、注释的概念

写法：<！–注释的内容–> 注释的代码，只有在文件中看得到，但是浏览器显示不出来。
意义：1、把暂时不用的代码注释起来，方便以后使用。
2、对开发人员进行提示。
快捷添加注释与删除注释：
1、ctrl+/
2、shift+alt+a

十、HTML语义化

1、概念

根据网页中内容的结构，选择适合的HTML标签进行编写。

2、好处

1、在没有CSS的情况下，页面也能呈现出很好的内容结构。
2、有利于SEO，让搜索引擎爬虫更好的理解网页。
3、方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4、便于团队开发与维护。

十一、标题与段落

标题—>双标签：<h1></h1> <h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落—>双标签：<p></p>

十二、文本修饰标签

<strong>：表示强调，会对文本进行加粗。双标签，<strong></strong>
<em>：表示强调，会对文本进行斜体
<strong>和<em>的区别：
1.写法和展示效果是有区别的，一个加粗，一个斜体；
2.strong的强调性更强，em的强调性稍弱。
<sub>、<sup>：下标文本、上标文本
例如：

<p>
   a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
<p>

H<sub>2</sub>O

<del>、<ins>：删除文本、插入文本（一般情况下，删除文本都是和插入文本配合使用的。
例如：

<p>
   促销：原价<del>300</del>，现价<ins>100</ins>
<p>

十三、图片标签与图片属性

图片 img—>单标签
src:引入图片的地址。
alt：当图片出现问题的时候，可以显示一段友好的提示文字。
title：提示信息
width、height：图片的大小
例如：

<img src="http://cms-bucket.ws.126.net/2019/04/17/563e134d865e481da9fa886236c4
114b.jpeg" alt="渝州会堂，位于重庆渝洲宾馆内。（央视记者张晓鹏拍摄）" title="这是一
张图片的提示信息" width="300" height="300">

十四、引入文件的地址路径

相对路径：
. 在路径中表示相对路径
例如：<!--<img src="./dog.jpg"alt="">--> <!--<img src="./img/animal/dog.jpg"alt="">-->

…在路径中表示上一级路径
例如：<img src="../img/animal/dog.jpg" alt="">

绝对路径：

`<img src="E:/img/animal/dog.jpg" alt="">  <img src="/img/animal/dog" alt="">

十五、跳转链接

a–>双标签 `

href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开 _biank
<base>标签
base->单标签：作用就是改变链接的默认行为的。
给图片附上链接，例如：
在当前页面进行跳转

<！--<a herf="http://www.baidu.com">访问百度</a>
<a herf="http://www.qfedu.com">
     <img src="./img/animal/dog.jpg" alt="">
</a>

都可在新页面内打开

<！--<a herf="http://www.baidu.com" target="_blank">访问百度</a>-->
<a herf="http://www.baidu.com.com">访问百度</a>
<a herf="http://www.baidu.com.com">访问百度</a>
<a herf="http://www.baidu.com.com">访问百度</a>

十六、跳转锚点

1、实现方式

1、#号 id属性

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#Javascript">Javascript</a>
    <h2  id="html"> HTML超文本标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2  id="Javascript">JS脚本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>

2、#号 name属性（注意name属性加给的是a标签）

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#Javascript">Javascript</a>

    <a name="html"></a>
    <h2> HTML超文本标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="Javascript"></a>
    <h2>JS脚本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>

十七、特殊符号

编写一些文本时，经常会遇输入法无法输入的字符，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
在这里插入图片描述1、&+字符
2、解决冲突 左右尖括号、添加多个空格的实现
3、&lt；&gt； 

十八、无序列表

符合嵌套的规范
<ul>、<li>：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的
type属性：改变前面标记的样式（一般都是用CSS去控制）
在这里插入图片描述

十九、有序列表

一般用的比较少，可以用无序列表来实现
<ol>、<li>：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）
在这里插入图片描述

二十、定义列表

<dl>：定义列表
<dt>:定义专业术语或名词
<dd>：对名词进行解释和描述

<dl>
    <dt>HTML</dt>
    <dd>超文本语言</dd>
    <dt>CSS</dt>
    <dd>层叠式样表</dd>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
<dl>
Yolanda H
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
新建文件夹 (3).zip_becamek2t_java_前端 H5_安卓 spring_安卓后端
09-24
名片定制功能。前端使用的为H5进行开发的安卓页面，后端使用的为Spring boot
前端学习笔记202305学习笔记第二十四天-创建文件目录
qq_41632427的博客
06-09 84
前端
从前台上传文件到指定路径
weixin_30325971的博客
11-02 560
针对springMVC上传文件 　　　　　　　　　String savePath = categoryService.getCategoryByCode("KY_ANNEX_FILE_PATH").getDescription();//保存的文件路径 File file = new File(savePath); ...
Vue项目创建
2301_76622053的博客
04-15 1871
这个插件需要写rem单位 但是美工给的设计稿是px单位 需要去计算、转换单位 这不利于编写和维护 所以需要一个插件 就是写的px单位 但是项目打包工程中 自动把px单位转为rem单位。之前在node中导入模块用的是require方法 现在在vue中导入模块用的是import方法。在promise对象里 成功是执行.then里的代码 失败是执行.catch里的代码。vant组件中默认的导航栏样式（下面）和项目中要的是不一样的 就要去修改样式。
web前端笔记
07-28
web前端笔记是在培训机构培训过程中整理的一些笔记，仅供参考
web前端作业1笔记笔记
最新发布
03-23
笔记
web前端开发笔记整理（一）
01-08
1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 在 HTML 中， 标签没有结束标签,永远位于 head 元素内部。 属性名不...
web前端基础学习笔记
01-08
web前端基础知识学习笔记，内含有HTML、CSS、JavaScript的基础知识的总结，可以帮助大家学习
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
生成前端文件目录
又菜又爱玩
01-19 1352
前端项目文件生成树结构目录 提示：记录一下前端生成树结构目录使用的插件 插件：mddir 全局安装插件 npm run install -g cmd中切换到项目文件下执行命令 mddir 会在文件里根目录下生成一个directoryList.md的文件，内容就是项目目录的树结构如图 文件内容如下 |-- undefined |-- .babelrc |-- .editorconfig |-- .eslintignore |-- .eslintrc.js |-
JS读取本地文件及目录的方法
热门推荐
zaifendou的专栏
07-14 10万+
<br />Javascript是网页制作中离不开的脚本语言，依靠它，一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并应用它的一些更高级<br />的功能吧？比如，对文件和文件夹进行读、写和删除，就象在VB、VC等高级语言中经常做的工作一样。怎么样，你是否需要了解这方面的知<br />识？那就请跟我来，本文将详细描述如何使用Javascript语言进行文件操作。<br />一、功能实现核心：FileSystemObject 对象<br />其实，要在Javascript中实现文件操作功能，主要就是依
html在本地新建文件夹,JS创建文件保存本地
weixin_29215391的博客
06-04 1218
1.插件 FileSaver.jsvar saveAs = saveAs || (function(view) {"use strict";// IE <10 is explicitly unsupportedif (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\....
Django自学之 使用python 通过前端页面上传文件到服务器指定路径
songlh1234的博客
08-14 1万+
1.创建工程temp，创建应用test01app，在应用test01app下创建一个文件存放目录temp_file。这里创建工程和应用就不再啰嗦新手第一天请看我的其他文章有从入门级到实例 2.编写文件上传页面upload.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="U...
File常用的方法操作、在磁盘上创建File、获取指定目录下的所有文件、File文件的重命名、将数据写入File文件
做笔记\记录遇到的程序bug
07-06 1097
File常用的方法操作、在磁盘上创建File、获取指定目录下的所有文件、File文件的重命名、将数据写入File文件
前端实现下载文件的方法汇总
永远热爱前端
03-01 4224
对于前端来说，下载文件是一个特别常见的需求。但是前端要根据后端返回的内容，来选择下载文件的具体方法。通常情况下，后端要么给你`返回文件的网络地址`，要么`返回文件流`。返回地址一般用在静态文件上，比如图片和音视频资源等；返回文件流一般用在动态文件上，前端传入参数，后端返回不同的excel统计表等。
【前端】选择本地文件夹路径/目录的方法以及相关代码
滚滚_1016的程序媛
12-08 2万+
1.关于选择本地文件夹路径，我试过原始的方法，获取到的是所有当前文件夹下的所有文件，而且如果当前文件夹下无内容，选择文件夹后是不触发事件的，就更拿不到路径了。所以得另辟蹊径。 以下是vue框架里使用的： <el-form ref="form" :model="form" label-width="10px" style="width: 100%"> <el-form-item label=""> <!-- webkitdirectory代表选择..
前端项目搭建部署全流程（三）：项目代码规范
huhaiqing106的博客
12-14 464
1.前言 继上一篇文章基本已经搭建完一个简单的React项目的，这边文章主要是讲项目的代码规范 2.使用eslint规范代码 2.1.安装依赖 yarn add eslint @types/eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev eslint eslint核心代码 @types/eslinteslint的类型定义 @typescript-eslint/parsereslint解析器，用于解析typesc
js保存文件到指定路径_使用 Node.js 写一个代码生成器
weixin_39980711的博客
12-03 959
使用 Node.js 写一个代码生成器背景第一次接触代码生成器用的是动软代码生成器，数据库设计好之后，一键生成后端 curd代码。之后也用过 CodeSmith , T4。目前市面上也有很多优秀的代码生成器，而且大部分都提供可视化界面操作。自己写一个的原因是因为要集成到自己写的一个小工具中，而且使用 Node.js 这种动态脚本语言进行编写更加灵活。原理代码生成器的原理就是：数据 + 模板 =&g...
java中file给文件重命名、剪切文件到指定位置、创建文件夹
weixin_43820434的博客
01-10 653
/** * 重命名 * @param newFileName 新文件名如有后缀名，带后缀名 例如"低价.js" * @param filepath 文件绝对路径 例如 "E:/测试/202103/新建文件夹 (2)/新建文件夹/你好.js" * @return 返回值为true则成功，false失败 */ public boolean rename(String newFileName,String filepath){ Fi...
web前端开发笔记vscode
10-26
1. 提供了一些常用的Web前端开发知识点和技巧的笔记； 2. 可以通过搜索功能快速查找需要的知识点； 3. 支持Markdown格式，可以方便地编辑和添加笔记；4. 可以自定义标签，方便分类管理笔记； 5. 支持导出和导入笔记...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值