您的位置：首页 > Web前端 > HTML5

HTML5基础篇之HTML

2016-08-14 20:06 232 查看

本文章纯属个人学习之后总结的一些小经验，望大神指导指导

一、html基本结构

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

</head>

<body></body>

</html>

注：html大小写都可以但是不要出现这种的（hTml）要么全都大写要么全都小写所有的标点符号都必须是英文状态下的！！！切记！

！doctype 声明文档类型千万不可以忘记

meta charset="utf-8" 防止出现乱码（不写的话文件在浏览器里显示文字可能都是以乱码形式出现总之需要细心哦！）

接下来说一下一些基本的样式设置（今天先讲下文本设置与背景设置）

一.文本设置

1.font-size（字体大小）

eg.font-size:数值+px（单位）例如16px

2.font-family:（字体）

有个保底字体Arial

多个字体用逗号隔开

如果字体是以空格链接的，用单引号包裹，例如“微软雅黑”;

sans-serif 可以让字体变得比较圆润

serif
让字体棱角分明

3.color （设置字体颜色）可以直接用颜色名 eg.red

或者十六进制编码（#666666）

或者rgb(0,0,0)其中的值为0~255 三原色

4.font-weight（字体加粗）bold 加粗默认值为normal

5.text-align （字体对齐方式）有三个值，分别为left right center

6.line-height（行高）单行文本设置高度与容器高度一样，可以实现垂直居中的效果。

7.text-decoration （设置下划线样式）underline（下划） overline（上划）line-through（中间划） none（去除样式）

8.text-indent（文本缩进）eg. text-indent:5px

9.letter-spacing（字符间距）

字符与字符之间横向的间距

10.font-style（字体样式）

italic 斜体

normal
（默认）

注：字体具有继承的属性，假如父级设置了文本样式，子级如果不单独设置属于自己的文本样式，那么默认继承父级的。

二、背景设置

1.background-color（设置背景颜色）样式与前面字体一样
另外还可以用
rgba(222,222,222,.5) 其中最后一个值可以设置背景颜色的透明度具体的以后再跟大家细说。
2.background-image （设置背景图片） eg.background-image:url(" 1.jpg")

url中写需要用的图片的地址
假如图片与html文件在同级那么直接写图片的名字+后缀名
假如图片在html文件的上一级那么要在图片前面加../返回上一级以此类推
3.background-position（背景位置）left center right
.4.background-repeat（背景重复）
repeat（既横向重复又纵向重复）
repeat-x（横向重复）
repeat-y（纵向重复）
no-repeat（不设置重复）
5.background-size（背景大小） eg.background:200px 300px width（宽度） heigh（高度）t的顺序
注：背景不占空间
背景区域可以显示内容
另外容器假如没有高度的话显示不了背景图片！

今天就先介绍这么多啦~以后再与大家交流一起进步望大家踊跃给下意见哦乐意接受嘿嘿！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5基础 html

相关文章推荐

新的分享

章节导航