HTML表單及css樣式

、表單：

網頁僅有表單才能接收用戶輸入信息、并將信息提交到服務器進行處理。

表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分：表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

二、制作規范的表單

一系列的表單對象

提交按鈕:<input type="submit" value="提交" name="sum" />

</form>

注意：表單必須要有提交按鈕,作用:當點擊提交鈕時，會自動將表單中的數據提交到表單action屬性所指定的地址進行處理.

三、定義表單對象

1.使用input標簽定義表單對象

1.1 type的類型:

text(文本框)、password(密碼框)、checkbox(復選框)、radio(單選按鈕)

submit(提交按鈕)、reset(重置按鈕)、file(文件域)、button(按鈕)、

image(圖片域：具備提交按鈕)、hidden(隱藏域)、

date(日期控件:html5新增的)、number(數字調節器:html新增的)

2.使用select標簽定義下拉列表

....

</select>

3.使用textarea定義文本域:

<textarea cols="80" rows="8">請輸入內容</textarea>

四、常用表單對象的屬性

1.文本框:

2.設置單選框和復選框的默認選中

checked="checked"屬性

3.使用selected屬性設置下拉列表的選中項

來自網絡

五、css(Cascading style sheet):級聯（層疊）樣式表。

1.作用：修飾html標簽

2.優勢：

內容與表現分離；

網頁的表現統一，容易修改；

豐富的樣式，使得頁面布局更加靈活；

減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬；

運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄。

六、在html文檔添加css樣式的方法。

1.行內樣式：使用標簽的style屬性添加樣式

<標簽 style="一系列的樣式規則">

樣式規則的格式:樣式屬性:樣式屬性值;

2.內部樣式:使用style標簽定義樣式

一系的樣式選擇器(選擇器必需先定義，后引用)

</style>

注意：通常情況style標簽放在head標簽中。

2.1基本選擇器分類：類選擇器、Id選擇器、標簽選擇器

2.2使用類選擇器

定義類選擇器

.類選擇器名{一系列樣式}

引用類選擇器:使用標簽的class屬性引用類選擇器名稱

2.3使用Id選擇器

定義id選擇器

#id選擇器名{一系列樣式規則}

引用ID選擇器:使用標簽的ID屬性引用ID選擇器名稱

2.4定義標簽選擇器

標簽名稱{一系列樣式規則}

引用標簽選擇器:當使用該標簽時自動套動標簽樣式

3.外部樣式:

外部樣式是將一系列樣式選擇器定義在外部樣式文件（**.css）中

3.1在網頁使用link標簽引用外部樣式文件

七、樣式優先級（就近原則）

行內樣式>內部樣式>外部樣式

id選擇器>類選擇器>標簽選擇器

八、高級選擇器(復合選擇器)

1.層選選擇器

1.1后代選擇器

定義后代選擇器

選擇器1 選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在層次關系

1.2子選擇器

定義子選擇器

選擇器1>選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在父子關系

1.3相鄰兄弟選擇器

定義相鄰兄弟選擇器

選擇器1+選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰的

1.4通用相鄰兄弟選擇器

定義通用相鄰兄弟選擇器

選擇器1~選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰之后的所有兄弟

2.交集選擇器

定義交集選擇器

標簽選擇器類選擇器|id選擇器

使用：使用標簽的同時還引用類或者id選擇器

3.并集選擇器

定義并集選擇器

選擇器1,選擇器2

使用：使用選擇器1 或者選擇器2 都行

九、span標簽

文本標簽，由內容決定自身大小。

例

創建帶有 4 個選項的選擇列表：

<option value="volvo">Volvo</option>

<option value="mercedes">Mercedes</option>

</select>

瀏覽器支持

所有主流瀏覽器都支持 <select> 標簽。

標簽定義及使用說明

<select> 元素用來創建下拉列表。

<select> 元素中的 <option> 標簽定義了列表中的可用選項。

提示和注釋

提示：<select> 元素是一種表單控件，可用于在表單中接受用戶輸入。

HTML 4.01 與 HTML5之間的差異

HTML5 增加了一些新的屬性。

屬性

New：HTML5 中的新屬性。

屬性	值	描述
autofocusNew	autofocus	規定在頁面加載時下拉列表自動獲得焦點。
disabled	disabled	當該屬性為 true 時，會禁用下拉列表。
formNew	form_id	定義 select 字段所屬的一個或多個表單。
multiple	multiple	當該屬性為 true 時，可選擇多個選項。
name	name	定義下拉列表的名稱。
requiredNew	required	規定用戶在提交表單前必須選擇一個下拉列表中的選項。
size	number	規定下拉列表中可見選項的數目。

全局屬性

<select> 標簽支持 HTML 的全局屬性。

事件屬性

<select> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML及CSS選擇器

一、html基本結構
二、html標簽

1、標題標簽
2、a標簽
3、img標簽
4、div和span標簽
5、列表標簽
6、表格標簽
7、form表單
8、select下拉框標簽
9、textarea標簽

三、CSS

1、css樣式引入方式
2、標簽嵌套
3、css選擇器

一、html基本結構

html是一種超文本標記語言，進行網頁頁面的文本編輯
html注釋寫法：

基本結構如下：

<!DOCTYPE html>                <!--文檔聲明-->
<html 	lang="en">             <!--lang="en"表示語言-->
<head>                         <!--頭部信息：網站的配置信息-->
	<meta charset="UTF-8"> 	   <!--解碼方式-->
	<title>我是標題</title>	   <!--網站標題-->
</head>
<body>
</body> 					   <!--body體：網站顯示內容-->
</html>

link圖標：
標題圖標：
寫法：<link rel=“icon” href=“圖片路徑”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="icon" href="timg.jpeg">
</head>
<body>

</body>
</html>

二、html標簽

標簽寫法分類：
1、全封閉標簽，如<h1>xxx</h1>
標簽屬性：<h1 xx=“ss”>xxx</h1> xx:屬性名 ss:屬性值
2、自封閉標簽：<meta charset=“UTF-8”>

1、標題標簽

<h1></h1>-<h6></h6>：表示一級標題到六級標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
公司
<b>Asir</b>     <!--加粗-->
<s>Bsir</s>     <!--加劃線-->


<h1>小王</h1>
<h2>小李</h2>
<h3>小趙</h3>
<h4>小<br>胡</h4> <!--<br>換行-->
<hr>             <!--<hr>加分割線-->
<h5>小周</h5>
<h6>小李</h6>
</body>
</html>

頁面效果：

2、a標簽

跳轉對應網址的頁面
未訪問之前是藍色字體，訪問后變紫色

# 要a標簽的效果，但不刷新或跳轉頁面：
<a href="#">xxx</a>
<a href=“javascript：void(0);”>xxx</a>

錨點：
頁面內容進行跳轉
標簽設置id屬性=值(xx),a標簽href屬性的值寫法href=’#xx’,點擊這個a標簽就能跳轉到id屬性為xx的那個標簽所在位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<div id="top">頂部位置</div>  <!--設置錨點-->
<a>公司</a>
<a href="">potal</a>
<a href="http://www.baidu.com" target="_blank">百度</a>  <!--_blank表示在新標簽頁打開-->
<a href="#">potal</a>
<a href="javascript：void(0);">potal</a>
<a href="#top">回到頂部</a>  <!--返回錨點-->
</body>
</html>

頁面效果：

可通過第二個按鈕跳轉到百度：

3、img標簽

img標簽：頁面插入圖片
src屬性：圖片路徑必須寫
alt屬性：圖片加載失敗或者正在加載時提示的內容
title屬性：鼠標懸浮時顯示的內容，不是img標簽獨有的
width：設置圖片寬度（建議用css設置）
height：設置圖片高度（建議css設置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1319369445,160835837&fm=26&gp=0.jpg" alt="圖片未成功加載" title="清新辦公" width="300" height="500">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1941575090,3819526635&fm=26&gp=0.jpg" alt="圖片未成功加載" title="未聞花名">
<img src="timg.jpeg" alt="圖片未成功加載" title="未聞花名2" width="1000" height="500">
</body>
</html>

頁面效果：

4、div和span標簽

沒有任何文本修飾效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<span>小王</span>
<p>小李</p>
<span>小文</span>
<div>小林</div>
</body>
</html>

頁面效果：

擴展：標簽分類
塊級標簽(行外標簽)：獨占一行，h1-h6、p、br、hr、div、ul、li
塊級標簽可以包含內聯標簽，以及某些塊級標簽
內聯標簽(行內標簽)：不獨占一行，img/a/span，只能包含內聯標簽，不能包含塊級標簽

5、列表標簽

1）ul標簽：
寫法：

<ul type="none">
	<li>內容1</li>
	<li>內容2</li>
	......
<ul>

2）ol標簽
寫法：

<ol type="指定標注種類" start="指定標注起始值">
	<li>內容1</li>
	<li>內容2</li>
	......
</ol>

3）dl標簽

<dl>
	<dt>無空位內容</dt>
	<dd>有空位內容<dd>
	......
</dl>

頁面效果：

6、表格標簽

可以在網頁中生成表格
寫法：

<table border="表框粗細" cellpadding="表格大小" cellspacing="表線寬度">
	<thead>  <!--表頭信息-->
		<tr>
			<th>表頭1</th>
			<th>表頭2</th>
			...
		</tr>
	<thead>
	<tbody>  <!--body-->
		<tr>
			<td>內容1</td>
			<td>內容2</td>
			...
		</tr>
	</tbody>
</table>

colspan：橫行合并
rowspan：縱列合并
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="8">
    <thead>    <!--表頭信息-->
        <tr>
            <th>名稱</th>
            <th>年齡</th>
            <th>愛好</th>
        </tr>
    </thead>
    <tbody>    <!--body-->
        <tr>
            <td>小王</td>
            <td>18</td>
            <td>籃球</td>
        </tr>
        <tr>
            <td rowspan="2">小李</td>
            <td>20</td>
            <td>游泳</td>
        </tr>
        <tr>
            <td colspan="2">小王</td>
        </tr>
    </tbody>
</table>
</body>
</html>

頁面效果：

7、form表單

<form action="http://127.0.0.1:8001">
</form>

action屬性：指定提交路徑，提交到哪里去
form表單標簽會將嵌套在form標簽里面的輸入框的數據全部提交到指定路徑

input標簽輸入框：
input標簽，如果要提交數據，一定要寫name屬性

<input type=“text”> 普通文本輸入框
<input type=“password”> 密文輸入框
<input type=“submit” value=“登陸”> 提交按鈕觸發form表單提交數據動作
<input type=“reset”> 重置按鈕清空輸入內容
<input type=“button” value=“注冊”> 不會觸發form表單提交數據的操作
<input type=“date”> 時間日期輸入框
<input type=“file”> 文件選擇框
<input type=“number”> 純數字輸入框

單選框：
<input type=“redio”>
多選框：
<input type=“checkbox”>

單選框和多選框請務必加name屬性和value默認值
單選和多選value默認值可將存儲的數據變短

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
<form action="http://127.0.0.1:8001">
    <div>
        <h1>歡迎來到xxx公司</h1>
        用戶名：<input type="text" name="username">
        <br>
        密碼：<input type="password" name="password">
        <br>
        性別：
        <input type="radio" name="sex" value="0">女
        <input type="radio" name="sex" value="1">男
        <br>
        愛好：
        <input type="checkbox" name="hobby" value="1">籃球
        <input type="checkbox" name="hobby" value="2">足球
        <input type="checkbox" name="hobby" value="3">乒乓球
        <br>
        <input type="reset">
        <br>
        <hr>
        數字：
        <input type="number">
        <br>
        <input type="date">
        <br>
        <input type="file">
        <br>
        <input type="submit" value="點擊確認">

    </div>
</form>
</body>
</html>

頁面效果：

8、select下拉框標簽

<select name="屬性">
	<option value="默認值">
</select>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
選擇性別：
<select name="sex">
    <option value="0">男</option>
    <option value="1">女</option>
</select>
<br>
喜歡的明星：
<select name="star" multiple>  <!--允許多選-->
    <option value="1">明星1</option>
    <option value="2">明星2</option>
    <option value="3">明星3</option>
</select>
</body>
</html>

頁面效果：

9、textarea標簽

多行文本輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
<span>請輸入內容：</span>
<br>
<textarea name="message" cols="30" rows="10"></textarea>
</body>
</html>

頁面效果：

三、CSS

1、css樣式引入方式

第一種：
直接在頭部添加<style>引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        span{
            width:100px;
            height:100px;
            background-color:navajowhite;
        }
        div{
            width:100px;
            height:50px;
            background-color:red;
        }
    </style>
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>

頁面效果：

第二種：
外部文件引入
<link rel=“stylesheet” href=“css文件路徑”>
html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>

css文件：

span{
    width:100px;
    height:100px;
    background-color:navajowhite;
}
div{
    width:100px;
    height:50px;
    background-color:red;
}

頁面效果：

第三種：
內聯樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div style="background-color:red;weight:100px;height:100px">hello</div>
<span style="background-color:wheat">How are you?</span>
</body>
</html>

頁面效果：

塊級標簽能夠設置高度寬度，能夠嵌套某些塊級標簽和內聯標簽，p不能嵌套塊級標簽，也不能嵌套p標簽

內聯標簽不能設置高度寬度，它的高度寬度由內容來決定，只能嵌套內聯標簽

2、標簽嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<div>
    <span>hello</span>
</div>
<p>
    <p>how old are you?</p>
</p>
</body>
</html>

頁面效果：

3、css選擇器

元素選擇器：
標簽名稱{css屬性:值}
id選擇器：
html寫標簽時：

<div id="d1">內容</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1{
            width:100px;
            height:100px;
            background-color:red
        }
        #d2{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1">你好啊</div>
<span id="d2">最近還好嗎</span>
</body>
</html>

頁面效果：

3）類選擇器
class后面跟類，表示一類，可統一改渲染效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        .c1{
            width:100px;
            height:100px;
            background-color:red
        }
    </style>
</head>
<body>
<div id="d1" class="c1">你好啊</div>
<span id="d2" class="c1">最近還好嗎</span>
</body>
</html>

頁面效果：

4）屬性選擇器
可自定義屬性選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        [ss]{
            width:100px;
            height:100px;
            background-color:red
        }
        [ss="dd"]{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">你好啊</div>
<span id="d2" class="c2" ss="dd">最近還好嗎</span>
</body>
</html>

頁面效果：

后代選擇器
加>為子代選擇器，只渲染子代，不加為后代選擇器，子代及所有后代皆渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1 > span{
            width:100px;
            height:100px;
            background-color:red
        }
        .c2 .c4{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
    <span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
    <span class="c4">how old are you?</span>
</div>
</body>
</html>

頁面效果：

6）組合選擇器
后代選擇器用逗號組合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1 span,#d2 span{
            width:100px;
            height:100px;
            background-color:red
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
    <span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
    <span class="c4">how old are you?</span>
</div>
</body>
</html>

頁面效果：

建議收藏，不然刷著刷著就可能找不到了。

有什么前端的問題歡迎私信我~期待你的到來。

學習是一個艱苦的過程，當然如果能把技術學成，最后也一定可以獲得高薪工作。掌握一個好的學習方法，跟對一個學習的人非常重要。今后要是大家有啥問題，可以隨時來問我，能幫助別人學習解決問題，對于自己也是一個提升的過程。自己整理了一份2020最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

在線咨詢

上一篇：磁控濺射汽車膜生產工藝-太陽膜的最尖端工藝？
下一篇：被坑過后才知道HttpMessageConverte

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML表單及css樣式

TML及CSS選擇器

一、html基本結構

二、html標簽

1、標題標簽

2、a標簽

3、img標簽

4、div和span標簽

5、列表標簽

6、表格標簽

7、form表單

8、select下拉框標簽

9、textarea標簽

三、CSS

1、css樣式引入方式

2、標簽嵌套

3、css選擇器

有什么前端的問題歡迎私信我~期待你的到來。

您的項目需求