HTML 初次交涉


嗨大家好啊,又見面了,昨天咱們學習了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>
p.jpg

咱們可以看到這兩行文本顯示在瀏覽器頁面上,段落有一點就是瀏覽器是自定屏蔽掉他中間的空格的程奠,大家可以試試丈牢,在你實驗的時候隨意添加一些空格,但是瀏覽器在解析的時候空格是自動屏蔽掉的瞄沙。標題和段落這樣的標簽瀏覽器是自動在標簽開始和結(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>
          ![](http://upload-images.jianshu.io/upload_images/4183218-9a6349b3c46a9d9d?imageMogr2/auto-orient/strip)</img>
    </body>
</html>

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

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市黄选,隨后出現(xiàn)的幾起案子笛求,更是在濱河造成了極大的恐慌,老刑警劉巖糕簿,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件探入,死亡現(xiàn)場離奇詭異,居然都是意外死亡懂诗,警方通過查閱死者的電腦和手機蜂嗽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來殃恒,“玉大人植旧,你說我怎么就攤上這事辱揭。” “怎么了病附?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵问窃,是天一觀的道長。 經(jīng)常有香客問我完沪,道長域庇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任覆积,我火速辦了婚禮听皿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘宽档。我一直安慰自己尉姨,他們只是感情好,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布吗冤。 她就那樣靜靜地躺著又厉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪椎瘟。 梳的紋絲不亂的頭發(fā)上馋没,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天,我揣著相機與錄音降传,去河邊找鬼。 笑死勾怒,一個胖子當著我的面吹牛婆排,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播笔链,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼段只,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鉴扫?” 一聲冷哼從身側(cè)響起赞枕,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坪创,沒想到半個月后炕婶,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡莱预,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年柠掂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片依沮。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡涯贞,死狀恐怖枪狂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情宋渔,我是刑警寧澤州疾,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站皇拣,受9級特大地震影響严蓖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜审磁,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一谈飒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧态蒂,春花似錦杭措、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至瘩蚪,卻和暖如春泉懦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背疹瘦。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工崩哩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人言沐。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓邓嘹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親险胰。 傳聞我的和親對象是個殘疾皇子汹押,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

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