嗨大家好啊,又見面了,昨天咱們學習了HTML的一些基本的概念,了解了HTML是什么東西以及他的作用和咱們?yōu)g覽器是如何解析HTML文件的架谎,有舉了一個小例子來看了下HTML文件長什么樣子,今天咱們就來看一下HTML的內(nèi)容辟躏。
咱們在這一節(jié)里主要看一下HTML的 標題谷扣、段落、鏈接捎琐、圖片会涎,以及這些元素中的一些屬性,好了咱們進入主題瑞凑。
首選是咱們的標題元素:
HTML的標題是元素<h/>進行定義的末秃,HTML中主要定義了6個標題,分別是h1 -- h6籽御,標題的數(shù)字表示的標題的大小练慕,數(shù)字小的反而標題是最大的惰匙。咱們來看一下代碼是:
<html>
<body>
html 字體大小是標簽 <h>
<h1>hello HTML h1</h1>
<h2>hello HTML h2</h2>
<h3>hello HTML h3</h3>
</body>
</html>
我在這里只是列舉了其中的三個,主要意思就是看一下這個效果咱們后面自己練習下領(lǐng)會領(lǐng)會铃将。保存之后看一下效果圖:
咱們可以看到具體的標題大小项鬼。是數(shù)字小的反而標題大,字體小的反而小劲阎。標題的使用就是這么簡單绘盟,后面的幾個標簽也是如此簡單,在后面的學習中咱們在做一些復(fù)雜的運用悯仙,今天咱們只是認識和簡單的使用這些標簽龄毡,在后面咱們不會陌生。
需要注意的一點是咱們不要使用標題進行字體的加粗等操作锡垄,標題就是標題稚虎,只有字體的樣式咱們在后面的樣式中進行學習。
標題完了就是咱們的段落偎捎,HTML中段落是使用的標簽<p/>
段落的意思就是一整段文本咱們可以在HTML中定義一個段落然后放置咱們需要展示的文本信息。當然也是比較簡單序攘、基礎(chǔ)的標簽茴她,看一下代碼:
<html>
<body>
<p>這是一個HTML段落</p>
<p>這是另一個HTML段落</p>
</body>
</html>
咱們可以看到這兩行文本顯示在瀏覽器頁面上,段落有一點就是瀏覽器是自定屏蔽掉他中間的空格的程奠,大家可以試試丈牢,在你實驗的時候隨意添加一些空格,但是瀏覽器在解析的時候空格是自動屏蔽掉的瞄沙。標題和段落這樣的標簽瀏覽器是自動在標簽開始和結(jié)束的時候添加一個換行的己沛。所以沒有必要使用換行標簽<b/>在對他換行操作暗膜。
下面咱們看一下HTML中的鏈接寝并,在HTML中鏈接是使用的標簽<a/>,咱們通常在瀏覽網(wǎng)頁的時候會發(fā)現(xiàn)有一個鏈接或者是有一段特殊顏色的文字是可以點擊的,點擊之后回調(diào)轉(zhuǎn)到一個新的網(wǎng)頁鹉戚,提供一些新的圖文信息垫桂,或者是音頻信息师幕,供我們?yōu)g覽,其實這里就是使用的 <a/>標簽诬滩。咱們看一下吧:
<html>
<body>
<a href="http://www.reibang.com/u/b93b80b37b9e">這是HTML的鏈接</a>
</body>
</heml>
在這里有一個標簽的屬性霹粥,href,這個屬性就是告訴瀏覽器解析的時候這個是鏈接疼鸟,點擊這個鏈接后控,瀏覽器會自動請求咱們配置的鏈接地址,從而呈現(xiàn)給用戶的是一個新的網(wǎng)頁內(nèi)容空镜。咱們看一下效果:
大家可以看一下上面這個就是點擊咱們的文件瀏覽器解析的<a/>標簽浩淘,他是顯示的咱們在標簽中的文本信息捌朴。這段文本是不同的顏色進行表示的,就是為了提醒用戶的注意從而可以點擊他馋袜。下面咱們看一下點擊之后的效果:
咱們可以看到瀏覽器地址欄中的鏈接已經(jīng)不是之前的鏈接了男旗,是咱們配置在<a/>標簽中的新的地址,在咱們點擊這個鏈接的時候瀏覽器請求了新的地址欣鳖,就是咱們配置的地址察皇,返回給我們新的內(nèi)容。
接下來咱們看一下圖片泽台,HTML中的圖片使用的是<img/>,圖片這個標簽咱們可以設(shè)置北京圖片什荣,也可以設(shè)置圖片的排列順序,浮動圖片等怀酷,這些咱們在后面深入學習的時候在看現(xiàn)在這是看看<img/>標簽的簡單使用稻爬,看下代碼
<html>
<body>
</img>
</body>
</html>
這里也是使用了咱們<img/>標簽的元素 src 故名思議是資源的意思啦,圖片就是一種資源了蜕依。這個圖片地址是我申請的七牛云存儲的地址桅锄,在后面有時間了可以總結(jié)下七牛API的操作。好了咱們看一下效果:
這個就是瀏覽器解析咱們的配置的資源地址去請求了這個資源呈現(xiàn)給用戶展示样眠。
好了今天咱們熟悉了幾個標簽:標題友瘤、段落、鏈接檐束、圖片辫秧,其中標簽和段落是瀏覽器會自動在標簽前后添加一個換行,所以咱們自己在沒有必要的情況下進行換行的操作其實一個愚蠢的操作被丧。還有需要注意的是不要使用標題進行文字的加黑盟戏、加粗操作,不要使用段落進行換行的操作甥桂。后面我們在學習新的知識柿究。
歡迎大家來我們的網(wǎng)站逛逛:https://www.codeinventor.club/