首頁 web前端 html教學 一篇文章讓你看懂HTML基本規則與網頁結構

一篇文章讓你看懂HTML基本規則與網頁結構

Sep 11, 2018 pm 03:18 PM
html

如果你不致力於成為美工的話,那麼身為開發人員,可以讀懂HTML、必要時能進行簡單修改即可。下面跟著我的思路,保證一篇文讓你看懂HTML,當然,再看的過程中,最好自己動手試試,這樣理解就更深了。

1、html基本規則

<html>
<head>
<title>我的网页</title>
………………………..
</head>
<body>
………………….
</body>
</html>
登入後複製

幾乎所有的網頁都是按照這個格式來的,這是一個網頁必須具備的標記,每個標記都會放在< >裡,以結束,只不過在省略號的地方加了很多亂七八糟的東西,也就是我們看到的內容。將以上程式碼複製到一個記事本,然後另存為a.html文件,就成了一個網頁,試試看呢!下面,以記事本方式打開,在之間加上「首頁」二字,儲存,再開啟之後看看。

接著,在首頁的前後加上標記 變成 首頁,保存,再看看效果呢?

是不是就是我們平常上網看到的超連結了呢?只是這裡點擊“首頁”沒變化,因為我們添加的空連接,趁熱打鐵,我們照著前面的方法,在建一個頁面,保存為b.html,然後將上面的“#”替換為b.html,在打開,點選首頁,是不是就跳到b頁面了呢。 (當然a和b頁面都要在同一目錄下)到這裡為止,你應該了解到,其實網頁上所有的功能都是由不同的類似於這樣的標記來實現,你需要做的時記住這些標記的功能而已。

2、網頁結構

如果你上網時注意的話,其實網頁都是分塊的。當然這只是一個大致的結構,你還可以根據需要分成很多塊,分塊主要是為了修改方面及確定各自的表現樣式。這主要透過

標籤來實現,下面我在「首頁」加上
標籤試試:

<div>
<a href=”b.html”>首页</a>
</div>
登入後複製

儲存,在開啟試試,什麼效果呢?是不是還是跟修改之前一樣呢,下面我們為其加上一些修飾:

<div style=”width:200px;height:100px;border-style:solid;” >
登入後複製

在運行,我們標記的這一塊就以藍色背景表示出來啦!在加入很多的

區塊就可以將網頁大卸八塊了,呵呵,然後在你每個區塊裡放上你想放的東西即可。當然,很多
都加上style=””,如果這些style設定都差不多的話,我們每一個設定就太麻煩了,我們一般將style這些放在另外的.css文件(控制網頁中各在標記的顯示樣式)中,然後進行需要調用的地方進行調用,下面來試試

新建一個記事本,重命名為c.css然後打開,寫入:

#header{width:200px;height:100px;border-style:solid;}
登入後複製

並將其在a.html裡刪掉。然後再前加入 也就是將c.css這個文件引入進來。將css放入單獨的文件好處是:如果很多地方都引用了這個樣式,我們只要修改這一個地方,就全部都變化了,不然我們得手動修改每一處,不利於後期維護。

最後將a.html的

改為
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles