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

最新推荐文章于 2024-04-03 14:06:37 发布

爱睡觉的飞飞飞飞

最新推荐文章于 2024-04-03 14:06:37 发布

阅读量1.6k

点赞数 1

文章标签： html css chrome java vscode

本文链接：https://blog.csdn.net/aanheqiao/article/details/119412427

版权

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

历史
浏览器和网页
W3C建立
网页的结构
HTML
网页基本结构
开发工具

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.安装VSCode
      2.安装中文语言包
      3.尝试安装ayu主题
      4.将一个目录作为项目目录
      5.创建一个新网页
      6.安装live server
      7.尝试通过live server来运行网页
      8.设置代码自动保存

爱睡觉的飞飞飞飞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
硬件转行之路——自学Web前端开发（一）

自学Web前端——打卡第一天历史浏览器和网页W3C建立网页的结构HTMLHTML简单介绍标签文档声明（doctype)进制字符编码开发工具Notepad++2021.8.5一个半硬半软工程师的学习之路开始走上Web开发的自学道路，希望能坚持下去，借助这里作为学习笔记的地方，同时也分享学习路上遇到的各种各样的”坑“。可以加群共同分享、探讨问题：826470121在此感谢【尚硅谷老师】的教学课程历史1.蒂姆·伯纳斯-李爵士万维网的发明人2. 1991年8月6日，世界上第一个服务器和第一个网站在
复制链接

扫一扫