前端技术概况

最新推荐文章于 2024-05-01 22:48:12 发布

好先

最新推荐文章于 2024-05-01 22:48:12 发布

阅读量1.3k

点赞数

文章标签： css javascript html5 html

本文链接：https://blog.csdn.net/weixin_59719549/article/details/118395365

版权

一、web 万维网：

网页制作就是web1.0的产物，那时候的网页都是静态网页（没有与用户进行交互，仅能供读者浏览的网页：小说、新闻....用户唯一做的就是浏览图片和文字），评论交流，登录注册都不存在，当时的网页三剑客“dreamweaver视频+软件 fireworks 视频+教程 flash视频+软件”它们都是web1.0的时代的产物

从2005年开始，互联网进入了web2.0时代，单一的文字和图片不能满足用户需求
动态网页：用户不仅仅可以浏览网页，还可以和服务器进行交互。比如：登录新浪微博，要输入账号密码，输入内容的验证，炫酷的动画效果，音频视频等网页制作演变为 web前端开发。

2、前端技术：

核心技术：网页由三部分组成：结构、表现和行为 html、css和js

（1）HTML：超文本标记语言 hyper，text， markup ，language 超文本：页面可以包含图片，连接，音乐，视频等非文字元素现在的网页就是用html语言制作的。

HTML 负责网页是什么（如它是什么，它是手机还是平板）

（2） CSS （Cascading Style Sheets）0是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言,CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化.

css 负责网页是什么样子，长什么样子(如它长的五官端正，丑还是美)

（3）JS javascript 脚本语言是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中

JS js 负责网页能做什么 (如它是能跑还是能跳能飞还是能下水游泳)

二、HTML5超文本标记语言版本

第一版在1993年第二版 1995年11月 html2.0 第三版 1997年1月14日 w3c的推荐标准 html3.2 第四版 1997年12月18日 w3c的推荐标准 html4.0 第五版 1999年12月24日 html4.01（微小改进） w3c的推荐标准第六版 2014年10月28日 w3c的推荐标准 html5

三、网站开发流程

1、产品经理了解客户需求，整理需求文档画一个草图

2、 UI设计师设计效果图计算图标尺寸

3、前后端人员（后端写入接口数据库调用）根据UI所提供的数据进行编写。（1）、传统模式：页面和接口都由后端完成。（2）、前后端分离模式：前端写页面，后端写接口，储存数据---->前后端交互（联调）---> 自测

4、测试人员前端页面、后端接口找bug 第一轮测试第二轮测试第三轮测试

5、发布到服务器上进行上线，每一台服务器都有一个IP 每一个域名都会指向IP

6、客户验收

四、开发工具

1、VS Code 很新，更新快，已累计大量的开发人员，安装包很小，强烈推荐官网下载：https://code.visualstudio.com/

2、web storm 安装包比较大，但是功能全，推荐

3、Hbuilder 国内开发的，纯中文，代码提示比较强点

4、sublim 是一个代码编辑器,也是HTML和散文先进的文本编辑器，支持64位和32位操作系统，程序员之必备神器。sublime text 3免费版在支持语法高亮、代码补全、代码片段(Snippet)、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时，保证其飞快的速度。

五、html基础结构和注释

1、<!DOCTYPE html> （告诉浏览器文档所使用的是html规范必须放在html文档的第一行）

<html lang=""en> （ ）

2、<head> 头部

3、<meat name="viewport" content"width, initial-sacale=1.0"> viewport视图窗口 inital-scale用户默认缩放比例/

4、<title>文档的标题</title> 就是浏览器小窗口的名字比如你是某度某宝某东

4、 <style> </style> 标签是样式表

5、<body></body> 整个文档的主体，以后所有的元素标签都放到body里面

六 HTML标签结构

1、单标签单标签在传统的html版本中，单标签需要添加/，从h5开始，单标签不再添加/

2、双标签 <xx>开始标签 </xx>结束标签（闭合标签）

3、html标签按照内容可以分为三部分：标签名，属性，内容。<xxx name="wz" age="ll">contr</xx> xxx为标签名 name，age 属性名 wz是name对应的值ll是age对应的值多个属性中间需要用空格隔开，conter是标签的内容一个html标签可以没有属性，也可以没有内容，但是必须要有标签名

七、html标签（标签的作用）

1、（标签的意思和使用场景）
什么标签放什么内容，h标签放标题 p标签放段落文字，为了让搜索引擎更好的抓取网页内容，有利于seo
SEO（search engine optimization）:搜索引擎优化利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是网站排名更靠前让其公司在行业内获取领先地位，获得品牌收益，很大程度上是网站经营者的一种商业行为，

2、html的标签

（1）块标签类型是上下排布独占一行可以直接设置宽高。作用分割划分在网页制作过程中，把网页分割成一个一个的功能也叫图层（常用的有内部写“<div>文字、图片、链接、等</div>”）h1-h6（标题标签）自带文本加粗，文本字体更大，独占一行，默认边距（前一个元素和后一个元素之间的距离）如果标签不存在，比如H7默认为行内标签，h1-h6 字体大小 h1 32px h2 24px h3 18.72px h4 16px h5 13.28px h6 12px 浏览器最小字体大小就是12px

（2）、行标签类型是不独占一行水平排布不能直接设置宽高，只能靠内容撑起来 span a（超链接） b strong(加粗) i、em（倾斜） u（下划线）...

（3）、行内快标签水平排布，不独占一行，可以设置宽高，它既有行标签的特点也有块标签的特点多个标签可以在一行显示，并且可以设置宽高.img（图片） input（单行输入框） textarea（多行输入框）....

（4）格式化标签 center 内容居中 br 换行 pre 保留代码的缩进 <pre> hellow word </pre>

（5）嵌套规则块标签可以嵌套行标签，行标签最好不要嵌套块标签 p标签不要嵌套块标签，嵌套的时候注意代码的缩进

（注，本文整理自学习笔记和网上百度学习，有错误欢迎指正，）

好先

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端技术概况

一、web 万维网：网页制作就是web1.0的产物，那时候的网页都是静态网页（没有与用户进行交互，仅能供读者浏览的网页：小说、新闻....用户唯一做的就是浏览图片和文字），评论交流，登录注册都不存在，当时的网页三剑客“dreamweaver视频+软件 fireworks 视频+教程 flash视频+软件”它们都是web1.0的时代的产物从2005年开始，互联网进入了web2.0时代，单一的文字和图片不能满足用户需求动态网页：用户不仅仅可以浏览网页，还可以...
复制链接

扫一扫