大家在瀏覽網頁的時候,是否思考過這樣一個問題:怎樣才能制作出一個網頁呢?制作出一個網頁是很簡單的,只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁,今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML?
HTML的全稱為Hyper Text Markup Language,中文名稱為超文本標記語言,閱覽方式為網頁瀏覽器,同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器,界面簡單,編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部(head)和身體(body)所組成的。
1、頭部(head)
通常包含標題(title),也就是一個網頁的名稱
網頁標題
2、身體(body)
body的部分是整個網頁的重要內容部分,讓人一眼就瀏覽到這個網頁的內容,可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始,以結束標簽終止的元素:元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素,在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽,例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性,屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現,比如:name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素,比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例:
結果:
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表,可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式:
l 內部樣式,在HTML元素中使用“style”屬性
l 內部樣式表,在頭部<head>區域使用<style>元素來包含CSS
l 外部引用,引用帶有后綴css的文件,示例:
html文檔
css文檔
如果你看到了這里,就說明你已經打開了制作網頁的大門啦~
萬維網,建立在internet上,全球性的、交互、多平臺、分布的信息資源。
wwwf組成:
雙標簽:<標簽名>內容</標簽名>
單標簽:<標簽名 />
注釋標簽:<!-- 注釋說明 -->
各種標簽,以html文檔結構來做:
<!doctype html> <!--文檔類型標簽-->
<html> --最外層的標簽
<head> <!--頭部標簽,包含編碼、標題等-->
<title>標題</title> <!--標題標簽-->
<meta charset="utf-8"/> <!--編碼格式-->
</head>
<body> <!--主體標簽,里面顯示的內容-->
<h1>哈哈哈哈</h1>
</body>
</html>
h1~h6,h1最大的,h6最小的
屬性:align,對齊方式
屬性值:left-左對齊,center-居中,right-右對齊
示例:
<h1 align="left">標題左對齊</h1>
<p>內容</p>
屬性:
-title:提示信息
-style:行內樣式
-dir:文字方向,默認從左向右,ltl或者rtl
示例:
<p title="這是提示信息" dir="ltl"></p>
屬性:
align:對齊方式,默認center居中對齊
color:顏色
width:寬度,可以取值百分比或者像素
size:高度,只能取值像素
noshade:取消陰影
示例:
<hr color="red" width="50%" size="10"/>
<b></b>和<strong></strong>
屬性:
src:圖片路徑
alt:圖片加載錯誤時提示信息
title:鼠標放在圖片上提示信息
width:寬度
border:邊框
示例:
<img src="1.jpg" alt="圖片加載失敗" title="提示信息"/>
屬性:
href:要跳轉的地址
示例:
<a href="https://www.baidu.com">百度一下</a>
聯網目前已經在 web2.0 在向 web3.0 在發展的路上。
大多數人 應該都知道一個詞 :“HTML” 。確實,Html 基本就是網頁的代名詞。當你把網頁下載下來的時候,就能看到其后綴名就是 ". HTML"。
但如果足免細心的你還會發現,瀏覽器地址欄上有時還會出現一些其它的的網頁后綴名。
一般來說,網頁分為靜態網頁和動態網頁。
前者就等于是一個超文本,里面的信息都是事先寫好然后通過瀏覽器下載來顯示。
而后者則是所有的數據信息都是通過服務器端來處理,網頁本身并沒有事先保存任何信息。
打個比方,靜態網頁就像飲水機里的常溫水。打開開關直接就把原先水桶里存著的水直接放出來。而動態網頁則像是飲水機要放熱水,在水放出來之前還要先經過一些升溫處理才能得到的“熱水”一樣。
其實說了這么多,對于普通用戶而言僅僅是大概知道幾種常見的分類就行。HTML就是網頁文件,是一種靜態網頁。而動態網頁則有基于 JavaScript 的ASP 和基于JAVA 的JSP就可以了。因為真的細究網頁技術的水還是很深的。像 Ajax 同步和異步等等。
好了,希望本篇文章能讓你大致了解在瀏覽器地址欄最后一個小數點后綴名的網頁含義。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。