web前端学习笔记：初识Web前端开发
行业发展与岗位变化
Web访问流程
网站-----网站与Web应用
网页设计师/网页制作员-----Web前端工程师
PC端-----移动端
Web端产品开发流程
相关岗位名称
招聘要求例
相关理论--万维网
万维网（World Wide Web）：简称WWW或3W，是目前互联网上最流行的一种基于超文本形式的资源组织形式。
万维网基于三个机制向用户提供资源：
（1）协议
协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测，访问Web上的资源都需要遵循这些规则。
万维网使用的是HTTP协议（Hyper Text Transfer Protocol,超文本传输协议）。
2）地址
地址：万维网采用统一的命名方案来访问Web上的资源。URL（Uniform Resource Locations,统一资源定位符，网页的网址）用于标识Web上的页面和资源。
每个URL均由3部分组成，如下所示。
用于通讯的协议
与之通信的主机（服务器）
服务器上资源的路径（例如文件名）
|
协 议 |
主 机 |
路 径 |
|
http |
www.baidu.com |
index.htm |
相关理论--三个机制
(3)HTML（Hyper Text Markup Language，超文本标记语言）
HTML用于创建网页文档。HTML文档是使用HTML标记和元素创建的，此文件以扩展名.htm或.html保存在Web服务器上。
HTTP请求/响应模型
网站类型
静态网站（web前端）
动态网站（程序 访问数据库）
网站与页面
网站（Website）
特定内容 相关网页集合-------确定主题－〉栏目设计
文档+若干文件夹-------文件目录结构设计
要求：一个站点要存放在一个文件夹中，可以设各种不同的子文件夹。
网页
万维网上的基本单元
网页就是包含了文字、图片、动画、声音等内容的可以在网上传输的界面。
可用以共享信息、宣传自己、服务用户等。
.html或.htm
HTML基础
HTML (Hyper Text Markup Language)语言简介
超文本标记语言HTML源于标准通用化标记语言SGML（Standard General Markup Language）是SGML的子集（XML同样也是其子集），由Web的发明者Tim和Daniel于1990年创立。
HTML是一门标记型语言，只要记住各个标记的用法即可
可以用任何文本编辑器来编写HTML页面，只要将创建的页面保存为html或htm即可
在客户端浏览器可以查看所编写的源代码
HTML发展历史
HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。
HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准
相关理论—链接
一个站点拥有大量的信息和数据，需要通过多个页面依照信息属性分类显示
超链接（Hyperlink）是从一个页面跳转到另一个页面的入囗，一种文件的指针：相关联文件的路径
可以跳转执行相应的文件
另一网站、同一网站的某个页面
同一网页的不同位置。
也可以是一幅图片、一个邮件地址等。
相关理论--Web标准
标记可以分为单标记和双标记两种：
单标记单独使用，如：<br>
双标记成对使用，如：<head>…</head>
为了符合xml的规范，如果是单标记，则在开始标记中加/ 如<br/>
对于同一段文本，可以使用多个嵌套标记来共同作用，产生一定的效果，但需要注意标记出现的顺序。
<head><title>网页标题</title></head>
<head><title>网页标题</head></title> （错误）
HTML语言不区分大小写
HTML注释
HTML的注释标记为“<!-->”和“<-->”可以插入到HTML文本的任何地方
例如：<!--这是HTML注释-->
HTML注释将发送到客户端浏览器，但不显示这与后面课程将要讲解的JSP注释不同：JSP注释的内容不会发送到客户端，但在注释出现的位置出现一个空行
HTML文件的基本结构
HTML文件以<html>开头，以</html>结束
HTML文件包括头部<head>和主体<body>两个部分
基本结构为：
<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</BODY>
</HTML>
DOCTYPE 声明了文档的类型
<html> 标签是HTML页面的根元素，该标签的结束标志为 </html>
<head>标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>标签定义文档的标题
<body> 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>
<h1> 标签作为一个标题使用，该标签的结束标志为 </h1>，--Html标题
<p> 标签作为一个段落显示，该标签的结束标志为 </p>--p标签用法
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="utf-8">
</head>
<body>
<h3>洋葱数学_数学知识点一学就懂</h3>
<p>洋葱数学初中微课视频,再难的知识点也能学明白!洋葱数学初中微课视频,再难的知识点也能学明白!</p>
</body>
</html>
CSS ：层叠样式表 (Cascading Style Sheets)
<style>
body{font-size:14px;}
h3{font-size:16px; color:#0000cc;}
</style>
JavaScript
JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行。
JavaScript 被设计用来向 HTML 页面添加交互行为；是一种脚本语言（脚本语言是一种轻量级的编程语言）；由数行可执行计算机代码组成；通常被直接嵌入 HTML 页面；是一种解释性语言（就是说，代码执行不进行预编译）。
<script>
var oP=document.getElementsByTagName("p")[0];
oP.onclick=function(){
alert("hellow world!");
}
</script>
使用的工具
切取图片
基本结构
•站点结构
<title>元素
样式的使用
web前端学习笔记：初识Web前端开发相关推荐
- java web getrealpath,[学习笔记]java web ServletContext.getRealPath(String str)方法的使用
ServletContext.getRealPath(String str)方法的使用 --------------------------------------------------转载---- ...
- web前端学习笔记（最新）
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- 【学习笔记】Web前端到后端数据的交互
[学习笔记]Web前端到后端数据的交互
- Python学习笔记：web开发3
前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
- Python学习笔记：web开发2
前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
- amazeui学习笔记二（进阶开发2）--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- 前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门 一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
- 前端学习（初识HTML 上）——基础知识和基本标签
前端学习之初识HTML 一.HTML基础知识 1.html定义 2.html特点 3.html标签 4.html基础结构 (1)<head></head>中的<meta& ...
- Web Components 学习笔记一： Web Components是什么？解决了什么问题？
公众号:妙蛙种子前端 文章原文地址:Web Components笔记一: Web Components是什么?解决了什么问题? | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客 Web Comp ...
- 前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动 一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字 二 ...
最新文章
- windows下编译pcl-master源码（带GPU）
- OSChina 周六乱弹 ——生日快乐 @落落酱
- (xy)+((x^y)1)
- iOS: 图解Xcode常用的快捷键
- Flask框架——ORM数据库
- python语音程序设计教程_Python语言程序设计（视频教程）
- I/O多路复用之select,poll,epoll简介
- JavaMaven【三、常用指令】
- oracle多少条commit比较好,oracle什么时候须要commit
- [转]sourceforge文件下载过慢
- [XCTF] reverse logmein
- Kubernetes(14):cordon暂停调度/uncordon恢复调度/drain驱逐
- UUIDUtil获取八位UUID
- 2020年软件评测师真题精选
- 人力资源管理计算机基础,人力资源管理-专-李佑强-计算机应用基础实践报告.doc...
- Java数据结构（1.1）：数据结构入门+线性表、算法时间复杂度与空间复杂度、线性表、顺序表、单双链表实现、Java线性表、栈、队列、Java栈与队列。
- jmeter ip 欺骗
- python项目实例-python简单项目实例
- 实验第五节——channel相关操作
- 微纳加工平台培训知识