07相关软件的安装以及HTML介绍

一、内容回顾

这个软件从1.0就开始收费了，这里使用这个版本

这里将侧边栏打开

这个typora软件支持Markdown的格式，markdown格式是我们经常会使用到的笔记格式的形式，后缀名是md
这种语法在整理笔记是比较方便的
1、标题
加上#号表示是标题，这个和H1，H2...标签类似
加上不同的井号个数表示不同级别的标题
# 一级标题
## 二级标题
。。。
2、回顾
## 一、邂逅前端开发
### 1.1 软件开发，软件开发体系
### 1.2 完善的应用程序包括哪些？
* 服务器开发
* ios开发，安卓开发
* Web开发
* 桌面开发
### 1.3 前端开发的内容
* 前端开发的任务
WEB开发，小程序开发
移动端，桌面端（electron，vscode），服务器的开发（node）
* 前端开发的路线
### 1.4 学习方法和学习建议
学习任何新的东西的时候最好了解它的历史，局限性和本质
将知识进行分类：
  常用的知识：必须非常熟练
  不常用的知识：知道有他，知道在什么地方查找
---------------------------------------------------
这里写一个*然后空格就一个列表效果
或者使用快捷方式Ctrl + 数字表示几级标题
## 二、邂逅Web开发
### 2.1 电脑的配置和推荐的软件
### 2.2 网站和网页的关系
### 2.3 网页的显示过程
* 用户的角度
* 前端工程师的角度
* 服务器是什么？
### 2.4 网页的组成部分
* HTML： 网页的结构
* CSS： 网页的样式，美化的工作
* JavaScript： 网页的交互，网页里面的灵魂

二、浏览器的作用

1、浏览器
我们已经知道了网页的组成部分是：HTML  CSS  JS
这些枯燥的代码是通过浏览器来渲染成多彩的网页的。
各种浏览器都有一个最核心的部分，就是浏览器的内核。
2、浏览器内核
浏览器最核心的部分是渲染引擎（Rendering Engine），一般称为“浏览器内核”
负责解析网页语法，并且渲染（显示）网页
常见的浏览器

3、不同浏览器内核
我们使用的浏览器是谷歌浏览器，不同的浏览器使用的内核是有一些差别的，
常见的浏览器内核也是有划分的：
但是作为用户的角度是不管这些内核的，所以英文的翻译有些奇怪
Trident三叉戟：IE，360安全浏览器，搜狗高速浏览器，百度浏览器，UC浏览器---------------最新的Edge浏览器使用的也是谷歌开源的内核
Gecko壁虎：Mozilla Firefox; 现在火狐的市场占有率比较低
Presto急板乐曲->Blink眨眼，Opera
Webkit：Safari，360极速浏览器，搜狗高速浏览器，移动端浏览器（安卓，IOS）
Webkit->Blink: Google Chrome，Edge，这个Blink内核的速度是非常快，执行JS代码也是非常快的

这两个内核是使用比较广泛的
不同的浏览器内核有不同的解析和渲染的规则，所以同一个网页在不同的内核浏览器中的渲染效果是可能不同的，就会涉及到一个概念---浏览器适配，
目前有很多的工具能够帮助到适配，现在学习阶段不用考虑到不同的浏览器显示什么效果，开始不同添加适配的效果，之后讲到一些适配工具的时候
再来讲解这些适配的东西。

三、我的第一个网页

我们需要透过第一个网页知道html代码是什么，然后需要使用到一个非常重要的开发工具---vscode，并且安装里面的插件，
然后第四个是最核心要讲解的东西，就是HTML的元素，然后是讲解注释
1、开始开发第一个网页
使用默认安装的记事本开发，
首先来到任何的一个文件夹中创建一个记事本，
写入HelloWorld进行保存
保存完成之后这个是一个普通的文本想要变成网页需要修改后缀名为html或者是htm
目前电脑默认浏览器是Edge浏览器，图片变成了浏览器的图标，之后使用Chrome开发
需要将打开方式永久设置成Chrome
下次想要修改这个网页需要使用记事本打开

直接在记事本中写文字内容是无法显示具体的格式的，比如标题，段落
我们需要明确的告诉浏览器具体这些文本如何显示
我们需要通过一些“标记”的方式，如果想要显示一个大标题需要有一个
<h1>内容</h1>，将内容放到这里面，/是让浏览器知道h1的结束位置

如果是段落就添加一个<p></p>

这些标记就是HTML元素

2、什么是HTML
超文本标记语言（HyperText Markup Language，简称HTML）是一种创建网页的标记语言
HTML元素是构建网站的基石
什么是标记语言（markup language）？
  由无数个标记（标签，tag）组成；
  是对某些内容进行特殊的标记，以供其他解释器识别处理；
  比如使用<h2></h2>标记的文本会被识别成”标记“进行加粗，文字放大显示；
  由标签和内容组成的部分称为元素Element；
HTML不是编程语言
3、什么是超文本HyperText？
  不仅仅可以插入普通文本，还可以插入图片，音频，视频等等内容---------比单纯的文本更加的丰富
  还可以表示超链接（Hyperlink），从一个网页跳转到另外一个网页-----------超链接
4、html文件的特点
HTML文件的扩展名是html，或者是htm
因为历史遗留的问题，win95，win98系统的文件拓展名不能超过3个字符，所以使用.htm
现在同一使用.html
5、HTML的结构

本身我们编写的代码是没有这些内容的，这些内容是浏览器自动添加的内容
最外面需要有一个HTML元素，然后是一个head，然后是一个body
标准的HTML文件都是这样的结构，这样的结构都是要具备的，我们需要添加这些结构
我们在页面上看到的内容都是放到body中的

head里面一般放置一些元数据（metadata）描述我们数据的数据称为元数据
title就是一种元数据，也是一个元素

这就是网页的最基本的一个结构

按照这样的方式进行开发效率就会非常低下，并且阅读性也会比较差。

四、开发工具选择

记事本创建和管理文件的时候非常不方便，没有将对应的关键字的东西显示加粗出来，颜色完全一样是没有办法区分的，并且没有代码的提示等等效率是非常低的。
记事本可以开发一个网页，但是有很多的缺点
专业的前端开发工具：WebStorm，Sublime Text，Visual Studio Code，Atom，HBuilder，IntelliJ IDEA，Dreamweaver
具有智能提示，高亮显示，语法检测，集成环境，开发效率高
目前使用最多的是：
Webstorm，优点是集成开发的工具，包罗万象，缺点是太重了（也就是占用系统资源比较多）并且还收费---------------IDE
VSCode，推荐使用这个，这个是微软开源的，优点轻，免费，缺点是需要安装各种插件来辅助开发---------------------编辑器
微软收购了github之后建立私有的仓库也是免费的，还开源了一个vscode，等等微软对开源做的贡献还是比较大的。

这个地方可以设置默认的浏览器，将谷歌浏览器设置成为我们的默认浏览器
或者直接在谷歌浏览器中找到

并且推荐的搜索引擎是谷歌搜索引擎，或者是bing.com这个，相对于百度来说更符合你的需求
https://cn.bing.com/

1、VSCode如何安装呢！？
VSCode编辑器的下载和安装：https://code.visualstudio.com/

Extensions是扩展的意思，有很多的推荐有很多的推荐需要安装的时候再进行安装

2、其他需要安装的插件
颜色主题atom one dark
文件夹图标VSCode Great lcons
再浏览器中打开网页：open in browser, Live Sever
自动重命名标签：auto rename tag

创建一个文件夹专门存放我们每天的代码
我感觉我比较喜欢这个主题，按下Ctrl K 然后 Ctrl T可以快速进入切换主题界面

在编写代码的时候会创建各种文件，各种文件在vscode中都会有一个默认的图标，这里可以下载安装一个其他样式的图标

额，我感觉没啥。
我们现在打开我们编写好的网页的方式是需要在资源管理器中打开，然后双击我们编写好的html网页文件才能够打开，这样
效率太低，最好是通过vscode直接打开，需要安装open in browser


这样就能够使用我们指定的默认浏览器打开这个网页，但是这样我们再原来这个网页的基础上进行改写的时候还需要刷新我们的网页才行，
能不能有一个插件同步我们的更改就不用刷新页面了呢？

本地启动一个服务器，自动检测我们代码的变化，自动的刷新我们的浏览器页面

通过live server打开，我们编写代码之后只需要Ctrl + s保存这个文件就能够同步到刚刚打开的浏览器页面中了

可以看到这里是通过ip地址和端口打开的，找到这个服务的对应资源，也就是编写的文件

之前的是通过这个file协议打开的，所以不能同步
另外，当我们修改一个标签的时候，比如想要将一个写好的p标签修改成h1标签，因为标签有的是一对的，修改了前面一个后面的一个也需要更改
需要安装一个插件来同时更改

除了插件，另外还会有一些VSCode的一个配置
Auto Save自动保存
Font Size修改代码字体大小
Word Wrap代码自动换行
Render Whitespace空格的渲染方式
Tab Size代码缩进
  推荐使用两个空格，公司开发项目的时候基本上都是使用两个空格

每次更改完成代码的时候都需要手动保存



这个是编辑区，也就是代码区的一个文字的大小，推荐更改为16
当一行的文字非常多的时候我们需要点击下面的滑块滑动，这里有一个自动换行就可以解决这个问题

我比较喜欢设置成这种

复制粘贴过来的时候就是这样了

目前空格是看不到有多少的


现在的代码没有什么缩进，有了缩进就能很轻松的看到具体的代码结构，结构就会非常清洗，默认是四个空格
也就很多人喜欢四个空格，很多优秀的开源项目使用的都是两个空格的缩进，前端流行的空格是两个空格

默认是四个，更改成两个，如果我们tab的时候没有生效可以点击这里，因为之前这个文件被设置的是四个空格

选择制表符的缩进方式然后设置为2

可以看到这里的竖线变小了

以上就是一些安装和配置

五、认识元素

这里再写代码的时候我们经常需要进行中文英文的切换，我们可以在搜狗输入法中设置一个东西让我们在中文环境下面输入的符号都是英文状态下面的符号
这个之后再讲解

tip：ctrl加回车可以直接从这一行移动到下一行，不管后面有没有文字

1、HTML中所有的元素
我们会发现HTML本质上由一系列的元素Element构成，
什么是元素Element呢？
  元素是网页的一部分；
  一个元素可以包含一个数据项，或者是一块文本，或者是一张照片，或者是什么也不包含。
那么HTML有哪些元素呢？
  https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
上面这个文档中包含了所有HTML的元素
HTML元素非常多，我们只需要知道常用的，不常用的需要查找。
2、元素的组成部分
之后会讲解一个语法，叫做emmet语法，这个语法可以快速的生成标签，这个之后会讲解
另外直接感叹号然后回车就能够快速的生成默认的HTML文件的格式
生成不不认识的都可以删除
不重要
元素的主要部分有：
  开始标签（Opening tag)：包含元素的名称，被左右尖括号所包围，表示元素从这里开始或者开始起作用
  结束标签（Closing tag): 与开始标签相似，只其在元素名之前包含了一个斜杠。这表示元素的结尾
  内容（Content）：元素的内容
  元素（Element）：开始标签，结束标签与内容相结合就是一个元素
另外有些标签是没有结束标签的，这个叫做单标签
即：标签有单标签和双标签
比较早期的时候单标签元素的写法是<img/>或者是<img />
但是现在不需要了直接<img>
另外标签名字是不区分大小写的
3、元素的属性
元素也是可以拥有属性的Attribute

属性包含元素的额外信息，这些信息不会出现在实际的内容之中
一个属性必须包含如下的内容：
一个空格，在属性和元素名称之间，如果已经有一个或者多个属性，就与前面一个属性之间有一个空格
属性名称，后面跟着一个等于号
属性值，由一对引号引起来

有了属性就可以通过CSS给元素添加样式，有的元素的属性也有自己的功能，比如href，点击这个百度一下就能够跳转到百度

4、元素属性的分类
有的属性是公共的，每个元素都能这是比如class，id，title属性等
有些属性是元素特有的，不是每一个元素都能设置的
  比如meta元素的charset属性，img元素的alt属性等

5、元素的结构总结

6、元素之间的嵌套
tip:alt加上Shift加上向下箭头可以快速的复制这一行
元素嵌套的两个最常见的关系是父子关系，兄弟关系

7、HTML的注释
Ctrl + /快速的注释

时间：2024/12/14
事件：今天还要写论文，最近一点进展都没有，哎
天气：干冷