网页简介 (2)

div标签对是目前网页中比较流行的标签,在七八年年流行使用table来构思一个网页,把一个网页想象成多少行多少列,这种构思灵活性和维护性极差,并且Table标签构思的网页对google爬虫和百度等这种搜索引擎收录性很差,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。所以目前前端流行使用div+css来构思网页,这样的优点是代码精简、有很好的灵活性和可维护性。

input标签用于搜集用户信息,它可以根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

其他的HTML标签猪哥就不多讲,希望大家自己去网上学习。

在有些初级web工程师面试中,面试过程中可能会让你手写一个用户注册功能,这里猪哥给大家讲讲大概的流程:

用户点击注册连接(一般是get请求/register),然后服务器响应此请求返回一个注册页面

用户输入用户名密码、图形验证码等信息,提交注册信息(一般是post请求/register)

服务端收到信息后对信息做校验(一般是前后端双校验),然后存入数据库,返回注册成功提示

2.数据

互联网主要起到了信息交流的作用,而网页作为主要的信息交换载体,标签的主要作用就是包裹数据,让数据能够以人类可视的方式展现。

尤其是一些新闻网站,他们主要以展示新闻信息为主,我们以头条网页来讲讲:

网页简介


在红色框中圈出来的这些新闻,他们是把数据包裹在html标签中,然后以列表的形式展示给用户,接着我们来看看网页代码:

网页简介


我们可以看到新闻标题被a标签包围,还有一些如缩略图、评论数、时间等信息构成了一条新闻简述,然后多个新闻(li标签)构成了一个列表(ul)。

那服务器是如何将数据与封装到页面中去的呢?

前后端未分离:前后端没有分离的公司,一般是先由前端工程师写好页面(数据写死),然后由后端程序员合页面(就是将写死的数据去掉,然后加上数据字段)。

前后端分离:前后端没分离最大的问题就是同一个页面可能前后端开发同学都会去修改,修改的人少还行,但是如果开发人员一多,大家改来改去全乱了,而且发布也会有一定的限制,所以目前流行前后端分离,后端同学只需要提供数据,前端同学搭一个nodejs后台自己渲染页面。

网页简介


拿上面我们的简陋的注册页面来讲讲前后端未分离时具体返回页面步骤,假设我们用户注册成功然后登录,登录成功我们直接跳转用户主页展示用户名和性别,页面如上图,步骤如下:

用户登录成功,在数据库中读取用户信息。

读取到用户数据后进行页面渲染

返回渲染后的页面给浏览器

网页简介

3.CSS样式

html标签+数据构成了整个网页的骨架,但是只有数据和html标签的网页是奇丑无比的
层叠样式表(英文全称:Cascading Style Sheets 简称CSS)是一种用来表现HTML等文件样式的计算机语言。css可以定义html现实的样式,可以实现很多不同的效果、排版等等,html中所有的元素几乎都需要css来管理样式,而且现在越来越流行div+css搭配控制页面排版和样式,css主要通过三大选择器来修饰html标签。

没有css的页面将会是杂乱无章或缺少美感的页面,我们以上面简单的用户主页为例子演示如何使用css以及css的功能。
效果:

网页简介


代码:

网页简介


css:

网页简介

4.js

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfjzw.html