html5+代码+入门,HTML5基础之代码入门

之前一直在修改现成的项目，学习的内容也是现学现用，没有很系统的学习，这次决定发一些时间，系统的学习，以便充实自己的前端知识，也想提升自己的前端技术。

今天总结的是HTML5基础的第一部分代码入门，主要涉及样式表、边框、背景设置、文字文本、padding、margin以及盒模型等。

一、样式表

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。我们在写html页面的时候，除了写html的结构之外，为了让网页更友好或者说显示的更美观，我们就需要进行页面的修改，这也是为什么我们需要写css的原因。那我们要如何写css代码呢。通过学习，我们了解到了一些css的样式表达，比如说width,height等，但是我们不知道怎么应用到页面中，所以接下来讲解如何将这些css样式代表嵌入到html页面中。

嵌入方式分为三种，第一种是行间样式，第二种是内部样式表，第三种是外联样式表。接下来分别讲解三种的用法以及如何使用的小案例。

1、行间样式

行间样式就是给单独的标签添加样式，在每个标签中添加style属性，然后在其中写入你想要的样式设置。

语法：如

如：

行间样式

效果：

2、内部样式表

内部样式表是写在HTML的

里面的。内部样式表只对所在的网页有效。

在使用内部样式表进行样式修饰时，必须获取到你想要修饰的标签才可以进行样式的编写。

语法：在

中添加标签，然后在其中写入样式。

如：

Title

#div1{

width:100px;

height: 100px;

background-color: #5cfc68;

}

内部样式表

效果：

3、外联样式表

外联样式表就是将所有的样式独立写在一个css的文件中，然后通过语句将样式表应用到当前网页中。可以同时引入多个css文件。

语法：

如：

test.css:

#div1{

width:100px;

height: 100px;

background-color: #ff9ee9;

}test.html:

Title

外联样式表

效果：

二、边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

边框由三个部分组成：1)边框的粗细；2)边框的样式；3)边框的颜色

1、边框的方向

一共有4个方向：top right bottom left。

边框的基本样式有dotted,solid,double,dashed.分别是点状、实线、双线、虚线。

边框的颜色可以有三种方式进行定义，第一种是直接写颜色的英文单词，如red,yellow等；第二种是rgb(),如rgb(255,255,255)是白色；第三种是十六进制，如#ffffff是白色。

边框的粗细可以直接用px进行，比如1px;

border-top

border-top-width  //粗细

border-top-style  //样式

border-top-color  //颜色

border-right

border-right-width

border-right-style

<