如何快速寫(xiě)出表格代碼？exl表格轉(zhuǎn)換成html代碼

、在exl中編輯好你想要的表格形式，復(fù)制有內(nèi)容的表格到dw右側(cè)，如圖：

2、將途中寬度去除，選中一個(gè)寬度，按Ctrl+F,點(diǎn)擊“替換全部”。如圖：

3、途中選中部分換成表格的表頭代碼：

表頭代碼：<table align="center" border="1" cellpadding="0" cellspacing="1" class="biaoge" style="text-align:center" width="100%">

<tbody>

4、將表格標(biāo)題中的td和/td改成th和/th。如圖：

5、選中右側(cè)表格中有鏈接的表格，選擇上方窗口中的屬性面板，在html狀態(tài)下，目標(biāo)選擇”_blank”。

6、左側(cè)代碼就是匯總表格的代碼，復(fù)制到后臺(tái)內(nèi)容頁(yè)的源碼狀態(tài)下即可。

TML 代碼約定

很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范。

而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類(lèi)型

文檔類(lèi)型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：

<!doctype html>

使用小寫(xiě)元素名

HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。

推薦使用小寫(xiě)字母：

混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。

不推薦:

</SECTION>

非常糟糕:

</SECTION>

推薦:

<body>

<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>

</body>

表格實(shí)例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實(shí)例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。

以下 HTML5 文檔是正確的:

實(shí)例:

<!DOCTYPE html>

<head>

</head>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標(biāo)簽。

<html> 元素是文檔的根元素，用于描述頁(yè)面的語(yǔ)言：

<!DOCTYPE html>

聲明語(yǔ)言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。

省略 <head>?

在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。

默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。

實(shí)例

<!DOCTYPE html>

<html>

<body>

</body>

</html>

嘗試一下 ?

	現(xiàn)在省略 head 標(biāo)簽還不推薦使用。

元數(shù)據(jù)

HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題:

標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫(xiě)在  中:

比較長(zhǎng)的評(píng)論可以在  中分行寫(xiě)：

<!--

這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

這是一個(gè)較長(zhǎng)評(píng)論這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

-->

長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。

樣式表

樣式表使用簡(jiǎn)潔的語(yǔ)法格式 ( type 屬性不是必須的):

短的規(guī)則可以寫(xiě)成一行:

p.into {font-family: Verdana; font-size: 16em;}

長(zhǎng)的規(guī)則可以寫(xiě)成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來(lái)縮進(jìn)。
冒號(hào)與屬性值之間添加已空格。
逗號(hào)和符號(hào)之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字符。

	在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。

在 HTML 中載入 JavaScript

使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問(wèn) HTML 元素

一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。

以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:

實(shí)例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪問(wèn) JavaScript 代碼規(guī)范。

使用小寫(xiě)文件名

大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫(xiě)敏感： london.jpg 不能通過(guò) London.jpg 訪問(wèn)。

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn)。

你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫(xiě)的文件名。

文件擴(kuò)展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區(qū)別

.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。

區(qū)別在于：

.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。

在 Unix 系統(tǒng)中后綴沒(méi)有特別限制，一般用 .html。

技術(shù)上區(qū)別

如果一個(gè) URL 沒(méi)有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

版規(guī)則

縮進(jìn)

使用2個(gè)空格縮進(jìn)

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫(xiě)

只允許使用小寫(xiě)。

所有的代碼都用小寫(xiě)字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規(guī)Meta規(guī)則

編碼

如果沒(méi)有特殊需求，一般采用utf-8編碼。如果是cms站點(diǎn)，則遵守該站點(diǎn)的編碼規(guī)則。

<!-- 網(wǎng)頁(yè)編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫(xiě)的代碼。說(shuō)明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項(xiàng)目的復(fù)雜程度。

一般單行注釋?zhuān)?/p>

<!-- col -->

模塊間注釋?zhuān)?/p>

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環(huán)注釋?zhuān)?/p>

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋?zhuān)?/p>

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項(xiàng)卡內(nèi)容注釋?zhuān)?/p>

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規(guī)HTML設(shè)計(jì)規(guī)則

文檔類(lèi)型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類(lèi)型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫(xiě)有效、正確的HTML代碼，否則很難達(dá)到性能上的提升。

可以使用一些工具驗(yàn)證你的代碼，如 W3C HTML validator

HTML 的語(yǔ)義性

根據(jù)HTML各個(gè)元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標(biāo)簽說(shuō)明：

div 主要用于布局，分割頁(yè)面的結(jié)構(gòu);
ul/ol 主要用于無(wú)序/有序列表;
dl/dt/dd 當(dāng)頁(yè)面中出現(xiàn)第一行為類(lèi)似標(biāo)題/簡(jiǎn)述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽;
span 沒(méi)有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標(biāo)題, 根據(jù)重要性依次遞減;
h1 最重要的標(biāo)題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標(biāo)簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對(duì)齊;
s 刪除線;
strike 刪除線;
noframes 無(wú)視框時(shí)的內(nèi)容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個(gè)別視框;
frameset 視框格式總定義;

多媒體元素降級(jí)處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標(biāo)簽中忽略type屬性。

HTML5默認(rèn)type為text/css和text/javascript類(lèi)型，所以沒(méi)必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規(guī)則

每個(gè)塊元素、列表元素或表格元素都獨(dú)占一行，每個(gè)子元素都相對(duì)于父元素進(jìn)行縮進(jìn)。按設(shè)計(jì)稿劃分模塊，盡量使頁(yè)面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁(yè)面框架，推薦寫(xiě)法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁(yè)面良好層次

保證整個(gè)頁(yè)面在未加載樣式表時(shí)仍有較好的層次清晰的頁(yè)面結(jié)構(gòu)。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權(quán)重標(biāo)簽使用

H標(biāo)簽使用

h1 權(quán)重高，體現(xiàn)當(dāng)前網(wǎng)頁(yè)中相對(duì)比較重要的信息，但不宜過(guò)多，建議一個(gè)頁(yè)面只放一個(gè);
h2 可以做副標(biāo)題;
h3 可以做新聞列表;
h4-h6 可做相關(guān)新聞的列表標(biāo)簽屬性完整;

strong、b使用

將需要加粗的文字使用b標(biāo)簽來(lái)顯示。

將需要強(qiáng)調(diào)的文字（主要指包含關(guān)鍵詞的信息）使用strong標(biāo)簽來(lái)強(qiáng)調(diào)主要內(nèi)容。

注：b是粗體標(biāo)簽，屬于實(shí)體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體）；strong 是加重語(yǔ)氣標(biāo)簽，屬于邏輯標(biāo)簽，它的作用是加強(qiáng)字符語(yǔ)氣。

標(biāo)簽屬性使用

在很多情況下，a都要使用title來(lái)說(shuō)明該鏈接的相關(guān)說(shuō)明或目的意義。

例如：當(dāng)使用overflow隱藏掉a中的溢出文字時(shí)，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內(nèi)容是什么；又或者當(dāng)一個(gè)圖片型鏈接出現(xiàn)時(shí)，該a中的title同樣是必不可少的，它可以告訴用戶這個(gè)圖片鏈接是做什么用的。

注：僅在img里添加alt標(biāo)簽在火狐提示文字是出不來(lái)的，alt是圖片加載失敗或未加載完全時(shí)顯示出來(lái)的提示文字，要想鼠標(biāo)移上去顯示提示信息應(yīng)該用title，嚴(yán)謹(jǐn)?shù)膶?xiě)法是img里加入alt和title這兩個(gè)標(biāo)簽。

精簡(jiǎn)代碼

代碼保持精簡(jiǎn)，最優(yōu)化，這樣搜索引擎才更喜歡。

在線咨詢

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

如何快速寫(xiě)出表格代碼？exl表格轉(zhuǎn)換成html代碼

版規(guī)則

縮進(jìn)

大小寫(xiě)

行為空格

常規(guī)Meta規(guī)則

編碼

注釋

常規(guī)HTML設(shè)計(jì)規(guī)則

文檔類(lèi)型

HTML 的正確性

HTML 的語(yǔ)義性

多媒體元素降級(jí)處理

type屬性

HTML代碼格式規(guī)則

HTML與SEO

頁(yè)面良好層次

權(quán)重標(biāo)簽使用

標(biāo)簽屬性使用

精簡(jiǎn)代碼

您的項(xiàng)目需求

如何快速寫(xiě)出表格代碼？exl表格轉(zhuǎn)換成html代碼