仿一个网站,网络销售是什么,好用的做图网站,wordpress选择菜单文章目录一、为什么学习前端?二、第一个HTML文件VSCode三. HTML元素四. HTML页面一、为什么学习前端?
我们作为一个后端程序员#xff0c;为什么还要学习前端#xff0c;因为我们的终极目的是实现web开发#xff0c;搭建网站#xff0c;网站 前端 后端
比如我们随便… 文章目录一、为什么学习前端?二、第一个HTML文件VSCode三. HTML元素四. HTML页面一、为什么学习前端?
我们作为一个后端程序员为什么还要学习前端因为我们的终极目的是实现web开发搭建网站网站 前端 后端
比如我们随便打开一个网页我们看到的这些页面都是由前端完成的比如我们要进入CSGO的官网 所以我们要想搭建一个网站仅仅能够搭建后端服务器也要搭建前端页面这里虽然不用我们写很复杂的前端内容但基本的内容要会写大概的能够看懂前端代码。
前端开发主要使用三门编程语言HTMLCSSJavaScript HTML用来构建我们网页的骨架 CSS描述我们的网页样式使我们的网页更好看 JS描述我们网页的行为使网页成为动态的 接下来我们就一起来学习前端三剑客吧。
二、第一个HTML文件 首先创建一个记事本文件我们写入我们熟悉的hello world!。 然后将文件名后缀改为html改好后我们会发现文件头像变成了浏览器头像如果大家改不了后缀可以将文件扩展名勾选上。 这样我们的第一个网页就完成了但是我们这个html的代码不太合法因为我们的HTML是一个标签化的语言能够成功运行出来是因为我们的浏览器对HTML的语法格式检查的并不严格即使有一些小问题浏览器也会尽可能的运行出来 这才是一个合法的HTML代码
VSCode
我们刚才给大家演示了使用记事本写HTML代码当然也有前端开发所使用的开发环境我们这里使用的是VSCode具体下载过程就不给大家一一演示了相对比较简单大家直接在VSCode官网进行下载安装即可。 相比之下我们的vscode比我们java的IDEA要简单不少我们vscode是使用目录来组织的这里给大家简单演示一下如何vscode写代码。 创建一个后缀名为html的目录 编辑源代码 我们需要注意的是我们每次写完html代码要进行ctrl s进行保存也可以设置自动保存 我们写完html代码之后就需要在浏览器运行我们这里一开始为了让大家更深的理解Html文件结构教大家一个更朴素的运行方法 然后双击运行即可 这样使用vscode开发的流程就基本了解了。
三. HTML元素
HTML HyperText Markup language 超文本标记语言我们常常使用的网页就是用HTML编写的HTML的作用是定义网页的内容和结构 HyperText是指用超链接的方式组织网页将相关的网页联系起来 Markup是指用标签的方式赋予内容不同的功能和含义
我们的HTML是由一系列元素(elements)组成例如
p hello, world!/p我们这一整体就称之为元素 p和/p称之为起始标签和结束标签标签包围起来的hello, world!我们称之为内容p是我们预先定义好的HTML标签作用是将内容作为一个单独的段落。
我们的元素里面还可以有属性例如
p id 1 hello, world!/p属性一般是预先定义好的我们这里的id属性是给我们标签一个唯一的标识。
元素和元素也可以进行嵌套例如
p我爱你b中国/b/P不包含任何内容的元素称之为空元素例如
img src o.jpg这里的img是图片标签src属性指定图片路径这里只是给大家简单了解一下元素我们下面会具体介绍每个标签的用法和功能的。
四. HTML页面
我们刚刚介绍了HTML元素它们可以充当一份完整的HTML页面组成部分 我们标签是可以嵌套的一个标签的内容可以是其他标签这些标签构成了一个树形结构 我们的html元素包含了其他所有所有也称为根元素我们的head元素包含的是不用展示内容的元素如title,link,meta,有点头文件的感觉body元素包含了我们为用户展现内容的元素例如我们即将学习的文本图片视频音频超链接等元素 我们vscode里面也有许多快捷键我们输入!按下tab即可生成我们html代码的骨架。 我们输入!后看到这样的提示然后按下tab键 注释标签 大家需要注意我们html里的标签和我们之前学习的java的标签有很大的差别
!-- 这是html的注释 --我们也可以在vscode里按ctrl /快速注释需要注意的是我们注释里的内容不能随便乱写不然容易出问题。 我们可以在浏览器里的检查里看到代码里的注释内容
