前端html表單與css樣式


1,from標簽

  from標簽的功能是向服務器傳輸數據,實現用戶交互的重要標簽。

from標簽的具體使用:

  input標簽使用示例:

 

 <from action="" method="post">
        <p>姓名:<input type="text" name="names"> </p>

        <p>用戶名:<input type="text"  name="username"> </p>
        <p>密碼:<input type="password" name="pwd"> </p>
        <p>愛好:騎車<input type="checkbox"  name="hobby1" checked="checked">
                 游戲<input type="checkbox" name="hobby2">
                 電影<input type="checkbox" name="hobby3">
        </p>
        <p><input type="radio" name="sex"><input type="radio" name="sex"></p>

第一句:action標簽的意思就是表單提交到服務器的鏈接地址,method標簽,表明表單的提交方式為post響應格式

第二句:指定一個姓名表格input標簽,type表明該欄使用的格式為指定的“text”文本格式,name指定該欄傳遞的值為“username“

第五句:checkbox標簽的意思是多選框。

最后一句:type類型為單選框,其后的name值為單選項值,指定為同樣值。

 

多級菜單標簽:

select標簽操作

   <select name="province" size="2" multiple="">
            <optgroup label="china">
                    <option value="hebei">河北省</option>
                    <option value="henan">河南省</option>
                    <option value="shanxi" selected="selected">山西省</option>
                    <option value="shandong">山東省</option>
            </optgroup>
        </select>

name指定菜單的值,size指定可以默認顯示幾行數值,mutiple:是否可以復選

optgroup是菜單中的分組,聯合label標簽指定分組名

option顯示每級菜單的值,value指定傳輸值

selected標簽在option標簽中使用,顯示此菜單項是否為多級菜單默認顯示的值

以下是網頁示例:

提交表單按鈕

<p><input type="submit" name="submit"> </p>

同樣使用input標簽,使用name指定值。

提交表單按鈕在表單最后使用,提交表單以上內容。

 

css層疊樣式表

css規則有兩個主要部分構成:選擇器,一條或多條聲明

示例:

<style>
        p{color: red;
        font-size: 20px;
        }
        div{
            color: green;}
    </style>

使用方式為:標簽名加上大括號,在大括號內添加屬性值   屬性:值

 

 

css樣式的四種引入方式

行內式:

<h1 style="color: red;font-size: 20px" >用戶注冊</h1>

行內式可以針對一行內容進行樣式的設置,優點是可以針對性的進行顯示一行樣式,缺點是無法進行批量改變。

嵌入式:

嵌入式是在head網頁頭中輸入樣式,可以對便簽進行批量操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{color: red;
        font-size: 20px;
        }
        div{
            color: green;}
    </style>
</head>

此段示例內容針對標簽p進行樣式改變。

鏈接式:

可以把css樣式內容寫入到文件中,然后導入到html文件中使用,鏈接式的優點是一個樣式可以導入到多個網頁文件中,批量使用

<link rel="stylesheet" href="csshtml.css">

導入式:(了解)

將一個獨立的.css文件引入HTML文件中,導入式使用CSS規則引入外部CSS文件,<style>標記也是寫在<head>標記中,使用的語法如下:

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css文件的路徑
 
</style> 

導入式的缺點是網頁在打開比較慢時,網頁內容不會顯示樣式,直接顯示網頁內容原始樣式,且導入式是最后才打開網頁樣式。

 


免責聲明!

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



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