web前端学习笔记:初识Web前端开发
HTML CSS JavaScript 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>元素
样式的使用
xinxin@chen: 大神,有道云上的数据库表可以分享一下吗,谢谢
weixin_65035587: 感谢,已解决
火炬1: <view class="goods_nav"> <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick"/> </view>我这段代码为啥加入购物车的按钮好像显示不出来
番茄茄茄茄茄茄: 用这个免费的天气接口:tianqiapi.com
快乐学编程: 请问全部用px的话,如何解决不同机型屏幕宽度不一的问题?