本文介绍了HTML5的基础知识，包括样式表的三种应用方式：行间样式、内部样式表和外联样式表，并详细阐述了边框、背景、文字、文本、padding、margin和盒模型等概念。
之前一直在修改现成的项目，学习的内容也是现学现用，没有很系统的学习，这次决定发一些时间，系统的学习，以便充实自己的前端知识，也想提升自己的前端技术。
今天总结的是HTML5基础的第一部分代码入门，主要涉及样式表、边框、背景设置、文字文本、padding、margin以及盒模型等。
一、样式表
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
我们在写html页面的时候，除了写html的结构之外，为了让网页更友好或者说显示的更美观，我们就需要进行页面的修改，这也是为什么我们需要写css的原因。那我们要如何写css代码呢。通过学习，我们了解到了一些css的样式表达，比如说width,height等，但是我们不知道怎么应用到页面中，所以接下来讲解如何将这些css样式代表嵌入到html页面中。
嵌入方式分为三种，第一种是行间样式，第二种是内部样式表，第三种是外联样式表。接下来分别讲解三种的用法以及如何使用的小案例。
1、行间样式
行间样式就是给单独的标签添加样式，在每个标签中添加style属性，然后在其中写入你想要的样式设置。
语法：如<div style="……"></div>
如：
<div style="width: 100px;height: 100px;background-color: #37cad2">行间样式</div>效果：
2、内部样式表
内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。
在使用内部样式表进行样式修饰时，必须获取到你想要修饰的标签才可以进行样式的编写。
语法：在<head></head>中添加<style></style>标签，然后在其中写入样式。
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height: 100px;
background-color: #5cfc68;
}
</style>
</head>
<body>
<div id="div1">内部样式表</div>
</body>
</html>效果：
3、外联样式表
外联样式表就是将所有的样式独立写在一个css的文件中，然后通过语句<link href="###.css" rel="stylesheet"/>将样式表应用到当前网页中。可以同时引入多个css文件。
语法：<link href="###.css" rel="stylesheet"/>
如：
test.css:
最低0.47元/天 解锁文章
1897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
