Web网页的一些技术介绍

相关技术

网页语言--HTML、CSS、JavaScript
网路协议------http协议 https协议,Browser/Server架构
浏览器内核---
调试-Debug

HTML介绍

HTML的基本结构

开始标签到结束标签--
 标签
    元素--Elements
        <html> 元素定义了整个 HTML 文档
        <body> 元素定义了 HTML 文档的主体
    属性--properties
       总是在 HTML 元素的开始标签中规定
        名称/值对的形式出现
        属性  值   描述
        class   classname   规定元素的类名(classname)
        id  id  规定元素的唯一 id
        style   style_definition    规定元素的行内样式(inline style)
        title   text    规定元素的额外信息(可在工具提示中显示)

注释  <!-- <table> 定义 HTML 表格 -->
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的
段落是通过 <p> 标签定义的
换行(新行)<br /> 
元素中文本的字体系列、颜色和字体尺寸 font-family、color 以及 font-size 
长引用的  <blockquote>
短的引用  <q> 
链接语法 使用 <a> 标签在 HTML 中创建链接。
    有两种使用 <a> 标签的方式:
    通过使用 href 属性 - 创建指向另一个文档的链接
    通过使用 name 属性 - 创建文档内的书签
图像由 <img> 标签定义
表格由 <table> 标签来定义

<html>
<head>
        <title>.....</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <style type="text/css">
            body {background-color: red}
            p {margin-left: 20px}
        </style>            
        <script type="text/javascript">
            document.write("Hello World!")
        </script>
</head>

<body>
     <h1>First Heading</h1>

     <p>first paragraph</p>
     <a href="http://shiyanlou.com">This is a link</a>
     <img src="shiyanlou.jpg" width="100" height="142" />
     <p style="color: red; margin-left: 20px">
This is a paragraph
</p>
</body>
</html>

常见的HTML事件

onchange    HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout  用户从一个HTML元素上移开鼠标
onkeydown   用户按下键盘按键
onload  浏览器已完成页面的加载
 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。

JavaScript的基本介绍

客户端脚本
网页中JavaScript脚本,可以在HTML页面的 <body><head>部分中,必须位于<script></script> 标签内,浏览器会解释并执行位于 <script></script>之间的 JavaScript 代码
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件
<script>
function displayDate(){
    //查找元素,HTML DOM 中定义.getElementById("demo")
    //改变 HTML 元素的内容innerHTML=新的 HTML
    document.getElementById("demo").innerHTML=Date();
}
</script>

<script src="myScript.js"></script>

数据类型
    数据类型-动态类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)--
语法:
    语句:带分号
    函数定义 function
    变量声明:var
    Object-键值对的容器
        访问对象--使用.点或者[]
        访问对象方法objectName.methodName()

输出数据
JavaScript 可以通过不同的方式来输出数据
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

HTML DOM介绍

浏览器会创建页面的文档对象模型(Document Object Model)
    JavaScript 能够改变页面中的所有 HTML 元素
    JavaScript 能够改变页面中的所有 HTML 属性
    JavaScript 能够改变页面中的所有 CSS 样式
    JavaScript 能够对页面中的所有事件做出反应
查找
    通过 id 找到 HTML 元素
    通过标签名找到 HTML 元素
    通过类名找到 HTML 元素
改变
    改变 HTML 内容
        document.getElementById(id).innerHTML=新的 HTML
    改变 HTML 元素的属性
        document.getElementById(id).attribute=新属性值
    改变HTML 元素的样式。
        document.getElementById(id).style.property=新样式
事件
     button 元素分配 onclick 事件
        <button onclick="displayDate()">点这里</button>
    在用户点击按钮时触发监听事件:
        document.getElementById("myBtn").addEventListener("click", displayDate);

    element.addEventListener(event, function, useCapture);
    第一个参数是事件的类型 (如 "click" 或 "mousedown").
    第二个参数是事件触发后调用的函数。
    第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

网络介绍

B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端,将系统功能实现的核心部分集中到服务器上

  URL - Uniform Resource Locator--统一资源定位符
scheme - 定义因特网服务的类型。最常见的类型是 http
    host - 定义域主机(http 的默认主机是 www)
    domain - 定义因特网域名,比如 w3school.com.cn
    :port - 定义主机上的端口号(http 的默认端口号是 80)
    path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
    filename - 定义文档/资源的名称

客户端代码将数据发送到服务器,由服务器代码执行,返回相应数据  
接口文档:接口地址,前端请求的参数,后端返回的参数

前端请求参数的形式
    GET和POST两种方式
    GET - 从指定的资源请求数据-从指定的服务器中获取数据
    POST - 向指定的资源提交要被处理的数据-提交数据给指定的服务器处理
HTTP消息--后端消息
    4xx: 客户端错误、
    5xx: 服务器错误

B/S结构 
<%=%>获取后台的变量值
<% %>之间可以写服务器端代码
<%> <%> 服务器中写html

浏览器介绍

Web浏览器--很多市场营销的元素被加入了引擎和以它们为基础的浏览器
    1.排版引擎也称之为渲染引擎,习惯将之称为"浏览器内核".
        其决定了浏览器如何显示网页的内容以及页面的格式信息。
        内核分类
        Trident(IE内核)
        Gecko(Firefox内核)
        Webkit(Safari内核,Chrome内核原型,开源)
        Blink渲染引擎
        KHTML--WebCore,WebKit
    2.JavaScript解析引擎
        JavaScript 引擎的基本工作是把开发人员写的 JavaScript 代码转换成高效、优化的代码,
        这样就可以通过浏览器进行解释甚至嵌入到应用中。
    事实上,JavaScriptCore 自称为“优化虚拟机”。读取和编译 JavaScript 代码   
Web开发
    Web框架
        框架(Framework)是整个或部分系统的可重用设计
        有ExtJs, Jquery等,
        主要用于简化javascript,方便页面脚本的编写和设计。
    模板引擎
      目的:以业务逻辑层和表现层分离为目的的,生成html等多种文件
      模板引擎的基本机理:替换(转换),将指定的标签转换为需要的业务数据;
                            将指定的伪语句按照某种流程来变换输出
      分类
        “置换型”模板引擎,这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替换一下
            便生成了最终需要的业务数据(比如网页
        “解释型”模板引擎
        “编译型”模板引擎等
      示例
        inja2是基于python的模板引擎
        PHP的smarty
        J2ee的Freemarker和velocity

Chrome浏览器-debug工具

查看网页源码
    F12
    鼠标--右键-查看网页源代码
    ctrl+U 
初步调试
    调节-电脑和手机的图表Toggle device  toolbar
    Elements<标签>、Source-资源、Network-网络、
    TimeLine时间轴、Profiles性能、Audits-监察和Console--显示命令行
        Elements面板--查看所有的DOM tree中的内容               
            Elements标签页的右侧
                html和body
                    Style       :可以对元素的CSS进行查看与编辑修改
                    Event Listener
                    DOM Breakpoints
                    Properties  :元素具有的方法与属性
        Console面板:
            javascript提供的API或者API的功能
        Source
            标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容
        Network
            需要刷新-F5,才会显示
              选择请求和响应类型--然后点击其中一个名字,即可以查看请求和响应
                    Request URL
                 分析网站请求的网络情况、查看某一请求的请求头
                 响应头还有响应内容 以及 Cookies
        TimeLine
            JS执行时间、页面元素渲染时间
        Profiles
            CPU占有率,还有内存占有率。这能够帮助优化代码
        Application
        Security
        Audits
            优化前端页面、加速网页加载速度

blogroll

social