網(wǎng)頁(yè)前端開發(fā)如何寫出整潔的css代碼和切圖到底是個(gè)什么意思?
時(shí)間：2024-02-16 03:35:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2024-02-16 03:35:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)前端開發(fā)如何寫出整潔的css代碼和切圖到底是個(gè)什么意思?：2.關(guān)于切圖
我們普遍所指的切圖是指將設(shè)計(jì)好的圖稿(psd)轉(zhuǎn)換為網(wǎng)頁(yè)格式（如html）。在切圖過(guò)程中，我們不可能將一整副psd圖稿里面的圖片素材全部切到頁(yè)面里面去，況且在實(shí)現(xiàn)布局過(guò)程中，也許會(huì)存在瀏覽器兼容 分辨率兼容等問(wèn)題，單純的絕對(duì)定位是不大可能完全解決這些問(wèn)題。
1.你需要了解一下語(yǔ)義化標(biāo)簽
讓標(biāo)簽語(yǔ)義化成為一種習(xí)慣在網(wǎng)頁(yè)設(shè)計(jì)中，我們時(shí)常都會(huì)聽到標(biāo)簽語(yǔ)義化這個(gè)名詞，HTML標(biāo)簽語(yǔ)義化的設(shè)計(jì)思維其實(shí)就是給某塊內(nèi)容用上一個(gè)最恰當(dāng)最合適的標(biāo)簽，這樣一來(lái)，不管是誰(shuí)都能看懂這塊內(nèi)容是什么。
一個(gè)網(wǎng)頁(yè)就好像是一棟房子，HTML結(jié)構(gòu)就是一面面的墻，而標(biāo)簽則是一塊塊的磚，磚要擺放有序，整整齊齊，墻才會(huì)牢固。最后css則是裝飾材料，美不美就靠她了。因此，我們要有一個(gè)優(yōu)秀的網(wǎng)頁(yè)，既要提供一個(gè)干凈而又有清晰結(jié)構(gòu)的HTML，更加離不開css的極致美化。
從上面也說(shuō)明標(biāo)簽語(yǔ)義化極其重要，HTML每個(gè)標(biāo)簽都有自己的語(yǔ)義，都有自己適用的范圍。但往往會(huì)被我們忽略或者被我們?yōu)E用，舉個(gè)例子：在一個(gè)頁(yè)面中<div>用了幾十個(gè)甚至上百個(gè)，這是個(gè)無(wú)意義的標(biāo)簽，只是表示一個(gè)層而已，非常不利于后期的維護(hù)；而<table>標(biāo)簽則是一個(gè)數(shù)據(jù)標(biāo)簽，該用的時(shí)候，我們就要大膽使用。
標(biāo)簽語(yǔ)義化的好處
讓你使用標(biāo)簽語(yǔ)義化的理由可以有無(wú)數(shù)條：
- 去掉樣式或者樣式丟失時(shí)頁(yè)面結(jié)構(gòu)依然清晰分明
- 移動(dòng)設(shè)備能夠更加完美的展示你的網(wǎng)頁(yè)（移動(dòng)設(shè)備對(duì)css的支持較弱）
- 閱讀器會(huì)根據(jù)標(biāo)簽的語(yǔ)義自動(dòng)解析，呈現(xiàn)更容易閱讀的內(nèi)容形式（無(wú)障礙閱讀）
- 搜索引擎會(huì)根據(jù)標(biāo)簽的語(yǔ)義確定上下文和權(quán)重問(wèn)題
- 便于后期的開發(fā)以及維護(hù)，團(tuán)隊(duì)合作效率提高
- ……
HTML標(biāo)簽語(yǔ)義匯總
為了更快更好的運(yùn)用標(biāo)簽語(yǔ)義化，下面的表單列出了所有的HTML標(biāo)簽以及標(biāo)簽的描述。以下列表按字母順序排列，其中 new :為 HTML5 中的新標(biāo)簽。
標(biāo)簽描述<!–…–>定義注釋。<!DOCTYPE>定義文檔類型。<a>定義超鏈接。<abbr>定義縮寫。<acronym>HTML 5 中不支持。定義首字母縮寫。<address>定義地址元素。<applet>HTML 5 中不支持。定義 applet。<area>定義圖像映射中的區(qū)域。<article>定義 article。<aside>定義頁(yè)面內(nèi)容之外的內(nèi)容。<audio>定義聲音內(nèi)容。<b>定義粗體文本。<base>定義頁(yè)面中所有鏈接的基準(zhǔn) URL。<basefont>HTML 5 中不支持。請(qǐng)使用 CSS 代替。<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。<bdo>定義文本顯示的方向。<big>HTML 5 中不支持。定義大號(hào)文本。<blockquote>定義長(zhǎng)的引用。<body>定義 body 元素。<br>插入換行符。<button>定義按鈕。<canvas>定義圖形。<caption>定義表格標(biāo)題。<center>HTML 5 中不支持。定義居中的文本。<cite>定義引用。<code>定義計(jì)算機(jī)代碼文本。<col>定義表格列的屬性。<colgroup>定義表格列的分組。<command>定義命令按鈕。<datalist>定義下拉列表。<dd>定義定義的描述。<del>定義刪除文本。<details>定義元素的細(xì)節(jié)。<dfn>定義定義項(xiàng)目。<dir>HTML 5 中不支持。定義目錄列表。<div>定義文檔中的一個(gè)部分。<dl>定義定義列表。<dt>定義定義的項(xiàng)目。<em>定義強(qiáng)調(diào)文本。<embed>定義外部交互內(nèi)容或插件。<fieldset>定義 fieldset。<figcaption>定義 figure 元素的標(biāo)題。<figure>定義媒介內(nèi)容的分組，以及它們的標(biāo)題。<font>HTML 5 中不支持。<footer>定義 section 或 page 的頁(yè)腳。<form>定義表單。<frame>HTML 5 中不支持。定義子窗口（框架）。<frameset>HTML 5 中不支持。定義框架的集。<h1> to <h6>定義標(biāo)題 1 到標(biāo)題 6。<head>定義關(guān)于文檔的信息。<header>定義 section 或 page 的頁(yè)眉。<hgroup>定義有關(guān)文檔中的 section 的信息。<hr>定義水平線。<html>定義 html 文檔。<i>定義斜體文本。<iframe>定義行內(nèi)的子窗口（框架）。<img>定義圖像。<input>定義輸入域。<ins>定義插入文本。<keygen>定義生成密鑰。<isindex>HTML 5 中不支持。定義單行的輸入域。<kbd>定義鍵盤文本。<label>定義表單控件的標(biāo)注。<legend>定義 fieldset 中的標(biāo)題。<li>定義列表的項(xiàng)目。<link>定義資源引用。<map>定義圖像映射。<mark>定義有記號(hào)的文本。<menu>定義菜單列表。<meta>定義元信息。<meter>定義預(yù)定義范圍內(nèi)的度量。<nav>定義導(dǎo)航鏈接。<noframes>HTML 5 中不支持。定義 noframe 部分。<noscript>定義 noscript 部分。<object>定義嵌入對(duì)象。<ol>定義有序列表。<optgroup>定義選項(xiàng)組。<option>定義下拉列表中的選項(xiàng)。<output>定義輸出的一些類型。<p>定義段落。<param>為對(duì)象定義參數(shù)。<pre>定義預(yù)格式化文本。<progress>定義任何類型的任務(wù)的進(jìn)度。<q>定義短的引用。<rp>定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。<rt>定義 ruby 注釋的解釋。<ruby>定義 ruby 注釋。<s>HTML 5 中不支持。定義加刪除線的文本。<samp>定義樣本計(jì)算機(jī)代碼。<script>定義腳本。<section>定義 section。<select>定義可選列表。<small>將旁注 (side comments) 呈現(xiàn)為小型文本。<source>定義媒介源。<span>定義文檔中的 section。<strike>HTML 5 中不支持。定義加刪除線的文本。<strong>定義強(qiáng)調(diào)文本。<style>定義樣式定義。<sub>定義下標(biāo)文本。<summary>定義 details 元素的標(biāo)題。<sup>定義上標(biāo)文本。<table>定義表格。<tbody>定義表格的主體。<td>定義表格單元。<textarea>定義 textarea。<tfoot>定義表格的腳注。<th>定義表頭。<thead>定義表頭。<time>定義日期/時(shí)間。<title>定義文檔的標(biāo)題。<tr>定義表格行。<track>定義用在媒體播放器中的文本軌道。<tt>HTML 5 中不支持。定義打字機(jī)文本。<u>HTML 5 中不支持。定義下劃線文本。<ul>定義無(wú)序列表。<var>定義變量。<video>定義視頻。<xmp>
HTML 5 中不支持。定義預(yù)格式文本。
在線咨詢