2018/09/26渡課
一.關鍵字
關鍵詞 | 英文 | 解釋 |
---|---|---|
SEO | 搜尋引擎優化 | |
拓展名 | extension | 用不同方式開啟檔案 |
合併列 | colspan | 左右單元格合併 |
合併行 | rowspan | 上下單元格合併 |
表格 | table | |
元素 | element | 標籤 |
屬性 | property | 設定標籤 |
樣式 | style |
二.使用Table標籤完成一個課程表的編寫
<table border="1px"> <thead> <tr> <td></td> <td></td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> </tr> </thead> <tbody> <tr> <td rowspan="3">上午</td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>2</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3">下午</td> <td>1</td> <td></td> <td rowspan="2"></td> <td></td> <td rowspan="2"></td> <td></td> </tr> <tr> <td>2</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>
三.回答問題
a. 什麼是HTML的標籤語義化?
語義化的HTML就是寫出的HTML程式碼,符合內容的結構化(內容語義化),選擇合適的標籤(程式碼語義化),能夠便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
1.語義化有利於SEO,有利於搜尋引擎爬蟲更好的理解我們的網頁,從而獲取更多的有效資訊,提升網頁的權重。
2.在沒有CSS的時候能夠清晰的看出網頁的結構,增強可讀性。
3.便於團隊開發和維護,語義化的HTML可以讓開發者更容易的看明白,從而提高團隊的效率和協調能力。
4.支援多終端裝置的瀏覽器渲染。
b.什麼是SEO優化,在HTML標籤中如何體現?
什麼是SEO?
SEO,簡稱搜尋引擎優化(網站優化)。就是通過對網站優化,迎合搜尋引擎的標準,得出的一個自然的優化。搜尋引擎競價優化,就是付費給搜尋引擎,根據搜尋引擎的關鍵字的競價,得出一個網站優化。網站的關鍵字你出價越高,可能就會排到前面。有些很熱的關鍵字,每次的點選價格高得嚇人。所以根據企業網站的需要,可以選擇SEO,也可以選擇搜尋引擎競價優化。當然我個人還是比較喜歡SEO,覺得SEO對於網站長遠發展也有一定的優勢。SEO優化之HTML程式碼優化最重要的5個標籤
1.Title 標籤
標籤能夠告訴使用者和搜尋引擎網頁頁面的主題思想是什麼,一直是搜尋引擎的抓取重點。通常,搜尋引擎抓取Title標籤出於兩個目的:作為影響網頁排名的重要因素和作為搜尋結果頁面的顯示資訊。不管是哪一個目的,對我們做SEO來說都非常重要。
一般來說,Title標籤中的單詞最好保持在3~6個左右,最好包含關鍵字。但Title標籤中的單詞不要全部都是關鍵字,因為這樣可能會造成頁面關鍵字堆砌,導致過度優化。所選單詞應簡潔明瞭、具有描述性,要與網頁內容具有很大的相關性,並且每個不同的頁面都應該包含Title標籤。
2.Meta Description標籤
對Title標籤優化之後,接下來就是對Meta Description標籤的優化。Meta
Description標籤可以說是對Title標籤的進一步解釋,可以是一句話或者是包含十幾個單詞的短語。每個頁面都該有其自己的Meta
Description標籤,並且Meta
Description標籤還可包含一些與網站內容相關但Title標籤中未提及的資訊。與Title標籤要求相似,該部分內容也應具有描述性,與網頁內容具有相關性,可包含關鍵字,但不可過多。
3.Heading標籤
Heading標籤包含了H1、H2、H3等等,是搜尋引擎識別頁面資訊的重要標記。合理使用H1、H2、H3等不同級別的標籤能夠使得頁面結構更加清晰,有利於搜尋引擎的抓取。H1、H2、H3等標籤是按照重要程度來排名的。一般一個頁面按照需求程度來適當新增該標籤:從H1開始,依次往下新增。但不可新增太多Heading標籤,否則會適得其反。
4.Strong和B標籤
相信大多數朋友都知道Strong和B標籤都有加粗的意思,但是很多人並不清楚兩者具體有什麼區別。其實B標籤就是單純地將文字加粗,而Strong標籤不僅是對文字加粗,並且這種形式的加粗會告訴搜尋引擎該部分文字比較重要。所以兩者從搜尋引擎優化的角度來看,是有很大的區別的。
上文中所提到的Heading標籤頁具有加粗效果,那麼這三種標籤到底該怎麼用?其實,Heading標籤一般用於文章大標題以及每段的小標題,而Strong標籤一般用於文章段落中的重點詞彙,而B標籤一般只是強調一種視覺效果。
5.ALT標籤
ALT標籤是一種圖片標籤,它將圖片的資訊以文字的形式展現。對ALT標籤的使用沒有太多要求,只要在網頁中出現圖片的部分新增上該屬性即可,但其標籤內容應與相應頁面內容具有相關性,長度不得過長,一般1~5個單詞即可。
C.什麼是瀏覽器的相容問題?
瀏覽器相容性問題又被稱為網頁相容性或網站相容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的相容問題。在網站的設計和製作中,做好瀏覽器相容,才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計,瀏覽器對標準的更好相容能夠給使用者更好的使用體驗。
四.描述A標籤和IMG標籤
HTML< a >標籤
< a > 標籤定義超連結,用於從一張頁面連結到另一張頁面。
屬性 | 值 | 描述 |
---|---|---|
herf | 網址 | 連結的目標 |
target | _blank | 在新視窗開啟(預設在本頁面) |
title | 文字提示 | 滑鼠停留在a上有文字提示 |
HTML< img >標籤
< img > 標籤定義向網頁中嵌入一幅影象。
屬性 | 值 | 描述 |
---|---|---|
alt | 文字 | 圖片不顯示時替代的文字 |
src | 路徑或網址 | 圖片地址 |
height | 數字px | 圖片高度 |
widh | 數字px | 圖片寬度 |
title | 文字 | 文字提示 |