第一周笔记

My_nerously

已于 2022-11-22 23:28:42 修改

阅读量1k

点赞数

文章标签：编辑器前端

于 2022-10-19 12:40:54 首次发布

本文链接：https://blog.csdn.net/My_nerously/article/details/127337029

版权

第一周笔记

一、第一集笔记
- 1、课程的划分及大概内容
- 2、如何学好Web前端？
二、第二集笔记
- 1、了解HTML、CSS
- 2、创建html文件
三、第三集笔记
- 1、宇宙第一编辑器VS Code
- 2、快捷键
四、第四集笔记
- 1、快捷键
- 2、编辑器功能
- 3、谷歌浏览器
五、第五集笔记
- 1、UI设计师
- 2、web前端开发工程师
- 3、web后端开发工程师
六、第六集笔记
- ①HTML
- ②CSS
- ③JavaScript
- ④分辨JS的方法
七、第七集笔记
- HTML
- 标签
- 属性
八、第八集笔记
- 初始代码
- - 接触初始代码
  - 了解初始代码
九、第九集笔记
- html注释
十、第十集笔记
- HTML语义化
- h5o - HTML5 Outliner
十一、第十一集笔记
- 标题与段落
- - 1、标题
  - 2、段落
十二、第十二集笔记
- 文本修饰标签
- - 1、强调
  - 2、文本
十三、第十三集笔记
- 图片标签与图片属性
- - 1、图片标签
  - 2、图片属性
十四、第十四集笔记
- 相对路径
- 绝对路径
十五、第十五集笔记
- a标签
- base标签
- 链接标签的重要属性
十六、第十六集笔记
- 锚点实现方法一
- 锚点实现方法二
十七、第十七集笔记
- 特殊符号
十八、第十八集笔记
- 无序列表
- type属性
十九、第十九集笔记
- 有序列表
二十、第二十集笔记
- 定义列表

一、第一集笔记

第一集主要是HTML+CSS的一个导学

1、课程的划分及大概内容

1.HTML+CSS系列教程①之拨云见日

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

2.HTML+CSS系列教程②之溯本求源

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

3.HTML+CSS系列教程③之风生水起

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

4.HTML+CSS系列教程④之巧夺天工

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

2、如何学好Web前端？

感兴趣
够努力

二、第二集笔记

第二集开展了HTML+CSS系列教程①之拨云见日的教学，并介绍了HTML与CSS，进行了一个简单的创建html文件的教学

1、了解HTML、CSS

他们分别为两种编程语言，需要配合使用，是网站开发的基础语言。
浏览器把代码解析后的样子就是网站。
一个网站由N多个网页组成，而每一个网页，是一个.html文件。

2、创建html文件

首先新建文本文档，然后将其文件拓展名改为html

三、第三集笔记

第二集介绍了宇宙第一编辑器VS Code，教学了一些扩展功能的安装，并进行了简单的功能与快捷键教学

1、宇宙第一编辑器VS Code

VS Code，全称为Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编译器下载地址

2、快捷键

ctrl + s：保存
ctrl + a：全选
ctrl + x：剪切
ctrl + c：复制
ctrl + v：粘贴
ctrl + z：撤销
ctrl + y：前进
shift + end：从头选中一行
shift + home：从尾部选中一行
shift + alt + ↓：快速复制一行
alt + ↑或↓：快速移动一行
tab：向后缩进
tab + shift：向前缩进

四、第四集笔记

第四集继续介绍了一些快捷键和编辑器的一些功能并介绍了谷歌浏览器

1、快捷键

alt + 鼠标左键：多光标
ctrl + d：选择相同元素的下一个
ctrl + 鼠标滚轮：缩放（来自于第六集）
编写html代码时写完单词按tab：用于将此单词对应的标签补齐（来自于第七集）

2、编辑器功能

搜索功能：用于搜索所有文件中的同一元素

3、谷歌浏览器

谷歌浏览器所占市场份额居世界首位

五、第五集笔记

第五集对网页开发进行了一个深入的介绍，介绍了相关职业及其主要工作

1、UI设计师

UI设计师的工作就是设计一个美观且方便的网站页面

2、web前端开发工程师

web前端开发工程师主要的工作就是将UI设计师给出的设计图用代码实现出来，并将数据库里的数据显示到页面里也会用到HTML和CSS
HTML：结构
CSS：样式

3、web后端开发工程师

web后端开发工程师需要将页面内要显示的数据进行一个收集以及管理，其主要职责是平台设计、接口设计和功能实现

六、第六集笔记

第六集简单的介绍了Web前端的三大核心技术HTML、CSS、JavaScript，并编写了一些示例代码

①HTML

HTML主要是对网页的结构进行编写

②CSS

CSS主要是对网页的样式进行编写

③JavaScript

JavaScript主要是对网页的交互进行编写

④分辨JS的方法

|打开浏览器→设置→高级→内容设置→JavaScript→已允许将其关闭→已屏蔽|完成这些操作以后，刷新页面(F5)与刷新前相对比，没有显示的地方或者点击无效的地方，就是JS实现的交互

七、第七集笔记

第七集详细的介绍了一下超文本标记语言（Hyper Text Markup Language）也就是HTML

HTML

超文本：文本内容 + 非文本内容（图片、视频、音频等）

属性

用来修饰标签，设置当前标签的一些功能书写格式为<标签属性1=“值1” 属性2=“值2” …>
示例：
<header title="hello">hello world</header>

八、第八集笔记

第八集介绍了html的初始代码

初始代码

每个html文件都需要添加初始代码，初始代码就是无论写什么样的网页，都必须有的代码
! + tab：快速创建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>

了解初始代码

<!DOCTYPE html>：文档声明，告诉浏览器这是一个html文件
<html lang="en">：html文件的最外层标签，包裹着所有html标签 lang="en"表示为一个英文网站
<head>：网页头部
<meta charset="utf-8">：元信息，是编写网页中的一些赋值信息 charset="utf-8"使用国际编码，目的是防止其他国家语言乱码
<title>Document</title>：设置网页的标题
<body>：显示网页内容的区域
<meta http-equiv="X-UA-Compatible" content="IE=edge">和<meta name="viewport" content="width=device-width, initial-scale=1.0">在本集没有做介绍

九、第九集笔记

第九集主要介绍了一下html注释

html注释

写法：
意义：
1、把暂时不需要的代码注释起来，方便以后使用
2、对开发人员进行提示
快捷操作：
1、ctrl + /
2、shift + alt + a（需要选中注释内容）

十、第十集笔记

第十集对HTML语义化进行了介绍，并对h5o - HTML5 Outliner的安装及使用进行了教学

HTML语义化

所谓HTML语义化是指根据网页中内容的结构，选择适合的HTML标签进行编写
好处：
1、在没有CSS的情况下，页面也能呈现出很好的内容结构
2、有利于SEO，让搜索引擎爬虫更好的理解网页
3、方便其他设备解析（如屏幕阅读器、盲人阅读器）
4、便于团队开发与维护

h5o - HTML5 Outliner

网页标题提取器：用于快速提取网站的所有可互动网址，需要将其拖入到书签当中，在其他网站内点击即可

十一、第十一集笔记

第十一集进行了html语义化中标题与段落的教学

标题与段落

1、标题

标题是一个双标签并且分为六个等级其格式为<h1></h1>到<h6></h6>数字越大标题大小更小
注意：在一个网页中，h1标题最重要，并且一个.html文件中之恶能出现一次h1标签

2、段落

段落也是一个双标签其格式为<p></p>可以重复且不限次数

十二、第十二集笔记

第十二集进行了html语义化中文本修饰标签的教学

文本修饰标签

1、强调

strong强调是一个双标签其格式为<strong></strong>主要是将其中的内容进行了一个加粗
em强调也是一个双标签其格式为<em></em>主要是将字体改为了斜体
两者相比strong的强调性更强

2、文本

①上标：<sup></sup>
例如要想在浏览器中显示出一个勾股定理公式可写为：<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
②下标：<sub></sub>
例如要想在浏览器中显示出一个水的化学式可写为：<p>H<sub>2</sub>O</p>
③删除：<del></del>
其主要作用是给其中的内容加上删除线
④插入：<ins></ins>
其主要作用是给其中的内容加上下划线
一般情况下，删除文本都是与插入文本配合使用的

十三、第十三集笔记

第十三集进行了html语义化中图片标签与图片属性的教学

图片标签与图片属性

1、图片标签

图片标签是一个单标签
基本格式：<img src="" alt="">

2、图片属性

src：引入图片地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width、height：设置图片的大小（如果不进行设置，那么在网速慢的时候图片加载的方式会影响用户体验）

十四、第十四集笔记

第十四集对引入文件的地址路径进行了教学

相对路径

.在路径中表示当前路径
…在路径中表示上一级路径

绝对路径

绝对路径指的就是一个具体的路径，如果在自己电脑上则写入自己电脑上面此文件的路径（磁盘可不写），如果是从其他网站取得的，则需要写入此文件的网址，值得注意的是反斜线对于电脑文件的路径是可以被识别的，但是对于网址，反斜线无法被识别

十五、第十五集笔记

第十五集对跳转链接进行了教学

a标签

<a>标签是一个双标签
作用：设置一个可跳转的链接
格式：<a href=""></a>

base标签

<base>标签是一个单标签
作用：改变链接的默认行为
格式：<base href="">这是一个默认格式，其中的href属性可以删掉

链接标签的重要属性

href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下为在当前页面打开（_self）若要在新窗口打开则写入_blank

十六、第十六集笔记

第十六集对跳转锚点进行了教学

锚点实现方法一

方法:在<a>标签的href属性里写入#+id属性的对应值
代码实现：

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

锚点实现方法二

方法:在<a>标签里面href属性里面写入name属性的对应值
注意：name属性要写入<a>标签里，而写入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>
<a name="CSS"></a>
<h2>CSS层叠样式表</h2>
<p>小段落</p>
<a name="JavaScript"></a>
<h2>JS脚本</h2>
<p>小段落</p>

十七、第十七集笔记

第十七集主要介绍了一些html中的一些特殊符号

特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如&reg(注册商标)、⑥(版权符)等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码
代码介绍：
空格符： 
版权©： ©
注册商标®： ®
小于号<： <
大于号>： >
和号&： &
人名币¥： ¥
摄氏度°： °

十八、第十八集笔记

第十八集对无序列表进行了介绍与教学

无序列表

<ul>标签：列表的最外层容器
<li>：列表项
注意：ul和li必须组合出现，他们之间是不能有其他标签的
正确写法：

<ul>
	<li>第一项</li>
</ul>

错误写法：

<ul>
	<p>
		<li>第一项</li>
	</p>
</ul>

type属性

改变前面标记的样式（一般都是用CSS去控制）

十九、第十九集笔记

第十九集对有序列表进行了介绍与教学

有序列表

<ol>标签：列表的最外层容器
<li>:列表项
注意：有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表
写法：

<ol>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
</ol>

二十、第二十集笔记

第二十集对定义列表进行了介绍与教学

定义列表

<dl>：定义列表
<dt>：定义专业术语或名词（列表名）
<dd>：对名词进行解释和描述（内容）
写法：

<dl>
	<dt>列表名1</dt>
	<dd>内容1</dd>
	<dt>列表名2</dt>
	<dd>内容2</dd>
	<dt>列表名3</dt>
	<dd>内容3</dd>
</dl>

My_nerously

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第一周笔记

一个小白的笔记
复制链接

扫一扫