目錄
HTML結構
body內常用標簽
常用
?div與span
img
a標簽?超鏈接標簽
其他格式標簽
列表
表格
表單
select標簽
label標簽
textarea多行文本
HTML結構
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML結構</title>
</head>
<body></body>
</html>通常編輯器輸入！，在按Enter或tab能xia顯示（vs code和pycharm）
body內常用標簽
常用
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s><p>段落標簽</p><h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6><!--換行-->
<br><!--水平線--><hr>?div與span
<div>標簽用來定義一個塊級元素，并無實際的意義</div>
<div>主要通過CSS樣式為其賦予不同的表現</div>
<span>span標簽用來定義內聯(行內)元素，并無實際的意義</span><span>主要通過CSS樣式為其賦予不同的表現</span>img
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">a標簽?超鏈接標簽
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
<a href="http://www.taobo.com" target="_blank" >點我</a>target：
- _blank表示在新標簽頁中打開目標網頁
- _self表示在當前標簽頁中打開目標網頁
其他格式標簽
列表
1.無序列表
<ul type="disc"><li>第一項</li><li>第二項</li>
</ul>type屬性：
- disc（實心圓點，默認值）
- circle（空心圓圈）
- square（實心方塊）
- none（無樣式）
2.有序列表
<ol type="1" start="2"><li>第一項</li><li>第二項</li>
</ol>type屬性：
- 1 數字列表，默認值
- A 大寫字母
- a 小寫字母
- Ⅰ大寫羅馬
- ⅰ小寫羅馬
3.標題列表
<dl><dt>標題1</dt><dd>內容1</dd><dt>標題2</dt><dd>內容1</dd><dd>內容2</dd>
</dl>結果為
表格
<table><thead><tr><th>序號</th><th>姓名</th><th>愛好</th></tr></thead><tbody><tr><td>1</td><td>Egon</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>屬性:
- border: 表格邊框.
- cellpadding: 內邊距
- cellspacing: 外邊距.
- width: 像素 百分比.（最好通過css來設置長寬）
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合并單元格）
表單
<form action="form_action.asp" method="get"><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" />
</form>input
<input> 元素會根據不同的?type?屬性，變化為多種形態。
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框 | <input type="password"? /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 復選框 | <input type="checkbox" checked="checked"? /> |
| radio | 單選框 | <input type="radio"? /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> |
| reset | 重置按鈕 | <input type="reset" value="重置"? /> |
| button | 普通按鈕 | <input type="button" value="普通按鈕"? /> |
| hidden | 隱藏輸入框 | <input type="hidden"? /> |
| file | 文本選擇框 | <input type="file"? /> |
?屬性說明:
- name：表單提交時的“鍵”，注意和id的區別
- value：表單提交時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本年內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
- checked：radio和checkbox默認被選中的項
- readonly：text和password設置只讀
- disabled：所有input均適用
select標簽
<form action="" method="post"><select name="city" id="city"><option value="1">北京</option><option selected="selected" value="2">上海</option><option value="3">廣州</option><option value="4">深圳</option></select>
</form>屬性說明：
- multiple：布爾屬性，設置后為多選，否則默認單選
- disabled：禁用
- selected：默認選中該項
- value：定義提交時的選項值
label標簽
定義：<label> 標簽為 input 元素定義標注（標記）。
說明：
- label 元素不會向用戶呈現任何特殊效果。
- <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action=""><label for="username">用戶名</label><input type="text" id="username" name="username">
</form>textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">默認內容
</textarea>屬性說明：
- name：名稱
- rows：行數
- cols：列數
- disabled：禁用
?
摘抄自：https://www.cnblogs.com/liwenzhou/p/7988087.html
)
)