整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
多朋友想學一下網(wǎng)頁制作，上網(wǎng)一看，只要涉及到網(wǎng)頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學習HTML語言，先得了解一些基本知識，今天這邊內(nèi)容可以作為學習HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯(lián)網(wǎng)上應用最廣泛的語言。
如何查看HTML？
拿最常見的網(wǎng)頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁上點右鍵，選擇“查看源”即可查看當前網(wǎng)頁的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁源代碼”這樣的選項即可查看。
當然也可以通過專業(yè)的網(wǎng)頁制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語言可以方便地將網(wǎng)絡上存儲于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對于我們來說，HTML是學習網(wǎng)頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學習和工作打下良好的基礎。
HTML如何入門？
要學習任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學習的基本步驟，選擇一本入門書籍，循序漸進地去學習每一張的內(nèi)容。一邊學習，一邊查看網(wǎng)頁代碼對照來學，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>如何編輯HTML?
這個就很多了 ，比如最出名的Dreamweaver，當然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。
總結
以上是學習HTML菜鳥教程的第一課，首先保持一個良好的心態(tài)來學習，有好的心態(tài)，知識方面只要循序漸進，學會就是水到渠成的事情了 。
HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言
全稱HyperText Mark-up Language，超文本標記語言
標記就是標簽
<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數(shù)都是成對出現(xiàn)的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標題</title>
</head>
<body>
網(wǎng)頁顯示內(nèi)容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發(fā)人員在告訴瀏覽器
整個網(wǎng)頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網(wǎng)頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網(wǎng)頁上顯示的內(nèi)容
網(wǎng)頁文件的后綴是.html, 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁
VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對應的安裝包進行下載:
安裝一切默認
1 標簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內(nèi)容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內(nèi)容， 比如: img標簽
標簽的使用形式
列表標簽
網(wǎng)頁效果
表格標簽
<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭
屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并
網(wǎng)頁效果
表單標簽
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務器
<form>標簽 表示表單標簽，定義整體的表單區(qū)域
一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標簽來承載
這些標簽稱為表單元素標簽
網(wǎng)頁效果
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務器
兩種方式的區(qū)別:
表單元素屬性設置
<!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>
點擊提交：
可以看到服務器收到了請求報文。
互聯(lián)網(wǎng)高速發(fā)展的今天，我們通過瀏覽器可以看到各種各樣的網(wǎng)站，包含了各式不同的領域還有內(nèi)容，通過點擊網(wǎng)站上的標簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù)，而這些都是建立在HTML這種標記語言的基礎上做到的。
HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標記語言，是一種專門用來建立網(wǎng)站的標識語言。其中包括了許多標簽將分散的網(wǎng)絡數(shù)據(jù)連接到一起，聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁。
看到這里是不是有許多朋友想要知道這個HTML語言該怎么去學習呢？是需要找老師統(tǒng)一學，還是去圖書館找專業(yè)書籍自己學好呢？不用擔心，因為今天要給大家推薦的就是一個專門為大家提供各種編程語言教程的學習網(wǎng)站。
這個網(wǎng)站名叫 runoob，直接在瀏覽器上搜索即可找到。
圖片來自RUNOOB網(wǎng)頁截圖
在首頁可以看到該欄目的第二個就是關于HTML的學習教程，點擊左邊的方框可以調整你的課程進度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關于網(wǎng)站建立的小知識。
下方的提示框會給你提供一些對HTML零基礎新手的科普，關于這種標記語言應該如何進行保存，如何查看文件后輟名，如何打開代碼文件等等，還會提供一些專用工具供你學習使用。同時網(wǎng)站會給你簡單介紹一些網(wǎng)頁編程語言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細。
圖片來自RUNOOB網(wǎng)頁截圖
在第三章節(jié)的編輯器一欄里，會提供給你一些HTML的專用編輯器，例如VS Code，還有sublime text 等實用工具，在后面會教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運行。
通過插件還有語言編程的格式我們就能夠學會如何制作第一步的標題了，剛開始的一步比較簡單，相信大家很快就能學會如何在網(wǎng)頁上顯示自己打入的文字了。之后進一步的學習就是關于如何調整文字段落，還有各種標識的使用。
圖片來自RUNOOB網(wǎng)頁截圖
在如何進行文字排版編輯的方面，教程中也講述得很詳細，包括一些用戶們常犯的錯誤，還有一些網(wǎng)頁的實例，甚至是這個教學網(wǎng)站上的排版示范都會進行一一講解。
更深入的章節(jié)會對如何進行圖像排列，傳輸?shù)确矫孢M行細講，教程中把大部分網(wǎng)站會使用到的技巧還有排版方式都分成了許多個小片段，方便大家能夠對每個方面針對性地學習。這些內(nèi)容并不多，幾乎每一個片段都是用很直白的語言進行講解，方便所有人都能夠看懂，并且在下方都會有更詳細的術語解析，還有一些比較難懂的點會舉例解釋。
圖片來自RUNOOB網(wǎng)頁截圖
經(jīng)過十幾章節(jié)的教學之后，基本上能夠掌握HTML語言的基本用法，還有一些簡單的操作了，這個時候如果想要進階學習的話還可以在網(wǎng)站上查找其他的進階語言用法，例如CSS, JavaScript等等復雜一些的語言，相應的你也會學到更多如何運營網(wǎng)頁的方法。
當然如果想要自己建立一個網(wǎng)站的話，還需要更多資源還有設備，例如高速的網(wǎng)絡連接保持網(wǎng)頁的穩(wěn)定性，以及穩(wěn)定的服務器，用來保證自己的網(wǎng)頁24小時都能保持流暢可用。不過這些都是在學會了如何建立網(wǎng)頁之后才考慮的事了。
現(xiàn)在網(wǎng)上也有許多編程教學，在網(wǎng)上自學一門知識一門語言變得非常方便，但是僅僅是擁有資源還是不夠的。學習如何建立自己的網(wǎng)站還需要大量的努力以及知識的積累，通過不斷的練習還有實踐才能自如地使用，只有基礎扎實，建立出來的網(wǎng)站才能夠長久。但還需要大家能夠行動起來，只有去學習去實踐才能夠真正學會東西，希望這個教學網(wǎng)站推薦能夠幫到更多人！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
