HTML 初次交涉


嗨大家好啊,又見面了,昨天咱們學(xué)習(xí)了HTML的一些基本的概念,了解了HTML是什么東西以及他的作用和咱們?yōu)g覽器是如何解析HTML文件的,有舉了一個小例子來看了下HTML文件長什么樣子,今天咱們就來看一下HTML的內(nèi)容。
咱們在這一節(jié)里主要看一下HTML的 標(biāo)題、段落、鏈接、圖片,以及這些元素中的一些屬性,好了咱們進入主題。
首選是咱們的標(biāo)題元素:
HTML的標(biāo)題是元素<h/>進行定義的,HTML中主要定義了6個標(biāo)題,分別是h1 -- h6,標(biāo)題的數(shù)字表示的標(biāo)題的大小,數(shù)字小的反而標(biāo)題是最大的。咱們來看一下代碼是:

<html>
    <body>
        html 字體大小是標(biāo)簽 <h>
        <h1>hello HTML h1</h1>

        <h2>hello HTML h2</h2>

        <h3>hello HTML h3</h3>

    </body>
</html>

我在這里只是列舉了其中的三個,主要意思就是看一下這個效果咱們后面自己練習(xí)下領(lǐng)會領(lǐng)會。保存之后看一下效果圖:


咱們可以看到具體的標(biāo)題大小。是數(shù)字小的反而標(biāo)題大,字體小的反而小。標(biāo)題的使用就是這么簡單,后面的幾個標(biāo)簽也是如此簡單,在后面的學(xué)習(xí)中咱們在做一些復(fù)雜的運用,今天咱們只是認(rèn)識和簡單的使用這些標(biāo)簽,在后面咱們不會陌生。
需要注意的一點是咱們不要使用標(biāo)題進行字體的加粗等操作,標(biāo)題就是標(biāo)題,只有字體的樣式咱們在后面的樣式中進行學(xué)習(xí)。

標(biāo)題完了就是咱們的段落,HTML中段落是使用的標(biāo)簽<p/>
段落的意思就是一整段文本咱們可以在HTML中定義一個段落然后放置咱們需要展示的文本信息。當(dāng)然也是比較簡單、基礎(chǔ)的標(biāo)簽,看一下代碼:

<html>
    <body>
            <p>這是一個HTML段落</p>

            <p>這是另一個HTML段落</p>
    </body>
</html>
p.jpg

咱們可以看到這兩行文本顯示在瀏覽器頁面上,段落有一點就是瀏覽器是自定屏蔽掉他中間的空格的,大家可以試試,在你實驗的時候隨意添加一些空格,但是瀏覽器在解析的時候空格是自動屏蔽掉的。標(biāo)題和段落這樣的標(biāo)簽瀏覽器是自動在標(biāo)簽開始和結(jié)束的時候添加一個換行的。所以沒有必要使用換行標(biāo)簽<b/>在對他換行操作。

下面咱們看一下HTML中的鏈接,在HTML中鏈接是使用的標(biāo)簽<a/>,咱們通常在瀏覽網(wǎng)頁的時候會發(fā)現(xiàn)有一個鏈接或者是有一段特殊顏色的文字是可以點擊的,點擊之后回調(diào)轉(zhuǎn)到一個新的網(wǎng)頁,提供一些新的圖文信息,或者是音頻信息,供我們?yōu)g覽,其實這里就是使用的 <a/>標(biāo)簽。咱們看一下吧:

<html>
    <body>
        <a href="http://www.itdecent.cn/u/b93b80b37b9e">這是HTML的鏈接</a>
    </body>
</heml>

在這里有一個標(biāo)簽的屬性,href,這個屬性就是告訴瀏覽器解析的時候這個是鏈接,點擊這個鏈接,瀏覽器會自動請求咱們配置的鏈接地址,從而呈現(xiàn)給用戶的是一個新的網(wǎng)頁內(nèi)容。咱們看一下效果:

![]

大家可以看一下上面這個就是點擊咱們的文件瀏覽器解析的<a/>標(biāo)簽,他是顯示的咱們在標(biāo)簽中的文本信息。這段文本是不同的顏色進行表示的,就是為了提醒用戶的注意從而可以點擊他。下面咱們看一下點擊之后的效果:


咱們可以看到瀏覽器地址欄中的鏈接已經(jīng)不是之前的鏈接了,是咱們配置在<a/>標(biāo)簽中的新的地址,在咱們點擊這個鏈接的時候瀏覽器請求了新的地址,就是咱們配置的地址,返回給我們新的內(nèi)容。

接下來咱們看一下圖片,HTML中的圖片使用的是<img/>,圖片這個標(biāo)簽咱們可以設(shè)置北京圖片,也可以設(shè)置圖片的排列順序,浮動圖片等,這些咱們在后面深入學(xué)習(xí)的時候在看現(xiàn)在這是看看<img/>標(biāo)簽的簡單使用,看下代碼

<html>
    <body>
          ![](http://upload-images.jianshu.io/upload_images/4183218-9a6349b3c46a9d9d?imageMogr2/auto-orient/strip)</img>
    </body>
</html>

這里也是使用了咱們<img/>標(biāo)簽的元素 src 故名思議是資源的意思啦,圖片就是一種資源了。這個圖片地址是我申請的七牛云存儲的地址,在后面有時間了可以總結(jié)下七牛API的操作。好了咱們看一下效果:

這個就是瀏覽器解析咱們的配置的資源地址去請求了這個資源呈現(xiàn)給用戶展示。
好了今天咱們熟悉了幾個標(biāo)簽:標(biāo)題、段落、鏈接、圖片,其中標(biāo)簽和段落是瀏覽器會自動在標(biāo)簽前后添加一個換行,所以咱們自己在沒有必要的情況下進行換行的操作其實一個愚蠢的操作。還有需要注意的是不要使用標(biāo)題進行文字的加黑、加粗操作,不要使用段落進行換行的操作。后面我們在學(xué)習(xí)新的知識。

歡迎大家來我們的網(wǎng)站逛逛:https://www.codeinventor.club/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,162評論 1 92
  • 嗨大家好,最近在關(guān)注家鄉(xiāng)的就業(yè)機會發(fā)現(xiàn)需要全棧工程師的職位比較多,所以就想著還有幾年時間才回去正好看看 大前端的知...
    瑤瑤小仙女閱讀 479評論 2 2
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,109評論 25 709
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,531評論 1 41
  • 定目標(biāo),要定力所能及的目標(biāo),比如明天早上八點起床,每天吃早餐…… 要跳槽,你要能把本職工作做透后,在能笑傲江湖時…...
    李紅燁閱讀 354評論 0 0

友情鏈接更多精彩內(nèi)容