HTML程式碼-1
阿新 • • 發佈：2020-07-29
<!DOCTYPE html><!-- 告訴瀏覽器這是html文件--> <html lang="en"><!-- lang=“en” 的作用是宣告這個文件的內容所使用的語言是英文，如果想要改成中文簡體，將en改成zh-Hans--> <head> <!-- head裡面的內容是文件使用的標題集，文件的樣式--> <meta charset="utf-8"><!--用來設定文件所使用的字符集為utf-8--><!--UTF-8是絕大部分編輯預設的字符集 --> <title>ZzkTxdy</title><!--將文件在瀏覽器的標籤欄的名字改為ZzkTxdy--> </head> <body> 歡迎觀看：<a href="http://php.cn">PHP中文網</a><!--連結標籤--> <!--文字元素：段落<p>,標題<h1~h6>,格式化<pre>--> <h1 style="color:red;">ZzkTql</h1><!--標題元素，其中style="color:red;"可以設定標題顏色--> <h2>ZzkTql</h2> <h3>ZzkTql</h3> <h4>ZzkTql</h4> <h5>ZzkTql</h5> <h6>ZzkTql</h6> <p> HTML5<!--依然只在同一行顯示--> 是下一代 HTML標準 </p><!--<p>是典型的塊元素標籤，獨佔一行顯示--> <p> 春曉 春眠不覺曉， 處處聞啼鳥。 夜來風雨聲， 花落知多少。 </p> <!--將HTML文件中的內容原樣輸出特別適合程式碼等，需要格式化輸出資料~~，用<pre標籤實現>--> <pre style="font-size: large;"><!--可以設定字型大小--> 春曉 春眠不覺曉， 處處聞啼鳥。 夜來風雨聲， 花落知多少。 </pre> <!--下面這些是語義標籤--> <!--時間文字用<time>標籤包裝--> <!--地點文字用<address>標籤包裝--> <p>今天下午<time>4點到6點</time> <address>在小會議室開會</address>~~ </p> <!--del元素給出刪除線--> <p>蘋果MacBook pro筆記本原價：<del>13999元</del>，現價：9999元</p> <!--ins元素給出下劃線--> <!--u元素也可以給出下劃線--> <!--<ins>和<u>標籤內容展示效果相同，語義不同--> <p>PHP中文網是一個<ins>永久免費</ins>的學習平臺</p> <p>PHP中文網是一個<u>永久免費</u>的學習平臺</p> <!--strong元素可以給出加粗效果和強調語義--> <!--b元素也可以給出加粗效果，但是並沒有特殊含義。推薦使用strong--> <p>中國強烈<strong>反對韓國部署薩德</strong>反導系統</p> <p>中國強烈<b>反對韓國部署薩德</b>反導系統</p> <!--em也起強調作用，但是強調的內容將以斜體的內容顯示--> <!--i沒有強調作用，但是會給標記的內容給出斜體效果--> <p>中國強烈<em>反對韓國部署薩德</em>反導系統</p> <p>中國強烈<i>反對韓國部署薩德</i>反導系統</p> <!--mark會給出所標記的內容高亮顯示--> <p>我愛學習，<mark>學習使我快樂</mark></p> <p>我愛學習，<mark style="color: blue;">學習使我快樂</mark></p><!--這個只會是字型變為藍色--> <!--code用來包裝文件中的程式碼片段--> <p> #include<iostream> #include<cstdio> using namespace std; int main() { printf("Hello Vscode"); return 0; } </p> <code> #include<iostream> #include<cstdio> using namespace std; int main() { printf("Hello Vscode"); return 0; } </code> <!--pre和code通常是成對出現的--> <pre> <code> #include<iostream> #include<cstdio> using namespace std; int main() { printf("Hello Vscode"); return 0; } </code> </pre> <!--表格元素<table>--> <!--表頭單元格用th表示，預設是加粗--> <!--標題<caption>,頭部<thead>,主體<tbody>,底部<tfoot>--> <table border="1" cellspacing="0" cellpadding="5"> <!--border給單元格加上邊框，cellspacing設定單元格之間的間距，cellpadding設定單元格的大小--> <caption>江湖精英班成績表</caption> <thead> <tr> <th>姓名</th> <th>PHP</th> <th>Python</th> <th>Java</th> </tr> </thead> <tbody> <tr> <td colspan="2" rowspan="2">郭靖</td><!--既執行跨行操作又執行跨列操作--> <!--<td>90</td>--> <td>84</td> <td>89</td> </tr> <tr> <!--<td>洪七</td>--> <!--<td>76</td>--> <td>69</td> <td>93</td> </tr> <tr> <td style="color:red">楊康</td><!--設定字型顏色--> <td>68</td> <td>79</td> <td>43</td> </tr> <tr> <td>黃蓉</td> <td>99</td> <td>98</td> <td>95</td> </tr> <tr> <td>歐陽鋒</td> <td>87</td> <td>74</td> <td>96</td> </tr> </tbody> <tfoot> <td colspan="2">平均成績</td><!--執行跨列操作--> <!--<td>84</td>--> <td>80</td> <td>83</td> </tfoot> </table> <!--如果想在網頁上顯示圖片，應該使用<img>標籤--> <!--使用alt屬性，可以給影象新增一些說明性的文字。注：alt屬性必須設定，請給予足夠重視--> <img src="image/1.jpg" width="300" alt="Everything is possible!"><!--width和height設定其中一個即可，另一個會等比縮放的--> <!--有序列表和無序列表--> <!--ol中start可以設定起始序列號--> <ol start="6"> <li>好好學習</li> <li>天天向上</li> <li>早睡早起</li> <li>準時吃飯</li> </ol> <br /> <!--如果想將有序列表逆序排列的話在ol中加入reversed屬性即可--> <!--reversed和start不能同時使用--> <!--value可以設定某個列表項的序號,這時它會按照設定順序影響下面的列表項序號--> <ol reversed > <li>好好學習</li> <li>天天向上</li> <li value="4">早睡早起</li> <li>準時吃飯</li> </ol> <!--無序列表--> <ul> <li>好好學習</li> <li>天天向上</li> <li>早睡早起</li> <li>準時吃飯</li> </ul> <!--描述列表三對標籤：<dl><dt><dd>--> <h2>PHP中文網</h2> <dl> <dt>服務物件：</dt> <dd>web開發新人，開發者以及愛好者。</dd> <dt>服務宗旨：</dt> <dd>打造國內領先的一站式永久免費學習的學習平臺</dd> </dl> </body> </html>