整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？
html5文档类型声明：<!doctype html>
html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。
<html>
<head></head>
<body></body>
</html>
在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。
head头部有以下几种常用标签：
meta：主要提供有关页面的元信息。
link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。
title：页面标题的标签。
script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。
1、块级标签。
块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端页面显示的效果如下图：
常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、内联标签。
内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：
常用的内联标签有：span、a、b、strong、i、em 。
3、内联块级标签。
内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：
常用的内联块级标签有：img、input、textarea。
4、区域标签。
所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。
常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。
5、表单标签。
这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：
表单常用的标签有：form、input、select、option、textarea 。
以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
作为一个前端，经常写html文档，但是却很少去在意头部的标签有哪些，也很少在意每个标签的作用，下面我们来详细了解下。
头部的标签，也就是写在<head><head/>里。通常会有6个标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head>
<body> 文档内容...... </body>
</html>一、<title>元素。
1.title 标签定义了文档的标题，在HTML文档中是必须的。它会展示在浏览器的工具栏上。
2.如果要展示一个图标，可以再加一个<link>标签，<link>标签的 rel属性为“icon”,后面的
href跟上图片的地址。
<link rel="icon" href="图片url">二、<base>元素。
base标签描述了基本的链接地址，该标签作为HTML文档中所有的链接的默认链接
<head>
<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" />
</head>
<body>
<img src="banner7.jpg"/>
</body>
上面的img标签的src链接的地址就是base里的地址加上img里的地址。
三、<link>元素。
link标签定义了文档与外部资源之间的关系，它通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>四、<style>元素。
style标签定义了HTML文档的样式，这个我们经常会使用到，都不会陌生。
五、<meta>元素。
meta标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。它常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
// 编码格式定义
<meta charset="utf-8">
// 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 为网页定义描述内容:
<meta name="description" content="头部标签 & 使用">
// 定义网页作者:
<meta name="author" content="Runoob">
// 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
// 视图层的参数定义
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
// content属性值 :
// width:可视区域的宽度，值可为数字或关键词device-width
// height:同width
// intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
// maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
// maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
// user-scalable:是否可对页面进行缩放，no 禁止缩放六、<script>元素。
script标签用于加载脚本文件，比如说javascript,可以直接书写js,也能用于链接外部的js文件。
<script>
document.write("Hello World!")
</script><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>作为一个零基础入门的小白，应该先从基本的html标签开始认起。熟悉后再进行下一步学习。
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>www.861lll.com</h1>HTML 段落是通过 <p> 标签进行定义的。
<p>www.861lll.com</p>HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.861lll.com">www.861lll.com</a>HTML 图像是通过 <img> 标签进行定义的。
<img src="http://www.861lll.com" width="104" height="142" />*请认真填写需求信息，我们会在24小时内与您取得联系。
