img标签有value属性吗,img标签中的src属性

首页 > 实用技巧 > 作者:YD1662024-01-19 13:00:56

听到前端技术,不少朋友一定会感到有些陌生。但其实,前端,你每天都在接触。

你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端。

而前端最重要的三大技术,html,css,JavaScript,则是每一个前端开发者必须具备的技能。

掌握这些技能,你可以快速地做出一个酷炫的APP界面或者一个简单大方的网站页面。因此,就让我们一起来快速学习一下这三门技术吧。



以下内容节选自实验楼训练营课程《Vue.js 和 Node.js 构建内容发布系统》。

实验介绍

本实验主要介绍一下前端的基础知识,对比认识一下各个框架的代码编写方式,并介绍我们本次技术选型的主要思路。对于前端三大技术 HTML、CSS、JavaScript,简单的介绍了基本情况和常用语法。中间介绍了现代框架的一些情况,并通过实际的案例,用代码直观的认识一下各种框架的实现方式。最后分析一下项目的技术选型。

知识点前端技术简介

本节我们简单介绍一下前端最基础 HTML, CSS, JavaScript 三驾马车。虽然本课程预设的读者为零基础开发者,但是前端开发一定会这三种技术的运用有要求。建议抽空学习 《 Web 前端工程师路径》 中的阶段 1 甚至阶段 2。这里仅做语法介绍和基本使用的概览。

在此之前先认识一下实验环境。实验环境和 VS Code 使用体验基本一致。你可以启动一个终端,并在其中输入 Linux 命令。

img标签有value属性吗,img标签中的src属性(1)

后面的命令无特殊说明的都是在此终端命令行中输入。大多数命令可以多开终端窗口分别执行。

那么下面我们就快速的了解一下。

HTML

HTML 全称超文本标记语言,几乎是从万维网和浏览器产生伊始就存在的。主要用于结构化信息来方便浏览器展示。

以标签对作为主要特征,如<p>这是一个段落</p>。这些标签会被浏览器解析成不同的模块,比如 p 标签就是一个段落,img 标签就是一个图片,a 标签就是一个超链接,标签名不区分大小写。

立刻就来尝试一下吧。首先通过命令行新建一个 demo 目录:

mkdir demo

然后命令行进入 demo 目录:

cd ./demo

img标签有value属性吗,img标签中的src属性(2)

新建一个 hello.html 文件,可以在实验环境左边的浏览框内在 demo 上右键选择 New File 然后命名为 hello.html;或者也可在命令行终端输入 touch hello.html,同样是新建文件。

在其中输入以下内容:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>标题</title> </head> <body> 正文 </body> </html>

然后右击文件选择 Open With → Preview。

img标签有value属性吗,img标签中的src属性(3)

看到了吗?其实我们就是新建了一个 .html 后缀的文本文件,然后浏览器就可以将其中的内容展示出来。你也可以在自己的桌面上新建一个,然后使用浏览器打开看看效果。

这里嵌套代码的缩进格式是为了美观和可读性,并无严格要求。

head 标签中是一些暂时无需用到的头部信息,渲染的主体是 body 标签。下面我们修改 body 标签里面的内容,填入一些常用标签来直观感受一下。

<body> <h1>页面标题</h1> <div>一个块容器</div> <div>又一个块容器</div> <p>这里是段落了,间距变大</p> <div>一个块容器</div> <div> <div> 多层嵌套: <div>内部第一个</div> <div>内部第二个</div> </div> </div> </body>

保存之后切换到浏览标签看一看,有没有感觉被忽悠了?嵌套没嵌套根本没体现出来,就像 Word 里排了一下版,按了几个回车。

img标签有value属性吗,img标签中的src属性(4)

首页 123下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.