当前位置: 首页 > news >正文

我要做全栈:自学前端第一天

大家好,今天要介绍的是我自学前端的一些经验。

前端想要知道学习哪些内容,首先要知道前端的结构是什么样的,前端是有哪些东西构成的。

所以我先了解了前端的构成是由三部分:

1、HTML:定义了网页的结构

2、CSS:定义了网页的样式

3、JavaScript:定义了网页的行为

什么是HTML呢?HTML是一种超文本标记语言。

下面引用菜鸟教程中的一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

根据上面这个例子,我们一条一条解析学习。

首先<!DOCTYPE html>这句话是声明为HTML5。

<html> 元素是 HTML 页面的根元素,其它的所有内容要写在<html></html>的中间。

<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。(备注:对于中文网页要声明编码,不然会出现乱码)

<title> 元素描述了文档的标题,文档的标题为:菜鸟教程(runoob.com)

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题,标题为:我的第一个标题

<p> 元素定义一个段落,段落为:我的第一个段落

这里如果是英文网页,会用<html lang=en>来表示,中文网页的写法是<html lang=ZH-CN>。

说一下HTML5的设计目的:是为了在移动设备上支持多媒体。

对于如何使用CSS可以引用菜鸟教程中的解释:

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

在前端设计的时候,很多时候需要靠颜色来改变整体的外观,所以了解HTML中颜色也是非常重要的。

众所周知,所有颜色的基础都是三原色,HTML也不例外,HTML 颜色由红色、绿色、蓝色混合而成。

在HTML中颜色的定义也有三种表达方式:

1、使用RGB

2、使用十六进制

3、使用英文名字

下面是一些常用的颜色值:

本篇文章就先学习这么多,我们下篇文章再见。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Go开发桌面客户端软件小试:网站Sitemap生成
  • client网络模块的开发和client与server端的部分联动调试
  • 流体力学解迷宫
  • 【ZYNQ MPSoC开发】PS裸机多核程序的固化
  • 计算机毕业设计选题推荐-体育馆场地预约系统-Java/Python项目实战
  • 学习MyBatis-Plus
  • (一) 初入MySQL 【认识和部署】
  • 【C语言从不挂科到高绩点】02-变量、数据类型、标识符、关键字
  • C的温故而知新:位操作(C Primer Plus第十五章)
  • 亲测解决electron的Unhandled Rejection
  • 华为OD 山峰个数 C语言实现
  • React antd Table表格动态合并单元格
  • 使用python请求接口方式(可进行并发测试)例子解析
  • C语言:编程世界的基石
  • JVM 方法区存放那些内容
  • (三)从jvm层面了解线程的启动和停止
  • __proto__ 和 prototype的关系
  • android图片蒙层
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • JAVA并发编程--1.基础概念
  • Laravel Telescope:优雅的应用调试工具
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • PHP 的 SAPI 是个什么东西
  • Redux 中间件分析
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • scala基础语法(二)
  • socket.io+express实现聊天室的思考(三)
  • spring boot下thymeleaf全局静态变量配置
  • WePY 在小程序性能调优上做出的探究
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 解析带emoji和链接的聊天系统消息
  • 跨域
  • 全栈开发——Linux
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 为视图添加丝滑的水波纹
  • 自制字幕遮挡器
  • 《码出高效》学习笔记与书中错误记录
  • ​​​【收录 Hello 算法】9.4 小结
  • ​MySQL主从复制一致性检测
  • ###项目技术发展史
  • #if 1...#endif
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • $.ajax中的eval及dataType
  • %check_box% in rails :coditions={:has_many , :through}
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (C++)栈的链式存储结构(出栈、入栈、判空、遍历、销毁)(数据结构与算法)
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (LeetCode 49)Anagrams
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (简单有案例)前端实现主题切换、动态换肤的两种简单方式
  • (接口封装)
  • (一)基于IDEA的JAVA基础10
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .NET Core 2.1路线图