基本概念、標籤、跳轉

HTML 基礎知識

標記語言基本概念

什麼是計算機語言

人與人之間是通過語言進行交流,那麼人和計算機之間如何交流呢?計算機只知道“0”和“1”,所以我們就通過“0”和“1”這種語系來和計算機交流,這就是機器語言。

機器語言對於人來講太難理解,編制程序太困難

101011100001110001101010100011(3+6運算)

爲了解決這個問題,我們將一串特定的“01”進行符號化,這就是彙編語言

ADD 3,6

機器語言和彙編語言都是屬於低級語言,即體現了機器的特性,而對於大多數不是計算機工程師的人來講,還是太困難了。

高級語言:用類似英語加數學的符號來描述,最大程度屏蔽了機器特性,使得程序的閱讀和編制變得越來越容易。

if(a>b){

       c =a+1;

}else{

       c = b;

}

常見的高級語言有C、C++、C#、PHP、Java

1.1.2什麼是標記語言

什麼是文本文件:只有文本內容,沒有任何格式。舉例:

在記事本中輸入“帶你出師、闖蕩江湖!”,並設置相應的格式,但是在其它電腦上打開並沒有顯示同樣的格式,說明其不包含任何格式信息。查看文件大小顯示20字節

在word中輸入同樣的內容,同時設置格式,在另一個電腦上看到的是同樣的內容和同樣的格式。同時查看文件的大小,

說明word文檔中除了存儲內容,還存儲了格式等信息(document.xml,)ml就是標記語言(Markup Language)的縮寫。

我們要學的HTML(HyperText MarkedLanguage)也是一種標記語言。

超文本:不僅僅能表示文本信息,還能表示音視頻、格式等等信息。

瀏覽網頁實際上就是將存儲在服務器上的HTML文件下載到本地,然後通過瀏覽器(IE、Chrome等)進行解析並呈現內容。

1.2 HTML基本結構

<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd"
>

<html>
<!-- head部分主要做一些設置工作,比如字符集、標題等-->
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title>我的第一個網頁</title>
</head>
<!--文檔的主體部分,呈現給用戶的信息都在此-->
<body>
帶你出師,闖蕩江湖!
</body>
</html>

<html>:是整個文檔的根節點,它包含兩個子節點:

<head>:主要描述文檔的設置信息,比如字符集、標題等

<body>:是文檔的主體部分,需要呈現的內容都安排在其中。

註釋:

快捷鍵:ctrl+shift+/

形式:<!-- -->

作用:對代碼進行說明,方便程序員閱讀和理解。註釋對於計算機的執行結果沒有任何影響。

註釋非常重要,代碼正確是前提,但清晰也是一個非常重要的原則,程序員需要養成註釋的好習慣。


 

基礎標籤

<標籤名></標籤名>

2.1 標題標籤

標題(header)標籤用於顯示頁面的標題信息,既包含了格式信息,
同時提供了語義信息

<h1>-<h6>

 

2.2 段落標籤

段落(paragraph)標籤標示頁面的一個段落,自動換行。

<h3>登鸛雀樓</h3>
<p>白日依山盡,</p>
<p>黃河入海流。</p>
<p>欲窮千里目,</p>
<p>更上一城樓。</p>

 

2.3 鏈接標籤

鏈接標籤<a>的作用是跳轉,包括頁間跳轉和頁內跳轉。

(1)頁間跳轉

<a href="http://www.runoob.com"target="_blank"title="我真的很菜!">菜鳥網</a>

 

href屬性指定鏈接的目標URL地址

target屬性指定打開目標頁面的方式,其取值包括

_self:在當前頁面中打開,默認;

_blank:在新的頁面中打開;

_parent:……

_top:……

title屬性指定提示信息

(2)頁內的跳轉

在目標標籤處指定id="……",在鏈接處指定href="#……"

id屬性是頁面元素的唯一標識

“錨點”:anchor

2.4 圖片標籤<img>

在網頁中嵌入圖片

src屬性:source,圖片資源的URL地址,可以是本地的,也可以是遠程的。

<imgsrc="月河街.jpg">

 

<imgsrc="https://youimg1.c-ctrip.com/target/100m090000003n6a32DF4.jpg">

alt屬性:alternative(可替代的),即當資源不存在時,替代顯示的文字內容。

路徑:

相對路徑

絕對路徑

".."表示上一級目錄

"."表示當前目錄

在同一級目錄:

<imgsrc="p1.jpg">

在上一級目錄:

<imgsrc="../p1.jpg">

在下一級目錄:

<imgsrc="pic/p1.jpg">

2.5 雜項

<span>:可以將部分文本獨立出來

<br>:換行

<hr>: HTML頁面中創建一條水平線。

<base>爲頁面上的所有鏈接規定默認地址或默認目標

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章