HTML+CSS(次日)

時間 2019-12-09

標籤 html+css html css 次日欄目 CSS 简体版

原文原文鏈接

表格（如今已經不使用表格進行佈局，多用來處理和顯示錶格數據）

基本語法（表格中沒有列的概念，只有行tr和單元格td）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <table width="500" border="1">
            <tr>
                <td>姓名</td>
                <td>性別</td>
                <td>年齡</td>
                <td>電話</td>
            </tr>
            <tr>
                <td>小王</td>
                <td>女</td>
                <td>11</td>
                <td>120</td>
            </tr>
    </table>
    
</body>
</html>

<table></table>中只能嵌套<tr></tr>
<tr></tr>中只能嵌套<td></td>
<td></td>只是一個盒子能夠嵌套任何元素
表格屬性
1. align:設置整個表格在網頁中水平對齊方式（center,left,right）
  1. 若是給table設置align表示給整個表格設置在網頁中的水平對齊方式
  2. 若是給tr設置align表示給該行的單元格內容設置在單元格內的水平對齊方式
  3. 若是給td設置align表示給該單元格內容設置在該單元格內的水平對齊方式
2. border:設置表格邊框（包括內邊框）
3. cellspacing:設置單元格和單元格邊框之間的距離
4. cellpadding:設置單元格內容和單元格邊框的距離
5. 三參爲0（通常咱們須要設置）border,cellspacing,cellpadding都爲0
表頭標籤
1. 表頭單元格通常是位於表格的第一行或者第一列，其文本加粗居中顯示
2. <th></th>替代<td></td>

表格標題

用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <!--cell-->
    <table width="500" border="1" align="center">
        <caption>我是表格標題</caption>
            <tr>
                <td>姓名</td>
                <td>性別</td>
                <td>年齡</td>
                <td>電話</td>
            </tr>
            <tr>
                <td>小王</td>

                <td>女</td>
                <td>11</td>
                <td>120</td>
            </tr>
    </table>
    
</body>
</html>

caption標籤只能用於table標籤內，並且每一個table標籤只能有一個caption

實現代碼

表格結構
1. 在使用表格進行佈局時，咱們通常將表格劃分爲表頭，主體和頁腳（頁腳兼容性有問題通常不使用）
2. <thead></thead>
3. <tbody></tbody>
4. 2,3的兩個標籤是劃分表格內容的，不包含表格標題
合併單元格
1. 跨行合併 rowspan
2. 跨列合併 colspan
3. 處理原則
  1. 先肯定跨行仍是跨列
  2. 先上後下，先左後右定位到單元格的位置
  3. 刪除的個數=合併的個數-1

表單（收集用戶信息）

在html中,一個表單控件是由三部分組成:表單控件，提示信息，表單域（該區域做爲一個總體信息提交到候臺）

input控件

<input />標籤爲單標籤,
type屬性爲最基本的屬性，值有不少用於指定不一樣的表單控件類型
其餘經常使用的屬性還有name,value,size(通常是由css來設置的),checked,maxlength
單行文本輸入框
1. type="text"
2. 設置默認值:value="北京"
密碼輸入框
1. type="password"

單選按鈕

type="radio"
設置checked屬性值爲checked,默認選中
單選按鈕以組爲單位，同一組內必須給他們設置相同的name,這樣才能夠多選一

例子

<tr>
                <td>性別</td>
                <td>
                    <input type="radio" name="sex" />男
                    <input type="radio" name="sex" />女
                    <input type="radio" name="sex" />人妖
                </td>
            </tr>

複選框

type="checkbox"
設置checked屬性值爲checked,默認選中

例子

<tr>
                <td>喜歡類型</td>
                <td>
                    <input type="checkbox" name="love">嫵媚
                    <input type="checkbox" name="love">氣質
                    <input type="checkbox" name="love">可愛
                </td>
            </tr>

按鈕

普通按鈕
1. type="button"
重置按鈕
1. type="reset"
提交按鈕
1. type="submit"

例子

<td>
                    <input type="button" value="註冊">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>

圖片形式的提交按鈕
1. type="image"
2. 設置圖片的路徑 src屬性
3. 例子
```
<input type="image" src="btn.png">
```

文件域

type="file"

例子

</tr>
                <tr>
                <td>
                    <input type="file">
                </td>
        </tr>

label標籤

label標籤是爲input標籤服務的
用於綁定一個表單元素，當點擊label標籤的時候，被綁定的表單元素就會得到焦點

例子

</tr>                
                <td>
                    <label>用戶名：<input type="text" ></label>
                    <hr/>
                    <label for="pass">
                        用戶名：<input type="text" id="name">
                        密碼：<input type="password" id="pass" />
                    </label>
                </td>
            </tr>

文本域（textarea控件）

text只能輸入一行文本
textarea能夠輸入多行文本
默認值不是經過value來設置
文本域的寬和高須要CSS設置

例子

<td>
                    <textarea name="文本輸入" cols="17" rows="7" >
                        不支持富文本
                    </textarea>
                </td>

下拉菜單
1. 語法格式
  <select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
  </select>css
2. <select></select>中至少包含一對兒<option></option>
3. 下拉菜單默認選中option中的第一項
4. 在option中定義selected="selected"時，當前項爲默認選中項
表單域
1. form標籤被用於定義表單域，建立一個表單，實現用戶信息的傳遞和收集
2. 基本語法
  <form action="url地址" method="提交方式" name="表單名稱">
  各類表單控件
  </form>html
3. action:用於指定接收處理表單數據的服務器程序的Url地址
4. method:設置表單數據的提交方式:get或者post
5. name:用於指定表單的名稱，來區分同一個頁面的多個表單
6. submit按鈕點擊就會將填寫的表單信息提交到指定的url地址，reset按鈕點擊就會將用戶填寫的信息清空

CSS(美化網頁)

引入css樣式表的位

內部樣式表

將css代碼集中寫在HTML的head標籤內,通常牢牢挨着</head>
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>瀏覽器

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        caption{
            color: skyblue;
        }
    </style>
</head>
<body>
    <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <caption >青春不常在，抓緊談戀愛</caption>
        <thead>
        </thead>
        <tbody>    
        </tbody>
    </table>    
</body>
</html>

外部樣式表

將一個或者多個以.css爲擴展名的外部樣式文件經過Link標籤連接到html文件中
語法格式
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>服務器
link是但標籤
link必須放在head標籤內

link標籤必須指定三個屬性

href:定義連接外部樣式表文件的Url,能夠是相對路徑也能夠是絕對路徑
rel:定義當前文檔和被連接文檔之間的關係，這裏須要值爲stylesheet
type:定義所連接文檔的類型這裏值爲text/css

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css" />
        
    </style>">
</head>
<body>
    <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <caption >青春不常在，抓緊談戀愛</caption>
        <thead>
        </thead>
        <tbody>    
        </tbody>
    </table>    
</body>
</html>

行內樣式

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
又稱爲內聯樣式,行內樣式,行間樣式,內嵌樣式

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <caption  style="color: pink; font-size: 18px;">青春不常在，抓緊談戀愛</caption>
        <thead>
        </thead>
        <tbody>    
        </tbody>
    </table>
    
</body>
</html>

總結

樣式表	優勢	缺點	使用狀況	控制範圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標籤（少）
內部樣式表	部分結構和樣式相分離	沒有完全分離	較多	控制一個頁面（中）
外部樣式表	徹底實現結構和樣式相分離	須要引入	最多，強烈推薦	控制整個站點（多）

CSS語法規則
1. 選擇器{屬性名1：屬性值；屬性2：屬性值；}

CSS基礎選擇器

標籤選擇器（元素選擇器）
1. 能夠將某一類標籤所有選擇出來
2. 不能差別化樣式
類選擇器
1. 語法規則:
  1. 給須要設置樣式的標籤添加Class屬性 class="類名"
  2. .類名{屬性名:屬性值;屬性名:屬性值;}
2. 類名命名遵循的基本規則
  1. 長名詞或者詞組使用中橫線來鏈接
  2. 不建議使用"_"來命名
    1. 瀏覽器兼容問題（好比_tips在IE6中是無效的）
    2. js變量命名通常使用_，用於區分
  3. 儘可能使用英文不使用中文和數字

多類名選擇器

一個標籤能夠設置多個類名
語法規則：class="類名1 類名2"
樣式顯示效果和HTML元素的類名前後是沒有關係的，受CSS樣式書寫的上下順序有關

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        .red{
            color: red
        }

        .font20{
            font-size: 18;
            color:blue;
        }
    
    </style>
</head>
<body>
    <div class="red font20">我是一個盒子</div>    
</body>
</html>

id選擇器

語法規則 #id名{屬性名：值1} <標籤名 id="id名"></標籤名>
id選擇器比如人的身份證，全國惟一，不能重複使用
類選擇器比如人的名字，能夠重複使用屢次

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        #hezi{
            color: red;
            font-size: 19;
        }
    </style>
</head>
<body>
    <div id="hezi">
        我是盒子
    </div>
</body>
</html>

通配符選擇器

語法規則 *{屬性1：屬性值1;屬性2:屬性值2}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        
    </style>
</head>
<body>
    
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。