HTML+CSS 專案總結
在過去的大概一個月的學習,基本上掌握了HTML+CSS的用法和特性。
這個星期老師給我們佈置了一個PC端的實戰項目,並且要求在3-4天內完成,我不惜廢寢忘食,在緊迫的時間內大致地完成了,但是有些效果不能像想像中的那樣實現出來,畢竟時間有限,能力有限。經過了這次的實戰之後,我對此有各方面的總結:
一、技術總結
1. 在開發之前必須要先把這個專案的所有設計圖從頭到尾看一遍,注意觀察相同的部分,比如說每個頁面的頭部和底部都是相同的,那麼就把他們提取出來,應用到每個頁面當中,這樣可以大大提高了開發的效率。
2.在開發過程中,肯定寫了很多重複的css樣式,拖慢了開發速度,這樣可以根據個人的習慣和愛好給自己做一套css框架——base.css,作用是重置默認樣式和提供通用樣式。不過在團隊開發中,當然最好就是每個成員都用同一套"base.css",這樣比較容易理解,以提高團隊開發的效率。
以下是我個人初步使用的一套base.css:
<span style="color: #008000;">/*</span><span style="color: #008000;"> @ 重置默认样式 </span><span style="color: #008000;">*/</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认内外边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> * </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认边框 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> img </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> none</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 根据要求设定默认字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> body </span>{<span style="color: #ff0000;"> font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> @ 提供通用样式 </span><span style="color: #008000;">*/</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> 设置左浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> .fl </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 设置右浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> .fr </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> right</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 清除浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> .clear </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉列表前的标识 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> .li-none </span>{<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉a链接下划线 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> .a-none </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 设置行内块级元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> .in-bl </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>; }
3.HTML的編碼規範:在遵循HTML標準和語義的前提下,盡量使用最少的標籤並保持最小的複雜度。
例如:如果單獨引入一張圖片可以直接用 4.在bootstrap中有很多關於CSS的編碼規範,在這裡我說幾個最實用的, ①有多項選擇器時,將選擇器單獨放在一行。 ②為了程式碼的易讀性,在每個宣告區塊的左花括號前加一個空格,每一個宣告區塊的右花括號單獨成行,每條宣告獨佔一行。 ③以逗號分隔的屬性值,每個逗號後面都應該插入一個空格。 ④省略小於1的小數前面的0 (如:用.5代替0.5)。 ⑤當值為0時,省略單位 (如:margin: 0;) 5.程式碼註解:在我的理念中,註解分為兩種,一種是用於劃分內容區塊,一種是對某些程式碼進行描述。編寫程式碼註釋,更方便於後期維護,並且易於他人理解。 舉個簡單的例子: 6.至於clss和id的命名,最好還是用英文單字吧,不要用拼音和純數字。如果英文單字太長,可以用縮寫,不過要在別人都能理解的情況下使用縮寫。如果一個類別有多項的時候,可以用英文單字+數字,例如(.box01 .box02 .box03 …)。 在長時間編寫程式碼的時候,難免會感到煩躁,甚至抓狂。如果不調整好心態,就很難繼續下去。還有些時候,會被周遭的環境影響自己。我呢,平常在寫程式碼時,會帶上耳機,聽著音樂,與世隔絕。 標籤,而不需要再用一個
標籤。
<span style="color: #008000;">/*</span><span style="color: #008000;"> content 开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#content </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">500px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">content的宽高均为500px</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 500px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> content 结束 </span><span style="color: #008000;">*/</span>
二、心態總結

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。
