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结构标签介绍的更多相关文章

  1. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  2. HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...

  3. HTML5的新结构标签

    在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...

  4. WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  5. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  6. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  7. 深入PHP变量存储结构 标签： PHP存储

    1.深入PHP变量存储结构 标签: PHP存储  分类: 编程语言(10)  首先声明,我并没有去读PHP的源码,只是对于PHP的有时候诡异的表现感兴趣,找了一下开发人员laruence的博客结合PH ...

  8. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  9. 一、JSP标签介绍,自定义标签

    一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

随机推荐

  1. JAVA使用JNI调用C++动态链接库

    JAVA使用JNI调用C++动态链接库 使用JNI连接DLL动态链接库,并调用其中的函数 首先 C++中写好相关函数,文件名为test.cpp,使用g++编译为DLL文件,指令如下: g++ -sha ...

  2. QQ邮箱附件发送

    一.先造一个邮件发送的窗体 二.编辑邮件发送的代码(包括附件) ①附件添加对话框 string file; private void button6_Click(object sender, Even ...

  3. POJ 2528 (线段树 离散化) Mayor's posters

    离散化其实就是把所有端点放在一起,然后排序去个重就好了. 比如说去重以后的端点个数为m,那这m个点就构成m-1个小区间.然后给这m-1个小区间编号1~m-1,再用线段树来做就行了. 具体思路是,从最后 ...

  4. 漫游Kafka设计篇之Producer和Consumer

    Kafka Producer 消息发送 producer直接将数据发送到broker的leader(主节点),不需要在多个节点进行分发.为了帮助producer做到这点,所有的Kafka节点都可以及时 ...

  5. UVa 10048 Audiophobia【Floyd】

    题意:给出一个c个点,s条边组成的无向图,求一点到另一点的路径上最大权值最小的路径,输出这个值 可以将这个 d[i][j]=min(d[i][j],d[i][k]+d[k][j]) 改成 d[i][j ...

  6. zipline tradingcalendar

    zipline/utils/ tradingcalendar.py tradingcalendar_bmf.py 巴西商品期货交易所 tradingcalendar_lse.py 伦敦证券交易所 tr ...

  7. （一）线性回归与特征归一化(feature scaling)

    线性回归是一种回归分析技术,回归分析本质上就是一个函数估计的问题(函数估计包括参数估计和非参数估计),就是找出因变量和自变量之间的因果关系.回归分析的因变量是应该是连续变量,若因变量为离散变量,则问题 ...

  8. SeuRain的归来

    不知不觉二十载寒窗苦读要结束了,还没有到回顾过去的时候.马上进入研三了,现在要努力加油了.还记得曾经的那个在凌晨两点奋战的宇么?归来吧!

  9. Hadoop Hive基础sql语法

     目录 Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的 ...

  10. Android fragment源码全解析

    Fragment 相信基本上每个android developer都用过,但是知晓其原理 用的好的还是不多,今天就从源码的角度上来带着大家分析一下Fragment的源码,对fragment有了更深层次 ...