HTML5基础之代码入门

最新推荐文章于 2024-09-05 21:31:46 发布

qq_39744911

最新推荐文章于 2024-09-05 21:31:46 发布

阅读量1.0k

点赞数 1

HTML5基础之代码入门

2016-11-12 15:24 515人阅读评论(0) 收藏举报

分类：

HTML & HTML5（13）

作者同类文章 X

目录(?)[+]

一样式表
二边框
三背景相关
四文字
五文本
六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>

如：

[html] view plain copy

print ?

<div style="width: 100px;height: 100px;background-color: #37cad2">行间样式</div>

<div style="width: 100px;height: 100px;background-color: #37cad2">行间样式</div>

效果：

2、内部样式表

内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。

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

语法：在<head></head>中添加<style></style>标签，然后在其中写入样式。

如：

[html] view plain copy

print ?

<!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>

<!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:

[css] view plain copy

print ?

#div1{
width:100px;
height: 100px;
background-color: #ff9ee9;
}

#div1{
    width:100px;
    height: 100px;
    background-color: #ff9ee9;
}

test.html:

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/test.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">外联样式表</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/test.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div1">外联样式表</div>
</body>
</html>

效果：

二、边框

元素的边框 (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

border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color

如：

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border的应用</title>
<style>
#div1{
width:100px;
height: 100px;
background-color: #d3fcff;
border:2px solid #00A2E9;
}
</style>
</head>
<body>
<div id="div1">border的应用</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border的应用</title>
    <style>
        #div1{
            width:100px;
            height: 100px;
            background-color: #d3fcff;
            border:2px solid #00A2E9;
        }
    </style>
</head>
<body>
    <div id="div1">border的应用</div>
</body>
</html>

有人可能会问，border的形状是什么，是矩形或者梯形吗？其实border的形状取决于容器是否定义width和height，只能说是border的形状是非矩形。接下来举两个例子说明border的形状应用。

1）利用border制作三角形：

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border制作三角形</title>
<style>
div{
width: 0;
height: 0;
border: 20px solid #fff;
border-left-color: #cc50a5;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border制作三角形</title>
    <style>
        div{
            width: 0;
            height: 0;
            border: 20px solid #fff;
            border-left-color: #cc50a5;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2）用border制作梯形：

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border制作三角形</title>
<style>
div{
width: 100px;
height: 0px;
border-bottom: 100px solid #ffb23d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border制作三角形</title>
    <style>
        div{
            width: 100px;
            height: 0px;
            border-bottom: 100px solid #ffb23d;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三、背景相关

我们设计的时候，通常会想改变容器的背景，使其显得更美观，不会过于枯燥。就我们所知，背景可以用两种设置方法，一种是直接利用颜色，另一种是利用图像做背景。需要注意的是，内容是会撑开容器的宽高，而背景不会占用容器宽高。

利用颜色做背景，这里就不详细说了，在前面一个例子中一直在用background-color来设置容器的背景。

这里主要说的是利用图片做背景。首先来看看属性有哪些：

1）background-image 背景图，背景图默认铺满整个容器大小，如果单张图片无法铺满整个容器，那么就会重复使用这张图片，知道铺满为止；

2）background-repeat 背景图是否重复。

有4种属性值：no-repeat不重复；repeat-x x轴重复；repeat-y y轴重复；repeat x/y都重复。

如下图所示，如果没有进行设置background-repeat属性，会默认x/y重复。所以我们需要进行这个属性的设置。

案例代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background的应用</title>
<style>
div{
width: 400px;
height: 400px;
border:1px solid #e9452b;
background-image: url(images/12.png);
}
</style>
</head>
<body>
<div>
这是图片的应用案例
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background的应用</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border:1px solid #e9452b;
            background-image: url(images/12.png);
        }
    </style>
</head>
<body>
    <div>
        这是图片的应用案例
    </div>
</body>
</html>

进行background-repeat的属性设置：

案例代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background的应用</title>
<style>
div{
width: 400px;
height: 400px;
border:1px solid #e9452b;
background-image: url(images/12.png);
background-repeat: no-repeat;//设置不重复
}
</style>
</head>
<body>
<div>
这是图片的应用案例
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background的应用</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border:1px solid #e9452b;
            background-image: url(images/12.png);
            background-repeat: no-repeat;//设置不重复
        }
    </style>
</head>
<body>
    <div>
        这是图片的应用案例
    </div>
</body>
</html>

3）background-position：x y 背景图位置

x和y有两种设置方式，一种是具体的数值，另一种是利用具体的方向进行设置。

如：

x:left center right

y:top center bottom

如果第二个属性值没有填写，那么就直接默认是居中的。

、

4）background-attachment 背景图是否滚动

当我们用滚动条上下拉的时候，内容会上下移动，那么我们要怎么样让图片一直固定在浏览器可视区域或者说跟随滚动条滚动呢？这个时候就需要用到background-attachment这个属性来进行设置。

属性值有三种：

scroll:默认值，背景图片会随着滚动条而滚动。

fixed:当页面的其他部分滚动时，背景图片不会跟随着移动，即可以一直固定在浏览器可视区域。

inherit:规定应该从父元素继承 background-attachment 属性的设置。

[html] view plain copy

print ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background的应用</title>
<style>
div{
width: 400px;
height: 2000px;;
border:1px solid #e9452b;
background-image: url(images/12.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;//跟着滚动
}
</style>
</head>
<body>
<div>
这是图片的应用案例
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background的应用</title>
    <style>
        div{
            width: 400px;
            height: 2000px;;
            border:1px solid #e9452b;
            background-image: url(images/12.png);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: scroll;//跟着滚动
        }
    </style>
</head>
<body>
    <div>
        这是图片的应用案例
    </div>
</body>
</html>

5）复合样式

我们通常可以在其他人的网页中看到，他们在写background的一系列相关属性时，都是直接一句话写完，这个就是复合样式，即将background开头的样式直接写成background:red url(img/1.jpg) no-repeat center top scroll;这种格式。注意：在用复合样式时，不分属性书写顺序。

所以可以将上面的实例直接写成：

[html] view plain copy

print ?

background: #b6f3ff url(images/12.png) no-repeat center top scroll;

background: #b6f3ff url(images/12.png) no-repeat center top scroll;

四、文字

文字的基本样式包括文字加粗、倾斜、大小、颜色、字体、行高等。

即：font-weight font-style font-size font-color font-family line-height

font-weight:有两个属性值，bold加粗 normal正常

font-size：可以用px或者em定义

font-style:有两个属性值，italic斜体，normal正常

font-color:三种定义方式，跟前面说到的方法是一样的，这里就不再写一遍

font-family：字体样式，比如"宋体","楷体"，"微软雅黑"等

line-height:行高，文字在一行里面所占用的位置大小，当行高的值与容器的高度一致时，文字会垂直居中显示。

重点：多行文字测量行高的方法（当设计师给我们一个设计稿时，我们如何进行编写一样的效果）

1）确认文字大小
2）确认两行文字之间的空隙大小
3）空隙大小除以2，得出来的值就是每行文字的上下的空隙大小
3.1）当行高为奇数时，那么文字的上方要比下方少一个像素

3.2）当行高为偶数是，那么文字上下空隙值一致
4）通过辅助项测量多行文字的行高

文字的设置也同样有复合样式：font：font-style | font-weight | font-size/line-height | font-family；
注意：font复合样式需要注意书写顺序

五、文本

文本的设置包括文字的颜色、文本对齐方式、文本修饰、字母间距、单词间距、强制不换行等。

即：

color:文字颜色

text-align:文本对齐（显示）方式，有三种属性值，left 默认值；center；right ；

text-decoration：文本修饰方式，underline:添加下划线；none：无修饰；

letter-spacing：字母间距；

word-spacing:单词间距，以空格为解析单位，在中文中，如果没有以空格隔开，那么这个属性就体现不出来，因为我们的解析器并不知道具体的词组组合。

white-space：强制不换行。即normal:正常；nowrap:强制不换行，如固定了容器宽度，就会超出容器。

例子：强制不换行的情况

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本设置</title>
<style>
div{
width:200px;
border: 1px solid black;
color: red;
text-align: left;
font-size: 24px;
text-indent: 2em;
text-decoration: none;
letter-spacing: 10px;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
文本设置-hello world!
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本设置</title>
    <style>
        div{
            width:200px;
            border: 1px solid black;
            color: red;
            text-align: left;
            font-size: 24px;
            text-indent: 2em;
            text-decoration: none;
            letter-spacing: 10px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div>
    文本设置-hello  world!
</div>
</body>
</html>

设置了换行之后的效果：

代码修改：

white-space: normal;

六、padding

padding可以进行设置内边距或者说内填充。需要注意的是，设置padding后撑大容器的大小。padding的设置有4个方向。

paading复合写法 : top right bottom left

1）只有一个属性值时: 4个方向都是同一个值
2）设置两个属性值时：
第一个属性值设置的是上下两个方向，
第二个属性值设置的是左右两个方向。
3）设置三个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是左右两个方向，
第三个属性值设置的是下边一个方向。
4）设置四个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是右一个方向，
第三个属性值设置的是下边一个方向，
第四个属性值设置的是左边一个方向。

如：

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding的设置</title>
<style>
div{
width: 120px;
height: 120px;
background-color: pink;
padding:40px 30px 20px 10px;
}
</style>
</head>
<body>
<div>
padding的设置
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>padding的设置</title>
    <style>
        div{
            width: 120px;
            height: 120px;
            background-color: pink;
            padding:40px 30px 20px 10px;
        }
    </style>
</head>
<body>
<div>
    padding的设置
</div>
</body>
</html>

七、margin

margin 即外边距，标签与标签之间的间隔（距离），不占用盒子的大小。

margin的复合写法意义参考padding的写法以及对应的含义。

重点：

在使用margin的时候会出现一点点小问题，即margin-top传递问题，margin上下叠压问题。

如图所示：

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:500px;
background-color: red;
}
#div1{
height: 50px;
background-color: pink;
margin: 100px ;
}
#div2{
height: 50px;
background-color: yellow;
margin: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width:500px;
            background-color: red;
        }
        #div1{
            height: 50px;
            background-color: pink;
            margin: 100px ;
        }
        #div2{
            height: 50px;
            background-color: yellow;
            margin: 100px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</div>
</body>
</html>

我们在两个div中都设置了margin为100px，但是在所示的图中，我们可以看到第一个div的margin-top没有效果，而且在两个div中的间距也不是100px+100px。

解决方法：
1）margin-top传递
解决方法：仅用以学知识点可以使用border解决
2）margin上下叠压
解决技巧：
1、还是使用margin，可以将某一个元素方向设置成预想的值。margin叠压会取最大的margin值.
2、如果元素没有特殊特征，也可以用padding代替

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:500px;
background-color: #b6f3ff;
border:1px solid red; //增加border属性，解决第一个问题
}
#div1{
height: 50px;
background-color: #ff8fdc;
margin: 100px 100px 200px 100px; //将margin-bottom设置为200px，解决第二个问题
}
#div2{
height: 50px;
background-color: yellow;
margin: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width:500px;
            background-color: #b6f3ff;
            border:1px solid red;  //增加border属性，解决第一个问题
        }
        #div1{
            height: 50px;
            background-color: #ff8fdc;
            margin: 100px 100px 200px 100px; //将margin-bottom设置为200px，解决第二个问题
        }
        #div2{
            height: 50px;
            background-color: yellow;
            margin: 100px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</div>
</body>
</html>

八、盒模型

盒模型中包括margin\border\padding\box 4个部分的内容。下图就是盒模型的结构：

盒模型大小：border + padding + width/height
盒模型的宽度：border-left-width + padding-left + width + padding-right + border-right-width
盒模型的高度：border-top-width + padding-top + height + padding-bottom + border-bottom-width

举例说明：

效果：

代码：

[html] view plain copy

print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid #90ecff;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid #90ecff;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

宽和高计算：

宽度：100px + 20px + 40px = 160px
高度：100px + 20px + 40px = 160px