天開始小編將會給大家講解HTML的入門知識以及做項目會遇到的某些問題以及如何解決此類問題的方法。說道網頁設計,HTML是我們必不可少的一部分?;A網頁的構成,無論怎么變幻,都是由原聲的HTML代碼組成構成網頁。
下面我就根據工作中所用和看過的書籍一點一點總結下我們常用的HTML格式和代碼。
一、什么是HTML。
HTM不是一段編程語言,而是一款標記語言,本身不能顯示在瀏覽器中。經過瀏覽器的編釋和編譯,才能正確反映HTML標記語言的內容。HTML從1.0到5.0經歷了巨大的變化,從單一的文本顯示功能到多功能互動,已經成為了一款非常成熟的標記語言。
二、HTML文件的基本結構
<!doctype html>
<html>文件開始標記
<head>文件頭開始的標記
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<title>XX系統</title>
</head>文件頭結束
<body>文件主題的內容
</body>文件主題的結束
</html>文件結束的標記
這里主要說明title和meta(元信息)
<!--說明文件頭-->
<title>XX網站</title>
<!--添加作者信息-->
<meta name="author" content="_永不言棄" >
<!--設置網頁文字及語言 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<!--設置網頁定時(20秒后)跳轉-->
<meta http-equiv="refresh" content="20;url=index.html">
三、HTML主要常用標簽
3.1標題
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.2 標題字對齊屬性align
默認情況下,標題文字是左對齊的。在網頁制作過程中,常常需要選擇對其他的方式,這時我們就需要用到align屬性。
3.3 段落標記p
段落標記是文檔中最常見的標記,<p>用來起始的一個段落。
3.3 換行標記
換行標記<br>作用是在不另起一段的情況下將當前文本強制換行。
3.4 不換行標記nobr
<nobor>表示的是不換行的標記</nobor>
3.5 水平線
<hr/>
四、建立超鏈接
與自身網站頁面有關的連接被稱為內部連接
4.1絕對路徑
絕對路徑是包括服務器規范在內的完全路徑。絕對路徑不管源文件在什么位置都可以非常精確地找到,除非是目標文檔的位置發生變化,否則連接不會失效。
4.2相對路徑
為了避免絕對路徑的缺陷,對于在同一站點之中的連接來說,使用相對路徑是一個很好的方法。
4.3 內部連接
<a href="# target="目標窗口的打開方式 " >
屬性值
含義
-self在當前頁面中打開連接
-blank在一個全新的空白窗口中打開連接
-top在頂層框架中打開連接,也可以理解為在根框架中打開連接
-parent在當前框架的上一層里打開連接
4.4 錨點連接
錨點到本頁面中的位置
<a href="#1" >商品名稱</a>
<a href="#2" >產品特點</a>
<a href="#3" >產品規格</a>
<a neme="1">XX商品</a>
<a neme="2">XX產品特點</a>
<a neme="3">XX規格</a>
錨點到其他頁面的位置
<a href="index.html#1"></a>對應連接到index.html中name=1的位置
4.5 連接到外部網站
在設置友情鏈接時,需要打開HTTP協議進行外部連接訪問。
<a href="wwww.baidu.com" >百度</a>
4.6 連接到E-mail
<a href="mailto:郵件地址">。。。</a>
4.7 連接到FTP
FTP代表文件傳輸協議,一個FTP站點通常包含一些上傳和下載文件的文件目錄。
大部分FTP網站需要使用用戶名和密碼來登錄。
當然還有其他的一些連接方式,例如文件下載,連接到Telnet等。這些都會可以用a標簽實現。
HTML基礎就先講到這里,后面退出DIV設計網頁格式已經網頁分框的實現。
多朋友想學一下網頁制作,上網一看,只要涉及到網頁制作,都離不開HTML這個詞語,HTML是HyperText Markup Language的簡稱,想學習HTML語言,先得了解一些基本知識,今天這邊內容可以作為學習HTML的菜鳥教程第一課。
HTML是什么?
一般我們說HTML是指超文本標記語言,英文名稱為HyperText Markup Language,簡稱HTML,它是目前互聯網上應用最廣泛的語言。
如何查看HTML?
拿最常見的網頁為例,如果用大家熟悉的IE瀏覽器的話,直接在網頁上點右鍵,選擇“查看源”即可查看當前網頁的HTML源碼;如果是其他瀏覽器的話,多數情況下點擊右鍵,選擇“查看源碼”或者類似“查看網頁源代碼”這樣的選項即可查看。
當然也可以通過專業的網頁制作軟件以及各種文本編輯器來查看。
HTML有什么用?
HTML語言可以方便地將網絡上存儲于不同位置的文字、圖片、聲音、視頻等內容組織起來,方便用戶瀏覽。對于我們來說,HTML是學習網頁制作的基本功,熟練掌握HTML這項基本功,可以為以后的學習和工作打下良好的基礎。
HTML如何入門?
要學習任何編程語言,都不好好高騖遠,HTML的入門很簡單,但是也要遵循學習的基本步驟,選擇一本入門書籍,循序漸進地去學習每一張的內容。一邊學習,一邊查看網頁代碼對照來學,提升入門速度。
HTML案例
下面就是最基本的HTML案例,在這個案例中,用的是HTML5,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
如何編輯HTML?
這個就很多了 ,比如最出名的Dreamweaver,當然如果熟練之后,可以選擇任意自己喜歡的編輯器,一些小的改動或者一小段代碼的話,也可以用各種常見的文本編輯器來處理,比如我們在wodows系統上常見的記事本,總之只要自己覺得方便就好。
總結
以上是學習HTML菜鳥教程的第一課,首先保持一個良好的心態來學習,有好的心態,知識方面只要循序漸進,學會就是水到渠成的事情了 。
我自認為我網頁制作,尤其是靜態頁面的制作,已經是很牛逼的了,但是嘛--有時候好能力不如爛筆頭,寫出來總是好的。
今天看到書柜很多書,先簡單的拿來一本基礎的《網頁制作從入門到精通》,復習下-》寫下自己認為需要記下來或總結的認知,能幫助你的話,我也開心。
HTML是搭建網頁的基礎語言。
1)元信息標記meta,主要用于描述網頁,以便搜索引擎查找、分類
<head> <meta charset="UTF-8"> <!--編碼gb2312「中文簡體」 gbk「gb2312的擴展,包括了繁體字」 Unicode萬國碼,UTF-8是Unicode一種具體的編碼實現。UTF-8是在互聯網上使用最廣的一種Unicode的編碼規則 --> <meta content="服裝" name="keywords" /> <!--關于網站的關鍵字--> <meta content="這是一個你穿了就不想脫的衣服" name="description" /> <!--描述--> </head>
2)設置網頁的定時跳轉
<meta http-equiv="refresh" content="2;url=https://www.toutiao.com/"/> //refresh表示網頁刷新,2表示2秒,url表示刷新后的地址
1)標題字h1-h6
<h1>標題的重要性最高,整個首頁只有一個h1就好,放logo,便于網絡爬蟲的抓取。
插入一疑問SEO?我們為什么要考慮SEO呢?
就是為了提高網站的權重,增加搜索引擎的友好度,達到提高排名,增加流量,促進知名度的作用。
2)標記標簽sup/sub
<p>(a+b)<sup>2</sup></p> <p> H<sub>2</sub>SO<sub>4</sub> </p>
關于這章節,沒什么需要備注的東西,根據需求使用圖片,圖片在網頁中的運用太廣泛了。如何使用也不是很難的吧。
做一個善良,正能量的人兒~~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。