這一小節,我們說一些比較零散的知識,HTML課程中呢,其實就是一些標簽,正是這些標簽組成了前端網頁的各種元素,所以你也可以叫他們標簽元素。
像前兩節我們說的,html head body title meta style 。這些都是標簽。
1 段落
段落,很好理解,我們從小就看書,內容一段一段的,這些一段一段的內容,我們就可以放到段落標簽里,段落標簽是 p 。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭的山海關到西頭的嘉峪關,有一萬三千多里。</p><p>從北京出發,不過幾十公里就來到長城腳下。這一段長城修筑在八達嶺上,高大堅固,是用巨大的條石和城磚筑成的。城墻頂上鋪著方磚,十分平整,像很寬的馬路,五六匹馬可以并行。城墻外沿有兩米多高的成排的垛子,垛子上有方形的瞭望口和射口,供瞭望和射擊用。城墻頂上,每隔三百多米就有一座方形的城臺,是屯兵的堡壘。打仗的時候,城臺之間可以互相呼應。</p></body>
</html>
2 標題
標題(Heading)是通過 <h1> - <h6> 標簽進行定義的。
<h1> 定義最大的標題。 <h6> 定義最小的標題。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><h1>長城 標題h1</h1><h2>長城 標題h2</h2><h3>長城 標題h3</h3><h4>長城 標題h4</h4><h5>長城 標題h5</h5><h6>長城 標題h6</h6><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭的山海關到西頭的嘉峪關,有一萬三千多里。</p></body>
</html>
可以看出,從h1標簽到h6標簽,是?從大到小?的標題體現過程。但標題標簽不只是可以讓文字變的大一些,變得粗壯一些,他更符合搜索引擎對于網頁的抓取規范。這個我們后面說,我們現在還只是單純的學習HTML標簽就可以。
3 空格
你是否想過,我們打字的時候,敲一個空格鍵就可以了,那么網頁中呢?我們來試一下。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭 的山海關到西頭的嘉峪關,有一萬三千多里。</p></body>
</html>
怎么樣,你是不是看到了很多空格,我們再刷新一下瀏覽器,看一下效果:
這幾乎就是沒有起作用,對吧。那么HTML開發中,該如何開發出空格來呢?看代碼:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭 的山海關到西頭的嘉峪關,有一萬三千多里。</p></body>
</html>
看效果:
怎么樣,空格是不是挺明顯的了,這里就是添加了 ? 這樣的控制。