HTML --- 2

HTML 超文本標(biāo)記語言扎瓶,是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用蕊爵,也是一種規(guī)范,一種標(biāo)準(zhǔn)删铃,它通過標(biāo)記符號來標(biāo)記要來現(xiàn)實(shí)的網(wǎng)頁中的各個(gè)部分耳贬。網(wǎng)頁文件本身就是一種文本文件,通過文本文件中添加標(biāo)記符猎唁,可以告訴瀏覽器如何現(xiàn)實(shí)內(nèi)容咒劲。

<!doctype html>
<html>
    <head>
        <title>HTML基礎(chǔ)---二</title>
    </head>
    <body>
        <div style="font-size:25px;font-weight:bold;font-style:italic;font-family:'楷體'">
            hellow world
        </div>
        <!-- font 是規(guī)定文本的字體(famil),尺寸(size),樣式(style)等的 -->
        <!-- 我們也可以簡寫 列如 ↓ -->
        <div style="font:bold italic 25px '楷體';">
            Hellow World
        </div>
        <!-- 屬性之間用空格隔開,不能用‘ , ’ 否側(cè)顯示不出效果 -->
        
        <div style="width:200px;height:200px;border:1px solid #333;text-align:center;line-height:200px;">
            字體垂直居中了
        </div>
        <!-- text-align 規(guī)定元素中的文本的水平對齊方式,它有三個(gè)屬性:left诫隅,right腐魂,center(中心) -->
        <!-- line-height 設(shè)置行間的距離(行高),該屬性會影響行框的布局 -->
        
        <div style="width:200px;height:200px;border:1px solid #333;background-color:red;background-image:url(image/1.jpg);background-repeat:no-repeat;background-position:center">
        
        </div>
        <!-- background 是一個(gè)背景屬性,可以設(shè)置如下屬性:
            background-color      背景顏色
            background-position   背景定位   它有五個(gè)屬性:left,right,top,bottom,center,可以設(shè)置9個(gè)方向逐纬,也可以通過像素(px)或者百分比設(shè)置位置
            background-size       背景尺寸
            background-repeat     設(shè)置背景是否可以重復(fù)
            background-image      背景圖片
        -->
        
        <span>hellow  world</span>
        <!-- span標(biāo)簽是被用來組合文檔中的行內(nèi)元素的蛔屹,span沒有固定的格式表現(xiàn)。當(dāng)它應(yīng)用樣式時(shí)豁生,才會發(fā)生變化兔毒,跟div標(biāo)簽差不多,只不過div是塊級元素 -->
        
        
        <div style="width:200px;height:200px;border:1px solid #333;"></div>
        <!-- 將style寫入標(biāo)簽內(nèi)甸箱,如果樣式太多,我們看著也會覺得煩,下面會介紹另一種方法  內(nèi)聯(lián)樣式 -->
        
        <style>
            p{
                width:200px;
                height:200px;
                border:1px solid #333;
                text-align:center;
                line-height:200px;
            }
        </style>
        
        <p>內(nèi)聯(lián)樣式</p>
        <!-- style標(biāo)簽要寫在head標(biāo)簽里罐栈,這里只是做掩飾 
            效果跟行內(nèi)樣式一樣外厂,而且代碼看的也很干凈,
            同時(shí)我們也運(yùn)用了一個(gè)叫做標(biāo)簽選擇器的方法豌骏,
            通過標(biāo)簽來設(shè)置樣式
        -->
        
        
        <style>
            .test{
                width:200px;
                height:200px;
                border:1px solid #333;
                background:#c23;
                text-align:center;
                line-height:200px;
            }
        </style>
        <div class="test"> 
            類選擇器方法
        </div>
        
        <!-- 這里的class 是設(shè)置類名的意思龟梦,比如:test就是類名
            我們在內(nèi)聯(lián)樣式中可以通過  . + 類名的方式來設(shè)置樣式
        -->
        
        <style>
            #test{
                width:200px;
                height:200px;
                border:1px solid #333;
                background:#32c;
                text-align:center;
                line-height:200px;
            }
        </style>
        
        <div id="test">
            id選擇器方法
        </div>
        
        <!-- id 是給標(biāo)簽設(shè)置一個(gè)id,之后通過id名也可以設(shè)置樣式肯适,但這個(gè)id不能重復(fù)变秦,
                所以通常我們是在JS里才用id
        -->
        
    </body>
</html>

結(jié)果預(yù)覽:

預(yù)覽---1.png
預(yù)覽---2.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市框舔,隨后出現(xiàn)的幾起案子蹦玫,更是在濱河造成了極大的恐慌,老刑警劉巖刘绣,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件樱溉,死亡現(xiàn)場離奇詭異,居然都是意外死亡纬凤,警方通過查閱死者的電腦和手機(jī)福贞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來停士,“玉大人挖帘,你說我怎么就攤上這事完丽。” “怎么了拇舀?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵逻族,是天一觀的道長。 經(jīng)常有香客問我骄崩,道長聘鳞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任要拂,我火速辦了婚禮抠璃,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘脱惰。我一直安慰自己搏嗡,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布枪芒。 她就那樣靜靜地躺著彻况,像睡著了一般。 火紅的嫁衣襯著肌膚如雪舅踪。 梳的紋絲不亂的頭發(fā)上纽甘,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天,我揣著相機(jī)與錄音抽碌,去河邊找鬼悍赢。 笑死,一個(gè)胖子當(dāng)著我的面吹牛货徙,可吹牛的內(nèi)容都是我干的左权。 我是一名探鬼主播,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼痴颊,長吁一口氣:“原來是場噩夢啊……” “哼赏迟!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蠢棱,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤锌杀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后泻仙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糕再,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年玉转,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了突想。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,742評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖猾担,靈堂內(nèi)的尸體忽然破棺而出袭灯,到底是詐尸還是另有隱情,我是刑警寧澤绑嘹,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布妓蛮,位于F島的核電站,受9級特大地震影響圾叼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜捺癞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一夷蚊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧髓介,春花似錦惕鼓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至一膨,卻和暖如春呀邢,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背豹绪。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工价淌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瞒津。 一個(gè)月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓蝉衣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巷蚪。 傳聞我的和親對象是個(gè)殘疾皇子病毡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評論 2 361

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