整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天开始小编将会给大家讲解HTML的入门知识以及做项目会遇到的某些问题以及如何解决此类问题的方法。说道网页设计，HTML是我们必不可少的一部分。基础网页的构成，无论怎么变幻，都是由原声的HTML代码组成构成网页。
下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。
一、什么是HTML。
HTM不是一段编程语言，而是一款标记语言，本身不能显示在浏览器中。经过浏览器的编释和编译，才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的文本显示功能到多功能互动，已经成为了一款非常成熟的标记语言。
二、HTML文件的基本结构
<!doctype html>
<html>文件开始标记
<head>文件头开始的标记
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<title>XX系统</title>
</head>文件头结束
<body>文件主题的内容
</body>文件主题的结束
</html>文件结束的标记
这里主要说明title和meta(元信息)
<!--说明文件头-->
<title>XX网站</title>
<!--添加作者信息-->
<meta name="author" content="_永不言弃" >
<!--设置网页文字及语言 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<!--设置网页定时(20秒后)跳转-->
<meta http-equiv="refresh" content="20;url=index.html">
三、HTML主要常用标签
3.1标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.2 标题字对齐属性align
默认情况下，标题文字是左对齐的。在网页制作过程中，常常需要选择对其他的方式，这时我们就需要用到align属性。
3.3 段落标记p
段落标记是文档中最常见的标记，<p>用来起始的一个段落。
3.3 换行标记
换行标记<br>作用是在不另起一段的情况下将当前文本强制换行。
3.4 不换行标记nobr
<nobor>表示的是不换行的标记</nobor>
3.5 水平线
<hr/>
四、建立超链接
与自身网站页面有关的连接被称为内部连接
4.1绝对路径
绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则连接不会失效。
4.2相对路径
为了避免绝对路径的缺陷，对于在同一站点之中的连接来说，使用相对路径是一个很好的方法。
4.3 内部连接
<a href="# target="目标窗口的打开方式 " >
属性值
含义
-self在当前页面中打开连接
-blank在一个全新的空白窗口中打开连接
-top在顶层框架中打开连接，也可以理解为在根框架中打开连接
-parent在当前框架的上一层里打开连接
4.4 锚点连接
锚点到本页面中的位置
<a href="#1" >商品名称</a>
<a href="#2" >产品特点</a>
<a href="#3" >产品规格</a>
<a neme="1">XX商品</a>
<a neme="2">XX产品特点</a>
<a neme="3">XX规格</a>
锚点到其他页面的位置
<a href="index.html#1"></a>对应连接到index.html中name=1的位置
4.5 连接到外部网站
在设置友情链接时，需要打开HTTP协议进行外部连接访问。
<a href="wwww.baidu.com" >百度</a>
4.6 连接到E-mail
<a href="mailto:邮件地址">。。。</a>
4.7 连接到FTP
FTP代表文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。
大部分FTP网站需要使用用户名和密码来登录。
当然还有其他的一些连接方式，例如文件下载，连接到Telnet等。这些都会可以用a标签实现。
HTML基础就先讲到这里，后面退出DIV设计网页格式已经网页分框的实现。
馨提示：细读本文需要2分钟，速读仅需1分钟。
作者|李娜
*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。
前言
上一节我们讲到HTML是什么，一个网页的基本架构是怎么样子。但是往往一个网页有很多标签，分别代表不同的含义，当然如果你不懂的话何谈编辑呢？所以这一节，开始讲到HTML中的那些常见标签。
第二节 HTML 中的常见标签
首先我们先来了解一下 HTML 标签的类型:
HTML 标记标签通常被称为 HTML 标签(HTML TAG)。
1
单标签与双标签
单标签:单个标签标记名称
无属性值: 如: br / （表示换行）
有属性值: 如: hr width=80% / （表示水平线的宽占参照物的百分之八十）
双标签：两个标签，成对出现。
无属性值: 标记名称.../标记名称
如: title.../title
有属性值: 标记名称 属性=属性值.../标记名称
如:fontsize7.../font
注意：
标签的属性与属性之间以空格分隔，属性不区分先后顺序，且属性不是必需要写的。
然后我们来了解下标题标签。
2
标题标签
标题标签:hx/hx
其中“x”是1~6的数字代表字体的大小
如下就是标题标签
h1我是标题1/h1
h2我是标题2/h2
h3我是标题3/h3
h4我是标题4/h4
h5我是标题5/h5
h6我是标题6/h6
执行实际效果图如下：
一般一篇文章只会使用一个 h1 标签。
3
font标签
接下来是 font 标签，比如说font size='5' color='#ff33cc'
这是一个 font 标签/font
其中的 “ size “ 是字体的大小属性这里把大小设置为 “ 5 ” ，“ color ” 是 font的颜色属性，可以在 editplus 中选择。
font size='5' color='#ff33cc'
效果展示：
4
段落，格式标签
p标签是一个定义段落标签
pp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。/p
功能 标记
加粗 b文本/b
倾斜 i文本/i
加强语气(加粗)strong文本/strong
加强语气(倾斜)em文本/em
下划线u文本/u
删除线 del文本/del
上标 sup文本/sup
下标 sub文本/sub
换行br/
执行效果图如下：
5
超链接标签
这一节的最后介绍一下超链接标签
a标签:我们有时候跳转页面就是a标签实现的
ahref=http://www.baidu.com百度/a
这样的话我们就可以跳转到百度页面了。
最后给大家看看本节所有的源代码以及执行效果图
源代码
执行效果图
好的这里给大家分享了常见的一些标签想要学习到更多的标签知识的小伙伴要记得关注我们的公众号 我们会持续更新有关于HTML的文章的。
有疑问？有想法？请留言！
微信搜索关注 ：java联盟
TML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。
HTML基础之HTML常用标签-PHP程序员雷雪松的博客
<!--<!DOCTYPE> 是HTML5声明，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<html>
<!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。头部的内容不会显示在浏览器的。 -->
<head>
<!-- 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,meta定义页面关键词和页面的描述-->
<title>网页标题</title>
<meta name="keywords" content="PHP程序员,技术博客,个人博客,雷雪松" />
<meta name="description" content="PHP程序员，雷雪松（Raykaeso）的博客是一个优秀的个人技术博客。PHP程序员雷雪松的博客记录了Linux学习，PHP开发与编程，Web前端开发，MySQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在浏览器上可见的内容必须写在body标签内部 -->
<body>
</body>
</html>
a、布局标签
div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。
aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。
header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。
footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。
article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。
b、文本标签
h1-h6标签可定义标题
p标签定义段落
b/strong标签加粗
em标签来表示强调的文本，斜体
strong标签表示重要文本
u标签下划线
s标签删除线
br标签表示回车换行
hr标签表示水平线
span标签被用来组合文档中的行内元素。
blockquote标签表示块引用
pre标签可定义预格式化的文本，保持原有格式的一种标签。
sub标签下标，
sup>标签上标
表示一个空格
©表示版权符
<表示<
>表示>
c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒体标签
img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。
<img src="图片地址" alt="替换文本，图片打不开的时候显示" width="图片宽度" height="高度" border="0" />
audio标签定义声音，比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>。
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
video标签定义视频，比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>。
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
e、序列化标签
ul和li无序列表标签
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
</dl>
f、表格标签
table标签和tr标签，th标签和td标签，合并单元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<!-- 合并横向单元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并纵向单元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表单标签
form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input标签用于搜集用户信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密码，输入的字符会被掩码（显示为星号或原点）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data"
<input type="file" name="file" />
隐藏表单
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio单选
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多选
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />数据库
<span style="color: #ff0000;">注：checked="checked"可以简写成checked</span>
label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。
textarea标签，设置文本区内的可见行数和宽度
<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>
button标签定义一个按钮
提交按钮
<button type="submit" value="提交">提交</button>
重置按钮
<button type="reset" value="重置">重置</button>
select标签和option标签下拉列表
单选菜单列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可简写成selected，表示选中
a、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。
b、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。
c、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。
d、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。
e、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。
来源：PHP程序员雷雪松的博客 -HTML基础之HTML常用标签（http://www.leixuesong.cn/2045）
*请认真填写需求信息，我们会在24小时内与您取得联系。
