擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

我們天天都會寫HTML結構，然而，HTML本身存在一些個問題，在日常中，我們尤其需要注意這些問題，應該避開這么使用。下面我來列一下一些常見的點：

1、img標簽

img元素標簽可以不用寫alt或title，也能正常顯示。

<img src="photo.jpg"/>

2、a標簽

a元素標簽可以不寫href屬性，不過這樣容易出現問題，即使添加塊級元素也不會報錯，但是里面的內容在瀏覽器解析后會發生位置偏移，如果出了問題將很難定位。

<a><h2></h2></a>

3、語義化

并不是所有的標簽都是帶有語義化的，div，i就是比較典型的例子，所以盡量避免在這些標簽里面直接添加文字。實際項目開發中，我們常常把<i>元素標簽當作頁面上的icon圖標來使用。

<div></div>

<i></i>

4、用對元素標簽

盡管HTML規范提供了有語義化的列表元素，但我們仍然可以用下面這種方式來定義列表，而且在頁面上也可以正常顯示。

<div>

<span class="list-item">1</span>

<span class="list-item">2</span>

<span class="list-item">3</span>

</div>

5、屬性的隨意性

先看一段代碼：

<div style="width:100px;height:30px;top:10px;display:relative;"></div>

上面代碼中，隨意添加top屬性也是可以的，只是不生效且不會報錯，加入display:relative;也不會提示錯誤，但是relative并不是display的屬性。

6、table的問題

<table>

<thead>table list</thead>

<tr>

<th>list1</th>

</tr>

......

</table>

html定義了table元素，但table是一次性渲染的，如果表格內容較長就比較慢了。

7、label可有無

Date:<input type="text" name="name" />

表單輸入項內容不寫label也是沒問題的，<label>可以定義與表單控件間的關系，當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。

8、不合理的標簽

這些個不合理的標簽 ，新標準已經棄用了。

<blink></blink>

<marquee></marquee>

<stike></stike>

總結一下：

很顯然，這些糟糕的設計不僅降低了頁面可讀性，拖慢了頁面性能，不利于SEO。而且誤導了初學者對HTML的理解使用，更有可能讓我們在已經出錯的情況下找不到錯誤的原因和方向 。所以，我們必須要避免這些問題的發生。

站建設制作網站可以通過網絡進行實現，比如教師和學生的互動。在線學習可老師在上課，學生在各自的家里聽課，這解決了地域的問題，這就需要在學習時自己有約束力。企業有一定的實力，在創建網站時思考公司或人士。在實際工作中常常碰到公司自己制作的網站，其中的圖形處理技術的確需要學習。總而言之，在制作網站時只要注意收集一些細節問題。相信即便是學習制作網站，也可以設計出讓用戶滿意的網站。平時要多多加強自身技術的學習。可以使用錨標記來創建單頁網站。而不是讓網站訪客瀏覽網頁，可以直接跳到不同的點，也就是滾動的網站。倘若決定在js的道路上深入發展下去，那么制作網站要學習的東西就很多了，將來能從事很多工作，由于已經有了基礎。js不僅是html5務必要會的技術，甚至已經成為前端開發的重點技術之一。

轉載于佛山鎬站網絡科技網http://www.wangluo379.cn/zixun/gongsidongtai/1696.html

將焦點放在訪客和網站體驗上，這樣才能夠地滿足需求，從而吸引和轉化。學并通通過調查、反饋分析獲取訪客的意見。沒有訪客，網站就什么也不是。在圖形效果的基礎上進行問題的分析。從圖形效果的角度出發來看，圖形效果對制作網站具有重要的影響，一個網站想要吸引人的關注就務必對頁面視覺設計的足夠好，使得畫面效果吸引人們的眼球，尤其是對一些圖片類型的網站。當今在制作網站過程中技術水平仍舊存在著不足，很多圖片制作的并不清晰，畫面清晰度差。因而想要將網站制作的好，務必學習借鑒一些經典設計案例，學習一些優異的地方，根據自己的實際需要，促進網頁制作的進步，通過不斷的學習，注重各類細節，只有細節做好了，網站才能在競爭中占據優勢，通過彌補自身的不足之處，將自己的水平打磨的越來越完善。

點圖主要是指網頁焦點位置的圖片，一般焦點圖可以是單張圖，也可以是一組動態切換的圖片的組合。由于處在終端用戶視覺焦點位置因此焦點圖的作用至關重要，焦點圖也成為網站首頁面設計的重點。焦點圖樣式如下所示：

常用實現焦點圖或者輪播圖的前端技術較多，如JavaScript技術、BootStrap組件、CSS技術等。本文主要介紹使用CSS3提供的動畫功能實現簡單輪播效果。首先給出輪播實現動畫效果如下所示：

1、實現的基本思路

本例題設計實現圖文輪播，主要包括圖片的輪播與文字輪播兩部分，基本思路是實現按照周期改變圖層背景實現圖片的輪播。改變或者移動文字圖層位置實現文字部分的移動及動畫效果。

2、animation與@keyframe

通過使用CSS3提供的animation屬性方法，我們可以編寫動畫，實現元素的移動、放縮、顏色改變等動畫效果。Animation主要屬性包括綁定動畫的名稱、執行動畫的實踐、動畫啊延遲等相關屬性。基本語法如下：

對應屬性值分別為動畫名稱、執行時間、速度曲線、延遲時間、執行次數、是否反向播放；

@keyframes與animation結合使用，主要用于實現對動畫進行定義。通過定義動畫時長的百分比，確定在各個階段動畫的效果。@keyframes定義形式如下：

@keyframe animation_name{
	0%{樣式1}
	100%{樣式2}
}

3、transform:translateX

該屬性主要用于實現x軸方向元素的移動，需要在使用時提供參數值，參數即為移動的值，正負號表示移動的方向，如：

transform:translateX(-1000px);

4、改變背景background-image

CSS屬性background-image主要用于設置元素的背景，常用于頁面、圖層的背景圖片的設置。代碼示例如下：

background-image:url('images/1.jpg');

CSS3動畫實現焦點圖效果實現

本例主要實現圖文輪播效果，主要素材為輪播圖片，采用了1000*600的圖片5張，輪播周期為20s。圖片縮略圖如下：

頁面主要采用div為容器實現布局，其中輪播圖片所在層為父層，文字部分為子層，子層相對父層底部定位。根據圖片尺寸設置子層寬度為5000，超出部分隱藏。頁面布局代碼如下：

頁面基本HTML代碼如上所示，a層為圖片展示層，s層為文字展示層，c類型的div為文字容器層。頁面效果如下所示：

動畫實現主要在style css樣式部分進行編寫，定義兩個動畫，名稱分別為mymove()與smove()，其中mymove主要用于實現圖片切換，綁定到父層a上。Smove主要用于實現文字移動，綁定到s子層上。動畫實現部分代碼描述如下：

動畫實現部分主要代碼如上所示，通過@keyframe分別對mymove與smove動畫進行規則編寫，最終實現圖文輪播的效果。本例頁面布局樣式部分代碼如下所示：

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！相關文章鏈接如下：

前端開發-JavaScript DOM動態生成文本框

前端開發-拼圖游戲（N數碼問題）A*算法智能求解效果展示

前端設計-JavaScript美女拼圖游戲開發實例

前端設計-教你如何快速繪制HTML5動畫

前端設計-響應式頁面開發基礎

前端設計-Ajax技術及實例展示