小白入門網頁前端必知html基礎知識

小白沖沖沖沖 發佈 2020-01-07T04:53:33+00:00

CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。 JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。

CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有交互的一般都是用JavaScript來實現的。


1、tml的固定結構

一個HTML文件是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>

代碼講解:

<html></html>稱為根標籤,所有的網頁標籤都在<html></html>中。
<head>

標籤用於定義文檔的頭部,它是所有頭部元素的容器。


頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤,頭部標籤在下一小節中會有詳細介紹。

在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在這裡的標籤中的內容會在瀏覽器中顯示出來。


我自己是一名從事了多年開發的web前端老程式設計師,目前辭職在做自己的web前端私人定製課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨,各種框架都有整理,送給每一位前端小夥伴,想要獲取的可以關注我的頭條號並在後台私信我:前端,即可免費獲取。

2、<head>標籤的作用

文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

下面這些標籤可用在 head 部分:

<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>


3、<title>標籤

在<title>和</title>標籤之間的文字內容是網頁的標題信息,它會出現在瀏覽器的標題欄中。網頁的title標籤用。網頁製作學習交流群,四九四零六,四九三四。
於告訴用戶和搜尋引擎這個網頁的主要內容是什麼,搜尋引擎可以通過網頁標題,迅速的判斷出網頁的主題。每個網頁的內容都是不同的,每個網頁都應該有一個獨
一無二的title。


例如:
<head>
<title>hello world</title>
</head>
<title>標籤的內容「hello world」會在瀏覽器中的標題欄上顯示出來,



4、標籤的用途

我們學習網頁製作時,常常會聽到一個詞,語義化。那麼什麼叫做語義化呢,說的通俗點就是:明白每個標籤的用途(在什麼情況下使用此標籤合理)比如,網頁上
的文章的標題就可以用標題標籤,網頁上的各個欄目的欄目名稱也可以使用標題標籤。


文章中內容的段落就得放在段落標籤中,在文章中有想強調的文本,就可以使
用 em 標籤表示強調等等。

講了這麼多語義化,但是語義化可以給我們帶來什麼樣的好處呢?


① 更容易被搜尋引擎收錄。

②.更容易讓螢幕閱讀器讀出網頁內容。


關鍵字: