Web前端开发学习笔记（一）

最新推荐文章于 2024-03-29 21:35:38 发布

AlexanderHunter先生

最新推荐文章于 2024-03-29 21:35:38 发布

阅读量663

点赞数

本文链接：https://blog.csdn.net/qq_34792581/article/details/76735613

版权

最近简单地学习了一些网页（HTML5 + CSS3 + JS）的基本知识，做一个简单的学习笔记，下面进入正题：

一、编程软件

编写网页的软件有很多，例如专业级的Microsoft FrontPage、Dreamweaver，还有普通的文本编辑器Submit Text、Vim等。我学习网页使用的Submit Text 3——程序员最爱的编程软件之一，是一款界面简洁的轻量级文本编辑器，有许多功能强大的插件可供下载，下载和安装都可以通过Submit Text的Package Control进行。下面就介绍一下我在用submit text学习网页时，用到的三款强大的插件：

Side Bar：博主真心推荐的一款侧边栏插件，可以快速有效地管理文件，submit自己是没有这种侧边栏的，对于那些初学时使用官方编程IDE的程序员来说，SideBar可以让你找到初学的感觉，也不必为了文件管理而发愁啦。
Emmet：前身是Zen Coding，它大大提高了前端代码的编写效率。Emmet提供了一些特殊的运算，来简化前端工作的繁琐流程，例如：div * 5 + Tab键，就可以直接生成5个<div></div> 标签代码，对于HTML和CSS编写十分有帮助。
Clickable URLs：“可点击的URL”，这款小巧的插件，可以使出现url能够点击。

二、入门篇

（一）HTML
HTML——超文本标记语言，所谓超文本，就是一些非文字的元素、例如视频、图片等，目前已经发展到HTML5。兼容性上，Opera、Edge、火狐等最新版本，都已经对HTML5的大部分功能实现兼容。

HTML5文件的基本结构，来一个例子：

<!DOCTYPE html> <!-- HTML5头声明 -->
<html>
    <head>
        <meta charset="utf-8"> <!-- 编码方式 -->
        <title>TitleString</title> <!-- 网页的标题 -->
    </head>
    <body>
        <div id="MainDiv">Main</div>
    </body>
</html>

笔记：

第一句中的<!DOCTYPE> 是定义文档类型的语句，<!DOCTYPE html> 代表这是一个 .html 文件。在之前的H4版本中，文件开头都有一段冗长的定义：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这区别，呵呵，H5里终于得到了优化。
 是注释定义语句，注释的内容写于“…”处。
<html></html> 是定义html文档的语句，html文件的代码，写于其中。
<head></head> “头”，顾名思义，这是一个类似于头文件功能的语句，定义文档基本信息的代码写于其中。例如编码类型、网页标题和一些引用等。
- <meta charset = "utf-8"> 定义了关于网页编码规则的元信息。<meta> 是定义文件元信息的标签。... charset = "utf-8" ... 说明，这个网页是8位的Unicode标准字符编码规则。
  PS：这个声明很必要，如果不加这条语句，网页会错误地识别一些字符信息。
- <title>TitleString</title> 网页标题定义标签，这条语句下，网页的标题为“TitleString”。
前面我们刻画了网页的“head”：就如同人的名字（title）、性格（charset）。。。接下来要做的，就是描绘他的四肢、身材了，这就是<body></body> ，文档主体的代码，例如界面、连接等，都写于其中。
- <div id="MainDiv">Main</div> 这条语句定义了一个id为MainDiv的div标签，标签的内容是“Main”。<div></div> 用来定义一个标签，<div ...> 在“…”处，对这个标签的一些属性进行描述，例如这里的id，id是一个标签的唯一性标志，不必要，但id一旦出现，就不能重复。还有一些属性，例如class、name。
  PS：后续我会写一篇文章来专门介绍这些属性和一些主要的标签，这里就不赘述了。

（二）层叠样式表（CSS）
CSS，层叠样式表。样式定义了如何显示一个HTML元素，存储于样式表中，多个样式层叠归一，构成了一个完整的层叠样式表。
CSS分为四种，优先级由低至高如下：

缺省样式，即默认样式。
外部样式表，是HTML文件引用于外部的CSS文件的样式表。
内部样式表，定义于<head>标签内部的样式表。
内联样式，定义于HTML元素标签内的样式，例如<body style="overflow: hidden; background-image: url(IMAGE/background2_lightblue.jpg);">，它拥有最高优先级。

下面来看一段CSS代码

<style type="text/css">
    body {
        height:100%;
        margin:0px;
        padding:0px;
        font-family:"微软雅黑";
    }
    .container {
        height:500px; 
        width:100%; 
    }
    #MainDiv { 
        width:100%; 
    }
</style>

它是一段“内部样式表”，是定义于head标签内部的层叠样式表，<style type="text/css">有力的说明了这一点。
- 这个样式表定义了三种元素的样式，body、container和MainDiv。
- body：这是一个HTML自带的元素，它相当于计算机编程语言中的关键字，对这种类型的元素就行样式调整，不需要加入任何前缀。
- container：这是一个在body中定义的class（类）元素，class中可以添加多个元素，这些元素将被这个class样式共同约束，对class类型进行样式定义时，要加入‘.’前缀。
- MainDIv：这是一个在body中定义的id，id在同一body下是不能重复的，对id类型的元素进行样式定义时，要加入‘#’前缀。

（三）Javascript
简称JS，一款基于网络的脚本语言，它让静态的html+css网页“活”了起来，成就了最终呈现在我们眼前的，动态交互流畅的完整网页。
而jQuery则是一款优秀的js框架库，它基于js而搭建，拥有更方便的运算符、变量和函数接口，用处颇广，我会在后期的一个网页项目实践中介绍jQuery。
来看一个JS在HTML文件中的应用：

<!DOCTYPE html> <!-- HTML5头声明 -->
<html>
    <head>
        <meta charset="utf-8"> <!-- 编码方式 -->
        <title>TitleString</title> <!-- 网页的标题 -->
    </head>
    <body>
        <div id="MainDiv">Main</div>
        <script type="text/javascript">
            var MDiv = document.getElementById('MainDiv'); //通过ID查找该标签
            MDiv.style.backgroundColor = "red"; //设置该标签的属性，背景色为红色
        </script>
    </body>
</html>

分析一下这段JS代码：

... ...

<div id="MainDiv">Main</div>
<script type="text/javascript">
    var MDiv = document.getElementById('MainDiv'); //通过ID查找该标签
    MDiv.style.backgroundColor = "red"; //设置该标签的属性，背景色为红色
</script>

... ...

代码<script type="text/javascript">...</script> 是JS语句段的声明标签。
- type="text/javascript" 文本类型声明：这段script代码片的文本类型为Javascript，它是script标签必不可少的语句。可以尝试不加入text/javascript，你会发现，代码关键词不再会显示为高亮或者彩色文本，你的js也无法正常使用了。
var是js的统一化变量类型，js的所有变量都可以用其来定义，js提供了基于var的基础函数供用户调用，其中包括转义（ToString）、输出长度（.length）等。
本代码提供了一种功能：将指定Div的背景颜色调整为红色。
- document，代表了整个HTML文档，你可以通过这个对象，来访问这个文档中的所有示例（与之对应的还有一个对象“window”，它则代表了网页中一个打开的窗口，你可以用它来对这个窗口进行访问和改动等，比如获取、改变它的尺寸，或者链接到新网页等）。在本代码中，使用document的id搜索，访问了这个HTML中，一个名叫“MainDiv”的实例。
- 提取出MainDiv对象后，将它赋给MDiv， MDiv.style.backgroundColor = "red";这里用到了style方法，就如HTML的style标签一般，这个方法可以访问所有MDiv对象的属性，如backgroundcolor，对其赋值（需要String型），即可改变MDiv的属性。