html網頁源代碼模板大全

下是一些常用的HTML網頁源代碼示例，這些示例可用作HTML文檔的基礎：

1、創建一個簡單的HTML文檔結構：

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello,World!</h1>

<p>This is a simple HTML webpage.</p>

</body>

</html>

2、插入圖片：

3、創建超鏈接：

<a href="https://www.example.com">Visit Example.com</a>

4、創建無序列表：

<ul>

</ul>

5、創建有序列表：

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

6、創建表格：

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

7、插入段落：

<p>This is a paragraph of text.</p>

8、插入換行符：

9、創建一個文本輸入框：

10、插入按鈕：

<button type="button">Click me</button>

這些示例代碼只是HTML的基礎，HTML具有更豐富的功能和標記選項，可以根據需要進行擴展和定制。請根據您的具體需求，使用這些示例作為起點，構建您自己的網頁。

【名揚銀河企業網站系統】

【免費】提供企業【網站源碼】，簡單易用，無須擁有代碼基礎。

歡迎留言或私信我們咨詢。

以上內容由【名揚銀河】企業網站系統原創發布，轉載請注明出處。

前話

Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網站模板，div加css布局，網頁資源分開存儲以便管理，網頁結構清晰簡單，希望本篇能夠助力各位萌新

主題

《周末の食記》

美食能撫平一切的憂傷

簡介

文件結構包含了css、fonts、images、js和html，運用html5技術，包括nav標簽、header標簽和footer標簽等，采用bootstrap進行布局

圖摘

編碼

<div class="ftco-46-row d-flex flex-column flex-lg-row">
    <div class="ftco-46-text ftco-46-arrow-right">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">揚州炒飯</h3>
        <p class="mb-5">一碗不一樣的炒飯，讓你難以拒絕.</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
        </div>
        <div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
        <div class="ftco-46-text ftco-46-arrow-up">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">藍莓酸奶冰激凌</h3>
        <p class="mb-5">觸動您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺享受，精選一級的夏威夷果仁，入口絲滑</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
    </div>
</div>

結語

如果人的一生總的能量是固定的話，那就節省開支，延長時間，喜怒哀樂不溢于言表，不困于心智，保持樂觀心態

景介紹：當我們在從事大項目或團隊開發工作時，我們經常會發現我們寫的代碼，凌亂、難以閱讀并且難以擴展。尤其是當一段時候后我們回頭再看自己的代碼，必須回想起當初自己寫的時候的思路才能看懂。

因此，人們嘗試在代碼風格上保持統一，然而，最大的困難是：修改一個較小的問題，都可能創建更多丑陋的 hack，也可能 CSS 的小改變會影響 JavaScript 的功能。但是這些問題能在我們的項目開始的時候精心規劃，就能很大程度上避免這些問題。今天就來討論一下如何寫一份不錯的CSS代碼

一個好的css代碼是什么樣的呢

保持樣式表可維護
保持代碼可讀性
保持樣式表的可擴展性

要保持良好的CSS代碼，首先需要訂立一致的CSS團隊規范，這就必須從CSS架構講起。

CSS架構

目前CSS主要有以下五種設計架構

1. OOCSS

面向對象的CSS，

結構和主題分離 - 減少對 HTML 結構的依賴
主題和主題分離 - 增加樣式的復用性

在OOCSS的基礎上，出現了另一種設計模式

2. BEM

也可以被當成一種命名規范，本質上使頁面結構清晰

塊（Block）、元素（Element__）、修飾符（Modifier--）

有以下幾個規則

Block元素應該以元素本身的屬性為主
Element則以元素位置和形狀為主
Modifier則修飾當前的狀態和主題
Element一定是在Block之中，而不能獨立于Block之外
Modifier則更多的表示當前組件的形狀和狀態

可以明顯發現

結構清晰
定位迅速
功能明確

在面對組件化的場景時，Block 代表邏輯上和功能上獨立的頁面組件。Element封裝了行為(JavaScript)、模板、樣式(CSS)和其他實現技術。

舉個例子

<header class="header">
    <img class="logo">
    <form class="search-form">
        <input class="input">
        <button class="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">en</a>
        </li>
        <li class="lang-switcher__item">
            <a class="lang-switcher__link--active" href="url">ru</a>
        </li>
    </ul>
</header>

block-name__element-name--modifier-name--modifier-value

在React當中，也采用了這樣的命名方式

BEMnaming工具[1]，提供BEM命名的檢測

然而在面對大型的項目時CSS的凌亂也很難讓開發者愿意在茫茫多的代碼中尋找可復用的代碼

3. SMACSS

(What’s Smacss)[https://smacss.com/]

設計的主要規范有三點：

Categorizing CSS Rules（為css分類）
Naming Rules（命名規范）
Minimizing the Depth of Applicability（最小化適配深度）

為了實現清晰的CSS結構，將CSS分為

Base - 全局樣式，如global-reset、normalize.css
Layout - 頁面布局，如grid
Module - 組件布局
State - 元素狀態，如visible、hidden
Theme or Skin - 更多是具體主題的配置樣式
JavaScript 勾子 (JavaScript hooks)

其中尤其建議JavaScript解除和樣式的耦合

<button class="btn btn--buy js-buy-now"></button>

命名規范上出現了一些差異

.layout-header
.is-hidden
.theme-nav

最小化適配深度，減少html和css的耦合度，避免html的變動增加對css的影響

.sidebar ul h3 {}


.side {}

4. ITCSS

對CSS進行了更加詳細的分層

如果從功能的角度上看呢，是將Base分成了Settings、Tools、Generic和Base，而Objects、Components和Trumps則分別對應Layout、Module、（State、Theme），而這樣設計的好處在于可以將代碼的復用性進一步提升

5. ACSS

一個樣式屬性一個類，其中的典型代表就是TailwindCSS[2]，缺點則是破壞了語義化

.block{ display: block; }
.hidden { display: none; }
.p-2 { padding: 0.75rem; }
.flex { display: flex; }
.text-base { font-size: 1rem; }
.bg-green-200 { background-color: #123456 }


<div className="m-2 p-2 text-2xl text-gray-500">I am Ok</div>

而上述的架構思想，更多則是需要團隊成員的一致性認同，才能實現在代碼風格上的統一。

除了這些開發自律性上的代碼規范外，還有什么其他的方式來提升CSS質量呢？

CSS預處理器

在預處理器中，同樣提供了眾多的方法來簡化與控制CSS代碼，以stylus為例

1. 變量

font-size = 14px


 body
   font font-size Arial, sans-serif
   
pad(types = padding, n = 5px)
    if padding in types
      padding n
    if margin in types
      margin n


body
    pad()
body
    pad(margin)
body
    pad(padding margin, 10px)
    
// Yields：
body {
    padding: 5px;
}
body {
    margin: 5px;
}
body {
    padding: 10px;
    margin: 10px;
}

2. 函數

 add(a, b = a)
   a + b


 add(10, 5)
 // => 15
 
  get(hash, key)
    return pair[1] if pair[0] == key for pair in hash
    
  hash = (one 1) (two 2) (three 3)
  
  get(hash, two)
  // => 2


  get(hash, three)
  // => 3


  get(hash, something)
  // => null

3. 內建函數

// 提取顏色分量
red(#c00)
// => 204


red(#000, 255)
// => #f00

4. 插值

// 屬性插值
vendor(prop, args)
    -webkit-{prop} args
    -moz-{prop} args
    {prop} args


border-radius()
    vendor('border-radius', arguments)


box-shadow()
    vendor('box-shadow', arguments)


button
    border-radius 1px 2px / 3px 4px


    
// Yields:    


button {
    -webkit-border-radius: 1px 2px / 3px 4px;
    -moz-border-radius: 1px 2px / 3px 4px;
    border-radius: 1px 2px / 3px 4px;
  }
  
// 選擇器插值  
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row
      
      
// Yields:  
  
table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}    


mySelectors = '#foo,#bar,.baz'


{mySelectors}
  background: #000
  
  
Yields:


#foo,
#bar,
.baz {
  background: #000;
}  


// 對象插值
foo = {
  width: 10px,
  height: 20px,
  '&:hover': {
    padding: 0


  }
}


.bar
  {foo}




Yields:


// => .bar {
//      width: 10px;
//      height: 20px;
//    }
//    .bar:hover {
//      padding: 0;
//    }

5. @EXTEND

   form
     input[type=text]
       padding: 5px
       border: 1px solid #eee
       color: #ddd


   textarea
     @extends form input[type=text]
     padding: 10px
     
     
    //Yielding:
    
    form input[type=text],
    textarea {
      padding: 5px;
      border: 1px solid #eee;
      color: #ddd;
    }
    textarea {
      padding: 10px;
    }

對于維護一份高質量的CSS代碼，注釋和間隔必不可少

以下是一種比較建議的注釋和間隔方式，可以自行取用。

/*------------------------------------*\
  #A-SECTION
*------------------------------------*/


.selector { }




/*------------------------------------*\
  #ANOTHER-SECTION
*------------------------------------*/


/**
 * Comment
 */


.another-selector { }

除了縮進，我們還可以通過在規則集之間自由而明智地使用空格來提供大量信息。我們用：

密切相關的規則集之間的一 (1) 條空行。
松散相關的規則集之間的兩 (2) 條空行。
全新部分之間的五 (5) 行空行。

// good case
/*------------------------------------*\
  #FOO
*------------------------------------*/


.foo { }


  .foo__bar { }




.foo--baz { }


// bad case
.foo { }
  .foo__bar { }
.foo--baz { }

同理，在html結構中，也可以使用同樣的規則。

除了以上這些，還有眾多的規范和優化可以繼續探索，如選擇器性能，CSS嵌套，有興趣的讀者可以繼續探索

你會認為 CSS規范是一個有點宏大和不必要的概念：為什么這么簡單、這么直接的東西需要像架構一樣被設計成非常復雜的東西？！

正是因為CSS 的簡單性、松散性和不守規矩的性質意味著在任何合理規模上管理（閱讀、馴服）它的最佳方式是通過嚴格和特定的架構。堅實的架構可以幫助我們控制我們的特殊性，強制執行命名約定，管理我們的源代碼順序，創建一個健全的開發環境，并且通常使我們的 CSS 項目管理更加一致和舒適。

總的來說，可以依照一下幾個規則訂立團隊/個人代碼規范，保證代碼的一致性

建議的幾個原則

單一職責原則: 每個 CSS 實現都必須有一個單一的責任。

Correct:
    .button {
        font-family: Arial, sans-serif;
        border: 1px solid black;
        background: #fff;
    }
    .header__button {
        margin: 30px;
        position: relative;
    }
    
Incorrect:
    .header__button {
        font-family: Arial, sans-serif;
        position: relative;
        border: 1px solid black;
        margin: 30px;
    }

開閉原則: 元素應該通過修飾符擴展，而不是直接在原有基礎上修改。

Original:
    <button class="button">...</button>
    .button {
        font-family: Arial, sans-serif;
        text-align: center;
        font-size: 11px;
        line-height: 20px;
    }
    
Extend
    <button class="button button_size_s">...</button>
    .button {
        font-family: Arial, sans-serif;
        text-align: center;
        font-size: 11px;
        line-height: 20px;
    }
    .button_size_s {
        font-size: 13px;
        line-height: 24px;
    }

DRY原則：將有意義的重復規范化和抽象化

巧用mixin和extend
@mixin my-web-font() {
  font-family: "My Web Font", sans-serif;
  font-weight: bold;
}


.btn {
  display: inline-block;
  padding: 1em 2em;
  @include my-web-font();
}


.foo {
  color: red;
}
.bar {
  @extend .foo;
}

組合優于繼承和關注點分離

// 將寫js的方式同樣適用在css上
<div class="layout">


  <div class="layout__item  two-thirds">
    <section class="content">
      ...
    </section>
  </div>


  <div class="layout__item  one-third">
    <section class="sub-content">
      ...
    </section>
  </div>


</div>

參考文獻

BEM簡介[3]

OOCSS介紹[4]

探索 SMACSS：可擴展的模塊化 CSS 框架[5]

編寫高效的 CSS 選擇器[6]

CSS的單一原則[7]

思考CSS架構[8]

參考資料

[1]BEMnaming工具: https://github.com/bem/bem-sdk#naming

[2]TailwindCSS: https://www.tailwindcss.cn/

[3]BEM簡介: https://en.bem.info/methodology/quick-start/

[4]OOCSS介紹: http://oocss.org/

[5]探索 SMACSS：可擴展的模塊化 CSS 框架: https://zhuanlan.zhihu.com/p/44851489

[6]編寫高效的 CSS 選擇器: https://csswizardry.com/2011/09/writing-efficient-css-selectors/

[7]CSS的單一原則: https://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/

[8]思考CSS架構: https://zhuanlan.zhihu.com/p/32952130

在線咨詢

上一篇：1_28向HTML元素問好（基礎HTML和HTML5
下一篇：HTML自學視頻教程，零基礎知道怎么學了吧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html網頁源代碼模板大全

一個好的css代碼是什么樣的呢

CSS架構

1. OOCSS

2. BEM

3. SMACSS

4. ITCSS

5. ACSS

CSS預處理器

1. 變量

2. 函數

3. 內建函數

4. 插值

5. @EXTEND

對于維護一份高質量的CSS代碼，注釋和間隔必不可少

建議的幾個原則

單一職責原則: 每個 CSS 實現都必須有一個單一的責任。

開閉原則: 元素應該通過修飾符擴展，而不是直接在原有基礎上修改。

DRY原則：將有意義的重復規范化和抽象化

組合優于繼承和關注點分離

參考文獻

參考資料

您的項目需求

對于維護一份高質量的CSS代碼，注釋和間隔必不可少

單一職責原則: 每個 CSS 實現都必須有一個單一的責任。