学习前端第一天笔记

Aidy
198 阅读13分钟

一，邂逅软件开发

  1. 软件是什么？微信、淘宝、得到、网易音乐、京东、王者荣耀

  2. 完善的软件系统：服务器-Android-iphone-ipad-ios-pc-网页（浏览器）

  3. 前端开发

    • 处在什么行业？

      • IT行业
      • 软件开发（编程领域）

    • 你是谁？

      • 软件开发工程师
        • 开发者、程序员、程序猿、程序媛、码农
        • developer、coder、programmer
      • 前端开发工程师

    • 前端开发的主要工作内容是什么？

      • 前端开发、也可以做后端开发

  4. 程序员的印象

    代码改变世界

    编程是一门 艺术，如果爱，请深爱

  5. 是否适合跟进前端开发领域？

    • 英文水平：熟悉简单英文，会使用翻译软件（比如有道词典）
    • 专业：不一定要计算机专业，会使用计算机就行。
    • 学习难度：是软件开发中较为简单的（但是东西很多）
    • 智商：认真努力才是王道
    • 女生：男女都可以学
    • 发展前景：应用范围极广，涵盖pc端、移动端等智能终端，包括小程序开发，能干的事情越来越多，地位越来越受重视
    • 行业薪资：参考招聘网站（10k-60k）

  6. 听课建议

    • 别玩手机，很容易错过精彩、关键瞬间
    • 犯困的可以站起来听
    • 有疑惑的地方可以马上记录下来，课后再找答案
    • 可以随时利用截图软件做图片笔记
    • 千万不要边听课边敲代码
    • 积极响应老师的提问
    • 上课注重听懂、理解，别拼命去记忆那些代码（课后多搞几遍就能记住了）

  7. 课后建议：

    • 尽量不要看视频，尽量只参考课堂代码、笔记
    • 整理一份属于自己的笔记
    • 每个人不同的敲代码方式
      • 新手：完全对着课堂代码敲（跟抄书一样）或者边看视频边敲（开始阶段）
      • 熟手：浏览一遍课堂代码，然后边回想边敲，遇到忘记的回去翻一翻课堂代码（进阶阶段）
      • 高手：不用看课堂代码，回想上课的编码思路，直接开搞（高手阶段）

  8. 哲学

    • 积跬步以致千里，积怠惰以致深渊
    • 我为什么如此出色？——乔丹
      • 我会努力争取每一天都能取得一点进步，我需要回顾昨天，感觉今天比昨天好就足够。一天一点进步，那一辈子该有多少的飞跃呀！
    • 只比你努力一点的人，其实已经甩你太远

  9. 对电脑的配置

    1. 显示详细信息

    1. 打开文件夹选项

    2. 显示文件的扩展名

    1. 显示隐藏的文件和文件夹

    2. 显示文件的详情

二、网页

  • 网站和网页的关系？

    • 一个网站由N个网页组成（N >= 1)

  • 什么是网页

    • 上网浏览的页面
    • 用户从网页上获取信息（类似于报纸、书本）

  • 怎么浏览网页

    • 浏览器（PC电脑、移动设备）
    • 比如IE、Chrome、360浏览器、UC浏览器等

  • 网页的显示过程

    客户端向服务端发出请求，服务端接受响应返回数据

    • 服务器
      • 就是一台配置比较高的、24小时不断的电脑
      • 实时为客户端提供服务（比如查找数据）

  • 前端工程师和工作

    1. 在自己的电脑上进行网站的开发
    2. 将开发出来的内容进行打包（webpack/gulp）
    3. 上传和部署—>服务器
    4. 用户通过浏览器->URL->下载资源 -> 浏览器解析

  • 浏览器常用的快捷键

    • F12 （显示开发者工具）
    • F5 或者 Ctrl + R (刷新网页)

  • 网页的组成

    • HTML
      • 网页的内容结构
    • css
      • 网页的视觉体验
    • javaScript
      • 网页的交互处理

  • 浏览器内核

    • 浏览器最核心的部分是渲染引擎( Rendering Engine ),一般也称为“浏览器内核”
      • 负责解析网页语法，并渲染（显示）网页
      • 不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同
    • 常见的浏览器内核有
      • Trident:IE
      • Gecko:Mozilla Firefox
      • presto：Opera
      • Webkit: Safari、
      • Blink：Google Chrome

三、 开发

VSCode的使用

  • 安装插件
    • 右侧图标最后一项，Extensions,查找需要的插件（联网）
    • Chinese ( 中文)
    • Preview on Web Server（将html页面在浏览器中打开）
    • Atom（主题）
    • Vscode-icons（文件图标的样式）
  • 工具配置：
    • Auto Save 自动保存
    • Font Size 修改代码字体大小
    • Word Wrap 代码自动换行
    • Render Whitespace 空格的渲染方式（个人推荐）
    • Tab Size 代码缩进
      • 基础阶段建议缩进4个空格
      • 进阶阶段开始慢慢习惯2个空格

HTML

  • 什么是HTML?
    • HTML用来描述网页的内容和结构，由浏览器负责解析html转换成具体的图文界面
    • html的全称是Hyper Text Markup Language,超文本标记语言
  • 标记语言(Markup Language)
    • HTML代码（HTML文档），由无数个标记（标签、tag）组成
    • 由标签和内容组成的称为元素（element）
    • 一般的说法：head元素、<head>标签、img元素、<img>标签
  • 超文本（Hyper Text)？
    • 页面内可以包含图片、链接，甚至音乐、视频等非文字元素
  • 元素的属性
    • 每一个元素都可以拥有自己的属性，属性可以增强元素的功能
    • 书写形式是：<起始标签 属性名 = “属性值”>
    • 有些属性是公共的，第一个元素都可以设置
      • 比如class、id、title属性
    • 有些属性是元素特有的，不是每一个元素都可以设置
      • 比如meta元素的charset 属性、img元素的alt属性等
  • 为什么需要注释？
    • 程序员才懂的冷笑话：
      • 在我写这段代码的时候，只有我和上帝知道这段代码是什么意思。
      • 一段时间之后，只有上帝知道是什么意思了
    • 为什么会出现这样的情况呢？
      • 随着学习的深入，你的一个程序不再是几行代码就可以搞定的了。
      • 可以我们需要写出在上千行，甚至上万行的程序
      • 某些代码完成某个功能后，你写的时候思路很清晰，但是过段时间会出现忘记为什么这样写的情况，这很正常
    • 和同事协同开发
    • 在实际工作中，一个项目通常是多人协作完成的，可能是几个或者十几个等等
    • 这个时候，你可能需要使用别人写出的代码功能，别人也可能使用你的代码功能
    • 如果你的代码自己都看不懂了，更何况你的同事呢？
  • 什么是注释？
    • 简单来说，注释就是一段代码说明
    • 注释是只给开发者看的，浏览器并不会把注释显示给用户看
  • 注释的意义：
    • 帮助我们自己理清代码的思路，方便以后进行查阅
    • 与别人合作开发时，添加注释，可以减少沟通成本。（同事之间分模块开发）
    • 开发自己的框架时，加入适当的注释，方便别人使用和学习。（开源精神）
    • 可以临时注释掉一段代码，方便调试
  • 注意
    • 注释不能嵌套，比如<!-- -->
    • 对于绝大数编程语言来说，定代码过程中使用的标点符号，比如双引号、单引号、冒号、分号、感叹号等，都必须是英文符号（注释里面的内容除外）

HTML元素

  • 一个完整的HTML结构包括哪几部分呢？

    • 文档声明 <!DOCTYPE html>

      • HTML 文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
      • 必须放在HTML 文档的最前面，不能省略，省略了会出现兼容性问题

    • html元素

      • html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素
      • W3C标准建议为html元素增加一个lang属性，作用是
        1. 帮助语音合成工具确定要使用的发音
        2. 帮助翻译工具确定要使用的翻译规则
      • lang="en"告诉浏览器：这个HTML文档的语言是英文，所以Chrome浏览器的翻译提示如上图所示
      • lang="zh"表示这个HTML文档的语言是中文

    • head元素

      head元素里面的内容是一些“元数据”（元数据：描述数据的数据）

      一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标

      • title元素

        网页的标题

      • meta 元素

        可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码

        一般都使用UTF-8编码，涵盖了世界上几乎所有的文字

    • body元素

      • h

        表示网页的标题

        h1~h6共规定了6个等级的标题

      • p元素

        表示文章中的一个段落

      • strong元素

        用于强调某些文本，粗体的显示效果

    • h元素和SEO

      h元素有助于网站的SEO(Search Engine Optimization)优化，可以促进关键词排名

      建议在网页中最多只有1个h1元素

      适用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致k站

    • code元素

      用于显示程序代码

    • br 元素

      单标签，表示强制换行

    • hr元素

      分割线

    • span元素

      • 默认情况下，跟普通文本几乎没差别
      • 用于区分特殊文本和普通文本，比如用来显示一些关键字

    • div元素

      一般作为其他元素的父容器，把其他元素包住，代表一个整体

      用于把网页分割为多个独立的部分

img元素

img元素专门用来显示图片（img是image的缩写）

src属性（src是source的缩写）用来设置图片的路径（URL)

  • 绝对路径：完整的描述文件位置的路径

  • 相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系

    .代表当前文件夹（1个.），可以省略

    ..代表上级文件夹（2个.)

  • 对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是/ ,而不是\

常用图片格式

wed中常用的图片格式有

png：静态图片，支持透明

jpg: 静态图片，不支持透明

gif：动态图片、静态图片，支持透明

注意

  • img 元素如果只设置了width （或height),浏览器会自动根据图片宽高比计算出height（或width)
  • 在html5规范中，alt是img 元素的必要属性
  • width、height的默认单位是px，像素

像素

  • 像素（px)是图像显示的最小单位
  • 每个像素都能表示一种颜色
  • 计算机显示出来的图像都是由一堆像素组成的
  • 组成图片的像素越多，显示越清晰

字符实体

比较常用的有

空格 &nbap;

大于号 &gt;

小于号 &lt;

& &amp;

a元素

  • 定义超链接，用于打开新的URL

  • 常用属性

    • href: 指定要打开的URL

      Hypertext Reference的简称

    • target:在哪里打开URL

      • _self:默认值，在当前窗口打开URL
      • _blank 在一个新的窗口打开URL
      • _parent :在父窗口打开URL
      • _top 在顶层窗口打开URL
      • 某个frame的name值，在某个frame中打开URL

iframe 元素

iframe元素可以实现：在一个HTML文档嵌入其他HTML文档

  • frameborder属性用于规定是否显示边框
    • 1显示
    • 0不显示

base元素

可以利用base元素设置当前页面所有a元素的默认行为

base元素写在head元素中

锚点链接

锚点链接可以实现：跳转到网页中的具体位置

<a href="#one">go</a>

  • 点击go会定位到
    • id值为one的元素
    • name值为one的a元素

如何跳转到其他页面的特定位置？

  • <a href="index.html#one>首页第一节</a>

伪链接

有时候点击链接的时候并不希望打开新的url，而是希望干点别的事情，这时可以使用伪链接

伪链接：没有指明具体链接地址的链接

点击链接后具体要做什么事情，需要编写对就的javaScript代码

如果暂时不做任何事，可以先写成下面形式

所以有时候可以把链接当作按钮来使用

URL

url的全称是Uniform Resource Locator（统一资源定位符）

url就是资源的地址、位置，互联网上的每个资源都有一个唯一的url

通过1个url,能找到互联网上唯一的1个资源

url的基本格式 = protocol://hostname/path = 协议://主机地址/路径

协议：不同的协议，代表着不同的资源查找方式、资源传输方式

主机地址：存放资源的主机的ip地址（域名）

路径：资源在主机中的具体位置

  • URL常见的协议
    • http
      • 超文本传输协议，访问的是远程的网络资源，格式是http://
      • http协议是在网络开发中最常用的协议
      • http协议相当于是http协议的安全版
    • file
      • 访问的是本地计算机上的资源，格式是file://（不用加主机地址）
    • mailto
      • 访问的是电子邮件，格式是mailto:
    • ftp
      • 访问的是共享主机的文件资源，格式是ftp://
    • ed2k
      • 通过支持ed2k（专用下载链接） 协议的p2p软件访问该资源（代表软件：电驴），格式是ed2k://
    • thunder
      • 通过支持thunder（专用下载链接）协议的p2p软件访问该资源(代表软件：迅雷)，格式是thunder://
  • 更具体的URL
    • URL更具体更完事的语法格式为：

  • port (端口号)
    • 一台拥有IP地址的主机可以提供许多服务，比如web服务、FTP服务、SMTP服务等
    • 主机通过“IP地址+端口号”来区分不同的服务，端口号类似于营业厅的窗口
    • 端口号的范围从0到65535，HTTP默认端口号是80，FTP默认端口号是21
  • query
    • 请求参数，提交给服务器的数据
  • fragment
    • 锚点位置

语义化

  • 什么是标签语义化？
    • 选择标签的时候要尽量让每一个标签都有正确的语义
  • 虽然很多标签之间互换之后也能实现功能，但还是要遵守“标签语义化”原则
  • 标签语义化的好处
    • 方便代码维护
    • 减少让开发者之间的沟通成本
    • 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
    • 让搜索引擎能够正确识别重要的信息
  • 总结：使用最合适的标签去做做最合适的事情
avatar
文章
阅读
粉丝