【新闻推荐系统】(task4)前端基础

举报
野猪佩奇996 发表于 2022/01/23 01:53:47 2022/01/23
【摘要】 学习总结 (1)task4主要是前后端基础及交互(前端、flask、后端请求逻辑)。 (2)Web前端​网页:由文字、图像、超链接、音频、视频以及Flash等元素构成;Web标准有三层结构,分别是结构(...

学习总结

(1)task4主要是前后端基础及交互(前端、flask、后端请求逻辑)。
(2)Web前端​网页:由文字、图像、超链接、音频、视频以及Flash等元素构成;Web标准有三层结构,分别是结构(HTML)、表现(CSS)和行为(JS)。结构类似人的身体, 表现类似人的着装, 行为类似人的行为动作。
(3)可以参考《南昌大学—网页设计与开发》《北林—web前端开发》课程。
(4)Vue:可以自底向上逐层应用,其核心库只关注图层,还便于与第三方库或有项目整合,完全能够为复杂的单页应用提供驱动。

零、云端全栈介绍

在这里插入图片描述
在python体系下的云端全栈的架构图如下,在我们的新闻推荐系统中使用的后端web框架是flask。
在这里插入图片描述

一、Web前端

​ Web前端网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

1.1 什么是Web

  • Web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
  • 是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
  • Web前端主要是通HTML,CSSJS,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能。

1.2 Web 标准构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

  • 结构标准:结构用于对网页元素进行整理和分类,对于网页来说最重要的一部分 。通过对语义的分析,可以对其划分结构。具有了结构的内容,将更容易阅读.

  • 表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS 。为了让网页能展现出灵活多样的显示效果.

  • 行为标准:行为是指网页模型的定义及交互的编写 。使用户对网页进行操作,网页可以做出响应性的变化。

总的来说,

  • Web标准有三层结构,分别是结构(HTML)、表现(CSS)和行为(JS)。
  • 结构类似人的身体, 表现类似人的着装, 行为类似人的行为动作
  • 理想状态下,他们三层都是独立的, 放到不同的文件里面

1.2.1 HTML(超文本标记语言)

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

(1)超文本的含义

  • 超越文本限制:可以加入图片、声音、动画、多媒体等内容
  • 超级链接文本:可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。

(2)语法骨架格式

<!DOCTYPE html>
<html>   
    <head>
        <meta charset="utf-8">
        <title>我的第一个页面</title>
    </head>
    <body>
        <h1>一个一级标题</h1>
		<p>一个段落。</p>
    </body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据
    • <meta charset="utf-8"> 定义网页编码格式
    • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
    • <h1> 元素定义一个标题
    • <p> 元素定义一个段落

html
参考链接:
https://www.runoob.com/html/html-tutorial.html
https://www.w3school.com.cn/html/index.asp

(3)HTML的发展

• Web 1.0: HTML+CSS 基本的网页展示
• Web 2.0: Ajax+JS+XML 高效的数据表达
• Web 3.0: HTML5+CSS3 Web自适应和普适应用

1.2.2 CSS(CSS样式表or层叠样式表)

在这里插入图片描述

  • CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
  • CSS主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
  • CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

(1)CSS 规则

css

  • 选择器:需要改变样式的 HTML 元素。

  • 声明:由一个属性和一个值组成。声明之间用分号结束。

    • 属性:希望设置的样式属性。每个属性有一个值。属性和值用冒号分开。

(2)语法格式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

  
 
  • 1

例如:

<style>
   /*选择器{属性:值;}*/
   p {
   	  color:#06C; 
   	  font-size:14px;  
   	} 
   /*文字的颜色是 蓝色*/
   h4 {
   	 color:#900;
   }
   h1 {
   	 color:#090; 
   	 font-size:16px; 
   	}
   body { 
   	 background:url(bg2.jpg);
   }
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

参考链接:
https://www.runoob.com/css/css-tutorial.html
https://www.w3school.com.cn/css/index.asp

(3)CSS的三种写法

行内模式:在标签的style属性中书写
(下图源自北理工慕课《python云端系统开发入门》)
在这里插入图片描述
页内模式:在HTML网页中使用独立的<style>标签书写
(下图源自北理工慕课《python云端系统开发入门》)
在这里插入图片描述
外部模式:单独在CSS文件中书写
在这里插入图片描述
其中的demo.css文件:
在这里插入图片描述

1.2.3 JS(JavaScript脚本语言)

  • JS (JavaScript)是 Web 的编程语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常常用来给HTML网页添加动态效果,从而实现人机交互的网页
  • 脚本语言不需要编译,在运行过程中由 js 解释器(js引擎)逐行来进行解释并执行

(1)JS的组成

在这里插入图片描述

  • ECMAScript: 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,在万维网上应用广泛,它往往被称为 JavaScript或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
  • DOM:文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
  • BOM:浏览器对象模型(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

(2)书写位置

1.行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" />

  
 
  • 1
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick;
  • 可读性差, 在HTML中编写JS大量代码时,不方便阅读;
  • 引号易错,引号多层嵌套匹配时,非常容易弄混;

2.内嵌式

<script>
    alert('Hello  World~!');
</script>

  
 
  • 1
  • 2
  • 3
  • 可以将多行JS代码写到 script 标签中

3.外部JS文件

<script src="myScript.js"></script>

  
 
  • 1
//myScript.js文件内容
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

参考链接:
https://www.runoob.com/js/js-tutorial.html
https://www.w3school.com.cn/js/index.asp


Reference

(1)datawhale notebook
(2)Vue全家桶介绍

文章来源: andyguo.blog.csdn.net,作者:山顶夕景,版权归原作者所有,如需转载,请联系作者。

原文链接:andyguo.blog.csdn.net/article/details/122097456

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200