當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML从入门到精通

發(fā)布時(shí)間：2023/12/20 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML从入门到精通小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

前端技術(shù)：
- 學(xué)習(xí)方法
- - 前端要怎么學(xué)？
  - 前端技術(shù)棧
- HBuilderX
- - 介紹
  - 安裝
  - 主題
  - 字體
  - 備注字體顏色
  - 項(xiàng)目結(jié)構(gòu)
  - jQuery語法支持
- Web概述
- 靜態(tài)頁面HTML
- - 概念
  - 結(jié)構(gòu)
  - 入門案例
  - 語法
- 常用標(biāo)簽
- - 標(biāo)題標(biāo)簽
  - 列表標(biāo)簽
  - 圖片標(biāo)簽
  - 超鏈接標(biāo)簽
  - Input標(biāo)簽
  - 表格標(biāo)簽
  - 表單標(biāo)簽
  - 其他標(biāo)簽
- 永和門店管理系統(tǒng)
- 學(xué)生管理系統(tǒng)
- H5播放視頻

前端技術(shù)：

學(xué)習(xí)方法

前端要怎么學(xué)？

前端位于整個(gè)項(xiàng)目首要要開發(fā)的內(nèi)容，直接和用戶打交道，實(shí)現(xiàn)頁面的展現(xiàn)和交互功能，所以在分類上俗稱為前端。隨著軟件技術(shù)的日趨成熟，前端內(nèi)容也呈現(xiàn)爆炸式的增長(zhǎng)，和革命性的變革，前端借鑒后端的發(fā)展經(jīng)驗(yàn)，也開始應(yīng)用分層體系，也開始術(shù)有專攻，解決一個(gè)專項(xiàng)的問題，也開始變得龐大和臃腫。從簡(jiǎn)單單一功能向框架過渡。今天的前端技術(shù)已經(jīng)變得不簡(jiǎn)單，不亞于后端開發(fā)，甚至難度超越了后端開發(fā)。

但從整體來看（前端占軟件開發(fā)總量的百分之十左右，地位可見一斑）；從技術(shù)的含金量來看（如：業(yè)務(wù)功能是核心，遠(yuǎn)超UI的作用；分布式緩存redis的作用遠(yuǎn)超vue前端），從職業(yè)的發(fā)展路徑來看（通向架構(gòu)師之路，大都由后端工程師晉升的，前端幾乎沒有）；從薪資的天花板來看（隨著年頭的拉長(zhǎng)，后端工程師的薪資是前端的幾倍），后端優(yōu)勢(shì)遠(yuǎn)大于前端。所以對(duì)于大家而言，千萬不要把重心放在前端技術(shù)上，會(huì)用，會(huì)查，會(huì)改才是正確的定位！

前端技術(shù)棧

HTML超文本標(biāo)記語言實(shí)現(xiàn)頁面展現(xiàn)，形成靜態(tài)網(wǎng)頁
CSS層疊樣式表實(shí)現(xiàn)頁面美化
JS javascript腳本語言實(shí)現(xiàn)頁面前端和后端的數(shù)據(jù)交互，形成動(dòng)態(tài)網(wǎng)頁
React facebook出品前端、移動(dòng)端JavaScript框架
Angular google 出品基于TypeScript的開源 Web 應(yīng)用框架
Vue 國(guó)人出品，阿里收購(gòu)構(gòu)建用戶界面的漸進(jìn)式框架，自底向上開發(fā)
NodeJS 基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境

目前市場(chǎng)主流是ES6標(biāo)準(zhǔn)，但TypeScript可能會(huì)成為趨勢(shì)，如Vue 3.0選用的語言則為TypeScript。TypeScript將帶來JavaScript的華麗轉(zhuǎn)身，邁入強(qiáng)語言行列，所以其發(fā)展趨勢(shì)不容小覷。

Vue Element Admin 是通過Vue框架結(jié)合餓了嗎的ElementUI，并在其基礎(chǔ)上實(shí)現(xiàn)了后臺(tái)管理的基本功能，企業(yè)在其基礎(chǔ)上，直接二次開發(fā)，添加業(yè)務(wù)，實(shí)現(xiàn)敏捷編程。

HBuilderX

介紹

HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。 HBuilder的編寫用到了Java、C、Web和Ruby，本身主體是由Java編寫。

它基于Eclipse，所以順其自然地兼容了Eclipse的插件，用過Eclipse的開發(fā)者使用HBuilder會(huì)非常順手。形成HBuilderX開發(fā)前端內(nèi)容，Eclipse/Idea開發(fā)后端內(nèi)容的格局。

特點(diǎn)：快，是HBuilder的最大優(yōu)勢(shì)，通過完整的語法提示和代碼塊模板等，大幅提升HTML、js、css的開發(fā)效率。

安裝

官網(wǎng)：https://www.dcloud.io/hbuilderx.html

安裝app版本，整體下來近600m。

主題

字體

默認(rèn)字體i和l分不清，換成Verdana字體。

備注字體顏色

默認(rèn)灰色看不清晰，可以換成黑色，直接編輯Default.xml，修改下面3行的顏色，重新啟動(dòng)HBuilderX即可。

項(xiàng)目結(jié)構(gòu)

jQuery語法支持

HBuilderX對(duì)javascript、html、css、vue支持很好，這些無需選擇默認(rèn)支持，同時(shí)也對(duì)jQuery有很好的支持，但需要單獨(dú)選擇。

Web概述

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Jla0yree-1622524547984)(RackMultipart20210601-4-m99z7q_html_96371a0fb852cc09.png)]

靜態(tài)頁面HTML

概念

HTML（Hyper Text Markup Language）超文本標(biāo)記語言，是做網(wǎng)站頁面的最基礎(chǔ)的開發(fā)語言，由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言，它是標(biāo)準(zhǔn)通用化標(biāo)記語言SGML的應(yīng)用。由W3C組織發(fā)展壯大。它的功能很弱，連腳本語言都算不上，類比java這種強(qiáng)語言，那就是一個(gè)天上一個(gè)地下，但它小而美，網(wǎng)站開發(fā)它卻是霸主。

HTML歷史上有如下版本：

HTML 1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布
HTML 2.0：1995年11月作為RFC 1866發(fā)布
HTML 3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)
HTML 4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML 4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)
HTML 5：HTML5是公認(rèn)的下一代Web語言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手

結(jié)構(gòu)

文檔聲明，用來聲明HTML文檔所遵循的HTML規(guī)范。
頭部分，用來存放HTML文檔的基本屬性信息，比如網(wǎng)頁標(biāo)題、編碼格式，這部分內(nèi)容會(huì)被網(wǎng)頁優(yōu)先加載。
體部分，用來存放網(wǎng)頁要顯示的數(shù)據(jù)。
聲明網(wǎng)頁標(biāo)題
用來通知瀏覽器使用哪個(gè)編碼來打開HTML文檔，打開的方式一定要和保存文件時(shí)使用的編碼一致，避免出現(xiàn)中文亂碼問題。

入門案例

<!doctype html> <html><head><title>quickstart</title><meta charset="UTF-8"/></head><body>hello html ~你好呀</body> </html>

語法

HTML標(biāo)簽

HTML是一門標(biāo)記語言，標(biāo)簽分為開始標(biāo)簽和結(jié)束標(biāo)簽，如<a></a>。

如果開始和結(jié)束中間沒有內(nèi)容，可以合并成一個(gè)自閉標(biāo)簽

HTML屬性

HTML標(biāo)簽都可以具有屬性，屬性包括屬性名和屬性值，如果有多個(gè)屬性，要以空格隔開。屬性的值要用單引號(hào)或者雙引號(hào)引起來。

如：<a href="" target="" name="" id=""></a>

HTML注釋

格式：

注意：不能交叉嵌套！

如何在網(wǎng)頁中做空格和換行

換行：<br/>空格：在HTML中，多個(gè)空格會(huì)被當(dāng)成一個(gè)空格來顯示。

常用標(biāo)簽

標(biāo)題標(biāo)簽

<!doctype html> <html><head><title>01</title><meta charset="utf-8"/></head><body><h1 align=”center”>我是1號(hào)標(biāo)題</h1><h2>我是2號(hào)標(biāo)題</h2><h3>我是3號(hào)標(biāo)題</h3><h4>我是4號(hào)標(biāo)題</h4><h5>我是5號(hào)標(biāo)題</h5><h6>我是6號(hào)標(biāo)題</h6></body> </html>

列表標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>標(biāo)題標(biāo)簽</title></head><body><ul type="circle"><li>中國(guó)</li><li>美國(guó)</li><li>小日本</li></ul><ul type="square"><li>中國(guó)</li><li>美國(guó)</li><li>小日本</li></ul><ul type="disc"><li>中國(guó)</li><li>美國(guó)</li><li>小日本</li></ul></body> </html>

圖片標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>標(biāo)題標(biāo)簽</title></head><body><img src="1.jpg" border="10px" width="50%" height="30%"></body> </html>

超鏈接標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>標(biāo)題標(biāo)簽</title></head><body><a href="http://www.baidu.com" target="_blank">點(diǎn)我</a><a name="_top">java從入門到精通</a><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><a href="#_top">回到頂部</a><br><br><br><br></body> </html>

Input標(biāo)簽

<input type="text" /> 普通文本框 <input type="password" /> 密碼 <input type="radio"/>男單選框 <input type="number" /> 數(shù)字值 <input type="week" /> 日歷 <input type="checkbox" />楊冪復(fù)選框 <input type="button" value="點(diǎn)我一下"/> <input type="submit" value="提交數(shù)據(jù)"/>

表格標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>各種標(biāo)簽</title></head><body><table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center"><tr><td colspan="2">11</td> <td>13</td></tr><tr><td>21</td><td>22</td><td rowspan="2">23</td> </tr><tr><td>31</td><td>32</td></tr></table></body> </html>

表單標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>form表單</title></head><body> <form method="post"><table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3"><th colspan="2">注冊(cè)表單</th><tr><td>用戶名:</td><td><input type="text" name="user"/></td></tr><tr><td>密碼:</td><td><input type="password" name="pwd"/></td></tr><tr><td>確認(rèn)密碼:</td><td><input type="password" name="repwd"/></td></tr><tr><td>昵稱:</td><td><input type="text" name="nick"/></td></tr><tr><td>郵箱:</td><td><input type="text" name="mail"/></td></tr><tr><td>性別:</td><td> <input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="2"/>女</td></tr><tr><td>愛好:</td><td><input type="checkbox" name="like" value="1"/>籃球<input type="checkbox" name="like" value="2"/>足球<input type="checkbox" name="like" value="3"/>排球</td></tr><tr><td>城市:</td><td><select name="city"> <option value="1">北京</option> <option value="2">上海</option></select></td></tr><tr><td>頭像:</td><td><input type="file" name="path"/></td></tr><tr><td colspan="2" align="center"><button type="submit">提交</button></td></tr></table></form></body> </html>

其他標(biāo)簽

<div>大家好</div> <div>大家好</div> <div>大家好</div><p> Nice</p> <p> Nice</p> <p> Nice</p><span> hello</span> <span> hello</span> <span> hello</span>

永和門店管理系統(tǒng)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>永和大王賬單</title> </head> <body><div>顧客聯(lián)</div><div>請(qǐng)您留意取餐賬單號(hào)</div><div>自取顧客聯(lián)</div><div>永和大王（北三環(huán)西路店）</div><div>010-62112313</div><div>--結(jié)賬單--</div><div>賬單號(hào)：P000009</div><div>賬單類型：食堂</div><div>人數(shù)：1</div><div>收銀員：張靜</div><div>開單時(shí)間：2018-04-17 07:24:11</div><div>結(jié)賬時(shí)間：2018-04-17 07:24:22</div><hr style="border : 1px dashed ;" /><div><table><tr> <td width="40">數(shù)量</td> <td width="130">品項(xiàng)</td> <td>金額</td> </tr><tr><td>1</td> <td>油條豆?jié){套餐</td> <td>7.00</td></tr><tr><td> </td> <td>1 X --非礬油條</td> <td> </td></tr><tr><td> </td> <td>1 X --現(xiàn)磨豆?jié){（熱/甜）</td> <td> </td></tr></table></div><hr style="border : 1px dashed ;" /><div><table><tr><td width="140">支付寶花唄一元早餐</td> <td width="30">1</td> <td width="30" align="right">-3.00</td></tr><tr><td>合計(jì)</td> <td> </td> <td width="30" align="right">4.00</td></tr><tr><td>支付寶</td> <td> </td> <td width="30" align="right">1.00</td></tr><tr><td>支付寶補(bǔ)貼</td> <td> </td> <td width="30" align="right">3.00</td></tr></table></div><hr style="border : 1px dashed ;" /><div>打印時(shí)間：2018-04-17 07:24:23</div><hr style="border : 1px dashed ;" /><div>根據(jù)相關(guān)稅法規(guī)定，電子發(fā)票的開票日期同網(wǎng)上申請(qǐng)電子發(fā)票的日期，如您需要當(dāng)日的電子發(fā)票請(qǐng)務(wù)必在消費(fèi)當(dāng)日通過掃描下方二維碼，根據(jù)指引步驟開具您的增值稅電子普通發(fā)票。此二維碼30天有效，掃描時(shí)請(qǐng)保持小票平整。</div><div><img src=""></div><div>官網(wǎng)：www.yonghe.com.cn</div><div>加盟熱線：86-21-60769397 或 86-21-60799002</div><br/> </body> </html>

學(xué)生管理系統(tǒng)

H5播放視頻

總結(jié)

以上是生活随笔為你收集整理的HTML从入门到精通的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html
入门

上一篇：深度学习目标检测之 YOLO v4
下一篇：小米机器人清理主刷和轴承_扫地机主刷怎样