整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
你太美。
雖然第一個html代碼寫的非常隨意，就四個字：雞你太美。但是用瀏覽器打開之后確實是能看到是以網頁的形式所展現的。這個現象就有點奇怪了，為什么？講道理，只要是一種語言，必定有自己的語法格式，得按它的套路去寫才能認為代碼寫的是對的，然后才能去正常的運行。
但是這里就四個字：雞你太美，它就能把這個東西給顯示出來，這是為什么？其實很簡單。
·可以看一下，按一下F12，把瀏覽器的開發者工具給打開。
·然后選中elements標簽頁，如果是中文版，這里就應該是元素。
·這里有4行文本，這4行文本里面有沒有一個比較熟悉的東西？雞你太美這四個字是不是HTML代碼里面寫的東西？如果把這個東西改了，雞你太美baby。
·然后就不再打開HTML文件了，直接按刷新。這里變成了雞你太美baby，這里是不是也變成了雞你太美baby。
·再比如加點東西，保存刷新，有沒有發現什么規律？這里寫什么，這一段就是什么，但其他地方是沒變的。
所以有理由相信這份代碼的完全體應該是什么？應該就是這個。所以先來把它復刻一下，尖括號。要注意，尖括號得是英文輸入法下的尖括號。html，有個had，后面又有一個head，只不過head前面加了一個斜杠。至于這些東西到底是什么意思，等一下再說。
先把代碼搞完，雞左邊有個body，后面有個body，下面又有一個斜杠。html好保存，然后刷新，效果和之前的閹割版是一樣的。
然后來看一下這些尖括號到底是什么意思，其實還是挺簡單的。首先在html里面，像這種用尖括號括起來的東西稱之為元素。在國內有的人喜歡把它稱為標簽，其實都是一個意思，就是元素的意思。所以在這里有幾種元素，很明顯是三種，一種是html，一種是head，還有一種是body。
這個時候有的小白可能會問了，為什么有的前面是加了個斜杠的？其實是這樣子的，在html里面有些元素是有包裹區間的，就比如body元素，body元素里面的數據或者叫內容是從哪到哪？很明顯這個是開頭，這個是結尾，然后掐頭去尾，內容就在這，懂了吧？開頭結尾。
所以head元素的數據在哪？就在這，什么都沒有。head元素的數據在哪？很明顯就是這個。知道元素的概念之后，接下來再看一下這幾種元素都是什么意思。
·首先html元素是告訴瀏覽器，接下來是html代碼。
·然后head還有body是什么意思？其實可以把HTML代碼想象成是一個人，一個人有自己的頭，還有身體，而且人家的腦袋里面此時此刻在想什么是看不出來的。所以head元素里面的內容一般都是去寫一些對于頁面的一些設置，或者在這個區域里面所看不到的一些東西。
就比如里面可以再加個元素，比如說叫title，title我相信大家應該都知道，就是標題的意思，這個也是一樣的，起止。然后中間這里寫什么？選項卡的這里名字就是什么？就比如坤坤牛逼，保存，然后刷新，是不是變成了坤坤牛逼？當然，想把這個東西放到別的地方也行，比如說放到body里面，然后保存，一刷新，你看也是坤坤牛逼，對吧？但是一般來說按照規范，一般是放到這種head元素里面去，這是head元素。
·然后接下來是body，body就是人的身體，人家長得什么樣子，身材好不好，到底前凸不凸，后翹不翹，一眼就能看得出來，多看一眼都會爆炸的那種。所以在body元素里面，一般都是寫一些在這個區域里面能看到的東西，就比如說一些文字或者說一些圖片等等，所以這個才是html代碼最基本的結構。
·然后回過頭來再看一下最初的問題，什么？就是一開始代碼不是這個樣子的嗎？沒有，那些head、html、body卻依然能在瀏覽器上正確的顯示出來。其實很簡單，就是因為雖然就寫了這個東西，但是瀏覽器會讀取代碼文件里面所寫的內容，寫了什么就能讀到什么。
如果代碼不夠規范，瀏覽器就會自動的幫你把這些元素給補齊，補齊完之后才是真正的HTML代碼。有了正確的代碼之后，瀏覽器才會根據這份代碼來進行渲染，也就是現在所看到的樣子。
所以代碼千萬條，規范第一條，因為永遠都不會想知道瀏覽器到底會對不規范的代碼進行什么樣的修改，把它改成什么樣子。所以html代碼的最基本的格式就是html、head、body。修改后的結果:雞你太美。
大家在瀏覽網頁的時候，是否思考過這樣一個問題：怎樣才能制作出一個網頁呢？制作出一個網頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁，今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網頁瀏覽器，同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標題（title），也就是一個網頁的名稱
網頁標題
2、身體（body）
body的部分是整個網頁的重要內容部分，讓人一眼就瀏覽到這個網頁的內容，可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始，以結束標簽終止的元素：元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽，例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現，比如：name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例：
結果：
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式：
l 內部樣式，在HTML元素中使用“style”屬性
l 內部樣式表，在頭部<head>區域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經打開了制作網頁的大門啦~
HTML是用來開發網頁的，它是開發網頁的語言
全稱HyperText Mark-up Language，超文本標記語言
標記就是標簽
<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容
網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁
VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具
下載網址: https://code.visualstudio.com/Download
選擇對應的安裝包進行下載:
安裝一切默認
1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容， 比如: img標簽
標簽的使用形式
列表標簽
網頁效果
表格標簽
<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭
屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并
網頁效果
表單標簽
表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器
<form>標簽 表示表單標簽，定義整體的表單區域
一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內容有很多其他標簽來承載
這些標簽稱為表單元素標簽
網頁效果
表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器
兩種方式的區別:
表單元素屬性設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復選框
照片 type="file" 定義上傳文件
個人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點擊提交：
可以看到服務器收到了請求報文。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
