安徽聚元生物科技有限公司

通知公告

聚元孵化器|計算機培訓課二【HTML】入門學習

發稿時間:2019-07-26來源:聚元生物


一、html的概述

html全稱超文本标記語言(hyper Text Markup Language)

 

二、html的基本結構

 

 


文檔類型與标題

 

 

<html></html>告訴浏覽器html文檔開始和結束的地方

<head></head>所有頭部元素的容器,内部必須包含title

<title></title>定義文檔的标題,該标題在浏覽器标簽頁顯示

<body></body>定義文檔主體

三、HTML的基本标簽

格式标簽

 1、段落标簽:
格式:<p>你要分段的内容</p>
功能:對網頁上的文字進行分段
特點:間距比較大
   2、換行标簽
格式:你要換行的文字後面直接加标簽:<br/>
注意:它是一個單标簽
   3、居中對齊标簽
格式:<center>你要居中的内容</center>
讓段落或者文字能夠相對于父标簽居中顯示

文本标簽

 1、标題标簽:
格式:<h1>标題</h1>...<h6>标題</h6>
功能:定義網頁中的文字标題
特點:标題标簽獨占一行
  2、字體設置标簽:
格式:<font>要設置的文字</font>
功能:修改文字顔色、字體、大小。常用屬性:
<font szie="12px">老王</font>
<font color ="red">字體改為紅色</font>
<font face="微軟雅黑">更改文字字體</font>

3、字體加粗/傾斜<strong>表示強調,通常為粗體字</strong>
<b>字體加粗</b>
<em>表示強調,通常為斜體字</em>
<i>字體傾斜</i>

4、給文字設置下劃線<u>下劃線文字</u>

圖像标簽

網頁上面我們看到不僅有文字、還有圖片,下面重點講如何向網頁當中插入圖片!
1、格式如下:<img src="圖片路徑" width="設置圖片寬度" height="設置圖片高度" border="邊框" alt="圖片加載不出來顯示文字"/>
2、<img/>标簽常見屬性詳解
1.src屬性
作用:指定我們要加載的圖片的路徑和圖片的名稱以及圖片格式
2.width屬性
作用:指定圖片的寬度,單位px、em、cm、mm
3.height屬性
作用:指定圖片的高度,單位px、em、cm、mm
4.border屬性
作用:指定圖标的邊框寬度,單位px、em、cm、mm
5.alt屬性
作用1:當網頁上的圖片被加載完成後,鼠标移動到上面去,會顯示這個圖片指定的屬性文字
作用2:如果圖像沒有下載或者加載失敗,會用文字來代替圖像顯示
作用3:搜索引擎可以通過這個屬性的文字來抓取圖片

四、網頁中的超鍊接

1、基本語法<a href="" target="打開方式" name="頁面錨點名稱" >鍊接文字或者圖片</a>
屬性講解
- href屬性:鍊接的地址,鍊接的地址可以是一個網頁,也可以是一個視頻、圖片、音樂等等
- target屬性:
1.作用:定義超鍊接的打開方式
2.屬性值:_blank:在一個新的窗口中打開鍊接
_seif(默認值):在當前窗口中打開鍊接
_parent:在父窗口中打開頁面(框架中使用較多)
_top:在頂層窗口中打開文件(框架中使用較多)

name屬性
指定頁面的錨點名稱

 

五、代碼注釋
 

注釋一段内容時使用<!--”開始,以"-->結束
例如<!--我是這個網頁的作者,我的名字叫做問一下-->

六、代碼的格式

空格鍵和回車鍵在網頁中都不會起到任何作用,我們為了讓代碼清晰易讀,可以使用空格和回車鍵進行編排。

注意:縮進時保持嚴格的規則,以“Tab”鍵進行縮進

 

 

這周你學習了嗎?快來提交你的作業吧

愛學習的孩紙

快來報名我們的計算機培訓班吧!

等你來哦~

課程持續更新中.......

 

| 新聞中心 | 服務中心 | 技術平台 | 人才招聘 | 産品中心 | 關于聚元 |