Web 页面制作基础-优快云博客

前言

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

Web 页面制作基础

说明：仅作为学习辅助

那么 Web 页面制作基础，能让你掌握什么呢？

第一节掌握 Web 基础知识。

第二节掌握 HTML 基础知识。

第三节掌握 CSS 基础知识。

web 开发背景

计算机语言的概念
解释和编译
Sublime 的介绍
开发者工具介绍
命名规范

命名规范

英文命名
数字不能打头
驼峰命名法

学习前端接触的 web 基础语言，HTML，CSS，JavaScript

Web 基础知识

每次 15 分钟朗读：

Internet，中文为因特网，国际互联网。
它是由所有使用公用语言互相通信的计算机连接而组成的全球网络。
WWW是World Wide Web的缩写，中文名万维网。
WWW是Internet的最核心部分。
它是Internet上那些支持WWW服务和HTTP协议的服务器集合。
WWW在使用上分为Web客户端和Web服务端。
用户可以使用Web客户端访问Web服务器上的页面。
Website，中文名为网站，是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。
URL，是Uniform Resource Locator的缩写，中文名为统一资源定位符，俗称网址，它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

URL的一般格式：

协议://主机地址（ip 地址)+目录路径+参数

常见的协议有：

a. ftp：File Transfer Protocol，文件传输协议，可以通过FTP访问服务器上的文件。通常使用时在主机地址前面加上“用户名：密码 @”。

示例：

url: ftp://admin:12345@113.129.xxx/html.pdf

b. file：主要访问本地计算机中的文件。

c. telent：允许用户通过一个协商过程与一个远程设备进行通信。

d. http：Hyper Text Transfer Protocol，超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传输协议。

Web Standard（Web标准)是Web应用开发需要遵守的标准。
网页主要由三部分组成：结构标准，表现标准，行为标准。

网站访问过程

url统一资源定位符

互联网上标准资源的地址，可以从互联网上得到的资源的位置和访问方法。

组成部分：协议，服务器地址，资源路径。

Web Browser，中文名为网页浏览器，是一个显示网页服务器或者档案系统内的 HTML 文件，并让用户与这些文件互动的软件。
Web Server，中文名为网页服务器，WEB服务器，主要是提供网上信息浏览服务。

Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，客户端就可以从服务器上获取网页html，包括css，js,视频，音频等。

web开发主要分前端和后端两部分。
前端是指直接与用户接触的网页，网页上通常有html,js,css等。
后端是指程序，数据库和服务器层面的

web系统开发过程

项目提出，需求分析，（设计，ui 设计，系统设计），（开发，前端开发，后台开发），系统测试，开发与维护。

HTML 基础知识

HTML 的历史：HTML，XHTML
HTML 的全局属性：全局标准属性，全局事件属性
HTML 的元素：

标记语言，是一种将文本以及与文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。
HTML，为超文本标记语言。
XHTML是可扩展超文本标记语言，是一种更纯洁，更严格，更规范的html代码。
html文件由文件头和文件体两部分组成。
标签的分类：双标签，单标签。

双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用，且必须合理嵌套。

单标签：在开始标签中进行关闭（以开始标签的结束而结束）。

HTML 的全局标准属性

在HTML中，规定了 8 个全局标准属性。

class用于定义元素的类名。
id用于指定元素的唯一id。
style用于指定元素的行内样式。
title用于指定元素的额外信息。
accesskey用于指定激活某个元素的快捷键。

支持accesskey属性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab键下的次序。

支持tabindex属性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中内容的文本方向。

dir的属性值只有ltr和rtl两种，分别是left to right和right to left。

lang用于指定元素内容的语言。

HTML 的全局事件属性

`Window`窗口事件

onload，在页面加载结束后触发。
onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。

`Form`表单事件

onblur，当元素失去焦点时触发。
onchange，在元素的元素值被改变时触发。
onfocus，在元素获得焦点时触发。
onreset，当表单中的重载按钮被点击时触发。
onselect，在元素中文本被选中后触发。
onsubmit，在提交表单时触发。

`Keyboard`键盘事件

onkeydown，在用户按下按键时触发。
onkeypress，在用户按下按键后，按着按键时触发。

该属性不会对所有按键生效，不生效按键如：alt，ctrl，shift，esc。

onkeyup，当用户释放按键时触发。

`Mouse`鼠标事件

onclick，当在元素上单击鼠标时触发。
ondblclick，当在元素上双击鼠标时触发。
onmousedown，当在元素上按下鼠标按钮时触发。
onmousemove，事件会在鼠标指针移动时发生。
onmouseout，当鼠标指针移出元素时触发。
onmouseover，事件会在鼠标指针移动到指定的元素上时发生。
onmouseup，当在元素上释放鼠标按钮时触发。

Media 媒体事件

onabort，当退出媒体播放器时触发。
onwaiting，当媒体已停止播放但打算继续播放时触发。

HTML 元素

一个 HTML 文档包含的标签

<!DOCTYPE>，声明文档类型。
<html>，HTML 元素真正的根元素。
<head>，定义html文档的文档头。

head中包含的元素
title，定义HTML文档的标题base，为页面上的所有链接规定默认地址或者默认目标link，用于定义文档与外部资源之间的关系meta，提供关于HTML的元数据style，用于为HTML文档定义样式信息script，用于定义客户端脚本

复制代码

body，定义html文档的文档体。
content-Type，用于设定网页的字符集，便于浏览器解析与渲染页面。

代码：

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">

复制代码

cache-control，用于告诉浏览器如何缓存某个响应及缓存多长时间。

参数：

no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存
no-store，允许缓存，每次都要去服务器上下载完整的响应
public，缓存所有响应
private，只为单个用户缓存
max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒
<meta http-equiv=cache-control" content="no-cache">

复制代码