Web开发概述

了解Web开发相关知识的意义在于

Web开发概述

了解Web开发相关知识的意义在于，Web拥有一套标准，“Web 标准是我们用来建立 Web 网站的技术。这些标准存在于名为规范的较长的技术文档中，该文档详细说明了技术应如何工作“。它规定了web如何工作，这对于从底层去理解、提升web应用的性能具有关键作用。

而且标准是不断更新的，所以意味着该行业的从业人员也需要时刻保持学习，以适应最新的标准。

开发工具

• 可用于运行测试以显示您的代码是否按预期运行的 测试工具（ Testing tools ），跨浏览器测试
• 现代浏览器中的 开发人员工具（ developer tools ）可用于调试代码
• 所谓的 “ Linters” ，它包含了一组规则，检查您的代码之后，会突出显示您未正确遵循规则的地方
• Minifiers ，它将代码文件中的所有空格删除以使其更小，从而可以更快地从服务器下载

语言

前端语言：HTML ， CSS 和 JavaScript

后端语言，或者叫服务器端语言：ASP.NET ， Python ， PHP 和 NodeJS

考虑的问题

跨浏览器兼容性（ Cross-browser compatibility ），确保能在尽可能多，包括老旧的设备浏览器上运行

响应式网页设计（ Responsive Web design ），确保能在不同尺寸的浏览器界面中都有良好的浏览体验

性能（ Performance ），尽可能快加载网站，简单易用

可访问性（ Accessibility ）

隐私与安全（ Privacy & Security ），隐私是指允许人们私下从事其业务，而不是监视他们或收集您绝对不需要的更多数据。安全性是指以安全的方式构建您的网站，以使恶意用户无法从您或您的用户那里窃取信息。

Web是如何工作的

第一步，浏览器输入一个网址，向服务器端发送request，请求拷贝一份网页

第二步，服务器端收到请求后，返回一个同意信息，接着把网页文件以数据包的形式发送给浏览器

第三步，浏览器解析网页文件。首先，从HTML文件中识别出所有”link”和”script”，获取外部文件的链接，一边继续解析HTML文件，一边根据外部文件链接向服务器发送请求，获取再解析CSS和JavaSript文件；接着，给解析后的HTML生成一个DOM树，给CSS生成一个CSSOM树保存在内存中，编译执行解析度JavaScript文件；最后，网页界面展示出来。

网站架构

也称信息架构，规划整个网站内容，需要哪些页面、如何排列组合这些页面、如何互相进行链接

第一步，头脑风暴所有需要实现的内容

第二步，将所有内容分组罗列出来

第三步，绘制站点草图，使用框框作为页面，连线表示页面之间的链接，有点像UML

第四步，确定所有页面的通用部分，一般为导航栏、页脚

第五步，绘制网页布局草图

操作表单

1.常用表单控件

• 文本框，<input type="text" >
• 口令框，<input type="password" >
• 单选框，<input type="radio" >
• 复选框，<input type="checkbox" >
• 下拉框，<input type="select" >
• 隐藏文本，<input type="hidden" >

2.控件值

<form action="" method="POST" target="_blank">
    <p>用户名：
        <input type="text" id="username" name="username" placeholder="用户名">
    </p>
    <p>性别：
        <div>
            <input type="radio" id="male" name="sex" value="男">
            <label for="male">男</label>
    		<input type="radio" id="female" name="sex" value="女">
            <label for="female">女</label>
    	</div>
    </p>
    <p>
        <input type="checkbox" id="cbox1" name="ck" value="first checkbox" checked="checked">
        <label for="cbox1">This is the first checkbox</label>
    </p>
    <p>
        <input type="checkbox" id="cbox2" name="ck" value="second checkbox">
        <label for="cbox2">Second checkbox</label>
    </p>
    <p>密码：
        <input type="password" id="pwd" name="pwd"> 
    </p>
	<button type="submit">提交</button>
</form>

• form表单里面的控件必须要有name属性，它的值才会被form提交
• 单选框，同一组单选框的name应该一致，用div容器将同一组radio包裹起来可读性会更好
• **label标签，for=”input控件的id值”**，这样点击label时，会选中或跳转到对应的input中

var username = document.getElementById('username')
username.value			//获取值
username.value = 123	//设置值

var male = document.getElementById('male')
var female = document.getElementById('female')
male.value		//"男"，初始值，可以通过JS赋值改变
female.value	
male.checked	//true或false
female.checked

3.表单的form属性

属性	描述
accept-charset	提交表单中使用的字符集（默认：页面字符集）
action	提交表单的地址（URL）
autocomplete	浏览器自动完成表单（默认：开启）
enctype	提交数据的编码（默认：url-encoded），提交文件时：multipart/form-data
method	提交表单时所用的 HTTP 方法（默认：GET）
name	表单的名称（对于 DOM 使用：document.forms.name） 比如要外置表单提交按钮是，就需要用form的name属性来匹配
novalidate	规定浏览器不验证表单
target	action 属性中地址的目标（默认：_self）

操作文件

<input type="file" enctype="multipart/form-data">，当input的type为file时，enctype必须为multipart/form-data,method必须为PSOT

出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的

H5之前，JS对于文件能够操作的内容很少。H5新增了File API允许JS读取文件的内容

File API

H5的File API提供了File和FileReader两个主要对象，可以获取并读取文件

<form action="" method="POST"  enctype="multipart/form-data">
    <div id="pic-window" style="width:300px;hegiht:300px;">
    <input type="file" name="image" id="pic" accept=".png,.jpeg,.jpg,.gif">
    <p id="pic-info"></p>
</form>

let fileInput = document.getElementById('pic');
let preview = document.getElementById('pic-window');
let info = document.getElementById('pic-info');

fileInput.addEventListener('change',function(){
    preview.style.backgroundImage = '';		//清除背景
    if(!fileInput.value){
        info.innerText = "没有选择文件";
        return;
    }
    var file = fileInput.files[0];			//获取File引用
    info.innerHTML = '文件：'+file.name +'<br>' +
        '大小：'+file.size + '<br>'+'修改：'+file.lastModified;
    //读取文件
    var reader = new FileReader();
    reader.onload = function(cb){		//读取完成的回调函数
        let data = cb.target.result;
        preview.style.backgroundImage = 'url('+data+')';
    }
    reader.readAsDataURL(file);
})