学习前端的开始

学习前端的开始_第1张图片

什么是前端

Web前端,用来直接给用户呈现一个一个的网页一个软件通常情况下是由后端+前端完成。
后端通常情况下通过Java,C++这样一个编程语言来完成一个相关的逻辑处理,将数据返回给前端。
前端的工作把后端返回给自己的数据进行一系列拼装/组装之后,达到一个完美的页面呈现给用户。

生活中会遇到哪些前端页面

  • web页面
  • PC端应用程序页面
  • 移动端APP页面
  • 除此之外,还有公众号,小程序……

什么是HTML页面
HTML超文本标记语言
超文本:文本、声音、图片、视频、表格、链接。
标记:由许许多多的标签组成。
HTML页面是运行到浏览器上面的,这里推荐的浏览器是Google Chrome浏览器。

开发工具vscode的搭建

前端开发工具除了vscode,还有sublime,idea(商业版).
使用vscode的原因: 企业开发前端的时候非常常用的一个开发工具

安装

官网网址:https://code.visualstudio.com/

学习前端的开始_第2张图片

学习前端的开始_第3张图片

安装之后,一路点击next即可,没有需要注意的事项,不做阐述。

vscode推荐使用的三个插件

Auto Rename Tagview-in-browserLive Server

学习前端的开始_第4张图片

编写第一个HTML页面

前提: 记事本编写代码
效果: 直接浏览器上输出hello world

学习前端的开始_第5张图片

按ctrl+S保存,文件的后缀改为html

学习前端的开始_第6张图片

如何运行:

直接双击文件即可

运行结果:
学习前端的开始_第7张图片

需要注意的事情:HTML页面是支持各种文件的,也就相当于它是有许多标签的。而上述的代码中没有标签,只是一串字符串,所以这样的代码结构是不标准的。

标准的代码样式:
学习前端的开始_第8张图片

<>括起来的都叫html的标签
<> => 双标签:标签有开始有结束
除此之外,还存在单标签。

<html>
    <head>
        <title>这是页面标题title>
    head>
    <body>
        这是页面内容
    body>
html>

上述代码中的标签

html:html文件根标签
head: 编写页面相关的属性
title: 页面标题
body:页面内容展示信息

每一个标签相当于一个节点,上述代码中的这些标签可以构成一个DOM树。所有的标签都是html子标签,head和body是兄弟标签、head和title是父子标签。每一个标签相当于是一个对象,程序员可以通过代码拿到这些对象,拿到之后就可以对这些对象进行增删查改。

代码

学习前端的开始_第9张图片

运行效果

学习前端的开始_第10张图片

你可能感兴趣的:(学习笔记,前端,学习,前端,java,学习方法,程序人生)