HTML簡單入門
阿新 • • 發佈：2021-07-21
HTML 初步學習
buchiyexiao
- HTML語法
HTML主要語法為倆種，分別為單標籤語法和雙標籤語法：
<標籤名 屬性名="屬性值" 屬性名="屬性值" 屬性名="屬性值".....></標籤名>
<標籤名 屬性名="屬性值" 屬性名="屬性值" 屬性名="屬性值".....>
- 標籤
<html> <head> <title>這是一個HTML的學習小頁面</title> </head> <body>假裝這裡面我寫好了一個網頁</body> </html>
上面就是一個最簡單的頁面，HTML主要是掌握標籤的應用，以下列舉出一些常用的文字標籤：
加粗：b（<b>內容</b>），strong（<strong>內容</strong>） 傾斜：i（<i>內容</i>），em（<em>內容</em>） 刪除線：del（<del>內容</del>），s（<s>內容</s>） 下劃線：u（<u>內容</u>），ins（<ins>內容<ins>） 變大：big：<big>內容</big> 變小：small：<small>內容</small> 字型：font（<font>內容</font>）屬性 color顏色，size大小，face樣式（諸如華文琥珀） 註釋標籤：<!--註釋-->
以下列舉出一些簡單的排版所用的標籤
換行：<br /> 橫線：<hr /> 屬性 width寬度，size粗細，color顏色，align對齊，noshade無陰影 段落：p：<p></p>屬性：align：對齊left，center，right Div和span： Div：<div></div>塊標籤 Span：<span></span>行內標籤 注意：塊可以設定寬高，行不可以設定寬高 標題標籤 屬性：align對齊 <h1>內容1</h1> <h2>內容2</h2> <h3>內容3</h3> <h4>內容4</h4> <h5>內容5</h5> <h6>內容6</h6>
- 有序標籤和無序標籤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML學習第一彈</title>
</head>
<body>
<ol>
<li>南開大學</li>
<ol>
<li>網安學院</li>
<ol>
<li>a專業</li>
<ol>
<li>Stu a</li>
<li>Stu b</li>
</ol>
<li>b專業</li>
</ol>
<li>除了網安的其它學院</li>
</ol>
<li>天津大學</li>
</ol>
</body>
</html>
有序標籤主要是ol和li的靈活運用，無序標籤也就是將上文程式碼的ol改寫成ul，ul含有屬性type disc實心圓，circle空心圓，square小方塊（內容前面的小標記）
- 其他標籤
- 音樂標籤
<EMBED scr="地址" width height></EMBED > - 圖片標籤
<img scr="地址" width height></img> - video標籤
<video scr="地址" width height></video> - 連結標籤
<a href="連結"></a>
（備註：EMBED video標籤的屬性值還有很多其他的，類似autoplay，type等屬性，一般預設情況即可，特殊情況需賦特殊屬性值）
- 音樂標籤
- 地址
地址可以採用相對地址和絕對地址，我一般習慣採用絕地地址即直接"檔案的全部路徑"，相對地址在小範圍的調動內也是操作簡單，通過./和../進行"預檔案操作"（簡單理解，你現在就是這個頁面的檔案，你要去到目標檔案，需要返回上級->返回上級->開啟某個資料夾等等步驟）
寫在最後的總結：HTML語法上手容易，就算是無程式設計基礎的同學寫幾個簡單的標籤示例即可掌握，學習WEB的話不宜久滯於HTML