說句閑話:成為洛谷管理員的最好方式——
學習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是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。
這一項與平台無關性相似。
注:如果一行后帶有 字樣,即為這一步要學習的。
開始學習:
編寫環境的准備:
在任意位置單擊鼠標右鍵,找到新建,再點擊記事本即可,然后選擇自己的重命名方式,將后綴改成 ,然后雙擊鼠標左鍵,就可以看到此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>
多簡單,短短五個字符搞定!
不過,有沒有細心的同學看到了這一次的 和之前有何不同呢?
沒錯,就是沒有成對出現
這是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>
期待下次再見!