一、Form表單標簽
<form action="" method=""></form>
表單就是用來將用戶的信息提交到服務器,服務器會將信息存儲或者根據信息查詢數據(增刪改查)。
表單中所有的內容都要寫在form標簽中。
<input type="text" value="哈哈哈哈" placeholder="請輸入用戶名">
Input文本輸入框,type類型為text-普通文本輸入框。
Value屬性:給文本輸入框添加默認值。
Placeholder屬性:文本框中提示性文本。
<input type="password" placeholder="請輸入密碼">
Input類型為password,以密碼的形式顯示
<input type="radio" name="xingbie" value="nan">男
如果實現單項選擇的話必須設置name屬性一致
Input類型為radio,單項選擇輸入。可以想象互斥的概念
<input type="checkbox" name="xihao" value="youyong">
Input類型為checkbox,check就是選擇的意思,box是盒子的意思。Checkbox我們可以翻譯為選擇框。它是一個多選選擇框輸入。
Name屬性即使設置為一致的,那么也不會單選,還是多選框。而且一般name屬性名字寫成一致的。
<p>提交:<input type="submit"></p>
<p>普通按鈕:<input type="button" value="我是普通按鈕"></p>
<p>重置:<input type="reset"></p>
Input三種類型的button
Submit:提交按鈕,將form表單提交到action對應的頁面中去
Reset:重置按鈕,將form中填寫的所有信息重置為默認值
Button:普通按鈕、它的功能可以自己去定義
<textarea name="text" id="text" cols="30" rows="10"></textarea>
Textarea:文本域標簽,通過cols和rows可以改變它的大小
<fieldset>
<legend>分組標題</legend>
<p><input type="date"></p>
<p><input type="color"></p>
<p><input type="file"></p>
</fieldset>
Fieldset:分組標簽。
Legend:設置分組標題標簽
二、HTML中的注釋
注釋的格式:<!-- -->
三、標簽的划分
標簽的划分分為三種:
第一種按照文檔流來划分。
第二種按照顯示內容來划分。
第三種按照封閉性來划分。
第一種按照文檔流來划分:分為塊級標簽和行級標簽
塊級元素特點:
-
獨占一行
-
可以設置寬高大小,以及邊距
-
寬度默認與瀏覽器一樣寬
行級元素特點:
-
不獨占行,可以在一行內顯示
-
不可以隨意設置寬高大小,寬高只與內容有關
-
行內元素一般只存放文本或者行內元素
第二種按照顯示內容來划分:容器級標簽和文本級標簽
容器及標簽特點:
可以放任何的標簽及文本,一般的容器級標簽都為塊級標簽。
文本級標簽特點:
一般只存放文本、圖片、a鏈接等等,一般都為行內級標簽。p標簽除外
第三種按照封閉性來划分:雙標簽和單標簽
雙標簽就是我們看到的成對存在的標簽,單標簽就是單獨一個標簽。
四、CSS基礎入門
CSS英文全拼:cascading style sheet 層疊樣式表。
在html中使用:要在head中寫style標簽,所有樣式放在style標簽中。
<style>
h1{
color: red; 設置文本顏色
font-size: 30px; 設置文本大小
background-color: yellow; 設置背景顏色
}
span{
color: blue;
font-weight: bold; 設置文本粗體
font-style: italic; 設置文本斜體
注意:凡是font開頭的想要設置默認的樣式則使用normal
text-decoration: underline; 設置文本下滑線,如果去除下滑線則用none這個屬性
}
li{
color: orange;
}
#fly{
color: blue;
font-size: 40px;
}
</style>
4.1標簽選擇器
上面代碼中h1、p、li、span都是標簽選擇器。只要在當前頁面中出現的h1、p、li、span標簽都會被修改樣式。
4.2 id選擇器
#fl:這是id選擇器,它選擇的標簽更專一,就是唯一的。Id不可以重復,在同一頁面中只允許有一個id名字。
Id的命名規則:只能有數字、字母、下划線組成。只能以字母開頭,並且id名字不可以和標簽重名。
4.3 類選擇器
.hong{
color: red;
}
<p class="hong xia">我們</p>
這是類選擇器,首先需要我們為標簽設置class名字。通過class寫類樣式。
1、Class在頁面中可以重復
2、一個class樣式可以同時為多個標簽提供使用
3、一個標簽可以設置多個類樣式
我們可以將公用的樣式抽取出來,作為公共類樣式使用。
4.4后代選擇器
.one ul li{
color: red;
font-size: 30px;
}
上面使用的就是后代選擇器,首先由名字為One的class找到后代ul然后再找到后代li。
后代選擇器中間使用的是 -- 空格!!
4.4交集選擇器
div ul li.first{
text-decoration: underline;
}
li.first它就是交集選擇器,他就是在一起,沒有空格也沒有任何符號。
交集選擇器選擇方式:它既符合是li標簽,又符合是.First類,取交集。
一般交集只寫兩個。
4.5並集選擇器
.first,.second{
text-decoration: underline;
}
這是並集選擇器,並集選擇器是使用逗號分隔開。
最好不要經常使用它,應為效率不高
4.6通用選擇器
*{} :它就是通用選擇器,所有的標簽都可以用它的樣式
4.6子代選擇器
div>p:使用
“
>
”
來寫子代選擇器,它只能選擇div的子代,不能選擇子代的子代
4.6序選擇器
div ul li p:first-child 這個是選擇的第一個p標簽
div ul li p:last-child 這個是選擇的最后一個p標簽
4.6偽類選擇器 l love l hate
a:hover 鼠標懸停時候會觸發使用的選擇器
a:link 未訪問過得鏈接偽類選擇器
a:visited 訪問過得鏈接偽類選擇器
a:active 當前選中的鏈接偽類選擇器