专栏首页达达前端Web页面制作基础

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. 标签的分类:双标签,单标签。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 软件测试与代码安全详解

    本人学习软件测试收获不少,于是便记录下来自己的思路与知识总结,重温自己的探索之路。

    达达前端
  • 软件测试模型以及测试方法

    答:对于瀑布模型,我知道有六个阶段:计划,需求分析,设计,编码,测试,运行维护。计划–>需求分析–>设计–>编码–>测试–>运行维护,是不是很难背。

    达达前端
  • 软件测试-开始软件测试

    1.测试的目的:在于发现错误(缺陷),保证整个软件开的质量,但软件的质量不能以软件测试为依据 2.成功的测试:是发现了未曾发现的软件错误(缺陷) 3.好的测...

    达达前端
  • 使用kubeadm搭建高可用k8s v1.16.3集群

    本文通过kubeadm搭建一个高可用的k8s集群,kubeadm可以帮助我们快速的搭建k8s集群,高可用主要体现在对master节点组件及etcd存储的高可用,...

    山山仙人
  • JAVA 集合list,Map删除元素的方法总结

    这种方式的问题在于,删除某个元素后,list的大小发生了变化,而你的索引也在变化,所以会导致你在遍历的时候漏掉某些元素。比如当你删除第1个元素后,继续根据索引访...

    traffic
  • ES6的扩展运算符(...)---对象篇

    哈喽,大家好,今天是2月的最后一天,9102年已经过去了六分之一,?想想有点害怕啊!害怕是解决不了任何问题滴!珍惜眼前吧,各位宝宝们!

    用户3258338
  • [编程经验] 我是如何半自动抓取素材公社图片的

    网络爬虫是一件比较繁琐的事情,特别考验人的耐心。但又是非常令人着迷的一件事,因为当你从网络上爬到了自己的想要的数据,满满的成就感油然而生。但是我对爬虫掌握的并不...

    用户1622570
  • 通用数据级别权限的框架设计与实现(2)-数据权限的准备工作

    查看上篇文章通用数据级别权限的框架设计(1)-相关业务场景的分析",我们要继续做一些准备工作。

    星痕
  • Test

    Peter Lu
  • JavaScript面向对象精要(二)

    构造函数就是用new创建对象时调用的函数。使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法。

    奋飛

扫码关注云+社区

领取腾讯云代金券