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><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结构标签介绍

相关文章