HTML入門編寫


說句閑話:成為洛谷管理員的最好方式——

學習HTML

emm好,正文開始。

今天給大家帶來的是HTML初步講解(即第一趴)。


問題區:

1、什么是HTML?

先來個百度解說壓陣。

html,全稱Hypertext Markup Language,也就是“超文本鏈接標示語言”。HTML文本是由 HTML命令組成的描述性文本,HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。 即平常上網所看到的的網頁。

HTML就是類似c++的語言,但今天的講解中,並沒有諸多的算法,簡單的來說,就是一種模擬,用來制作網頁,目前只能使自己看到。別急,還是可以公開的。

2、HTML需要什么專業的編譯軟件嗎?

並不是。當然還是有的(VScode等等),只是我們現在最好的選擇是記事本。因為記事本不會干擾我們的任何輸入,能讓我們自由的編寫。

3、HTML有什么特點嗎?

1、簡易性:

超級文本標記語言版本升級采用超集方式,從而更加靈活方便。

用更吸引你的方式來說就是用記事本編寫即可。

2、可擴展性:

超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言采取子類元素的方式,為系統擴展帶來保證。

這個主要是可以靈活的添加而不需要太多的改動。

3、平台無關性:

雖然個人計算機大行其道,但使用MAC等其他機器的大有人在,超級文本標記語言可以使用在廣泛的平台上,這也是萬維網(WWW)盛行的另一個原因。

就是大家都可以不經轉化的解析此語言,

4、通用性:

HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。

這一項與平台無關性相似。

注:如果一行后帶有 *** 字樣,即為這一步要學習的。


開始學習:

編寫環境的准備:

在任意位置單擊鼠標右鍵,找到新建,再點擊記事本即可,然后選擇自己的重命名方式,將后綴改成 . h t m l .html ,然后雙擊鼠標左鍵,就可以看到此html在您默認的瀏覽器中打開。

那么,想打開記事本編寫怎么辦?

單擊鼠標右鍵將打開方式選為記事本即可。。。


好了好了,正式進入主題。

第零步,我們要先像准備頭文件和括號一樣,准備如下內容:

<html>***

</html>***

從此開始,我們要注意一點:’< >'大多數成對出現,而且一般后面的比前面的多一個/,中間的地方來相應的寫內容。

第一步:為自己的文章添加標題

PS:這里的標題指任務欄的頁篇文字,即如果打開洛谷首頁,上方會顯示:首頁-洛谷|計算機科學新生態

如何編寫呢?

<html>

<head>//注意要再開一對head,<html>里不能直接包含<title>***

<title>my first html!</title>***

</head>***

</html>

一般建議大家在中間空一些行,這樣顯示更清楚。

在記事本中輸入以下內容,就能看到顯示了。

第二步:寫出一個段落。

<html>

<head>

<title>my first html!</title>

</head>

<body>***

<p>hello world!</p>***

</body>***

</html>

這樣就能打出一個段落,其實相當於打一行字之后換行。這次的別忘了要包含在body中哦,可以這樣解釋:

html為整體的框架,任何網頁必須包含,head為任務欄標題等不在頁面顯示的語句編寫區,body為顯示語句的編寫區。

那有些人不禁要問:如何用分割線來隔開文字呢?

我們只需如下操作:

<html>

<head>

<title>my first html!</title>

</head>

<body>

<p>hello world!</p>

<hr/>***

</body>

</html>

多簡單,短短五個字符搞定!

不過,有沒有細心的同學看到了這一次的 &lt; &gt; &lt;&gt; 和之前有何不同呢?

沒錯,就是沒有成對出現

這是html中的個例,大多數的<>都是成對出現(格式見前面代碼),而這個是獨個出現,在今天的學習中,后面還會遇到這種情況。

哦,既然這樣,那我順便給大家介紹個吧。

換行:

剛才我們所知道的換行方式只有寫個段落,現在我們可以自由的控制換行了!

<html>

<head>

<title>my first html!</title>

</head>

<body>

<p>hello world!</p>

<hr/>

<br/>***

</body>

</html>

也是十分的easy呢~

其實,一般的已經不需要在此基礎上添加任何內容的語句一般較為簡易。

**PS:到現在為止,我想您已經知道編寫的大概框架,為了大家的閱讀效果,下面的代碼語句將只放新添加的。

第三步:簡易的修飾你的文字

NO.1:粗體


<b>我是粗體</b>

NO.2:斜體

<i>我是斜體</i>

NO.3:小字體

<small>我是小字體</small>

目前先介紹這些,還要注意,標簽對文字修飾可以多個,
e.g.:

<b><i>我又粗又斜</i></b>

第四步:圖片插入

<img src="xxx.jpg" alt="對嗎?" />

將你的圖片存在本機上與此html在同一個目錄下,然后將圖片的名稱連同后綴名一同放到src=“”里即可,然后后面的alt=“”可以添加文字解釋圖片。

第五步:插入鏈接:

<a href="https://www.luogu.org/">這是一個指向洛谷的鏈接</a>

然后就是顯示為‘這是一個指向洛谷的鏈接’,點擊后跳轉到洛谷首頁。

第六步:跳轉

相信你在知道以上步驟時就可以編寫出很多的代碼,那么,如何制作像目錄一樣點擊便可跳轉到某處呢?

我們只需編寫如下代碼:

<p><a href="#heading1">轉到標題1</a></p>

如想跳轉到某處,就這樣:

<h1 id="heading1">標題1</h1>

在這一條下面鍵入內容,即可實現。

第六步:制作表格

相信這一步大家肯定非常期待
下面我來介紹一下表格的制作方法。

<table border="1">

<tr>

<td>單元格1</td>

<td>單元格2</td>

</tr>

<tr>

<td>單元格3</td>

<td>單元格4</td>

</tr>

</table>

以上是最簡單的表格制作。

其中

<tr>
</tr>

為表格的換行。

<td>
</td>

即制作每一個格子。

<table>
</table>

是每一個表格開始制作的區域。

最后,送給大家一個用法的總結:

<html>

<head>

<title>html用法記錄</title>

</head>

<body>

<p>我是一個段落</p>

<i>我是斜體</i>

<br/>

<small>我是小字體</small>

<br/>

<b>我是粗體</b>

<br/>

我是上一行<br/>我是下一行

<p>接下來是一條水平線</p>


<hr/>

<li>我是第一個列表項</li>

<li>我是第二個</li>

<a href="https://www.luogu.org/">這是一個指向洛谷的鏈接</a>

<br/>

<p><a href="#heading1">轉到標題1</a></p>

<p><a href="#heading2">轉到標題2</a></p>

<h1 id="heading1">標題1</h1>

<p>啦啦啦,過來嘍</p>

<h1 id="heading2">標題2</h1>

<p>嘿嘿嘿,還是沒毛病</p>

<br/>

<img src="76107.jpg" alt="對嗎?" />

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

<table border="1">

<tr>

<td>單元格1</td>

<td>單元格2</td>

</tr>

<tr>

<td>單元格3</td>

<td>單元格4</td>

</tr>

</table>

</body>

</html>

期待下次再見!

本文完結,下一趴會介紹一下CSS與Javascript,敬請期待!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM