html： html的骨架： <!DOCTYPE html> <html>  <head>  <title></title> </head>  <body> </body> </htm ...

html：

html的骨架：

<!DOCTYPE html>
<html>
    <!--head標簽：文檔的頭部-->
    <head>
        <!--title標簽：文檔的標題-->
        <title></title>
    </head>
    <!--body標簽：文檔的主體-->
    <body>
    </body>
</html>

body中包含多個標簽。

圖片的標簽img：

<html>
<head>
    <title>圖片</title>
</head>
<body>
    br hr img 三個標簽<br />
    1.基本圖片插入方式<br />
    <img src="timg.gif"/><br />

    2.帶有atl的圖像<br />
    <!--alt:替換文本的屬性-->
    <img src="Camera" alt="女神的圖片"/><br />

    3.帶有title的圖像<br />
    <!--title:顯示圖片的標題-->
    <img src="Camera Rollnull2de51efcbe083016.jpg" title="女神" /><br />

    4.帶有寬度的圖像<br />
    <img src="Camera Rollnull2de51efcbe083016.jpg" width="300" height="300" /><br />
    
    5.帶有邊框的圖像<br />
    <img src="Camera Rollnull2de51efcbe083016.jpg" title="女神" border="10"/>
</body>
</html>

標題標簽：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>我是標題1</h1>
        <h2>我是標題2</h2>
        <h3>我是標題3</h3>
        <h4>我是標題4</h4>
        <h5>我是標題5</h5>
        <h6>我是標題6</h6>
    </body>
</html>

以下是顯示的結果：

strong標簽、em標簽、ins標簽、del標簽：

 1 <html>
 2     <head>
 3         <title>
 4             標簽例子
 5         </title>
 6     </head>
 7     <body>
 8         <h1>
 9             strong標簽、em標簽、ins標簽、del標簽
10         </h1>
11         <p>
12             2018年04月12日
13         </p>
14         <p>
15             10:58:26 來源： <strong>[email protected]</strong>
16         </p>
17         <hr />
18         <p>
19             我正在學前端，
20             <strong>strong標簽有強調作用。
21             </strong>
22             <em>em標簽使字體傾斜，
23             </em>
24             <ins>ins標簽是下劃線，
25             </ins>
26             <del>del是刪除標簽。
27             </del>
28         </p>    
29 
30     </body>
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 </html>

View Code

div標簽和span標簽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>div.span</title>
</head>
<body>
    <div>第一個佈局</div>
    <div>第二個佈局</div>
    <span>這是一個佈局</span>
    <span>這也是一個佈局</span>
</body>
</html>

屬性標簽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>屬性標簽</title>
</head>
<body>
    <hr color="red" width="500" height="500" />
</body>
</html>

鏈接標簽<a>：

<html>
<head>
    <title></title>
</head>
<body>
    <h3>
        友情鏈接
    </h3>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="http://www.sina.cn">新浪</a>
    <a href="氣溫案例.html">今日新聞</a>
    <br />
    <a href="#">我的作品</a>
</body>
</html>

百度
我的作品

錨點定位：

 1 <html>
 2 <head>
 3     <title>楚喬傳</title>
 4 </head>
 5 <body>
 6     <h1>
 7         楚喬傳
 8     </h1>
 9     <p>
10         中國大陸 67集（TV版）/58集（DVD版）
11     </p>
12     <p>
13         《楚喬傳》是由慈文傳媒、蜜淘影業、克頓傳媒聯合出品的女性勵志傳奇古裝劇。由吳錦源執導，嘉紋、楊濤、陳嵐編劇，趙麗穎、林更新、竇驍、李沁領銜主演，鄧倫、金士傑特邀出演，王彥霖、牛駿峰、黃夢瑩、田小潔、孫寧、金瀚、邢昭林、曹曦月、朱聖禕、阮聖文、李若嘉、苗苗等聯合出演。[1] 該劇改編自瀟湘冬兒小說《11處特工皇妃》，講述了西魏亂世中，一個特立獨行的女奴楚喬，在協助建立新政權過程中關於守護、背叛、信仰、愛情的故事。
14     </p>
15 
16     <h5 id="f"><a href="#first">第一集</a>
17     </h5>
18 
19     <h5 id="s"><a href="#second">第二集</a>
20     </h5>
21 
22     <h5 id="t"><a href="#three">第三集</a>
23     </h5>
24 
25     <h5 id="f"><a href="#four">第四集</a>
26     </h5>
27     <img src="1.jpg" />
28     <h3 id="first">
29         第1集(分集以TV版為準)
30     </h3><a href="#f">返回</a>
31     <p>
32         　搖搖晃晃的囚車上，一名少女正在閉目沉睡。夢境里皆是血雨腥風，恍恍惚惚中，她只記得有人喚她楚喬，又有人叫她荊小六。她不知道自己從哪裡來，又將去往何方，前路茫茫。囚車裡傳來低低的啜泣聲，楚喬從夢境里回過神來。周遭都是一片陌生，有一個自稱捲毛頭的小姑娘聽得楚喬肚子咕咕叫，便將自己藏著的窩頭分了一半給她。楚喬告訴捲毛頭，自己叫做荊小六，捲毛頭便喚她小六姐姐。女奴們被帶往圍場。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏門閥長房嫡子魏舒燁，趙氏門閥次子趙西風和宇文門閥三房庶孫宇文懷策馬出城去了一處圍場。女奴們便被人從帳篷中趕了出來，站在圍場中央，手執兵器的官兵將她們團團圍住。少女們身上穿的衣服，都寫上了幾名少年的名字。 　　見此情形，站在高臺上的少年們不解宇文懷的意圖。宇文懷得意的笑笑，告訴其他幾位少年，這不是一次普通的圍獵。此次的獵物不僅有狼，還有這些新鮮的少女奴隸，大家可以射畜生，也可以射別人的奴隸，一炷香之後，看看誰剩下的奴隸最多，就算誰贏。 　　裕王覺得這種玩法太過殘忍，表示反對。而趙西風卻覺得很有意思，鼓動大家興奮起來。幾個人相持不下，言辭便激烈起來。眼見趙西風吵嚷著要求放狼，裕王便推托等宇文玥來了再開始。宇文懷卻陰陰一笑，只道宇文玥怕是正在春宵一刻。 　　而另一邊，宇文家青山院。一身白衣的宇文門閥長房嗣孫宇文玥，剛剛推門走進房間，就見床上躺著一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便徑自走到書桌前坐了下來。美人見狀，主動誘之。宇文玥卻不動聲色，將計就計，引得美人主動出手行刺，才一舉擒住了她。解決掉刺客，宇文玥這才吩咐人備馬，往圍場上奔去。 　　正當還在宇文玥趕往圍場的路上之時，圍場上已是一片哀號慘叫景象。兩側的圍欄閘門被打開，二十多只凶猛的惡狼登時衝進圍場，張大血盆大口，咆哮著向少女們衝去。楚喬觀察了一下周圍地形，大喊著叫少女們逃離空曠的圍場，躲向有植物的山丘。一片慌亂中，高臺上的箭已經向少女們射了過來，不消片刻功夫，身邊已有好幾人倒下。楚喬拉著捲毛頭，頻頻躲過高臺上射來的箭支和餓狼的追捕，引起了少年們的註意。 　　慌亂中，一頭餓狼在前方擋住了去路，楚喬讓捲毛頭先躲起來，自己去將那頭餓狼引開。燕洵世子見狀，搭箭拉弓射殺了餓狼，救下了楚喬。剛剛逃過一劫的楚喬又被一前一後兩隻餓狼圍住。被逼入絕境的她，為了求生，撿起地上的箭支，狠狠的插進了餓狼的咽喉。遠處的沙丘上，騎馬而立的宇文玥，看著圍場中的倔強少女，不由得在心底贊嘆她，天生的戰士。 　　圍場中的少女越來越少，宇文懷看著底下頑強的楚喬，不禁玩心大起。他飛身上馬，呼喝著手下人馬進圍場里去追殺剩下的女奴。其他幾名少年都緊隨其後，燕洵世子一路上只顧著射殺餓狼，並不對女奴下手。 　　漸漸地，圍場中的女奴越來越少，餓狼也越來越少。只有一隊人馬，在荒野中狂奔，向著少女們逃跑的方向追去，不斷地還是有女奴在倒下。楚喬拉著捲毛頭，在沙丘上拼命地跑著，一時也不敢慢下來，她知道，要想活命，就不能夠停下腳步。 　　遠處傳來了結束的響箭聲，所有人都勒馬停下。宇文懷卻心有不甘，他還是拉弓朝著女奴射了過去，跑在後面的捲毛頭應聲倒地。楚喬回過身，緊緊地抱住了捲毛頭，似是被風化一般，一動也不動。心有不甘的宇文懷，不想讓身上寫了“玥”字的楚喬活下來，不顧之前約定，依舊朝著楚喬射了一箭。一旁的燕洵見了，搭箭射向宇文懷的箭，卻還是稍稍差了幾毫釐，只射下幾縷箭尾的翎毛。最後關頭，宇文玥悄無聲息地用弩箭擋下了這一箭，救了楚喬一命。 　　而傷心欲絕的楚喬，自然沒有註意到，她是怎麼在幾位少年的爭論下活下來的。她此刻心裡只有恨，以至於在燕洵世子詢問她的名字的時候，她也只是冷冷的回答，等到有一天我不用再仰視你的時候，我自然會告訴你。 　　僥幸活下來的楚喬，卻因惹得宇文懷不悅，便被管家朱順關進了宇文家的柴房。躺在地上的楚喬心裡恨極了，她恨這個世道，那些貴族比餓狼還要可怕，人命比草芥還要低賤的世道。在昏暗的柴房裡，渾身是傷的楚喬暗暗發誓，早晚有一天，自己定要讓這些人血債血償。 　　一名男子手提食盒走了進來，一到楚喬跟前，就滿臉心疼地喚楚喬小六，說自己是五哥。楚喬並不認識他，微微有些抗拒他的接近。男子從食盒裡拿出一碗飯，飯上放著一塊楚喬最愛吃的紅燒肉，楚喬含淚接過，覺得吃到了自己這一生最好吃的東西。 　　燕洵來找宇文玥，請他幫忙解決淳公主要替他辦生辰宴的事情。面色冷冷的宇文玥，三言兩語，就將燕洵的難題化解。 　　柴房裡，楚喬還在昏迷。昏睡中，她似乎想起自己同一名男子打鬥，不慎落入水中，在湍急的河流中，渾身發冷。有人將暖爐放在了她的手裡，楚喬便醒了過來，原來是姐妹們在照顧她。
33     </p>
34     <h3 id="second">
35         第2集
36     </h3><a href="#s">返回</a>
37     <p>
38         楚喬傷病還未痊愈，便被宋大娘遣來幹活。大姐汁湘為楚喬求情，卻被宋大娘罵了一通。管家朱順前來通知，過兩日少爺宇文玥要在府上為燕洵世子舉辦生辰宴，誰要是敢出一點差錯，便要將她打死，眾人皆唯唯應了。楚喬便被宋大娘安排去搬花草，朱順卻叫住汁湘，說自己並沒有為難楚喬，讓汁湘報答他。眼見他就要對汁湘動手動腳，楚喬突然過來問汁湘蘭花的位置，汁湘成功躲過朱順的糾纏。宇文懷吩咐朱順往宇文玥的酒里下毒，楚喬將這一切都收在眼裡，卻不動聲色地看著。汁湘被安排給宇文玥斟酒，宇文玥察覺出不妥，不肯飲酒。宇文懷便笑言仿效古人，主人不飲酒，就殺美人。宇文玥知道有詐，依舊不肯飲酒。汁湘舉著酒盃，苦苦請求。楚喬不願見姐姐白白做了他們內鬥的犧牲品，伺機打翻了酒盃，將眾人的註意力吸引到了自己身上。楚喬便求諸位公子放過自己的姐姐，表示自己願意替姐姐受罰。宇文懷見狀，就要讓人殺了楚喬。燕洵表示既是自己的生辰，便不願見著打打殺殺，為楚喬求情。宇文懷卻表示宇文府的規矩不能壞，不肯輕饒。燕洵建議玩個游戲，讓老天來決定楚喬的生死。他拿出自己腰間的腰牌，腰牌一面龍紋，一面篆字，將它扔在地上，讓楚喬來猜哪面朝上，若是猜對了，便免她死罪。楚喬看懂了燕洵的暗示，猜對了龍紋朝上，僥幸逃過一死，卻是活罪難逃。楚喬被倒弔在樹上已是晚間時分，宇文玥帶人過來將她放了下來，卻諷刺她。在姐妹們的幫助下逃出府外的楚喬，無意之中聽到了朱順與錦燭的對話，得知臨惜有危險，又回到了宇文府。卻不想，剛回到宇文府中，就看見宇文玥親手將臨惜殺掉，一腳踢進火堆之中。楚喬想衝進火堆救臨惜出來，卻被宇文玥踢起的石子打中小腿撲倒在地，當場被侍衛拿住。傷心欲絕的楚喬指責宇文玥濫殺無辜，自己的哥哥根本就不是細作。宇文玥卻道，自己濫殺無辜又如何。受了傷的楚喬回到柴房，告訴了姐妹們五哥死去的消息。傷心的小八怨怪楚喬是個剋星，剋死了自己的家人，汁湘不讓小八這樣說楚喬，姐妹為了此事吵了起來。濃濃的難過夾雜著滿滿的無奈，傾襲著每一個荊家姐妹的心。
39     </p>
40     <h3 id="three">
41         第3集
42     </h3><a href="#t">返回</a>    
43     <p>
44         　青山院靈堂肅穆，宇文玥一身孝衣，沉靜的面色里透出幾分隱隱的憂傷。宇文玥剛剛下令封棺，便被院子里闖進來的一位不速之客阻攔。來人正是三房的宇文懷，他不顧侍衛阻攔，出言囂張傲慢，揚言要親自開棺驗屍。宇文玥百般阻攔未果，兩人便在靈堂上動起手來。正在難分難解之間，宇文懷擲出去的劍讓院門口立著的一位太監險險避過，繼而尖銳的聲音響起“護駕！貴妃娘娘在此，誰敢造次？”此言一齣，驚得院里的宇文玥急急撇下了手中的武器，來向貴妃娘娘問安。宇文懷心知貴妃是宇文玥請來的救兵，卻也無可奈何，只得停了手。一身雍容的貴妃娘娘開口便質問宇文懷，何以在青山院里鬧事？宇文懷卻惡人先告狀，只道是宇文玥執意封棺，還逼得自己動手。宇文玥便回稟貴妃，祖父是身中西域奇毒而亡，自己是怕此毒再行傷人，便先焚毀雜物再封棺。柴房裡，清醒過來的楚喬鬱郁寡歡，連汁湘姐姐送來的藥湯也不願意喝。汁湘知道她是因為臨惜的死自責便勸慰她，生逢亂世大家都是身不由己，叫她不要再責怪自己。楚喬的目光卻透出堅毅，她告訴汁湘，自己是不會讓臨惜白白死去的，自己一定會好好活下去。說罷，端起藥湯一飲而盡。婢女們都在院子里幹活，就見有侍衛抬著一具屍體走了出去。婢女們紛紛議論，這是被送去極樂閣的婢女錦蘭，因未被老太爺看上，便被折磨致死。宋大娘前來挑選送往極樂閣的婢女，楚喬被宋大娘指名要送去極樂閣。汁湘為了救下妹妹，便求了宋大娘，由自己頂替了楚喬去了極樂閣。極樂閣里，同汁湘一起被送進去的女孩子，沒有一個人活著出來，汁湘也不例外。楚喬帶著小七小八躲在暗處，親眼看著汁湘被裝在一輛破車上送出來，難過至極的三人，卻不敢哭出聲音，只能眼睜睜看著自己姐姐的屍體被人扔掉。事後，楚喬悄悄將汁湘的屍首埋了。姐妹三人拿著弄來的紙錢，在臨惜和汁湘的墳前燒著，卻被受了罰的宋大娘撞個正著。宋大娘想拉著她們去向宇文懷邀功，遂與楚喬姐妹三人起了爭執。幾人撕打之中，宋大娘從橋上滑落，被楚喬拉住，卻終是因為太過沉重而落下了水。小七小八十分害怕，楚喬安慰她們，若是有一日東窗事發，自己會一力承當，叫姐妹們不要擔心。可是她們誰也沒有瞧見，有一個躲在暗處的影子，早已將這發生在深夜裡的一切，盡數看在眼底。宇文玥依舊一副淡淡神情，只說人太過聰明瞭不見得是好事。燕洵不理會宇文玥的冷淡，只跟他說起他們宇文家的內鬥，表示自己並不喜歡這些，自己只想做草原上自由翱翔的雄鷹。問及宇文玥想成為什麼的時候，宇文玥也只是微微沉吟。燕洵卻不理會宇文玥，他想起了楚喬，便從宇文玥的桌子上順了一瓶傷藥，徑自來找楚喬了。卻正巧撞上有侍衛要帶楚喬去受罰，燕洵輕輕鬆松就替她解了圍。但楚喬冷漠的神色卻讓燕洵很不解，楚喬告訴燕洵，自己的哥哥姐姐新喪，自己也朝不保夕，自然高興不起來。
45     </p>
46     <h3 id="four">
47         第4集
48     </h3><a href="#f">返回</a>
49     <p>
50         宇文玥挑選侍寢婢女的消息很快傳了開來，聽著小七小八的議論聲，楚喬心底裡萌生出了求生的新芽。她猛地意識到，自己只有離開宇文懷的爪牙，才能保護妹妹們的性命，才能為兄姐報仇。自己就像是牆角的弱草，只有藉助強者的力量，才能與頑石對抗！楚喬下定決心要參加擇選，她不顧別人異樣的眼光，勇敢地走進了青山院。只可惜，她只是一個帶著鐵鈴鐺的奴婢，根本沒有資格參加擇選。但楚喬知道，自己已經沒有退路，她一定要參加這次的擇選。她不屈不撓地留了下來，固執的跪在院子里不肯起來。宇文玥聽聞，只道她是不自量力，便由著她跪，並不理會她。屋外烈日當頭，楚喬在烈日下烤著，卻依舊堅持著。時間一分一秒流逝，外頭已是月上中天，楚喬還在院子中跪著，宇文玥默不作聲地在暗處瞧著倔強的楚喬，面上若有所思。侍衛想要勸楚喬回去，卻見楚喬並無退意，就要將她架走。宇文玥卻出來制止了侍衛，他看著跪在地上的楚喬，問她為什麼要來參加擇選。楚喬目光堅定的看著他，說自己想要活下去。宇文玥並不相信楚喬的意圖，他繼續問楚喬，自己親手殺死了她的哥哥，她卻來求著自己收她做侍寢婢女，尊嚴何在。楚喬面無表情，目光卻依舊堅定，作為奴婢，命都保不住，哪裡還有尊嚴。宇文玥看了一眼楚喬，問她是否知道侍寢婢女是要在主人床底之間承歡侍奉。楚喬緊緊握住了自己的手，卑微地叩頭，請公子留下奴婢。宇文玥似是沉思了一會兒，便向侍衛下令，准許楚喬參加擇選。擇選開始，眾多的婢女聚到一起，便免不了生出是非。楚喬本就是因著公子格外開恩才得以參選，自然引得其他人對其不滿。銀鈴鐺的大丫鬟錦燭，看不慣楚喬私自放飛公子豢養的鸚鵡，想暗地裡使壞抓壞楚喬的衣服，不想，卻被楚喬反手奪走了衣衫，弄得失了儀態。宇文玥將這一切都瞧在眼裡，看出了楚喬身手敏捷，倒是個練武的苗子。第一場是蒲棋，楚喬並不太懂，遂很慘淡地輸掉一局。第二局是烹茶，依舊不是楚喬的強項，但她知道自己不能再輸了。楚喬仔細觀察著周圍的婢女們如何烹茶，突然計上心頭。她跑到井邊打了新鮮的井水上來，又順手摘了一片葉子，照著別的婢女的法子，有樣學樣，也烹制出了一杯甘冽的茶水。楚喬贏了第二局。第三局，默記梵文佛經，一柱香時間去記，再用一柱香時間默寫。楚喬雖然不會握筆，更不會寫字，但她卻憑藉超人的記憶，將佛經一字不差地默寫了下來。但楚喬卻因為沒有署名，而被宇文玥責問。楚喬卻道，規則里並沒有要求署名，自己只是按照規則來做，並無不妥。宇文玥要求只要楚喬能夠在經文上署上自己的名字，這一局就算她贏。這可難不倒楚喬，她從自己的頭髮上拿下銅鈴鐺，蘸了墨，穩穩地印了上去。宇文玥不再說話，但他卻在回過身以後，在嘴角勾起了一抹微不可察的笑意。中選後的楚喬被帶來見宇文玥，宇文玥再次問她，為何要來做自己的侍寢婢女。楚喬跪下回話，自己是為了活下去。宇文玥不信楚喬會忘記自己親手殺了她哥哥的仇恨，而楚喬卻表示自己已經答應過姐姐，要好好照顧兩個妹妹。
51     </p>
52 </body>
53 </html>

View Code 定位到標題標簽

base標簽：

<html>
<head>
    <title></title>
    <!--base標簽：鏈接頁面在另一個頁面跳轉-->
    <base target="_blank"/>
</head>
<body>
    <h3>
        友情鏈接
    </h3>
    <a href="http://www.baidu.com" target="_self">百度</a>
    <a href="http://www.sina.cn">新浪</a>
    <a href="氣溫案例.html">今日新聞</a>
    <br />
    <a href="#">我的作品</a>
</body>
</html>

路徑：
1. 相對路徑
  同一級路徑
  
  主頁面和跳轉頁面在同一文件夾中
  
  上一級路徑
  
  跳轉頁面在上一個文件夾中
  
  下一級路徑
  
  跳轉頁面在下一個文件夾中
2. 絕對對路徑
  1. <a href="https://www.baidu.com/img/bd_logo1.png">網站的絕對路徑</a>
    網站的絕對路徑
  2. <a href="G:\01\案列\01.html" >本地的絕對路徑</a>

列表：

 1 <html>
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <!--ul無序列表-->
 7     <ul>
 8         <li>蘋果</li>
 9         <li>香蕉</li>
10         <li>葡萄</li>
11         <li>橘子</li>
12     </ul>
13     <!--ol有序列表-->
14     <ol>
15         <li>美國</li>
16         <li>中國</li>
17         <li>英國</li>
18         <li>日本</li>
19     </ol>
20     <!--自定義列表-->
21     <dl>
22         <dt>我</dt>
23             <dd>
24                 我叫黃金燕
25             </dd>
26             <dd>
27                 是物聯網工程專業的
28             </dd>    
29             <dd>
30                 是18應屆畢業生
31             </dd>
32         
33 
34     </dl>
35 </body>
36 </html>

View Code

html的基礎知識

html：