首页>CGI源码>其他类别
下载
front end

这是 Web 开发的存储库

准备工作：对于此内容，学生必须拥有一台可以访问互联网的计算机、一个支持 HTML 5 的网络浏览器（Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Opera 等）、一个文本编辑器（VSCode 等） .）和托管平台（免费或付费）。

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

什么是网站？

当我们谈论网站时，我们可以注意到这个术语是两个英语单词的组合：“web”，意思是网络，指的是万维网；“site”，意思是地方。从这个意义上说，网站或站点是一个可以通过 URL 在互联网上访问的地方，并且具有一组用某种语言编程的页面。

为了更好地理解这个主题，让我们看一个例子：当您在互联网浏览器中输入地址 blog.betrybe.com 来访问 Trybe 的博客时，浏览器将查找该网站在互联网上的位置。然后将向服务器发出请求。

构成网页的所有文本、图像和样式文件都存储在该服务器上。然后，服务器会将这组文档返回给浏览器，以便浏览器可以显示您在屏幕上看到的内容。

网站可以呈现不同的形式和内容。其中一些选项包括： 虚拟商店，例如 Mercado Livre 和 Amazon，可以在其中购买和销售产品；公司和个人用来展示自己并被客户找到的机构网站和投资组合；和博客，就像您读过的那样。

此外，网站还可以分为静态网站和动态网站。静态网站通常使用 HTML、CSS 和 JavaScript 开发。它的内容比较简单，并且没有与数据库的交互。

动态网站除了利用 HTML、CSS 和 JavaScript 之外，还使用更强大的编程语言，例如 PHP。这些站点具有连接到数据库的功能。这样，访问的每个页面都可以带来特定的数据。

网页设计

通过网页设计，您需要观察界面对于网站开发的重要性、用于构建丰富网页的技术的演变（web 1.0、web 2.0、web 3.0 和 web 4.0）、界面的演变（美学、功能和结构） ）。

因此，您需要了解为构建网站创建丰富的界面的重要性，旨在为最终用户提供最佳的导航和可用性体验，了解过去用于构建在线网站的一些技术。从这个视野出发，观察旧的市场趋势，也看到界面发展的新趋势。

调色板：

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

渐变：

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

网页开发

基本上，网络开发意味着互联网的编码页面。然而，这项任务超出了使用 HTML 和 CSS 的范围，它们是创建静态页面的基本工具，它们提供的信息只能通过编辑源代码来修改。

相反，网站上的页面可以是动态的。这意味着可以在不干扰源代码的情况下更改显示的内容。为了实现这一点，网站的动态部分存储在数据库中，只要需要检索该内容就可以访问该数据库。

此功能允许开发复杂的应用程序，这些应用程序使用业务规则、API（应用程序编程接口）等等。因此，针对 Web 开发、客户端编码（前端）和服务器端编码（后端）的活动进行了划分。

API 示例，目前 Web 和移动应用程序最常用的结构，REST API 也称为RESTful API 。

Web 应用程序是 Web 上越来越多的站点；也就是说，它们模仿桌面应用程序，而不是构成 Web 大部分的传统文档以及文本和图像的静态链接。例如，我们有在线文字处理器、照片编辑工具、地图网站等。在 JavaScript 的大力支持下，他们将 HTML4 推向了其能力的边缘。 HTML5 为 DOM（文档对象模型）指定了新的 API（应用程序编程接口），DOM 是一种跨平台、独立于语言的约定，用于表示 HTML、XHTML 和 XML 对象和文档并与之交互。

这些新的 API 可帮助您拖放服务器发送的对象，例如绘图、视频等。

HTML 页面通过 DOM 中的对象向 JavaScript 公开的这些新接口使得使用高度指定的模式编写应用程序变得更加容易，而不仅仅是文档记录不足的花招。

更重要的是需要一个免费（使用和实施）的开放标准，可以与 Adob​​e Flash 或 Microsoft Silverlight 等专有标准竞争。无论您如何看待这些技术或公司，我们都相信网络是制造商掌握的社会、商业和通信的重要平台。

已经有数百万个网页在使用，并且必须继续复制它们。因此，HTML5 主要是 HTML4 的衍生品，它继续定义浏览器应如何处理旧标记，如 、

和其他新标记，因为数百万网页都在使用它们。

界面

术语“接口”可以有多种含义，具体取决于所研究的领域。在信息技术领域，接口意味着两个没有外部帮助就无法自然通信的系统之间进行通信的可能性。

人机交互是对人与计算机之间交互的研究。它是一门跨学科学科，涉及计算机科学、艺术、设计、人体工程学、心理学、社会学、符号学、语言学和相关领域。人与机器之间的交互是通过由软件和硬件组成的用户界面进行的。

人机交互是一门涉及人类使用的交互式计算系统的设计、评估和实现以及对其周围主要现象的研究的学科。

示例 3：向电子邮件发送消息

发送电子邮件

[HTML5] 多媒体标签

数字媒体一词与模拟媒体相反，模拟媒体由物质基础构成：声音被记录在乙烯基表面的小凹槽中，当针穿过这些凹槽时，声音就会被再现。在数字媒体中，物理支持实际上消失了，数据被转换为数字或数字序列 - 因此使用了术语“数字”。这样，声音、图像、文本实际上都是数字序列，可以实现数据共享、存储和转换。从最广泛的意义上讲，数字媒体可以定义为基于数字技术的一组通信工具和设备，允许以数字方式分发或传播书面、声音或视觉智力作品。品牌与消费者沟通策略中使用的电子来源手段，通常称为数字媒体。

对于那些需要向网页添加视频和音乐的人来说， Flash始终是最可行的选择。它曾经并且仍然存在于几乎所有浏览器中，并且我们有一种可以使用而不会出现任何重大问题的格式。

只需添加对插件的调用即可运行。

由于浏览器不一致，有必要添加 ；至于命令，使用插件的特定命令，复制许多属性。更不用说像Flash这样的插件会造成很多不稳定，导致错误甚至导致浏览器关闭。

因此，HTML 5 提供了该语言原生的新支持，以避免使用不必要的插件和命令。目前，只需进行简单的调用，就像是图像一样，文件就会被触发。

 <视频控件 src="video.mp4" width="426" height="240">

新命令带来的问题是使用src属性，该属性在某些浏览器中不能很好地工作。如果我们希望每个人都能够使用任何浏览器打开该页面，则有必要使用另一种类型的属性。因此，通常在标签中使用属性。

元素可以多次使用，并允许您为每个浏览器定义视频格式，从而为您提供更大的覆盖范围。

视频

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

声音的

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

有多种可能的编解码器，您需要导出至少两个版本才能获得更大的覆盖范围。

注意：编解码器是用于编码和解码媒体文件的程序。它们压缩原始格式，有利于存储，并在再现过程中解压缩，将其转换回图像或音频。

所有提到的音频和视频示例都是通过目录中的文档导入的。问题是，如何导入已托管在 YouTube 或 Vimeo 等网站上的视频？两种解决方案（通过文档或通过服务器）哪一种最有利？

导入视频

让我们逐步了解如何从 YouTube 和 Vimeo 导入视频！

[HTML5] 表格标签

在 HTML5 出现之前，表格一直被用作设计页面布局的资源。设计师使用表格作为网格来显示图像和文本，它们被广泛使用，成为网站设计的主要形式，从而创造出丰富的外观。

然而，今天，表格的使用实际上妨碍了更好、更容易访问、更灵活和更实用的网站的构建，特别是对于手机、平板电脑等新媒体而言。

这些表格仍然存在于 HTML 5 中，作为显示表格数据（来自数据库的信息）的资源。使用新版本的 HTML，我们可以创建完全没有表格的网站，从而创建出现在大屏幕（如计算机）上并很好地适应小智能手机屏幕的动态布局。稍后您将了解如何使用 HTML5 和 CSS3 构建响应式布局。

table 命令并未从语言中删除，但其使用受到限制。另一方面，我们仍然有几个网站使用此资源，因此了解它的工作原理非常重要，以便我们可以在必要时维护此类页面。

插入表的命令是

。要开始一行，我们必须引入标记和单元格
，它划分表格行。 通过将内容以粗体显示来划分表格行。所有这些命令分别以
、 和终止。 

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

命令具有一系列有助于表格式设置的属性。主要有：

align=""将表格在三个位置对齐： center 、 left 、 right和justify
bgcolor=""确定表格的颜色
border=""确定边框的大小，如果为零则不显示边框
cellspacing=""确定单元格之间的间距
colspan=""确定两个或多个表列之间的分组（横向）
rowspan=""确定表中两行或多行之间的分组。 （向下和向上方向）
cellpadding=""确定文本和单元格边框之间的间距

显示相对于表格居中的文本，就好像它是标题一样。

规则属性

要选择将在表中显示的内部行，我们在标记内使用RULES属性。该属性的补充是：

和
none没有整条线。
all显示表中每列和行之间的所有行（默认）
rows表中每行之间的水平线。
cols用于表格每列之间的垂直线。
groups对于列组和水平部分之间的行，由特殊标签定义，例如

看一些例子：

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
表单标签
HTML 表单部分对于填写用户输入到 HTML 页面的数据非常重要。这些数据的收集是由后端使用后端编程语言（PHP、JavaScript、Python、Java 等）完成的，该语言在数据库（MySQL、PostgreSQL、MongoDB、OracleDB 等）中存储和查询这些数据）。让我们看看表单标签：
登录表单（样板） ： 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
通过type属性我们可以定义我们使用的input的类型， name=''属性我们可以处理通过编程语言发送的数据。
登录表单（样板）- 使用 PHP ： 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
登记表（样板） ： 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
只有name相同的情况下，我们才能在无线电之间input ，这样我们就可以对这些信息进行分组，并且只标记其中一个。
通过checkbox我们可以选择多个选项。
和
我们可以定义类型及其属性：
  •  button
  •  password
  •  text
  、 和">
 < button type =" button " > Clique Aqui  button >
简而言之，如果您要创建导航按钮，请使用 。如果您要创建一个按钮来从表单提交数据，请使用或
伪类定义
:hover它通过将鼠标悬停在元素上来更改元素。
 :active通过单击来更改元素。
 :link更改所有未访问的链接。
 :visited更改所有访问过的链接。
 :focus更改具有焦点的元素。
 :checked更改所有标记的元素。
 :disable更改所有禁用的元素。
 :enabled更改所有启用的元素。
 :empty更改所有没有子元素的
元素。
 :first-child更改每个启用的元素。
 :enabled更改每个启用的元素。
 :first-child更改作为父元素的第一个子元素的每个
元素。
 :first-of-type它更改作为其父元素的第一个
元素的每个
元素。
 :in-range将元素更改为指定范围内的值。
 :invalid将所有元素更改为无效值。
 :lang(language)使用以“ it ”开头的 lang 属性值更改每个
元素。
 :last-child它会更改作为其父元素的最后一个子元素的所有
元素。
 :last-of-type更改作为其父元素的最后一个
元素的每个
元素。
 :link更改所有未访问的链接。
 :not(selector)更改除
元素之外的每个元素。
 :nth-child(n)更改从其父元素排序的每个 
 元素。
 :nth-last-child(n)更改从其父元素排序的每个 
 元素，从最后一个子元素开始计数。
 :nth-last-of-type(n)更改从其父元素算起的第二个 
 元素（从最后一个子元素开始计数）的每个 
 元素。
 :nth-of-type(n)它会更改作为其父元素的第二个 
 元素的每个 
 元素。
 :only-of-type更改作为其父元素中唯一的 
 元素的 
 元素。
 :only-child它会更改作为其父元素的唯一子元素的每个 
 元素。
 :optional更改没有“required”属性的  元素。
 :out-of-range使用 atr 更改  元素        
        
展开

    



    

        

            附加信息
        

        
    
            
  • 
                版本
                1.0.0
            
    • 
            
  • 
                类型
                其他类别
            
    • 
            
  • 
                更新时间
                2024-12-14
            
    • 
            
  • 
                大小
                407.23KB
            
    • 
                            
  • 
                    来自于
                    Github
                
    • 
                    

    





    

        

            相关应用
        

        
    





    

        

            为您推荐
        

        
    






    

        

            相关资讯
            全部