html基礎知識入門(1)
阿新 • • 發佈:2021-02-15
技術標籤:html
HTML基本的語法規則
1.主體構成
<!--解釋文件型別-->
<!DOCTYPE html>
<!--一個html分為head+body兩塊-->
<html>
<!--頭部-->
<head>
<!--描述文件的各種屬性和資訊,包括文件的標題、在web中的位置及其他文件的關係等-->
<!--絕大數文件頭部包含的資料都不會真正作為內容顯示給讀者-->
</head>
<!--主體部分-->
<body >
</body>
</html>
2.基本細則
- Title
放在head中,定義網頁的名稱
<title>
This is a title
</title>
結果:
- Heading
<!--不同大小的heading-->
<h1>heading one</h1>
<h2>heading one</h2>
<h3>heading one</h3>
…
結果:
3. List
<!--無序號-->
<ur>
<li>List Item 1</ li>
<li>List Item 2</li>
</ur>
<!--有序號-->
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
結果:
4. Paragraph
<!--段落-->
<p>ashdahsduia asdasdhasdioasjdio</p>
<!--加粗-->
<p><strong>書撒刷刷</strong></p >
<!-超連結-->
<!--以新開啟網頁的方式-->
<p><a href="https://baidu.com" target="_blank"><strong>超連結</strong></a><p>
結果:
5. Table
<!--Table-->
<table>
<!--表頭-->
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<!--主體-->
<tbody>
<tr>
<td>Lenord</td>
<td>Chan</td>
<td>45</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lenord</td>
<td>Chan</td>
<td>45</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lenord</td>
<td>Chan</td>
<td>45</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
結果:
6. br、hr
空行、加橫線的空行
7. Form
<!--form-->
<form>
<div>
<label>First Name</label>
<input type="text" name="firstname" placeholder="Enter First Name">
</div>
<div>
<label>Last Name</label>
<input type="text" name = "lastname" placeholder="Enter Last Name">
</div>
<div>
<label>Email</label>
<input type="email" name="email" placeholder="Enter Email">
</div>
<input type="submit" name="submit" value="Submit">
</form>
<button>This is a Button</button>
結果:
8. 載入影象
<!--Image-->
<!--alt定義如果無法載入影象時顯示的文字-->
<img style = "width:100vw" src="C:/Users/16102/Desktop/圖示.png" alt="This is a img tag">
結果:
9.引用
<!--Quotation-->
<p>
<cite>通過嘗試自己沒有做過的事情,可能會發掘出新的可能性</cite>——阪本龍一
</p>
結果: