整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
.什么是HTML
HTML 是用來描述網頁的一種語言。HTML 指的是超文本標記語言: HyperText Markup LanguageHTML 不是一種編程語言，而是一種標記語言標記語言是一套標記標簽 (markup tag)HTML 使用標記標簽來描述網頁HTML 文檔包含了HTML 標簽及文本內容HTML文檔也叫做 web 頁面
二.HTML基本語法
(1)HTML標簽
整個網頁是從<html>這里開始的，然后到</html>結束。
(2)head標簽
head標簽代表頁面的“頭”，定義一些特殊內容，這些內容往往都是“不可見內容”（在瀏覽器不可見）。
（3）body標簽
body標簽代表頁面的“身”，定義網頁展示內容，這些內容往往都是可見內容（在瀏覽器可見）。后續(xù)課程講解的標簽都是在body標簽內部的各種標簽。
三.HTML語法規(guī)范
HTML中不區(qū)分大小寫，但是我們一般都使用小寫
HTML中的注釋不能嵌套、
HTML標簽必須結構完整，要么成對出現(xiàn)，要么自結束標簽
HTML標簽可以嵌套，但是不能交叉嵌套
HTML標簽中的屬性必須有值，且值必須加引號(雙引號單引號都可以)
四.HTML標簽使用方法
（1）HTML無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
（2）有序列表
同樣，有序列表也是一列項目，列表項目使用數(shù)字進行標記。 列表項使用數(shù)字來標記。
（3）段落與文字標簽
（4）文本格式化標簽
五.HTML表單和輸入
表單是一個包含表單元素的區(qū)域。表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。表單使用表單標簽來設置。
（1）文本域（Text Fields）
輸入類型是由類型屬性（type）定義的。大多數(shù)經常被用到的輸入類型如下：
（2）密碼字段
密碼字段通過標簽 來定義:
（3）單選按鈕
標簽定義了表單單選框選項
（4）復選框
定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
（5）提交按鈕
定義了提交按鈕。當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關的處理
今天我們就先分享到這里，有不懂的可以私信我
（私信我有免費的IT課程可以領取喲）
累點滴，匯成江海。咱們從最最基礎的PHP知識開始學習，一步一個腳印的開啟PHP的學習旅途吧。
請點擊右上角“關注”按鈕關注我們喲：跟著木辛老師學習PHP編程知識，變身快樂的編程達人吧~
同學們好呀！木辛老師又來了。
咱們在開始PHP的學習之前，需要先準備一個可以提供PHP服務的Web服務器。我們就復用木辛老師專欄中的一個教程，使用Homestead本地開發(fā)環(huán)境進行學習唄。
傳送門：《Laravel第一課：搭建Laravel開發(fā)環(huán)境》
也可以關注木辛老師的Laravel專欄喲：
大家配置好本地開發(fā)環(huán)境以后，還需要稍微設置一下，針對這個項目，在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代碼
然后，打開瀏覽器，訪問域名查看頁面結果
執(zhí)行效果
大家可以看到，我們已經可以成功的訪問到測試用的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;">數(shù)量</td> </tr> <tr> <td>PHP入門指南</td> <td><input type="text" name=“book_name_01" size="3" maxlength="3"/></td> </tr> <tr> <td>PHP和MySQL開發(fā)</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開發(fā)神秘旅程了。繼續(xù)加油！
大家可能注意到了一個細節(jié)：在html代碼的form表單部分，action屬性我們指向了一個php腳本：
<form action="processorder.php" method="POST”>
具體的PHP腳本的學習我們很快就能看到。這里只是稍微提一下，這個action屬性值就是用戶點擊“提交訂單”按鈕時將要請求的URL。
用戶在表單中輸入的數(shù)據(jù)，會以POST的方式，發(fā)送給URL指向的PHP文件進行處理。
那如何處理這個表單呢？又如何讓PHP代碼起作用的？
要處理這個表單，我們需要創(chuàng)建一個php文件，它的名字需要和form中action屬性的值保持一致。
那么，我們就創(chuàng)建一個名字叫做processorder.php的文件吧。
代碼可以先這么寫，看看是否能起作用哈：
<html> <head> <title>訂單處理結果</title> </head> <body> <h1> 木辛老師的在線圖書館</h1> <h2> 訂單處理結果通知</h2> <?php echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼 ?> </body> </html>
保持文件，并刷新頁面。這個時候我們點擊“提交訂單”按鈕，效果如下：
php執(zhí)行結果
大家可以看到，紅框部分就是通過PHP代碼輸出的結果。這樣，我們就實現(xiàn)了通過Web方式執(zhí)行了PHP代碼的需求，這么一看PHP還是非常簡單的吧。
我們順便在看看這個頁面的源代碼吧，看一下PHP代碼如何在HTML頁面中完成任務的吧：
源代碼
通過頁面源碼，我們發(fā)現(xiàn)剛才寫的PHP代碼已經不見了，取而代之的是
<p>訂單已處理完成</p>
這是怎么回事呢？
這是因為PHP解釋器在腳本運行的時候，將該腳本的輸出替代了腳本自身的代碼，通過這種方式，就可以生成可以在任何瀏覽器上運行的HTML頁面了。也就是說，瀏覽器是不需要學會PHP的。
通過這段代碼，我們可以學習一些PHP的基礎知識：
第一種情況：在HTML中混寫PHP和HTML代碼，需要為php添加標記。PHP代碼會以“<?php”作為開始，以“?>”作為結束。這些符號就叫做PHP標記，它們主要用來告訴服務器PHP代碼的開始和截止，在這兩個起止符號之間的任何代碼，服務器都會以PHP語法來解析。
另一種情況：之后，我們寫純PHP的時候，每個文件也需要添加PHP標記。不過呢，結束標記可以省略，這也是很大一部分PHPer默認遵守的規(guī)則。
在PHP的開始和截止標記之間，就是PHP語句了，通過這些內容可以告訴PHP解釋器應該進行如何的操作，在我們這個例子里，通過：
echo '<p>訂單已處理完成</p>’;
使用echo語句完成了一個非常簡單的操作，僅是將echo后邊的字符串原樣打印到瀏覽器中。這里需要特別注意的一點就是每個PHP語句后邊都需要添加英文的分號作為語句的結束符，否則會出現(xiàn)錯誤，但是在這個html頁面中，因為只有一句代碼，忽略掉分號也是不會報錯的。
但是還是強烈建議大家養(yǎng)成習慣：每句PHP代碼結束都要以分號結尾喲！
一般情況下，為了讓代碼更加清晰和整潔，在編碼的過程中會添加一些空格，這些空格包括：回車換行、空格、制表符等都被認為是空格。
當然了，瀏覽器并不會在意你是否輸入了空格，同樣的PHP服務器端解析器也會忽略這些，這些空格僅是給編寫代碼的人看的。
但是，木辛老師還是再次強烈建議，在代碼的適當位置添加空格或者空行，這樣做可以很有效的提升代碼的可閱讀性，方便后期的維護工作。
最后在講講注釋，理論上在編程中出現(xiàn)頻率非常高的一個知識點。
為什么說理論上呢，因為這么重要的一個要點，在實際開發(fā)中很容易被廣大開發(fā)者忽略呢！
由于種種原因吧，開發(fā)者很不習慣在開發(fā)過程中寫非常詳盡的注釋，而且有時候在Git提交時也是草草的一筆帶過。這樣做的后果就是，若干時間后，當你再次拿到這段代碼，可能會花費更多的時間梳理它。
所以，善于寫注釋，也是提高生產效率的一種有效手段。
PHP解釋器同樣會在執(zhí)行的時候忽略掉注釋，也就是說就好比像空格一樣，PHP解析器會跳過注釋，它只負責執(zhí)行PHP代碼！
PHP腳本中的注釋比較豐富，有很多類似C語言的風格，比如：
多行注釋：
/* 這是 一個 多行 注釋 /*
可以看出來，多行注釋以 /*開始，以*/結束。同樣的和C語言是一樣的，多行注釋是不能嵌套的。
當然了，除了多行注釋之外，也支持單行注釋：
echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼
或者這種：
echo '<p>訂單已處理完成</p>’; #這里是PHP的代碼
不論采取哪種風格的注釋，在注釋符號之后的所有內容，PHP解釋器都會認識不需要處理的，這一點一定要注意呀！
好了，今天的課程咱就先講到這里。
小朋友們不要忘記關注我們喲 ，下期課程更精彩，請大家一起期待吧~
快樂編程，快樂成長，拜拜！
個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現(xiàn)大大代替了傳統(tǒng)的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯(lián)系個區(qū)別。
所有頁面的元素都可以看做一個盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數(shù)來控制內容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區(qū)域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。
3、Padding：中文叫內邊距，控制內容周圍的區(qū)域，內邊距是透明的。
4、Content：內容，盒子的內容，顯示文本和圖像。
5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。
6、盒子實際尺寸有可能大于內容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區(qū)別。
頁面如圖所示：
原始樣式
代碼：
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 控制周圍的元素區(qū)域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區(qū)域將會受到元素背景顏色的填充。
按如下代碼設置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小時內與您取得聯(lián)系。
