整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.什么是HTML
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面
二.HTML基本语法
(1)HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
（3）body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是可见内容（在浏览器可见）。后续课程讲解的标签都是在body标签内部的各种标签。
三.HTML语法规范
HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套、
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
四.HTML标签使用方法
（1）HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
（2）有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 列表项使用数字来标记。
（3）段落与文字标签
（4）文本格式化标签
五.HTML表单和输入
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签来设置。
（1）文本域（Text Fields）
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
（2）密码字段
密码字段通过标签 来定义:
（3）单选按钮
标签定义了表单单选框选项
（4）复选框
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
（5）提交按钮
定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
今天我们就先分享到这里，有不懂的可以私信我
（私信我有免费的IT课程可以领取哟）
累点滴，汇成江海。咱们从最最基础的PHP知识开始学习，一步一个脚印的开启PHP的学习旅途吧。
请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习PHP编程知识，变身快乐的编程达人吧~
同学们好呀！木辛老师又来了。
咱们在开始PHP的学习之前，需要先准备一个可以提供PHP服务的Web服务器。我们就复用木辛老师专栏中的一个教程，使用Homestead本地开发环境进行学习呗。
传送门：《Laravel第一课：搭建Laravel开发环境》
也可以关注木辛老师的Laravel专栏哟：
大家配置好本地开发环境以后，还需要稍微设置一下，针对这个项目，在Homestead配置文件中作如下设置，
添加指向当前项目根目录的配置：
sites: - map: learning_php.test to: /Code/zyoo/learning_php to: /Code/zyoo/learning_php
另外还需要在本机hosts文件中添加一个域名指向：
sudo vim /etc/hosts
并添加如下记录：
192.168.10.10 learning_php.test
最后，添加一个测试文件：
php代码
然后，打开浏览器，访问域名查看页面结果
执行效果
大家可以看到，我们已经可以成功的访问到测试用的PHP文件了。
好了，万事俱备，只需要学习了。那么，咱们开始吧~
几乎绝大部分服务器端的脚本语言最初设计的应用场景之一就是处理HTML表单。木辛老师要翻出家底，将自己最心爱的在线图书商城，用来作为学习PHP基础知识的场景吧。
通过这个表单页面，我们可以知道顾客订购的商品，订单的金额以及其他一些附属信息。HTML代码请看下方：
<html> <head> <title>木辛老师的PHP基础入门教程</title> </head> <body> <form action="processorder.php" method="POST"> <table style="border: 0px;"> <tr style="background: #cccccc"> <td style="width: 150px;text-align:center;">图书名称</td> <td style="width: 50px;text-align:center;">数量</td> </tr> <tr> <td>PHP入门指南</td> <td><input type="text" name=“book_name_01" size="3" maxlength="3"/></td> </tr> <tr> <td>PHP和MySQL开发</td> <td><input type="text" name="book_name_02" size="3" maxlength="3"/></td> </tr> <tr> <td>Laravel入门</td> <td><input type="text" name="book_name_03" size="3" maxlength="3"/></td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" value="提交订单"/> </td> </tr> </table> </form> </body> </html>
咱么直接通过浏览器访问这个HTML页面，看看效果：
页面显示
哈，简单的页面，我们已经开启Web开发神秘旅程了。继续加油！
大家可能注意到了一个细节：在html代码的form表单部分，action属性我们指向了一个php脚本：
<form action="processorder.php" method="POST”>
具体的PHP脚本的学习我们很快就能看到。这里只是稍微提一下，这个action属性值就是用户点击“提交订单”按钮时将要请求的URL。
用户在表单中输入的数据，会以POST的方式，发送给URL指向的PHP文件进行处理。
那如何处理这个表单呢？又如何让PHP代码起作用的？
要处理这个表单，我们需要创建一个php文件，它的名字需要和form中action属性的值保持一致。
那么，我们就创建一个名字叫做processorder.php的文件吧。
代码可以先这么写，看看是否能起作用哈：
<html> <head> <title>订单处理结果</title> </head> <body> <h1> 木辛老师的在线图书馆</h1> <h2> 订单处理结果通知</h2> <?php echo '<p>订单已处理完成</p>'; // 这里是PHP的代码 ?> </body> </html>
保持文件，并刷新页面。这个时候我们点击“提交订单”按钮，效果如下：
php执行结果
大家可以看到，红框部分就是通过PHP代码输出的结果。这样，我们就实现了通过Web方式执行了PHP代码的需求，这么一看PHP还是非常简单的吧。
我们顺便在看看这个页面的源代码吧，看一下PHP代码如何在HTML页面中完成任务的吧：
源代码
通过页面源码，我们发现刚才写的PHP代码已经不见了，取而代之的是
<p>订单已处理完成</p>
这是怎么回事呢？
这是因为PHP解释器在脚本运行的时候，将该脚本的输出替代了脚本自身的代码，通过这种方式，就可以生成可以在任何浏览器上运行的HTML页面了。也就是说，浏览器是不需要学会PHP的。
通过这段代码，我们可以学习一些PHP的基础知识：
第一种情况：在HTML中混写PHP和HTML代码，需要为php添加标记。PHP代码会以“<?php”作为开始，以“?>”作为结束。这些符号就叫做PHP标记，它们主要用来告诉服务器PHP代码的开始和截止，在这两个起止符号之间的任何代码，服务器都会以PHP语法来解析。
另一种情况：之后，我们写纯PHP的时候，每个文件也需要添加PHP标记。不过呢，结束标记可以省略，这也是很大一部分PHPer默认遵守的规则。
在PHP的开始和截止标记之间，就是PHP语句了，通过这些内容可以告诉PHP解释器应该进行如何的操作，在我们这个例子里，通过：
echo '<p>订单已处理完成</p>’;
使用echo语句完成了一个非常简单的操作，仅是将echo后边的字符串原样打印到浏览器中。这里需要特别注意的一点就是每个PHP语句后边都需要添加英文的分号作为语句的结束符，否则会出现错误，但是在这个html页面中，因为只有一句代码，忽略掉分号也是不会报错的。
但是还是强烈建议大家养成习惯：每句PHP代码结束都要以分号结尾哟！
一般情况下，为了让代码更加清晰和整洁，在编码的过程中会添加一些空格，这些空格包括：回车换行、空格、制表符等都被认为是空格。
当然了，浏览器并不会在意你是否输入了空格，同样的PHP服务器端解析器也会忽略这些，这些空格仅是给编写代码的人看的。
但是，木辛老师还是再次强烈建议，在代码的适当位置添加空格或者空行，这样做可以很有效的提升代码的可阅读性，方便后期的维护工作。
最后在讲讲注释，理论上在编程中出现频率非常高的一个知识点。
为什么说理论上呢，因为这么重要的一个要点，在实际开发中很容易被广大开发者忽略呢！
由于种种原因吧，开发者很不习惯在开发过程中写非常详尽的注释，而且有时候在Git提交时也是草草的一笔带过。这样做的后果就是，若干时间后，当你再次拿到这段代码，可能会花费更多的时间梳理它。
所以，善于写注释，也是提高生产效率的一种有效手段。
PHP解释器同样会在执行的时候忽略掉注释，也就是说就好比像空格一样，PHP解析器会跳过注释，它只负责执行PHP代码！
PHP脚本中的注释比较丰富，有很多类似C语言的风格，比如：
多行注释：
/* 这是 一个 多行 注释 /*
可以看出来，多行注释以 /*开始，以*/结束。同样的和C语言是一样的，多行注释是不能嵌套的。
当然了，除了多行注释之外，也支持单行注释：
echo '<p>订单已处理完成</p>'; // 这里是PHP的代码
或者这种：
echo '<p>订单已处理完成</p>’; #这里是PHP的代码
不论采取哪种风格的注释，在注释符号之后的所有内容，PHP解释器都会认识不需要处理的，这一点一定要注意呀！
好了，今天的课程咱就先讲到这里。
小朋友们不要忘记关注我们哟 ，下期课程更精彩，请大家一起期待吧~
快乐编程，快乐成长，拜拜！
个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图，由JavaScript 接受用户的交互请求，以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分，它负责控制DOM元素的页面布局和颜色、大小的属性。
在CSS中有一著名的盒子模型理论，可以用它来控制DOM的位置。基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。
虽然其十分好用，但是对于很多新手来说，却很难搞清楚它几个属性和内容之间的联系个区别。
所有页面的元素都可以看做一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此，可以通过盒子的边框和距离等参数来控制内容的位置。
Div+CSS 盒子模型
说明：
1、Margin：中文叫外边距，主要作用是控制边框外（Border以外）的区域，外边距是透明的。
2、Border：中文叫边框，是围绕在内边距（Padding）和内容外的边框。注意，它不是透明的。
3、Padding：中文叫内边距，控制内容周围的区域，内边距是透明的。
4、Content：内容，盒子的内容，显示文本和图像。
5、在Css文件中设置的Div的Css.width和Css. height就是内容的宽和高。
6、盒子实际尺寸有可能大于内容尺寸：
盒子模型的总宽度等于content（宽）+padding（左右）+border（左右）+margin（左右）;
盒子模型的总高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下来通过实例演示的方式来一一讲解Margin、Border、Padding的作用和区别。
页面如图所示：
原始样式
代码：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素边框：我们可以在CSS边框属性中设置元素边框的样式和颜色。
按如下代码设置Div(TsetMiddle)的Border（边框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30+30了，而且可以设置其底色和线条样式。
Border
margin 控制周围的元素区域。margin 没有背景颜色，是完全透明的。通过margin可以控制元素与四周元素的空隙距离；
按如下代码设置Div(TsetMiddle)的margin（外边距）：
margin: 30px auto;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
按如下代码设置Div(TsetMiddle)的margin（外边距）：
padding: 30px;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各属性的值可以用px为单位，也可以用em，百分比等。
2、可以利用盒子的各种属性，调整其内容在父容器中的位置。
*请认真填写需求信息，我们会在24小时内与您取得联系。
