1. 程式人生 > >HTML基本代碼教學片,認識HTML

HTML基本代碼教學片,認識HTML

語言 什麽是html 1-1 utf 容易 ont ima 字體 復雜

今兒頭午有點暈暈的感覺,咳咳,甩甩頭開課

                                      HTML

                                  定義:超文本標記語言

                    (記不住的可以這麽記:how to make love ! 哈哈,準備開車,粗人一個,長的不行)

其實理解起來很簡單,超越文本範疇的,帶有標記性的,計算機語言

技術分享

上圖咱們所看到的一串串的代碼,這就是空白網頁的後臺界面,而這些代碼就是計算機的其中一種語言

咱們按照定義來細細的講解下

超越文本範疇的標記性的計算機語言

  超越文本範疇的:

      是指並不只是文本,還包括靜態圖片,動圖,音頻,視頻,超鏈接等一系列綜合性的

  標記性:

      其實就是為了讓計算機區分不同的計算機語言而特別定制的一種特殊的符號,計算機一看到這種符號就知道“ok,這是HTML”,這種符號是: < > ,例如<head></ head> 、 <body></ body> ,把代碼放入到這種標記中,計算機就知道這是眾多計算機語言中的HTML語言。

    上面講解了什麽是HTML,那咱們接著來看一下這種標記性語言一點最基本的語言代碼(在我看來,其實代碼就跟漢語一樣,現在咱們就是在學習認字,編程就是用字和詞語來造句,唯一的不同就是閱讀對象不同,而已)

咱們先看一組代碼

<head>   </ head>

head 頭部,頂部

那<head></ head>的控制區域也就是這個地方,為了方便展示,咱們在其代碼中加入<title></ title> //標簽 ,用來在標簽上顯示字符

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
</head>

現在這行代碼咱們所能看到的就是下圖這個樣子

技術分享

OK,下一個

<body> </ body>

軀幹,身體

可以這麽理解,咱們所在網頁上看到的,都是由<body> </ body>裏面得內容呈現到我們的眼前的

例如咱們想要一個背景色為紅色的網頁,咱們可以這麽做

<body bgcolor="pink">

  咱們開始分屏顯示吧,這樣大家看的會比較方便並且更直觀

那上面得代碼所呈現出來的效果就是下圖的樣子

技術分享

對,騷粉,pink

剛剛咱們做的就是在<body></ body>裏添加了一個bgcolor="red" ,對,就是backgroundcolor的縮寫=bgcolor(背景顏色),background就是背景圖片,是不是很容

那現在有人說了,網站上看小說,那字兒寫在哪?

可定是寫在body裏了,不過不是尖括號<>裏面,而是在<body>和</ body>中間,就像這樣

<body bgcolor="pink">

Hello<br />
Hello<br />
Hello<br />

</body>

  對,你們又看到一個代碼<br />這是換行代碼,並且只有一個,嗯,單身汪一只,沒有另一半

顯示效果如下

技術分享

感覺字兒太小,看的不是太清楚,還很費勁兒,嗯,咱們稍微調整下字體大小

<body bgcolor="pink">

<b>Hello</b><br />
<i>Hello</i><br />
<u>Hello</u><br />

<b><i><u>Hello</u></i></b><br />



<font size="7" color="red" face="楷體">中華人民共和國</font>

<h1>北京</h1>
<p></p>
<h2>淄博</h2>

<h6>小日本</h6>

<h6>美國</h6>


</body>

  下圖

技術分享

duang,就是這種呈現效果

對,你看到的沒錯,都是寫到<body> </ body>中間的,看著感覺很復雜,其實特別簡單,咱們拆分開來看一下

b i u ,分別對應的是加粗,傾斜,下劃線(跟word文檔裏面一樣,很容易),並且都是雙標記,前後各一個,記住,前後各一個

並且可以雙標記嵌入使用

<font></ font> ,針對於字體的設計使用,在前面的<font>裏面添入

先這樣,去吃飯,回頭修改

HTML基本代碼教學片,認識HTML