Form標簽+Css基礎


 

一、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中的注釋

注釋的格式:<!-- -->

三、標簽的划分

標簽的划分分為三種:
第一種按照文檔流來划分。
第二種按照顯示內容來划分。
第三種按照封閉性來划分。
第一種按照文檔流來划分:分為塊級標簽和行級標簽
塊級元素特點:
  1. 獨占一行
  2. 可以設置寬高大小,以及邊距
  3. 寬度默認與瀏覽器一樣寬
行級元素特點:
  1. 不獨占行,可以在一行內顯示
  2. 不可以隨意設置寬高大小,寬高只與內容有關
  3. 行內元素一般只存放文本或者行內元素
第二種按照顯示內容來划分:容器級標簽和文本級標簽
容器及標簽特點:
可以放任何的標簽及文本,一般的容器級標簽都為塊級標簽。
文本級標簽特點:
一般只存放文本、圖片、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  當前選中的鏈接偽類選擇器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM