前端基础必知必会(代码片段)

漪曦 漪曦     2022-12-29     420

关键词:

前言

W3C规定网页由三部分组成:结构,表现,行为。

结构指的就是HTML

表现指的是CSS

行为指的是JavaScript

这是网页的三部分,是由万维网联盟W3C规范的。

一、网页、网站

网页是用HTML编写的一种文件,将这种文件放在Web服务器上可以让在互联网上的其他用户浏览。网站是网页的集合,多个网页可以共同组成一个网站。网站显示的第一个网页称为首页。

1. 网页的构成元素

一个网页都是由哪些元素组成的呢?

文本,超链接,图片,表格,表单,动画,音频,视频…

一个网页的构成元素很丰富,可以是文字,也可以是图片,甚至可以将一些多媒体文件(如音频、视频等)插入网页里。

1.1 文本

文本是为了展示给用户信息,如个人信息,自我介绍等

网页信息主要以文本为主,这里指的文本是文本字,而非图片中的文字。在网页中可以通过字体、大小、颜色、底纹、边框等选项来设置文本的属性。中文文字颜色不要太杂乱。

1.2 图片

图片一般是为了美化页面,放置Logo,当然也有用户自己由于某种需求上传的图片,也有某些网站用来专门放置各种图片,如摄影爱好者网站等

  • Logo标志,是代表网站形象或栏目内容的标志性图片,一般在网页左上角。
  • Banner广告,用于宣传站内某个栏目或者活动的广告,一般以GIF动画形式为主。
  • 图标,主要用于导航,在网页中具有重要的作用,相当于路标。
  • 背景图,用来装饰和美化网页。

1.3 超链接

超链接是可以点击的,点击会跳转到相应的地址。

可以说超链接是网站的“灵魂”,它是从一个网页指向另一个目的端的链接

如指向另一个网页或者相同网页上的不同位置。

超链接可以指向一幅图片、一个电子邮件地址、一个文件、一个程序或者本页中的其他位置。

超链接的载体可以是文本、图片或者Flash动画等。

超链接广泛存在于网页的图片和文字中,提供与图片和文字相关内容的链接,在超链接上单击,即可链接到相应地址(URL)的网页。

鼠标指针指向有链接的地方,默认会变成小手形状。

可以说,超链接是网页的最大特色。

1.4 表格

此表格非彼表格,不是Excel里的表格。当然作用是想通的,都是可以用来记录数据的。

当然网页里的表格还有更多的功能,如设置布局,美化界面等

1.5 表单

表单是用来收集用户数据的,表单其实也都见过,就是调差问卷,填写姓名,地址等,然后提交的。

二、如何开发网页

1. HTML

网页是使用HTML语言进行开发的。

那么什么是HTML呢?

HTML(Hypertext Markup Language)是超文本标记语言。
严格来说,HTML不属于编程语言,他是用标签的形式标示出网页不同的组成部分。

2. 第一个HTML

在桌面新建一个文本文档,命名为hello(其实什么都行),双击打开,将下面的代码贴进去

<DOCTYPE html>    <!-- 表示这是一个HTML文件 -->
    <html>			<!-- 所有的代码都要放在这哥和下面的</html>里面 -->
<head>			<!-- 头部信息,一些不展示给别人看的信息 -->
    <title>第一个HTML</title>		<!-- 页面标题 -->
</head>		
<body>		<!-- 展示给别人看的 -->
hello world!		<!-- hello world,不需要引号之类的多余的东西,当然你也可以添加一下看看效果 -->
</body>		
</html>		

保存,退出

将文件格式从txt转为html格式,双击使用浏览器打开

然后就没有然后了

3. 编辑器

当然,可以直接使用记事本编写,不过非常不推荐。

这边推荐使用vs code(Visual Studio Code),它是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

他的好处是,轻量级,界面炫酷,功能强大,插件众多,你完全可以只是用vs code来开发Python,Java,C/C++项目

vs code 下载地址:
1.官网下载
2.百度云盘下载 码:aode

三、小练习

巩固自己所学知识,在脑海里过一遍,什么是网页,网页含有什么元素。
找到几个网页,叙述网页中都适用了哪些标签。

mysql必知必会(代码片段)

...og.csdn.net/article/details/119907136文章目录第一章:数据库基础基本概念什么是SQL第二章:MySQL简介第三章:了解数据库和表第四章:检索数据SELECT语句第五章:排序检索数据找出一列中最高或最低的值第六 查看详情

mysql必知必会语法和基础知识大总结(代码片段)

概述主键:唯一区分表中每个行(不可重复,不允许nullmysql:基于客户-服务器的数据库系统使用mysqlmysql是部署在主机上的,可以通过ssh建立mysql连接#显示数据库showdatabases;#选择数据库usedatabases;#显示库中的表s... 查看详情

mysql必知必会语法和基础知识大总结(代码片段)

概述主键:唯一区分表中每个行(不可重复,不允许nullmysql:基于客户-服务器的数据库系统使用mysqlmysql是部署在主机上的,可以通过ssh建立mysql连接#显示数据库showdatabases;#选择数据库usedatabases;#显示库中的表s... 查看详情

mysql学习--mysql必知必会(代码片段)

?上图为数据库操作分类:??下面的操作參考(mysql必知必会)创建数据库运行脚本建表:mysql>createdatabasemytest;QueryOK,1rowaffected(0.07sec)mysql>showdatabases;+--------------------+|Database|+--------------------+|infor 查看详情

必知必会-使用kafka之前要掌握的知识(代码片段)

...消费方式API前记消息队列是分布式系统架构中不可或缺的基础组件,它主要负责服务间的消息通信和数据传输。市面上有很多的开源消息队列服务可以选择,除了kafka,还有Activemq,Rocketmq等。对于要选择哪一个服... 查看详情

hive必知必会(代码片段)

hive: 基于hadoop,数据仓库软件,用作OLAPOLAP:onlineanalyzeprocess 在线分析处理OLTP:onlinetransactionprocess在线事务处理 事务: ACID A:atomic 原子性 C:consistent 一致性 I:isolation 隔离性 D:durability 持久性 1读未提交   脏读 //事务... 查看详情

必知必会轻松学kubernetes面试工作必懂理论基础(代码片段)

轻松学、长久记晦涩海量理论三步谢谢您购买了本套课程:为了用最简单的方法,让您明白先给大家讲讲三板斧,后期将会逐层深入讲解!明确目标需要达到什么水平?达到需要做些什么?用对方法化繁为简不是投入的时间和金... 查看详情

必知必会轻松学kubernetes面试工作必懂理论基础(代码片段)

轻松学、长久记晦涩海量理论三步谢谢您购买了本套课程:为了用最简单的方法,让您明白先给大家讲讲三板斧,后期将会逐层深入讲解!明确目标需要达到什么水平?达到需要做些什么?用对方法化繁为简不是投入的时间和金... 查看详情

crypto必知必会(代码片段)

crypto必知必会最近参加了个ctf比赛,在i春秋,南邮方面刷了一些crypto密码学题目,从中也增长了不少知识,在此关于常见的密码学知识做个小总结!Base编码Base编码中用的比较多的是base64,首先就说一下Base64编码方式将字符串以... 查看详情

springmvc--必知必会(代码片段)

  SpringMVC基于模型--视图--控制器(Model-View-Controller,MVC)模式实现,属于SpringFrameWork的后续产品,已经融合在SpringWebFlow里面。它通过一套注解,让一个简单的Java类成为处理请求的控制器,而无需实现任何接口。同时它还支持... 查看详情

h5系列之history(必知必会)(代码片段)

H5系列之History(必知必会)目录概念兼容性属性方法H5方法概念理解HistoryApi的使用方式目的是为了解决哪些问题作用:ajax获取数据时,可以改变历史记录,从而可以使用浏览器的后退和前进。【】规范地址:http://www.w3.org/TR/html5... 查看详情

scala必知必会(代码片段)

文章目录入门概述安装JavaVSScalaval和var基本数据类型lazy在Scala中的应用开发工具IDEAMaven函数方法定义默认参数命名参数可变参数条件语句循环语句面向对象概述类的定义和使用抽象类伴生类和伴生对象case和trait集合数组ListSetMapOpt... 查看详情

mysql的必知必会------初识mysql(代码片段)

...L简介MySQL的操作库操作基本数据类型字符串类型日期类型基础表操作一些小结和建议建表练习参考代码写在最后的话数据库简介我们都知道MySQL是数据库的一种,那么数据库是什么呢?数据库其实就是通过各种数据结构来组织和管... 查看详情

mysql的必知必会------初识mysql(代码片段)

...L简介MySQL的操作库操作基本数据类型字符串类型日期类型基础表操作一些小结和建议建表练习参考代码写在最后的话数据库简介我们都知道MySQL是数据库的一种,那么数据库是什么呢?数据库其实就是通过各种数据结构来组织和管... 查看详情

mysql的必知必会------初识mysql(代码片段)

...L简介MySQL的操作库操作基本数据类型字符串类型日期类型基础表操作一些小结和建议建表练习参考代码写在最后的话数据库简介我们都知道MySQL是数据库的一种,那么数据库是什么呢?数据库其实就是通过各种数据结构来组织和管... 查看详情

必知必会的设计原则——合成复用原则(代码片段)

 设计原则系列文章 必知必会的设计原则——单一职责原则必知必会的设计原则——开放封闭原则必知必会的设计原则——依赖倒置原则必知必会的设计原则——里氏替换原则必知必会的设计原则——接口隔离原则必知必... 查看详情

读书笔记sql必知必会(代码片段)

章节标题页数进度完成时间1了解SQL1~9100%2022-04-08 2检索数据SELECT10~22100%2022-04-103排序检索数据ORDERBY23~30100%2022-04-114过滤数据WHERE31~38100%2022-04-115高级数据过滤(组合WHERE,NOT,IN)39~49100%2022-04-166用 查看详情

大数据必知必会:hadoop单机环境安装(代码片段)

(大数据必知必会:Hadoop(1)单机环境安装)安装前准备操作系统准备本次安装采用的操作系统是Ubuntu20.04。更新一下软件包列表。sudoapt-getupdate安装Java8+使用命令安装Java8。sudoapt-getinstall-yopenjdk-8-jdk配置环境变量。vi~/.bashrcexportJAVA... 查看详情