路飞学城Python-Day42

前端

01-前端介绍

web1.0时代的网页制作一般都是静态的网页页面

web1.0时代网页三剑客 Dreamweaver+Fireworks+Flash

什么是静态页面？

没有与用户进行交互的，而是仅仅是给读者或者用户去浏览的一个网页，称为“牛皮鲜”网页

web1.0时代用户只能浏览网页和图片

05年开始网页进入了2.0时代，仅仅是静态网页和图片已经不能满足用户的需求了，用户需求和体验都越来越高，动态页面使得用户不仅仅能浏览网页，还能对网页操作，和服务器进行交互

登录新浪微博输入的账号密码，可以传输给服务器，通过服务器进行后台的校验再返回给用户展示的页面，不仅仅包含动画、视频、音频，还能让用户进行交流，上传，下载等，所以前段现在更接近于后端的开发，所以这是一门前端开发的只是。

web1.0时代的静态网页代码相比现在的网站代码比较冗余，维护比较困难，所以后期就很难写

web前端能做什么？

公司官网、移动端网页、移动端APP、微信小程序

前端的核心内容有3个部分 HTML、CSS、JavaScript

网页最主要的有3个部分组成1.结构；2.表现；3.行为，现在的网页标准是W3C

1.html 超文本标记语言简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言

2.CSS 层叠样式表以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS

3.JavaScript JavaScript是一门脚本语言

4.HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为

02-HTML介绍

HTML简介

HTML是一个网页的主题部分，也是网页的基础，因为一个网页可以没有样式，可以没有交互，都是必须有网页呈现的内容

所以HTML部分是整个前端的基础

HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识

1.什么是标记语言？

标记语言既描述了文档本身的信息（问题内容和回答的情况），也描述了文档的结构和各部分的作用。而HTML则是世界通用的、用于描述一个网页的信息的标记语言，我们使用的浏览器具有将HTML文档渲染并展示给用户的功能（当你访问知乎网站的时候，实际上你获得了一份由知乎提供给你的HTML文档。浏览器将根据HTML文档渲染出你看到的网页）

HTML文本中，带尖括号的叫标签，标签描述了文本的作用，比如p标签表示其内部的文本是一个段落，a标签标识内部的文本是超链接等；与此同时，通过标签的互相嵌套，表示了这个文档的结构。至于哪个标签表示什么意思、总共有多少个种类的标签这类的问题，由W3C(万维网联盟)这一组织规定。很显然，HTML作为一种标记语言它并没有什么逻辑，简单来说就是一些符号，一些有特殊意义的符号，一些浏览器认识的有特殊意义的符号

2.HTML开发环境

常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML

3.文件的后缀名规范

为了统一HTML语言，建议所有的网页相关的都采用.HTML来作为后缀( html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别，唯一区别即多与少一个“l”)

标签之间都是互相嵌套的，也就是父子级关系，一个网页是由一个结构表示的，结构是由标签的互相嵌套组成的

4.什么是标签？

1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。

2. HTML中标签**通常**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，

如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。

3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。

4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。

注意：不是所有的标签都需要互相嵌套

03-HTML文档结构

一个HTML文档就是一个文件。HTML文档是有自己的文件结构的

<!DOCTYPE HTML> --->这个不是标签，只是对html的一个声明

<html> -->文档的根节点

<head>...</head> -->子节点，缩进代表的是一块区域

</html>

首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

<html></html> 称为根标签，所有的网页标签都在<html></html>中。
<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。
常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

路飞学城Python-Day42

猜你喜欢