HTML本身存在的一些問題，這8個點，請使用正確的方式來搞

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

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

1、img標簽

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

<img src="photo.jpg"/>

2、a標簽

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

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

3、語義化

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

<div></div>
<i></i>

4、用對元素標簽

盡管HTML規(guī)范提供了有語義化的列表元素，但我們?nèi)匀豢梢杂孟旅孢@種方式來定義列表，而且在頁面上也可以正常顯示。

<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是一次性渲染的，如果表格內(nèi)容較長就比較慢了。

7、label可有無

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

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

8、不合理的標簽

這些個不合理的標簽，新標準已經(jīng)棄用了。

<blink></blink>
<marquee></marquee>
<stike></stike>

總結(jié)一下：

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

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

轉(zhuǎn)載于佛山鎬站網(wǎng)絡(luò)科技網(wǎng)http://www.wangluo379.cn/zixun/gongsidongtai/1696.html

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

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

焦點輪播圖示例

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

焦點圖實現(xiàn)效果展示

1、實現(xiàn)的基本思路

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

2、animation與@keyframe

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

對應(yīng)屬性值分別為動畫名稱、執(zhí)行時間、速度曲線、延遲時間、執(zhí)行次數(shù)、是否反向播放；

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

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

3、transform:translateX

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

transform:translateX(-1000px);

4、改變背景background-image

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

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

CSS3動畫實現(xiàn)焦點圖效果實現(xiàn)

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

素材縮略圖

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

整體頁面文件代碼

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

頁面布局效果

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

CSS動畫部分代碼

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

元素樣式代碼

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

前端開發(fā)-JavaScript DOM動態(tài)生成文本框

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

前端設(shè)計-JavaScript美女拼圖游戲開發(fā)實例

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

前端設(shè)計-響應(yīng)式頁面開發(fā)基礎(chǔ)

前端設(shè)計-Ajax技術(shù)及實例展示

在線咨詢

上一篇：html中滾動字體的設(shè)置
下一篇：網(wǎng)頁編程之文字標題：H1、H2到H6

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商