HTML:超文本标记语言
介绍HTML基本标记
1：头部标记（head）----- 头部的内容不会再页面上显示
在头部元素中，一般需要包括标题<title>，基本信息(文档样式，表定义，脚本)和元信息<meta>
语法：
以<head> 开始标记，以</head> 结束标记
实例1：
<html>
<head>
文档头部信息
</head>
<body>
文档正文信息
</body>
</html>
2：标题标记（title）
作用：
一般是说明页面的用途，显示在浏览器的标题栏中；
语法： ：
以<title>开始，以</title>结束；
实例2：
<html>
<head>
<title>标题信息</title>
</head>
</html>
3：元信息标记（meta）
meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明，关键字，刷新等；
meta标记不需要设置结束标记；
在一个HTML页面中可以有多个meta元素；
meta元素的属性有name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找，分类；
设置页面关键字
在搜索引擎中，检索信息都是通过输入关键字来实现的；
关键字是整个网站登录过程中最基本也是最重要的一步，是进行网页优化的基础；
具体语法：<meta name="keywords" content="输入具体的关键字">
设置页面说明
设置页面说明也是为了便于搜索引擎的查找，它用来详细说明网页的内容；
语法：<meta name="description" content="设置页面说明">
编码格式：
<meta charset="UTF-8">
3.3：定义编译工具
指定开发工具
语法：<meta name="generator" content="FronPage">
设置作者信息
语法：<meta name="author" content="小希">
设置网页文字及语言
语法：<meta http-equiv="content-type" content="2.html" charset="utf-8">
http-equiv：用于传递HTTP通信协议的标头；
content：具体属性信息；
charset：设置网页的内码语系；
设置网页的跳转
自动刷新功能是将http-equiv属性值设置为refresh;
更新时间和刷新后的链接地址由content属性设置，默认跳转时间以秒为单位；
语法：<meta http-equiv="refresh" content="20;URL=跳转地址">
4:网页主体标记（body）
主体主要包括要在浏览器中显示处理的所有信息，在网页的主体标记中有很多的属性设置，包括网页的背景设置，文字属性设置和链接设置等；
网页背景颜色（bgcolor）
语法：
<body bgcolor="背景颜色">
<body bgcolor="yellow">
<body bgcolor="#FF99FF">
网页背景颜色（background）
可以将图片设置为背景，还可以设置背景颜色图片的平铺方式，显示方式；
参数：no-repeat(不重复)
background: yellow url("img/100.png") no-repeat;
语法：<body background="images/1.jpg">
注：指定的路径可以是绝对路径也可以是相对路径；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 400px;
height: 500px;
background: yellow url("img/100.png") no-repeat center center;
}
#bg{
width: 500px;
height: 600px;
background: red url("img/1.jpg") center top no-repeat;
}
</style>
</head>
<body>
<div id="box" >html study css</div>
<div id="bg"></div>
</body>
</html>
边框(
border
)：
border 边框
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
边框样式：
solid 实线
dashed 虚线
dotted 点线（IE6不兼容）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>边框</title>
<style>
#bg{
width: 400px;
height: 400px;
border: 1px fuchsia dotted;
}
#box{
width: 0px;
height: 0px;
border-top: solid red 100px;
border-right: solid green 100px;
border-bottom: solid yellow 100px;
border-left: solid fuchsia 100px;
}
</style>
</head>
<body>
<div id="bg">边框</div>
<div id="box">边框2</div>
</body>
</html>
padding 内边距
padding-top 上边内边距
padding-right 右边内边距
padding-bottom 下边内边距
padding-left 左边内边距
padding: top right bottom left;
注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内边距</title>
<!--如果给一个盒子加完内边距，不想让盒子的大小发生改变，我们需要在宽度和高度上减掉响应的像素-->
<style>
#box {
width: 400px;
height: 280px;
border: 10px red solid;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="box">边框2</div>
</body>
</html>
margin外边距
外边距的问题：
1、上下外边距会叠压；
2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）
外边距复合：margin: top right bottom left;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外边距</title>
<style>
#box1{
width: 100px;
height: 100px;
background: yellow;
/*页面左右居中*/
margin-left: auto;
margin-right: auto;
}
#box2{
width: 200px;
height: 200px;
background: red;
padding-top: 100px;
/*页面左右居中*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<!--需求：box1顶部距box2，100px,使用内边距;-->
<body>
<div id="box2">
<div id="box1">外边距1</div>
</div>
</body>
</html>
设置文字颜色（text）
语法：
<body text="文字颜色">
<body background="images/1.jpg" text="#9966CC">
链接文字属性
语法：
<body link="#993300">
需要注意一下标签属性：
1：定义居中文本
<center>
</center>
2：<a>标签可定义锚
包括href和name属性
<a> 标签的 href 属性用于指定超链接目标的 URL；
实例：
<body background="images/1.jpg" text="#9966CC" link="#993300">
<center>
<a href="https://www.baidu.com/index.html">连接文字</a>
</center>
</body>
设置正在访问的文字颜色
语法：<body alink="#0066FF">
设置访问后的文字的颜色
语法：<body vlink="#0066FF">
边距margin
设置页面与浏览器之间的距离，包括上边距和左边距，边距的值以像素为单位；
topmargin：上边距离
leftmargin：左边距离
语法：
<body topmargin="100" leftmargin="100">
<p>设置页面的长边距</p>
<p>设置页面的左边距</p>
</body>
5:页面注释标记<!-- -->
语法：<!--注释的内容-->
扫一扫
2958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
