Web页面制作基础

Web页面制作基础

说明：仅作为学习辅助

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

第一节掌握Web基础知识。

第二节掌握HTML基础知识。

第三节掌握CSS基础知识。

image

web开发背景

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

命名规范

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

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

Web基础知识

每次15分钟朗读：

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

URL的一般格式：

<pre class="public-DraftStyleDefault-pre" data-offset-key="bmavb-0-0" style="margin: 1.4em 0px; padding: 0.88889em; font-size: 0.9em; word-break: normal; overflow-wrap: normal; white-space: pre; overflow: auto; background: rgb(246, 246, 246); border-radius: 4px; color: rgb(26, 26, 26); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

<pre class="Editable-styled" data-block="true" data-editor="f4vgd" data-offset-key="bmavb-0-0" style="margin: 0px; padding: 0px; font-size: 0.9em; word-break: normal; overflow-wrap: normal; white-space: pre; overflow: initial; background: rgb(246, 246, 246); border-radius: 0px;">

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

</pre>

</pre>

常见的协议有：

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

示例：

<pre class="public-DraftStyleDefault-pre" data-offset-key="ca9fe-0-0" style="margin: 1.4em 0px; padding: 0.88889em; font-size: 0.9em; word-break: normal; overflow-wrap: normal; white-space: pre; overflow: auto; background: rgb(246, 246, 246); border-radius: 4px; color: rgb(26, 26, 26); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

<pre class="Editable-styled" data-block="true" data-editor="f4vgd" data-offset-key="ca9fe-0-0" style="margin: 0px; padding: 0px; font-size: 0.9em; word-break: normal; overflow-wrap: normal; white-space: pre; overflow: initial; background: rgb(246, 246, 246); border-radius: 0px;">

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

</pre>

</pre>

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

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

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

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

网站访问过程

image

url统一资源定位符

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

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

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

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

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

web系统开发过程

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

HTML基础知识

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

image

image

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

双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用，且必须合理嵌套。 单标签：在开始标签中进行关闭（以开始标签的结束而结束）。