當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML从入门到精通

發布時間：2023/12/20 HTML 58 豆豆

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

文章目錄

前端技術：
- 學習方法
- - 前端要怎么學？
  - 前端技術棧
- HBuilderX
- - 介紹
  - 安裝
  - 主題
  - 字體
  - 備注字體顏色
  - 項目結構
  - jQuery語法支持
- Web概述
- 靜態頁面HTML
- - 概念
  - 結構
  - 入門案例
  - 語法
- 常用標簽
- - 標題標簽
  - 列表標簽
  - 圖片標簽
  - 超鏈接標簽
  - Input標簽
  - 表格標簽
  - 表單標簽
  - 其他標簽
- 永和門店管理系統
- 學生管理系統
- H5播放視頻

前端技術：

學習方法

前端要怎么學？

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

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

前端技術棧

HTML超文本標記語言實現頁面展現，形成靜態網頁
CSS層疊樣式表實現頁面美化
JS javascript腳本語言實現頁面前端和后端的數據交互，形成動態網頁
React facebook出品前端、移動端JavaScript框架
Angular google 出品基于TypeScript的開源 Web 應用框架
Vue 國人出品，阿里收購構建用戶界面的漸進式框架，自底向上開發
NodeJS 基于 Chrome V8 引擎的 JavaScript 運行環境

目前市場主流是ES6標準，但TypeScript可能會成為趨勢，如Vue 3.0選用的語言則為TypeScript。TypeScript將帶來JavaScript的華麗轉身，邁入強語言行列，所以其發展趨勢不容小覷。

Vue Element Admin 是通過Vue框架結合餓了嗎的ElementUI，并在其基礎上實現了后臺管理的基本功能，企業在其基礎上，直接二次開發，添加業務，實現敏捷編程。

HBuilderX

介紹

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

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

特點：快，是HBuilder的最大優勢，通過完整的語法提示和代碼塊模板等，大幅提升HTML、js、css的開發效率。

安裝

官網：https://www.dcloud.io/hbuilderx.html

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

主題

字體

默認字體i和l分不清，換成Verdana字體。

備注字體顏色

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

項目結構

jQuery語法支持

HBuilderX對javascript、html、css、vue支持很好，這些無需選擇默認支持，同時也對jQuery有很好的支持，但需要單獨選擇。

Web概述

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

靜態頁面HTML

概念

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

HTML歷史上有如下版本：

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

結構

文檔聲明，用來聲明HTML文檔所遵循的HTML規范。
頭部分，用來存放HTML文檔的基本屬性信息，比如網頁標題、編碼格式，這部分內容會被網頁優先加載。
體部分，用來存放網頁要顯示的數據。
聲明網頁標題
用來通知瀏覽器使用哪個編碼來打開HTML文檔，打開的方式一定要和保存文件時使用的編碼一致，避免出現中文亂碼問題。

入門案例

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

語法

HTML標簽

HTML是一門標記語言，標簽分為開始標簽和結束標簽，如<a></a>。

如果開始和結束中間沒有內容，可以合并成一個自閉標簽

HTML屬性

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

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

HTML注釋

格式：

注意：不能交叉嵌套！

如何在網頁中做空格和換行

換行：<br/>空格：在HTML中，多個空格會被當成一個空格來顯示。

常用標簽

標題標簽

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

列表標簽

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

圖片標簽

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

超鏈接標簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>標題標簽</title></head><body><a href="http://www.baidu.com" target="_blank">點我</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標簽

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

表格標簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>各種標簽</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>

表單標簽

<!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">注冊表單</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>確認密碼:</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>

其他標簽

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

永和門店管理系統

<!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>顧客聯</div><div>請您留意取餐賬單號</div><div>自取顧客聯</div><div>永和大王（北三環西路店）</div><div>010-62112313</div><div>--結賬單--</div><div>賬單號：P000009</div><div>賬單類型：食堂</div><div>人數：1</div><div>收銀員：張靜</div><div>開單時間：2018-04-17 07:24:11</div><div>結賬時間：2018-04-17 07:24:22</div><hr style="border : 1px dashed ;" /><div><table><tr> <td width="40">數量</td> <td width="130">品項</td> <td>金額</td> </tr><tr><td>1</td> <td>油條豆漿套餐</td> <td>7.00</td></tr><tr><td> </td> <td>1 X --非礬油條</td> <td> </td></tr><tr><td> </td> <td>1 X --現磨豆漿（熱/甜）</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>合計</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>支付寶補貼</td> <td> </td> <td width="30" align="right">3.00</td></tr></table></div><hr style="border : 1px dashed ;" /><div>打印時間：2018-04-17 07:24:23</div><hr style="border : 1px dashed ;" /><div>根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票。此二維碼30天有效，掃描時請保持小票平整。</div><div><img src=""></div><div>官網：www.yonghe.com.cn</div><div>加盟熱線：86-21-60769397 或 86-21-60799002</div><br/> </body> </html>

學生管理系統

H5播放視頻

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
入门

上一篇：深度学习目标检测之 YOLO v4
下一篇：前端之 HTML