前端1-----塊級標簽(獨占一行),排版標簽(樣式排版),其他標簽,form表單(input的多種類型)
一丶HTML塊級標簽
排版標簽
p 標簽: 段落標簽,會自動在段落上下加上空白來分開
p標簽是一個文本標簽,本身是一個塊級標簽不能再嵌套塊標簽
div 標簽: 沒有樣式的標簽 ,最常用
列表
1.無序列表 常用
2.有序列表
3.標題列表
# 無序列表 circle:空心圓, disc:默認實心圓,square:實心方片
<ul type='circle'>
<li>1</li>
<li>2</li>
</ul>
<ul type='square'>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
</ul>
# 有序列表 ol ,type:阿拉伯數字和英文字母. start :從第幾個開始
<ol type='1' start='2'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
# 標題列表
<dl>
<dt>標題</dt> <!-- dt 表示標題 -->
<dd>1</dd> <!-- dd 內容 -->
<dd>2</dd>
<dd>3</dd>
</dl>
表格
table 表格:
thead :表頭
tr: 一行
th: 一列 , 加粗的單元格。相當於<td> + <b>
<caption>：表格的標題。使用時和tr標簽並列
tbody: 表身
tr:一行
td:一列
表格屬性:
width : 寬度
height: 高度
bordercolor: 邊框顏色
border : 邊框
align :表格的水平對齊方式
bgcolor : 背景顏色
background : 背景圖片
cellspacing :單元格和單元格之間的距離（外邊距），像素為單位。默認情況下的值為0
cellpadding :單元格內容到邊的距離，像素為單位。默認情況下，文字是緊挨着左邊那條線的，即默認情況下的值為0。注意:注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。如果設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
合並單元格:
colspan：橫向合並。例如colspan="2"表示當前單元格在水平方向上要占據兩個單元格的位置。
rowspan：縱向合並。例如rowspan="2"表示當前單元格在垂直方向上
tr屬性:
dir：公有屬性，設置這一行單元格內容的排列方式。可以取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
bgcolor：設置這一行的單元格的背景色。
height：一行的高度
align="center"：一行的內容水平居中顯示，取值：left、center、right
valign="center"：一行的內容垂直居中，取值：top、middle、bottom
td屬性:
align：內容的橫向對齊方式。屬性值可以填：left right center。
valign：內容的縱向對齊方式。屬性值可以填：top middle bottom
width：絕對值或者相對值(%)
height：單元格的高度
bgcolor：設置這個單元格的背景色。
background：設置這個單元格的背景圖片。
具體代碼如下:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table 表格:
thead :表頭
tr: 一行
th: 一列 , 加粗的單元格。相當於<td> + <b>
<caption>：表格的標題。使用時和tr標簽並列
tbody: 表身
tr:一行
td:一列
表格屬性:
width : 寬度
height: 高度
bordercolor: 邊框顏色
border : 邊框
align :表格的水平對齊方式
bgcolor : 背景顏色
background : 背景圖片
cellspacing :單元格和單元格之間的距離（外邊距），像素為單位。默認情況下的值為0
cellpadding :單元格內容到邊的距離，像素為單位。默認情況下，文字是緊挨着左邊那條線的，即默認情況下的值為0。注意:注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。如果設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
合並單元格:
colspan：橫向合並。例如colspan="2"表示當前單元格在水平方向上要占據兩個單元格的位置。
rowspan：縱向合並。例如rowspan="2"表示當前單元格在垂直方向上
tr屬性:
dir：公有屬性，設置這一行單元格內容的排列方式。可以取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
bgcolor：設置這一行的單元格的背景色。
height：一行的高度
align="center"：一行的內容水平居中顯示，取值：left、center、right
valign="center"：一行的內容垂直居中，取值：top、middle、bottom
td屬性:
align：內容的橫向對齊方式。屬性值可以填：left right center。
valign：內容的縱向對齊方式。屬性值可以填：top middle bottom
width：絕對值或者相對值(%)
height：單元格的高度
bgcolor：設置這個單元格的背景色。
background：設置這個單元格的背景圖片。
-->
<table background="http://p1.music.126.net/l75oqBhEUdxcuEnX4oe-mw==/109951164276097647.jpg" border="1" bordercolor="red" align="center" width="200px" height="200px" cellpadding="10px" cellspacing="5px" bgcolor="#6495ed">
<!-- ：表格的標題。使用時和tr標簽並列-->
<caption>這里是表格的標題哦~~</caption>
<thead>
<tr valign="bottom" height="200px" align="center" bgcolor="#6495ed" dir="rtl">
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<thbody>
<tr>
<td align="left" valign="bottom" width="200px"bgcolor="#b22222" >1</td>
<!-- 行合並 -->
<td colspan="2">2</td>
</tr>
<tr>
<!-- 列合並 -->
<td rowspan="2">一</td>
<td>二</td>
<td>三</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</thbody>
</table>
</body>
</html>
form表單
### input 框 全家桶
text 單行輸入文本
password 密碼輸入框（不顯示明文）
radio 單選框 (name屬性相同:則是互斥效果)
checkbox 復選框
email 郵箱框
date 日期輸入框 ,年月日
datetime-local 日期輸入框, 年月日時分
file 文件
submit 提交按鈕
reset 重置按鈕
hidden 隱藏文本框
### 常用的屬性
id : id值
name :屬性設置值,
value :屬性設置值 ,
readonly : 只讀並可提交,
disabled : 只顯示不可提交 ,
size="50" : 表示文本框內可以顯示五十個字符。
placeholder : 背景提示
checked : 默認選擇狀態
title : 鼠標懸浮
for : 綁定id
具體代碼如下:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- form 的屬性:
name：表單的名稱，用於JS來操作或控制表單時使用；
id：表單的名稱，用於JS來操作或控制表單時使用；
action: 提交數據到哪個url
method: 以哪種方式提交數據,一般取值：get(默認)和post
enctype: 提交文件或者提交大數據使用到 enctype
表單數據的編碼方式(加密方式)，取值可以是：
application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded：默認加密方式，除了上傳文件之外的數據都可以
Multipart/form-data：上傳附件時，必須使用這種編碼方式.
-->
<form action="http://127.0.0.1:9999" method="get" enctype="application/x-www-form-urlencoded">
<!-- input 框 全家桶
text 單行輸入文本
password 密碼輸入框（不顯示明文）
radio 單選框 (name屬性相同:則是互斥效果)
checkbox 復選框
email 郵箱框
date 日期輸入框 ,年月日
datetime-local 日期輸入框, 年月日時分
file 文件
submit 提交按鈕
reset 重置按鈕
hidden 隱藏文本框
-->
<!-- 前端頁面以鍵值對字典的形式提交數據 , name屬性的值作為字典的鍵 , value屬性的值作為字典的值. 一一對應 -->
<!--
id : id值
name屬性設置值,
value屬性設置值 ,
readonly 只讀並可提交,
disabled只顯示不可提交 ,
size="50"表示文本框內可以顯示五十個字符。
placeholder 背景提示
checked 默認選擇狀態
title 鼠標懸浮
for 綁定id
-->
<input type="text" name="user" placeholder="背景提示" size="20" > <br />
<!-- 密碼框,輸入內容不可見 -->
<input type="password" name="password" > <br />
<!-- 郵箱輸入框 disabled -->
<input type="email" value="mahuateng@qq.com" name="email" disabled> <br />
<!-- radio name屬性則互斥 checked 默認選擇狀態 -->
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<br />
<!-- 多選框 checked 默認選擇狀態 -->
<input type="checkbox" name="hobby" value="1" checked>唱
<input type="checkbox" name="hobby" value="2" >跳
<input type="checkbox" name="hobby" value="3" >rap
<br />
<!-- -->
<input type="date" name="date">
<input type="datetime-local" name="datetime">
<br />
<!-- 文件提交: 需要在表單設置 enctype屬性 -->
<input type="file" name="files" >
<br />
<br />
<!-- 四大按鈕類型 -->
<input type="submit" value="submit 提交按鈕">
<input type="image" src="../day43%20%20%20HTML/imgs/1.jpg" value="圖片按鈕哦" title="圖片按鈕哦">
<input type="button" value="僅是按鈕">
<input type="reset">
<!-- 在Form表單中與submit具有相同的功能 -->
<button>提交數據按鈕</button>
</form>
</body>
</html>
排版標簽
p:段落標簽
div:沒有樣式的塊級標簽
代碼如下:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 塊級標簽不允許嵌套塊級標簽 -->
<!--錯誤示例:會形成兩個p標簽-->
<p>
123
<h1>1</h1>
</p>
<p align="left">
P內容0
</p>
<p align="center">
P內容1
</p>
<p align="right">
P內容2
</p>
<div align="left">
div內容3
</div>
<div align="center">
div內容4
</div>
<div align="right">
div內容5
</div>
<hr />
<center>123居中</center>
<!-- 將保留其中的所有空白字符(空格,換行符),原封不動的輸出結果-->
<pre>
鵝鵝鵝
作者：李白
曲項向天歌
白毛浮綠水
</pre>
</body>
</html>
其他標簽
select:下拉選擇框
textarea:文本域
label:文本標簽
代碼如下:👇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 單選 下拉選擇框
name屬性:提交的鍵
option---value:要提交的值
size : 一頁顯示多少條
selected : 選中狀態
-->
<select name="city" id="c1" size="3">
<option value="bj" selected>北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
<option value="cq">重慶</option>
<option value="cc">長春</option>
</select>
<!--多選下拉框
multiple : 表示可以多選
selected : 選中狀態
name屬性:提交的鍵
option---value:要提交的值
size : 一頁顯示多少條
-->
<select name="hobby" id="c2" size="3" multiple>
<option value="bj" selected>唱</option>
<option value="sh">跳</option>
<option value="tj" selected>rap</option>
<option value="cq">籃球</option>
<option value="cc">🏀</option>
</select>
<br />
<!--lable:
for屬性,點擊lable中的內容,讓for標示的id對應的元素獲得焦點
-->
<label for="cxk">姓名:</label>
<input type="text" name="alex" id="cxk" >
<!-- 文本域
value：提交給服務器的值。
rows="4"：指定文本區域的行數。
cols="20"：指定文本區域的列數。
readonly：只讀。
-->
<textarea name="ct" id="ct" cols="30" rows="10" readonly>
短時空間的
</textarea>
<!--表單的語義化 很少在使用了-->
<form >
<fieldset>
<legend>賬號信息</legend>
<lable for="e">姓名:</lable>
<label for="c122"></label>
<input type="text" id="c122" placeholder="請輸入內容">
</fieldset>
</form>
</body>
</html>