HTML5基础篇之HTML

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

一、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的顺序
注:背景不占空间 
背景区域可以显示内容
另外容器假如没有高度的话 显示不了背景图片!

今天就先介绍这么多啦~以后再与大家交流  一起进步 望大家 踊跃给下意见哦  乐意接受  嘿嘿!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值