自学Web前端——打卡第一天

历史
浏览器和网页
W3C建立
网页的结构
HTML
- HTML简单介绍
- 标签
- - meta标签
  - 语义标签
- 文档声明（doctype)
- 进制
- 字符编码
网页基本结构
开发工具
- Notepad++
- zeal & vc-redist
- 文本编辑器
- - 插件安装
  - vs code环境搭建细则

2021.8.5
一个半硬半软工程师的学习之路
开始走上Web开发的自学道路，希望能坚持下去，借助这里作为学习笔记的地方，同时也分享学习路上遇到的各种各样的”坑“。
可以加群共同分享、探讨问题：826470121

在此感谢【尚硅谷】的教学课程

历史

1.蒂姆·伯纳斯-李爵士万维网的发明人
2. 1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线
3. 历史上第一个网站

浏览器和网页

1.有了浏览器只需要一个网址便可以访问任何网站
2. 浏览器负责渲染
3. 前端工程师负责编写网页的源代码
4. 浏览器负责将网页渲染成我们想要的样子
5. 市面上存在很多不同的浏览器
6. 万维网初期，网页编写没有标准

W3C建立

1.伯纳斯李1994年建立万维网联盟（W3C）
2. W3C的出现是为了制订网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果
3. 需要指定编写的网页都需要遵循W3C的规范

网页的结构

1.结构 HTML用于描述页面的结构
2. 表现 CSS用于控制页面中元素的样式
3. 行为 JavaScript用于相应用户操作

HTML

HTML简单介绍

1.HTML（Hypertext Markup Language)超文本标记语言（重点在：文本&标记）
文本：(后缀txt更改成html)标签：有开始有结束开始结束之间放我们的内容

2.它负责网页的三个要素之中的结构
3. HTML用标签的形式来识别网页中的不同组成部分
4. 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
5. html:根标签 html有两个子标签 head和body标签
6. head:头标签（表示元数据，无论写什么人都看不见，是给浏览器看的）
7. body:网页的主题网页内的所用被用户看到的内容都应该写在此处
8. title:标题网页的标题
注：打开文件扩展名的方法（以win10系统为例）

标签一般成对出现，但也有自结束标签
自结束标签例如:（or ) (or )

简单明了，不要过于复杂，要有良好的注释习惯

属性：在标签中（开始标签或结束标签）可以设置属性，属性是一个名值对（x=y)
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来填写
有些属性有属性值，有些没有

<fount color="red">第三个</fount>

<fount color="red" size="3">第三个</fount>

meta标签

        meta主要用于设置网页的一些元数据，元数据不是给用户看charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容keywords表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开description用于指定网站的描述title标签的内容会作为搜索结果的超链接上的文字显示<meta name="keywords" content="HTML5,前端,CSS"><meta name="description" content="这是一个非常不错的网站">

语义标签

        在网页中HTML专门用来负责网站的结构所以使用html标签时，应该关注的时标签的语义，而不是它的样式标题标签：h1~h6 共有六级标题从h1~h6重要性递减，h1最重要，h6最不重要h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1一般情况下标题标签只会使用到h1~h3，h4~h6很少用<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>hgroup标签用来为标题分组，可以将一组相关的标题同时写入<hgroup><h1>回乡偶书（二首）</h1><h2>其一</h2><p>少小离家老大回</p><p></p></hgroup>p标签标识页面中的一个段落p也是一个块元素<p>在p标签中的内容就表示一个段落</p>em标签用于表示一个语气的加重在页面中不会独占一行的元素称为行内元素（inline element）内联元素<p>今天天气<em>真</em>不错</p>strong标签标识强调，重要内容！<p>你今天必须要<strong>完成作业</strong></p>blockquote标识一个长引用 块元素<blockquote>这句话我是从来没有说过的</blockquote>q标识短引用 行内元素子曰：<q>学而时习之</q>       br标签 换行<br>sup标签 上标 sub标签 下标

文档声明（doctype)

我们所学的是HTML5的版本
1.文档声明用来高速浏览器当前网页的版本
2.html5的文档声明

<!doctype html>
<!DOCTYPE HTML>

3.写在最开头

<!DOCTYPE HTML>
<html><head><title>网页基本结构</title></head><body></body>
</html>

进制

二进制（计算机底层的进制）-特点 ：满2进1-计数：0 1 10 11 100 101 110 111-单位数字：2个（0-1）-扩展-所有数据在计算机底层都会以二进制的形式保存，   1bit表示1位8bit = 1byte(字节)1024byte = 1kb(千字节)1024kb = 1mb(兆字节)1024mb = 1gb (吉字节)1024gb = 1tb(特字节)1024tb =1pb
八进制-特点：满8进1-计数：0 1 2 3 4 5 6 7-单位数字：8个（0-7）
十进制（日常使用）-特点：满10进1-计数：0 1 2 3 4 5 6 7 8 9 -单位数字：10个（0-9)
十六进制（一般显示一个二进制数字时，都会转换为十六进制）-特点：满16进1-计数：0 1 2 3 4 5 6 7 8 9 A B C D E F-单位数字：16个

字符编码

所有数据在计算机中存储都是以二进制形式存储的，文字也不例外。
所以一段文字在存储到内存中时，都需要转换为二进制编码
我们读取这段文字时，计算机会将编码转换为字符，共我们阅读
-编码
-将字符转换位二进制码的过程称为编码
-解码
-将二进制码转换为字符的过程称为解码
字符集（charset)
-编码和解吗所采用的规则称为字符集
（类似于谍战片的密码本）
-乱码问题
-如果编码和解吗所采用的字符集不同就会出现乱码问题
-常见的字符集：
ASCII(美国码)
ISO88592（欧洲码）
GB2312（中国码）
GBK（中国码）
UTF-8（万国码：支持任何一国语言）
可以通过meta标签来设置网页的字符集，避免乱码问题

  <head><meta charset="utf-8"></head>

网页基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE HTML>
<! --html的根标签（元素），网页中的所有内容都要写在根元素的里面 -->
<html><!-- head是网页的头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 --><head><!-- meta标签用来设置网页的元数据，meta用来设置网页的字符集，避免乱码问题 --><meta charset ="utf-8"><!-- title中的内容会显示再浏览器的标题栏，搜索引引擎会主要根据title中的内容来半段网页的主要内容 --><title>网页的标题</title></head><!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里--><body><!-- h1网页的一级标题 --><h1>网页的大标题</h1></body>
</html>

在网页编写的多个空格默认情况下会被浏览器解析位一个空格
在HTML中有些情况，不能直接书写一些特殊符号
比如多个连续空格比如字母两侧的大于或小于号
如果在网页中需要使用特殊符号，需要使用实体（转义字符）
实体的语法：
&实体名字；
空格
>大于
<小于
©授权符号
更多的HTML实体

开发工具

工具开发下载地址

Notepad++

开发工具最好不要用记事本（可能会有奇怪的问题发生）
记事本替换工具：Notepad++

下载地址：Notepad++ Win32 or Win64

zeal & vc-redist

离线文档查看器
作用：无网络时，在本地查看文档，开发中必备工具
x64 64位
x86 32位

安装好后按照上述操作对HTML文档进行安装
（中文参考网站可上W3school参考标签去查看）

文本编辑器

Visual Studio Code

(安装过程在网上搜索即可）

插件安装

插件	功能
Chinese(Simplified)Language Pack for Visual Studio Code	汉化包
Avu	主题
HTML Snippets	HTML插件
Live Server	随改随更

右键通过VS code 打开文档

设置字体大小（ctrl +“+” 、ctrl + “-”）

按下回车

会自动建立一个HTML的模板

Live Server插件用法

vs code环境搭建细则

      1.安装VSCode2.安装中文语言包3.尝试安装ayu主题4.将一个目录作为项目目录5.创建一个新网页6.安装live server7.尝试通过live server来运行网页8.设置代码自动保存

硬件转行之路——自学Web前端开发（一）相关推荐

2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
国内外的自学web前端开发教程网站
@TOC有哪些自学web前端开发教程网站? 国内外有哪些自学web前端开发教程网站? https://www.w3cl.com 第一个着力推荐 http://codyhouse.co/library ...
自学Web前端开发学习讲解 – 入门篇
很多人都对web前端感兴趣,这一期主要聊关于如何入门学习Web前端开发的过程分享,此篇适合想入门初学者,大佬就不用看了.主要内容是以本人这一路自学web前端的一些经验和建议,学习哪些知识,以及如何正确 ...
自学web前端开发能找到工作吗？
自学前端开发能找到工作吗? 自学能不能找到工作,答案肯定是"能"的,但是对于这个问题,我们不能用"能"或者"不能"去回答,有一个人能找到也是 ...
「全栈之路」Web前端开发的后端指南
前言在若干次前的一场面试,面试官看我做过 python爬虫/后端的工作,顺带问了我些后端相关的问题:你觉得什么是后端? 送命题.当时脑瓦特了,答曰:逻辑处理和数据增删改查... 当场被怼得体无完肤 ...
「真®全栈之路」Web前端开发的后端指南
前言在若干次前的一场面试,面试官看我做过python爬虫/后端的工作,顺带问了我些后端相关的问题:你觉得什么是后端? 送命题.当时脑瓦特了,答曰:逻辑处理和数据增删改查... 当场被怼得体无完肤, ...
零基础转行Web前端开发自学靠谱吗？菜鸟学习前端的方法分享
Web 前端开发行业长期处于供不应求的状态,薪资待遇也随之水涨船高,因此吸引了不少零基础转业者.那么,可能会有人问了:零基础转行Web 前端开发自学靠谱吗?这个问题没有确切的答案,毕竟每个人的情况都不 ...
资源|最新WEB前端开发全套视频教程
特别说明:资料来源于网络,版权归原作者所有,仅限用于学习交流之用,请勿做它用.如有不妥请联系小睿删除! 引言最近很多同学在群里问小睿有么有前端的课程呢?答案是必须的!以下资料是我昨晚冒死在网上冲浪, ...
一只小菜鸟的web前端开发自学之路
今天初步了解了一下Web前端开发,计算机技术这东西就要多用多练,一只菜的不能再菜的小菜鸟开始漫长的自学之路了 web系统前端是指系统中用户接触到的部分. 打开几个不同网站的网页,观察一下,有网页文件的 ...

硬件转行之路——自学Web前端开发（一）