千锋week.1

YOU WANG TY

已于 2022-10-21 20:16:02 修改

阅读量1.7k

点赞数

文章标签：前端 javascript 开发语言

于 2022-10-21 19:53:13 首次发布

本文链接：https://blog.csdn.net/weixin_73247622/article/details/127427862

版权

千锋week.1

*一.*HTML+CSS导学**
二.***拨开云雾见天日，守得云开见月明***
*三.宇宙第一编译器VS Code*
*四.接上小扩展*
*五*.*深入了解网站开发*
*六.Web前端的三大核心技术*
*七.HTML基本结构与属性*
- - 1.HTML
  - 2.标签的属性
*八.HTML的初始代码*
*九.HTML的注释：注释的代码只在文件中看得见，但是浏览器显示不出来<!--注释的内容--！>*
*十.HTML的语义化*
*十一.标题与段落*
- ①.h标签
- ②.p标签
*十二.文本修饰标签*
- - 1.`,,,,,,`:对文本进行加粗。
  - 2.`,,,,,,`，强调，斜体
  - 3.`_,,,,,,`,`^,,,,,,`,下标文本，上标文本
  - 4`.~~,,,,,~~`,`,,,,,`,删除文本，插入文本：
*十三.图片标签与图片属性.*
十四.引入文件的地址路径
- 1.相对路径
- 2.绝对路径
*十五.跳转链接*
- ①.`<a>`标签，
*十六.跳转锚点*
- -----（页内跳转），
- - 实现方法一
  - 实现方法二
*十七.特殊符号*
- - 概念
  - 格式
*十八.无序列表*
- - 采用的标签
  - type属性
*十九.有序列表*
- `<ol>,<li>`,
- 注意
*二十.定义列表*
- `<dl>`:定义列表
- `<dt>`:定义专业术语或名词
- `<dd>`:对名词进行解释和表述

一.HTML+CSS导学

1.拨云见日

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

2.溯本求源

扩展HTML,扩展CSS，HTML5新语法，CSS3新语法，兼容性与HACK

3.风生水起

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

4.巧夺天工

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

努力学好web前端！！

二.拨开云雾见天日，守得云开见月明

1.HTML与CSS是两种编程语言，一般情况要配合使用，作为网站开发的基础语言。
2.浏览器把代码解析之后，生成我们所看见的网站，网站由n个网页组成。鼠标右键可以查看网页源代码，每一个网页都是一个.html的文件。
3.可以在文件夹中新建文档，更改文档格式为.html，右键使用多种编辑器进行编辑（例如记事本，等等更高级的编辑器）。

三.宇宙第一编译器VS Code

1.使用高级编辑器

提高效率。

2.VS Code

全称Visual Studio Code，是一个来自微软，开源的（免费，自由），基于Electron的轻量代码编辑器。（谁用谁知道）

3.下载

https://code.visualstudio.com/

4.安装插件

左侧商店搜索，点击安装即可。本节需要安装：open in browser，view in browser，作用是可以提供在浏览器打开自己编辑代码的渠道。

5.基本使用方法

：创建文件夹，创建文件，重命名，删除，搜索以及快捷键，如下
ctrl+s 保存
ctrl+a 全选
ctrl+x 剪切
ctrl+c 复制
ctrl+v 粘贴
shift+end 从头选中第一行
shift+home 从尾部选中一行
shift+alt+↓ 快速复制一行
alt+↑↓ 快速移动一行
tab 向后缩进
tab+shift 向前缩进

四.接上小扩展

1.alt+鼠标左键多光标

2.ctrl+d 选择相同元素的下一个

3.Chrome浏览器（谷歌）

https://www.google.cn/intl/zh·CN/chrome/

4.市场五大浏览器：

1、IE浏览器
IE浏览器是微软公司旗下的浏览器，是目国内用户量最多的浏览器。现今，微软以IE浏览器和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE浏览器。

浏览器内核（渲染引擎）：负责读取网页内容，整理资讯，计算网页的显示方式并显示页面

内核：Trident

2、Firefox浏览器
Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。

内核：Gecko（火狐浏览器内核）

3、Chrome浏览器
Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。

优点：

不易崩溃
速度快
几乎隐身
搜索简单
标签灵活
更加安全
内核：Blink（Blink其实是Webkit 的分支）

4、Safari浏览器
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。

苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。限于macOS的使用不广泛和Safari浏览器曾经只是macOS的专属浏览器，这个内核本身应该说市场范围并不大；

内核：Webkit（苹果浏览器内核）

5、Opera浏览器
Opera是挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。

主要特点：

Opera支持多种操作系统，如Windows、Linux、Mac、FreeBSD、Solaris、BeOS、OS/2、QNX等
Opera还提供很多方便的特性，包括网络同步，Wand密码管理、会话管理、鼠标手势、键盘快捷键、内置搜索引擎、智能弹出式广告拦截、网址的过滤、浏览器识别伪装和超过400种，可以方便下载更换的皮肤，界面也可以在定制模式下通过拖放随意更改。
Opera支持包括SSL2/3以及TLS在内的各种安全协议，支持256位加密，可以抵御恶意代码攻击、钓鱼攻击等网络攻击。而其网页渲染速度也可能是当今速度最快的。它支持W3C标准，此外它还可以作者模式和用户模式让有经验的使用者控制浏览网页的结构和字体等。

五.深入了解网站开发

1.大网站需要团队配合，各个岗位不可或缺

2.UI设计师（设计稿），

3.web前端开发工程师（HS开发，设计稿→代码，数据库里→显示到页面），

4.web后端开发工程师。

六.Web前端的三大核心技术

1.HTML：结构（主要内容）

2.CSS：样式（美化，显示）

3.JavaScript:：行为（与用户交互）

七.HTML基本结构与属性

1.HTML

（Hyper Text Markup。Language，超文本标记语言），标准通用标记语言下的一个应用，是网页制作必备的编程语言。
一.超文本：指的是文本内容与非文本内容（音频，视频，图片，等等）
二.标记：<单词>。标记也叫作标签，分两种，单标签：<header>, 双标签：<header></header>.创建标签的快捷键：单词+tab→<单词>。
三：语言：编程语言

2.标签的属性

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

八.HTML的初始代码

1.每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的。
2.！+ 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标签代码
上一行代码其中的lang="en"代表此为英文网站（语言=英文）
<head>     （头部）
    <meta charset="UTF-8">   元信息：是编写网页中的一些辅助信息
    （此句的信息是，这份代码可以识别所有国家的语言，以至于不出现乱码情况）
    <title>Document</title>    内部是网页的标题
</head>    （头部）
<body>     （身体）
    
</body>    （身体）
</html>

九.HTML的注释：注释的代码只在文件中看得见，但是浏览器显示不出来<!–注释的内容–！>

1.意义一

：把暂时不用的代码注释起来，方便以后使用。

2.意义二

：对开发人员进行提示作用。

3.快捷添加、删除注释

：
一.ctrl+/ 添加半边<!–或者–！>
二.shift+alt+a 添加整体<!–，，，–！>

十.HTML的语义化

概念

：根据网页中内容的结构，选择合适的HTML标签进行编写。（每个标签都有自己的职责）

例如

：有标题标签，有列表标签，有段落标签，

好处

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

十一.标题与段落

h标签实现标题，p标签实现段落

①.h标签

：此标题与上面的标题不同。上面的标签是：顶部总标题
此时我们的标签是：页面内容中的小标题
------标签格式为双标签：<h1></h1>，，，，<h6></h6>，总共只分六个等级，如图：在这里插入图片描述
！注意：h1标签为一个网页中最重要的标题，并且在一个网页之中有且仅有一个h1标签能存在！

②.p标签

—段落标签
与以上一样，也是个双标签：<p>,,,</p>
在这里插入图片描述

十二.文本修饰标签

1.`<strong>,,,,,,</strong>`:对文本进行加粗。

即：在这里插入图片描述

2.`<em>,,,,,,</em>`，强调，斜体

在这里插入图片描述

3.`<sub>,,,,,,</sub>`,`<sup>,,,,,,</sup>`,下标文本，上标文本

在这里插入图片描述

4`.<del>,,,,,</del>`,`<ins>,,,,,</ins>`,删除文本，插入文本：

在这里插入图片描述

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

.图片标签：<img>总格式：<img src=" alt">
在这里插入图片描述
一.src：引入图片地址,即在浏览器中打开图片后顶部搜索框中出现的网址，拷贝进入src之后的双引号之中
二.alt：当图片出现问题时（即src之中出现了错误，没有出现正确的链接），会出现一串友好的提示文字。当图片可以正常显示时，此作用自动隐藏。
三.title：单标签，提示信息，将鼠标移动到图片上会显示的。即title=",与以上src，alt一样用法。
四.width，height：控制图片的模样大小

在这里插入图片描述
（以上都在body之内）

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

1.相对路径

：“.”在路径中表示当前路径，“…”在路径中表示上一级路径

注意：/后必须是与此代码文件同级别的文件或者文件夹。

2.绝对路径

：不会因为文件与身边文件的关系而改变。

十五.跳转链接

①.`<a>`标签，

为双标签，写法：<a>,,,,,</a>。a标签的两个重要属性：href，target。

1.href属性

：链接的地址。例如：<a href="http://baidu.com>访问百度</a>,直接跳转到百度界面。此双标签中间为入口，href引导了终点。意思是：如果标签中间为一张图片，运行第一步将出现一张图片，点击图片将进入href引导的跳转链接（！！注意，此时是直接跳转，并不会生成新的页面，意味着图片所在网页会被替换成跳转后的网页）。