首頁 > 開發者 > 網站開發

day12HTML+css基礎

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   密碼   標籤   str   article   長度   hello   user   css   

http://www.cnblogs.com/yuanchenqi/articles/6835654.html  html

http://www.cnblogs.com/yuanchenqi/articles/6856399.html  css

ul、ol、table

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<dl>
    <dt>河北省</dt>
    <dd>保定</dd>
    <dd>石家莊</dd>
</dl>
<table  cellpadding="10px" cellspacing="2px" border="1">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
    </tr>

     <tr>
        <thcolspan="2">111</th>

        <throwspan="2">111</th>
    </tr>

     <tr>
        <th>222</th>
        <th>222</th>

    </tr>
</table>


form表單

<form      action=’’  method=’’>method預設get

屬性：

1.action：放置請求路徑

2.method:

get請求

     要求標頭，資料放在地址欄，資料長度有限制

 

post請求

     有要求標頭，資料放在請求體

標籤input （text、passwords、checkbox、radio、button、submit）

type=’text’文字框

type=’password’密文

type=’checkbox’多選框

type=’radio’單選框

<p>姓名：<inputtype="text" name="username"></p>
<p>密碼：<inputtype="passwords" name="pwd"></p>
<p>愛好：<inputtype="checkbox" name="hobby" value="readbook">看書&nbsp;
        <inputtype="checkbox" name="bobby" value="playgames">玩遊戲
        <inputtype="checkbox" name="hobby" value="swamming">遊泳
</p>
<p>性別：<inputtype="radio" checked=”checked”>男  預設選中
        <inputtype="radio">女
</p>

ps：通過組成索引值對發送給服務端

只要向服務端發送資料，就要有name和values屬性

{‘username’：‘text值’，‘pwd’：‘密碼’，‘hobby’：[values的值，]，‘sex’：values值}

 

submit

<input type="submit"value="提交">點擊提交

                 values只是一個文本值，提交按鈕的按鈕文字

<input type="button"value="提交button">沒有任何事件

 

 
   


<input type="file" value="上傳檔案">

<input type="reset"value="重設"> 清空

select標籤下拉式功能表

<select name="province" id="" size=3 multiple="multiple">
    <optionvalue="hebei">河北省</option>
    <optionvalue="shandong">山東省</option>
    <optionvalue="henan">河南省</option>
    <optionvalue="yunnan">雲南省</option>
    <optionvalue="guangxi">廣西省</option>
</select>

屬性

size顯示多少個

multiple可以多選

 

 

 

 

 

 

 

 

<select name="province" id="" size=3 multiple="multiple">
    <optionvalue="hebei">河北省</option>
    <optionvalue="shandong" selected="selected">山東省</option>
    <optionvalue="henan">河南省</option>
    <optionvalue="yunnan">雲南省</option>
    <optionvalue="guangxi">廣西省</option>
</select>

textare標籤、label標籤

<p>
    <labelfor=""> 簡介</label><br>
    <textareaname="textarea" id="jianjie" cols="30" rows="10">

    </textarea>
</p>
<p>
    <inputtype="submit" value="提交">
</p>

id是唯一的

label的for屬性寫其他的id進行綁定，點擊label就直接定位到其他標籤

‘‘‘

fieldset標籤

<fieldset>

    <legend>登入吧</legend>

    <inputtype="text">

</fieldset>

 


 

css

對html元素進行渲染布局

  1. 尋找標籤元素
  2. 操作標籤
方法一、行內式引入方式

<!--css-->
<!--行內式引入方式-->
<!--<p style="color: red;font-size:24px">hello</p>-->

方法二、寫入head標籤內 
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        p{
            color: red;
            font-size: 24px;
        }
    </style>
</head>

對所有p標籤進行格式化，只要是p標籤就會變成上面的格式

對單獨p進行格式化，p需要有id屬性

#id值

<style>
    #p2{
        color: red;
        font-size: 24px;
    }
</style>
對一組標籤操作，class屬性

class名字可以重複

<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        /*#p2{*/
            /*color: red;*/
            /*font-size: 24px;*/
        /*}*/
        .new{
            color: red;
        }
    </style>
</head>

 

 

<p id="p2">hello</p>

    <p id="p1" class="new">hello</p>

    <p class="new">hello</p>

    <div>hello</div>

    <h2>hello</h2>

 

 

ps：優先順序，id》class》標籤

 

方法三，通過檔案引入 
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <!--<style>-->
        <!--/*p{*/-->
            <!--/*color: red;*/-->
        <!--/*}*/-->
        <!--/*#p2{*/-->
            <!--/*color: red;*/-->
            <!--/*font-size: 24px;*/-->
        <!--/*}*/-->
        <!--/*.new{*/-->
            <!--/*color: red;*/-->
        <!--/*}*/-->
    <!--</style>-->
    <link rel="stylesheet" href="css">
</head>

 

day12HTML+css基礎

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More