从开始的零基础，我开始学习了HTML，一开始我以为的HTML和我学习到结束的有些不太一样，html是一种超文本语言，这是前端技术，旨在做出网页给前端显示用。在学习的过程中我遇到了大大小小的问题其中有一些我需要罗列出来。

例如 网页图片的路径问题和HTML脚本的问题这涉及到后面的学习内容，在前面我只是简单的了解到这个知识，其中我认为比较有趣的是HTML的插件元素，HTML中最重要的结束标签了以下是常用的标签

块级标签：

　　占满一行,可以设置宽，高

行级标签： 　　只占用自己的大小，不可以设置宽，高。

行内块标签： 　　只占用自己的大小，但可以设置宽，高。

换行标签：

空格：$nbsp

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容**是开始标签与结束标签之间的内容

某些 HTML 元素具有*空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

这是一个链接

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style"* 属性***

内部样式表 -在HTML文档头部 区域使用* 元素** 来包含CSS*

外部引用 - 使用外部 CSS* 文件***

在之后的学习中我会深入的学习css，这里不做详细总结*

##HTML 图像- 图像标签（ ）和源属性（Src）*

在 HTML 中，图像由 标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

代码格式： 注意src路径问题

我认为最重要的是 元素，是块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用， 元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。

在写的网页使用 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

例如我写的网页的一部分：

版权所有 &制作时间:2020.澳门巴士网

表单使用表单标签 来设置:

文本域（Text Fields）

文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

如代码：

用标签插入脚本，在之后的Javascript中会再次学习

定义了不支持脚本浏览器输出的文本。

整体的HTML学习在我看来HTML就是很多的标签构成的，而且在学习的过程中也比较轻松，以为一些比叫常用的标签 如超链接和段落以及其他的一些标签必须要记住但是很多只是有印象就可以了遇到相应的问题在去翻资料去查阅。

前言：我开始还是了解一些HTML的内容的但是在CSS上我可谓是完全小白，在学习后，可以简单概况下 CSS 计算将HTML如何在屏幕上显示下功夫，HTML在前面已经终结上了，HTML中是由大量的元素组成的，这些元素都可以通过CSS来美化。

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。其中最多使用的是class选择器。

还有的就是Id选择器：

例如

红色

橘色

class选择器：

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

外部表：

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。

内部表：

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样

内联样式

在之前已经普遍使用，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

多重样式的优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

链接的四个状态分别是

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

这几个状态可以对应不同的css样式

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

通过这个进行设置

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。*

Border(边框) - 围绕在内边距和内容外的边框。*

Padding(内边距) - 清除内容周围的区域，内边距是透明的。*

Content(内容) - 盒子的内容，显示文本和图像。*

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

通过标签的.margin 可以设置外边框例如：

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

针对于图像时，它在布局时一样非常有用。

右浮动，文字流将环绕在它的左边。

彼此相邻的浮动

清除浮动用clear

当用css定义字体样式的时候，你也许会这样做：

font-weight:bold;font-style:italic;font-variant:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif

没有必要这么做，因为你可以使用css速记属性：

font:bold italic small-caps 1em/1.5em verdana,sans-serif

值得注意的是：css速记版本只会在你同时指定font-size和font-family属性时才会生效。如果你没有指定font-weight,font-style,或者font-variant，那么这些值将会自动默认为normal

行内元素特点

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内元素在设置 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

块级元素特点

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

在html中，、、、、 、 和就是典型的行内元素（inline）元素。

块级元素是可以设置宽高的，但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行，给他设置宽高是没有用的。

所有浏览器下的CSS透明度

元素透明度时常是个恼人的问题，下面这种方式可以实现所有浏览器下的透明度设置：

.transparent{zoom:1;filter:alpha(opacity=50);opacity:0.5;}

Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发IE的hasLayout属性，清除浮动、清除margin的重叠等。

当一个元素的hasLayout属性值为true时，我们说这个元素有一个布局（layout）

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体

其他媒体类型

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 为动态的HTML提供了方法，

JavaScript能够改变 HTML 内容

JavaScript 能够改变 HTML 属性

JavaScript 能够改变 HTML 样式 (CSS)等

标签

在 HTML 中，JavaScript 代码必须位于 与 标签之间

外部 JavaScript 的优势

在外部文件中放置脚本有如下优势：

分离了 HTML 和代码

使 HTML 和 JavaScript 更易于阅读和维护

已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

中的js函数（后面会具体总结这部分内容）将会在点击按钮时被调用

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

关键字：var + 变量名

变量：

undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

object - 如果变量是一种引用类型或 Null 类型的

常见的转义字符：

关系运算符：

##js中数组

定义数组

var myArray=new Array()

数组的赋值

1.var mycars=new Array(3)mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"

2.var mycars=new Array("Saab","Volvo","BMW")

数组的用法

*利用 for in 来输出数组

*数组的合并

设arr和arr2 是两个数组通过语句

arr.concat(arr2))合并两个数组

*用数组元素组成字符串，用join语句

##js中的对象

对象的定义：使用字符来定义和创建 JavaScript 对象:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

访问对象的方法：

methodName : function() { code lines }

你可以使用以下语法访问对象方法：

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

有多种方式可以创建，使用和修改 JavaScript 对象。

同样也有多种方式用来创建，使用和修改属性和方法。

js中的函数语法

其中函数可以带参数也可以不带参数，当函数带参数是，函数声明时要加变量名 例如function functionname(var1，var2)，其中如果函数是带有返回值的函数则需要用到return语句

注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

例如代码：

function myFunction(p1, p2) { return p1 * p2;// 该函数返回 p1 和 p2 的乘积} 可见js的函数和编程语言的函数没什么太大的区别。**

##js中的作用域

如果变量是在函数内部声明的，变量为局部作用域，既只能在函数内部使用（注意如果在函数内部定义变量时没有用关键字 var 则该变量为全局变量）

如果是在函数外部声明的则，则为全局变量，可以在所有脚本和函数中使用。

HTML中的事件可以用js来触发。

HTML 事件的实例：

HTML 页面完成加载

HTML input 字段改变时

HTML 按钮被点击

现在的时间是?

这是跟按钮被点击事件，事件触发显示时间

常用的时间

##js中的语句

1.条件语句

2.switch语句

3.for循环

例改写代码：

用for改写