前端基础学习的第一天

146 阅读3分钟

基础目标:学习pc端的网站布局(以模拟静态网站作为是否达成的标准)(在1个月内完成)

1. HTML5基础

主要学习最常见的没有兼容性的HTML标签

2. CSS3基础

主要学习最常用无兼容性的CSS样式,利用标签完成传统pc端网页布局

3. H5C3提高

学习新增的标签、样式,有一定兼容性

4. 参照具体项目模拟网站


首先我们要清楚开发者编写的html文件是怎么变成用户所看到的web网页的。

  1. 建立web页面,创建用超文本标记语言(即html)编写的文件,放在web服务器上
  2. 根据html文件,浏览器了解到显示页面的所有信息。
  3. 浏览器通过互联网得到web页面,所有连通互联网的用户都可以查看。

web服务器:等待来自web浏览器的请求,收到资源请求时,会查找所请求的资源,然后把找到的资源发回给浏览器。

HTML简介

l 网页的基本组成

网站:网页集合

网页:通常指HTML格式的文件,通过浏览器阅读

通常由图片、链接、文字、音频、视频等元素组成。常见后缀为.htm或.html。

网页由网页元素组成,元素利用标签描述出来,浏览器解析后显示给用户。

l 什么是HTML(超文本标记语言)

用来描述网页。不是编程语言,是一种标记语言,即标记标签。

l Web标准的三大组成部分

Web标准是由组织制定的一系列标准集合。

主要包括结构、表现和行为三个方面。

结构:用于对网页元素进行整理分类(HTML)。

表现:用于设置网页元素的办事、颜色、大小等外观样式(CSS)

行为:网页模型的定义以及交互的编写(JavaScript)

l 浏览器的内核(渲染引擎)

负责读取网页内容,整理讯息,计算网页的显示方式并显示网页


HTML标签

l 标签的书写规范

1) 所有标签都包含在一对<>中,一般标签都是成对存在

(例如:<html> </html>)前者为开始标签,后者为结束标签,结束标签前多一个反斜杠“/”

有少部分标签为单标签,即单个存在,例如<br />

2) 标签关系

双标签关系可以分为:包含关系和并列关系

包含关系:一对标签内包含另一对标签(类似父子)

并列关系:非包含(类似兄弟)

l HTML骨架标签(基本结构标签)


学习到这里可以尝试新建一个文档,利用以上提到的标签写一个页面出来。

以下是我的原文件内容:

<html>
     <head>
           <title>小梁踏入前端的第一步</title>
     </head>
     <body>白洞,白色的明天在等着我们</body>
</html>

但是在修改了文件后缀为.html并在浏览器打开后发现显示为乱码。

没想到小梁的第一个页面就出现了问题,在此我查找一下是什么原因。

原来是因为我新手上路还没下载编译器就为了练手用记事本编写,但是记事本默认的编码格式为ANSI,但是我用的浏览器编码格式为UTF-8,所以打开时才会出现乱码。

改过之后页面就没有乱码了。