首页 > 代码库 > HTML结构标签介绍

HTML结构标签介绍

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:页面注释标记<!-- -->
语法:<!--注释的内容-->

HTML结构标签介绍