mark網頁設計

1、html5裡面新增的用於網頁布局的標簽有哪些

html5新增的一些語義話標簽，可以使用比如頭部可以使用header標簽，導航nav，主體部分可以使用section，底部footer，中間文章article。

2、HTML是什麼？

HTML簡介

HTML是一種網頁使用的語言，是一種描述超文件的注記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。

HTML與XML的區別

而XML是由W3C所發展出的一種網頁語言規格，是SGML的精簡版本，特別用來設計網頁文件，XML可以讓使用者自己定義所需要的標簽，並且任意啟動定義、轉換、驗證等工作，同時可以在網頁和應用程式間讀取資料和傳遞資料。

所以HTML與XML的差別在於HTML無法自訂標簽，但是基本上全世界的瀏覽器都可以看到他寫出來的網頁，而XML則是一種可以自由轉換資訊以及定義標簽的方式，可以讓其他網頁自己去轉換分享者的標簽，並轉為自己的標簽，進而直接讀取跟引用。

開始

超文件標示語言（HTML）是建立網站的主要基石。HTML是一種非常基礎的標記示語言，且需要記住數十種建置網頁格式與外觀的HTML指令（commands）。編寫任何HTML編碼（code）或設計您的第一個網頁前，您必須決定是使用HTML 網頁編輯器（HTML editor）還是文字編輯器（text editor），例如：Notepad或WordPad。

當您決定了HTML 網頁編輯器（HTML editor）且開始准備製作您的網站，請考慮一下您希望的網站外觀與功能。您甚至可以考慮畫出您的想法，這可以幫助您對網站與網頁的想像更具體。以下是一些網頁設計時需要考慮的注意事項。

1. 您想要怎麼存取所有的文件？所有的文件都存在相同的文件夾或路徑（directory）嗎？假如您有大量不同的圖片與文件，我建議您將頁面、文件和圖片分別儲存在不同的路徑里。

2. HTML文件都會被儲存為.HTM還是.HTML？用.htm or .html.都可，沒有任何影響，但最好可以使用相同的副檔名。

3. 網頁打算使用相同的版型嗎？是否要有相同的外觀與感覺？

4. 主導覽列要怎麼做？放在每個網頁的左側、下方還是上方好？

小提示：請意識到您設計網頁時，網頁會隨著您的想法而不斷變化。就像是這個網站「 新視野網頁設計公司 」從開始到現在，已經被改過數十次一樣。

編寫基本的HTML

在安裝HTML網頁編輯器（HTML editor）和設置文件夾後，您就可以開始創建您的網頁。一開始先建立一個名為index.htm或index.html的文件首頁。若沒有任何具體指定，所有瀏覽器基本上都會把index當作首頁。比如，當您輸入https://www.newscan.com.tw，瀏覽器則會自動進入https://www.newscan.com.tw/index.htm這個地址。

當您建立index.htm或index.html文件且用HTML網頁編輯器（HTML editor）打開，我們建議您將以下的原始碼（source code）插入頁面里。假如您的HTML網頁編輯器（HTML editor）會自動把下面的HTML編碼（code）放入您的頁面，或著您使用的是WYSIWYG editor，那您可以跳過此步驟。

上面的編碼是一個非常基本、幫助每個網頁組成的例子。如您所見，這個編碼以＜html＞開始，而這代表著＜html＞裡面的所有內容都是HTML編碼。接著是＜head＞，這是HTML文件的標題。再來是＜title＞，這是會顯示在瀏覽器上方的網頁標題。最後則是＜body＞，包含網頁內所有的內文。

3、markdown 編輯器給誰用

markdown編輯器語法
分段
空一行（兩個回車）分段

換行
行末加兩個或多個空格才是真正的換行，否則正常的一個回車就像在 HTML 代碼中一樣，被當作空格處理

段落和換行有什麼區別？段落在生成的 HTML 代碼中被一對 <p></p> 標簽包含起來，而換行只是插入了一個 <br /> 標簽。一般來說，網頁設計給段落之間留的空白應該比行距大。

分隔線
你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線
* * *
***
*****
- - -
---------------------------------------

標題
用 1-6 個井號 (#) 開始一行表示這一行是標題，例如：
# 一級標題
## 二級標題
###### 六級標題

列表
HTML 列表分無序列表 (unordered list, ul) 和有序列表 (ordered list, ol) 兩種。在 Markdown 中用星號、加號、減號開始一行表示無序列表，用數字開始一行表示有序列表。例如：
無序列表
* Red
* Green
* Blue
有序列表
1. Bird
2. McHale
3. Parish

代碼及代碼塊
如果是在一段文字中插入一句代碼，把代碼用 (`) 符號包圍起來即可。這個符號在鍵盤左上角，1 的左邊，Tab 的上面。
如果插入一大段代碼也很簡單，在代碼的每一行之前加四個空格。
例如: `function code`

blockquote區塊
用右尖括弧 (>) 表示 blockquote，你一定見過郵件中這樣表示引用別人的內容。可以嵌套，可以包含其它的 Markdown 元素，例如：
> ## This is a header.
> > 1. This is the first list item.
> 2. This is the second list item.
> > Here's some example code:
> > return shell_exec("echo $input | $markdown_script");

鏈接
文本鏈接形式:
[網站開發指南](http://www.yeschan.com/)
自動連接形式:
<http://www.yeschan.com/>

圖片
圖片形式
帶alt的圖片形式

強調
用星號或下劃線來實現。兩邊分別放一個 * 或 _ 會生成 em 標簽，放兩個則生成 strong 標簽。例如：
*單星號* _單下劃線_ **雙星號** __雙下劃線__
會生成:
<em>單星號</em> <em>單下劃線</em> <strong>雙星號</strong> <strong>雙下劃線</strong>

MathJax公式
支持[MathJax公式](http://www.mathjax.org/)，
例如:
`$ a^2 + b^2 = c^2 $`
或者:
```mathjax
x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}
```

4、UI設計需要學習多少個軟體呢？中公的課程怎麼樣？

總的來說，還是比較多呢。

1、PS開發和發行的圖像處理軟體。ps不但是最受歡迎的圖像處理軟體，同時也是目前最主流的UI設計軟體，適合界面設計、圖標設計、手繪。
2.Illustrator，應用於出版、多媒體和在線圖像的工業標准矢量插畫的軟體。適合生產任何小型設計到大型的復雜項目。

3.Axure RP，一個專業的快速原型設計工具。能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。

4.XMind ，一款非常實用的商業思維導圖軟體，致力於使用先進的軟體技術幫助用戶真正意義上提高生產率。

5.Sketch，目前最火的UI設計工具。Sketch的界面非常棒，是為想要設計圖標或界面的用戶而特製的，支持多個文件分層；使用了最佳的文字渲染和文字樣式演算法；畫布具有無限尺寸；而且切片工具非常棒。

6.MarkMan，一款高效的設計稿標注、測量工具。

7.Cutterman，非常好用的切圖工具，是一款photoshop插件，能夠讓你只需要點擊一個按鈕，就自動輸出你需要的各種各樣的圖片，快到沒有朋友！

8.Adobe After Effects簡稱「AE」是Adobe公司推出的一款圖形視頻處理軟體，適用於從事設計和視頻特技的機構，包括電視台、動畫製作公司、個人後期製作工作室以及多媒體工作室。屬於層類型後期軟體。

每一款軟體在UI設計中都是發揮著重要的作用的，所以如果我們想更好的想自己的UI設計理念實踐展現的話，這樣一些工具也是必不可少的。

最後，UI設計是一個藝術性質的設計，所以藝術審美的感知能力是必須要具備的。

5、網頁設計中常用的javascript腳本有哪些

$(「a[href=』#top』]」).click(function() {   

$(「html, body」).animate({ scrollTop: 0 }, 「slow」);   

return false;   

});  

復制以上代碼放在網頁的JavaScript標簽中，然後在底部添加一個id為「top」的鏈接就會自動返回到頂部了。

2、復製表單頂部標題到底部：

var $tfoot = $(『<tfoot></tfoot>』);   

$($(『thead』).clone(true, true).children().get().reverse()).each(function(){   

$tfoot.append($(this));   

});   

$tfoot.insertAfter(『table thead』);  

3、載入額外的內容：

$(「#content」).load(「somefile.html」, function(response, status, xhr) {   

// error handling   

if(status == 「error」) {   

$(「#content」).html(「An error occured: 「 + xhr.status + 」 「 + xhr.statusText);   

}   

});  

有時候需要為單獨的一個div層從外部載入一些額外的數據內容，下面這段短碼將會非常有用。

4、設置多列層等高：

var maxheight = 0;   

$(「div.col」).each(function(){   

if($(this).height() > maxheight) { maxheight = $(this).height(); }   

});   

$(「div.col」).height(maxheight);  

在一些布局設計中，有時候需要讓兩個div層高度相當，下面是採用js方法實現的原理（需要等高的div層設置class為」col」）。

5、定時刷新部分頁面的內容：

setInterval(function() {   

$(「#refresh」).load(location.href+」 #refresh>*」,「」);   

}, 10000); // milliseconds to wait  

如果在你的網頁上需要定時的刷新一些內容，例如微博消息或者實況轉播，為了不讓用戶繁瑣的刷新整個頁面，可以採用下面這段代碼來定時刷新部分頁面內容。

6、預載入圖像：

$.preloadImages = function() {   

for(var i = 0; i<arguments.length; i++) {   

$(「<img />」).attr(「src」, arguments[i]);   

}   

}   

$(document).ready(function() {   

$.preloadImages(「hoverimage1.jpg」,「hoverimage2.jpg」);   

});  

有些網站頁面打開圖像都未載入完畢，還要苦苦等待。下面這段代碼實現圖像都載入完畢後再打開整個網頁。

7、測試密碼強度：
這個比較給力，現在很多網站注冊的時候都加入了密碼強度測試功能，以下代碼也簡單提供了密碼強度測試功能。

HTML代碼部分：

<input type=「password」 name=「pass」 id=「pass」 />  

<span id=「passstrength」></span>  

JavaScript腳本代碼：

$(『#pass』).keyup(function(e) {   

var strongRegex = new RegExp(「^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*W).*$」, 「g」);   

var mediumRegex = new RegExp(「^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$」, 「g」);   

var enoughRegex = new RegExp(「(?=.{6,}).*」, 「g」);   

if (false == enoughRegex.test($(this).val())) {   

$(『#passstrength』).html(『More Characters』);   

} else if (strongRegex.test($(this).val())) {   

$(『#passstrength』).className = 『ok』;   

$(『#passstrength』).html(『Strong!』);   

} else if (mediumRegex.test($(this).val())) {   

$(『#passstrength』).className = 『alert』;   

$(『#passstrength』).html(『Medium!』);   

} else {   

$(『#passstrength』).className = 『error』;   

$(『#passstrength』).html(『Weak!』);   

}   

return true;   

});  

8、自適應縮放圖像：
有時候網站上傳的圖像需要填充整個指定區域，但是有時候圖像比例並不恰好合適，縮放後效果不好。一下代碼就實現了檢測圖像比例然後做適當的縮放功能。

$(window).bind(「load」, function() {   

// IMAGE RESIZE   

$(『#proct_cat_list img』).each(function() {   

var maxWidth = 120;   

var maxHeight = 120;   

var ratio = 0;   

var width = $(this).width();   

var height = $(this).height();   

if(width > maxWidth){   

ratio = maxWidth / width;   

$(this).css(「width」, maxWidth);   

$(this).css(「height」, height * ratio);   

height = height * ratio;   

}   

var width = $(this).width();   

var height = $(this).height();   

if(height > maxHeight){   

ratio = maxHeight / height;   

$(this).css(「height」, maxHeight);   

$(this).css(「width」, width * ratio);   

width = width * ratio;   

}   

});   

//$(「#contentpage img」).show();   

// IMAGE RESIZE   

});  

9、自動載入內容：
現在很多網站，特別是微博，都不需要翻頁的按鈕了，直接下拉後會自動載入內容。下面的腳本就是簡單實現了個這種效果。

var loading = false;   

$(window).scroll(function(){   

if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){   

if(loading == false){   

loading = true;   

$(『#loadingbar』).css(「display」,「block」);   

$.get(「load.php?start=」+$(『#loaded_max』).val(), function(loaded){   

$(『body』).append(loaded);   

$(『#loaded_max』).val(parseInt($(『#loaded_max』).val())+50);   

$(『#loadingbar』).css(「display」,「none」);   

loading = false;   

});   

}   

}   

});   

$(document).ready(function() {   

$(『#loaded_max』).val(50);   

});  

6、HTML是什麼？？

HTML是超文本標記語言(Hyper Text Markup Language)，標准通用標記語言下的一個應用，HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁製作所必備的。

頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素，結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。

(6)mark網頁設計擴展資料：

1、特性

簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方便。

可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言採取子類元素的方式，為系統擴展帶來保證。

2、組成

字元和漢字是最基本的組成形式，同時還有許多特殊字元，它們一起構成了HTML字元集。HTML字元可以用一些代碼來表示，代碼可以有2種表示方式。即字元代碼（命名實體）和數字代碼（編號實體）。

3、語法格式

16進制顏色代碼之前必須有一個「#」號，這種顏色代碼是由三部分組成的，其中前兩位代表紅色，中間兩位代表綠色，後兩位代表藍色。不同的取值代表不同的顏色，他們的取值范圍是00--FF。

10進制RGB碼在這種表示法中，後面三個參數分別是紅色、綠色、藍色，他們的取值范圍是0--255。以上兩種表達方式可以相互轉換，標準是16進制與10進制的相互轉換。

7、css樣式前加*+html是什麼意思

CSS hack 用來讓網頁兼容各種瀏覽器(在各種環境下都能「正確的」顯示)

*+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.

所以*+html.img_cpzs,.img_cpzs ul{---樣式代碼---}
只在IE7下面有效

8、html是什麼意思

HTML是超文本標記語言(Hyper Text Markup Language)，是構成網頁的基本骨架，是構成 Web 世界的一磚一瓦。它定義了網頁內容的含義和結構。要是在瀏覽器中顯示一份文件的內容。它本身並非程式設計，只不過是標示(Mark-up)，用來強調及組織一般性的文字。

HTML是由一些標記（tags）所構成，每個標記對瀏覽器下一個特定的指令，這些指令會告訴瀏覽器如何顯示文件的內容。

HTML是標准通用標記語言下的一個應用，也是一種規范，一種標准，它通過標記符號來標記要顯示的網頁中的各個部分。

HTML從第一版的出現到現在，HTML已經經歷了5次的改版，從HTML 2.0到HTML 5，HTML用自身的優勢證明了其在網站中的優勢，以至於替代了古老的C語言編程來架構部分網站。

(8)mark網頁設計擴展資料：

HTML已經經歷了五次重大修改，用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML標准版本。 HTML 5 的第一份正式草案已於2008年1月22日公布。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。

HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。

HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。

HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放介面。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

HTML5支持網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。HTML5擁有更有效的伺服器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助實現伺服器將數據「推送」到客戶端的功能。

HTML5支持新的CSS3，在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

9、1. HTML是一種頁面( )型的語言。 A. 程序設計 B. 執行 C. 編譯 D. 描述 2．在網頁設計中，( )是所有頁面中

選d
HTML（Hyper Text Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網路上應用最為廣版泛的語言，也是構成網頁文檔的權主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。

10、網頁製作中如何設置「設為首頁」和「加為收藏」？

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.XXXX);return false;">設為主頁</a>
<a href="javascript:window.external.AddFavorite('http://xxx', 'XXXX)">收藏本站</a>

現在這個很少有人在用了