整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果想开发一个网站，除了要精通后端开发语言（如：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有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。
有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？
浏览器显示结果 | 特殊字符名称 | HTML编辑字符 |
空格 | & n b s p; | |
< | 小于号 | & l t ； |
> | 大于号 | & g t； |
& | 和 | & a m p； |
© | 版权 | & c o p y ； |
作用：在浏览器上清晰美观地显示、展示数据。
表格标签的语法
<table>
<tr>
<td></td>
</tr>
</table>
表格标签：<table></table>，一个table标签中可嵌套多个tr标签。
行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。
单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。
在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。
表格示例：
在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。
<h1>表格示例：</h1>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。
表头单元格标签
<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。
语法：
<table>
<th>
<td></td>
</th>
</table>
表头表格代码示例：
<h1>表头表格示例：</h1>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面示例：
表格结构标签
表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。
表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。
表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。
代码示例：
<h1>表格结构标签</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三丰</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>30</td>
</tr>
</tbody>
</table>运行界面：
表格属性
虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。
注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。
align：表格的对其方式。
align=“left”：在浏览器中居左显示。也是默认显示。
align=“center”：在浏览器中居中显示。
align=“right”：在浏览器中居右显示。
border：表格是否具有边框。
border=”1”：表格添加边框。
cellpadding：单元格内的元素和td边框的距离。
举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。
cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。
还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。
width：表格的宽度，属性值可以是像素值也可以是百分比。
height：表格的高度，属性值可以是像素值也可以是百分比。
代码示例：
<h1>表头表格示例：</h1>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面：
合并单元格
合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。
目标单元格：（合并代码存在位置）
跨行合并：最上侧单元格为目标单元格，写合并代码。
跨列合并：最左侧单元格为目标单元格，写合并代码。
合并单元格的方式：
跨行合并：将处于不同行的单元格进行合并
语法：rowspan=“合并单元格个数”
代码示例：
<h1>跨行合并表格：</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>运行界面：
跨列合并：将处于不同列的单元格进行合并
语法：colspan=“合并单元格个数”
代码示例：
<h1>跨列合并表格：</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>运行示例：
今天学习的表格内容就到这里了，明天开始学习列表。
① B/S架构：Browser/Server（浏览器/服务器的交互形式。）
② C/S架构：Client/Server（客户端/服务器的交互形式。）
① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?
•由大量的标签组成，每一个标签都有开始标签和结束标签。
•超文本：图片、声音、视频等
•编辑器有：HBuilder、vscode等
③ 直接采用浏览器打开HTML文件就能运行
④ HTML是谁制定的？
•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码
•HTML规范目前最高的版本是：HTML5.0，简称H5
•我们现在主要学的HTML4.0（基本用法）
•w3school：先出现的，和W3C无关
•w3cschool：后出现的，和W3C无关
•W3C制定了很多规范：HTML/XML/http协议/https协议……
页面效果图：
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
效果图：
地址栏提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=
14、表单的说明：
*请认真填写需求信息，我们会在24小时内与您取得联系。
