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