html和css

時間 2019-11-19

標籤 html css 欄目 HTML 简体版

原文原文鏈接

1、HTML基礎

1.1 form

功能：用於向服務器傳輸數據，實現用戶與服務器的交互，css

表單屬性：html

accept-charset：規定在被提交表單中使用的字符集
action：規定提交表單地址
autocomp lete：規定瀏覽器自動完成表單（默認開啓）
encype：規定被提交數據的編碼（默認：url-encoded）。若是是上傳文件須要將enctype="multipart/form-data"
method：規定在提交表單時所用的HTTP方法（默認GET）
name：規定識別表單的名稱
novalidate：規定瀏覽器不能驗證表單
target：規定action屬性中地址的目標

1.2 input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="" method="">
    <div>
        用戶名<input type="text" name="sex" value="123" hidden>
    </div>
    <div>
        密碼:<input type="password" name="pwd">
    </div>
    <div>
        性別:<input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1" checked>女
    </div>
    <div>
        愛好：<input type="checkbox" name="hobbies" value="basketball" checked>籃球
             <input type="checkbox" name="hobbies" value="sing">唱
             <input type="checkbox" name="hobbies" value="dance">跳
             <input type="checkbox" name="hobbies" value="rap">說唱
    </div>
    <div>
        頭像：<input type="image" name="asdasf">
    </div>
    <input type="submit" value="登陸">
    <input type="reset" value="重置">
    <input type="button" value="按鈕">

</form>

</body>
</html>

input屬性：瀏覽器

type：編輯輸入屬性
name：表單提交時的鍵
value：表單提交時對應的值
      type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
      type="text","password","hidden"時，爲輸入框的初始值
      type="checkbox", "radio", "file"，爲輸入相關聯的值
checked：radio與checkbox默認被選中的項
readonly：text和password設置成只讀
disabled：全部input都適用

type屬性：服務器

text：單行輸入文本
password：密碼輸入框
date：日期輸入框
checkbox：多選框
radio：單選框
submit：提交按鈕
rest：重置按鈕
button：普通按鈕
hidden：隱藏輸入框
file：文本框選擇

1.3 select標籤

<div>
        <select name="city" id="city" multiple>
            <option value="1" selected="selected">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">廣州</option>
            <option value="4">深圳</option>
        </select>
    </div>

屬性說明：字體

multiple：布爾屬性，設置後爲多選，不然默認單選
disable：禁用
selected：默認選中
value：定義提交時的選項值

1.4 label標籤

定義：該標籤爲input元素定義標註編碼

說明：label元素不會向用戶呈現任何特殊效果；label標籤的for屬性值應當與相關元素的id屬性值相同。url

<label for="username">用戶名</label>
    <input type="text" id="username" name="username">

1.5 text area多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默認內容</textarea>

屬性說明：spa

name：名稱
rows：行數
cols：列數
disabled：禁用

2、CSS

2.1 CSS介紹

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。rest

每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。code

2.2 CSS的引入方式

行內樣式：在標記的style屬性中設定CSS樣式，不適合大規模使用。

<p style="color":red>lalala</p>

內部樣式：嵌入式是將CSS樣式寫在網頁的head標籤對中的style標籤對中。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{ background-color: aqua}
    </style>
</head>

外部樣式：將CSS寫在單獨文件夾中，使用時引入，推薦使用。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

2.3 選擇器

2.3.1 基本選擇器：

元素選擇器、ID選擇器、類選擇器。

id選擇器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{
            color: blue;
        }
    </style>
</head>
<body>

<div id="a">asadfdhfj</div>
<div>asfsgrythsfvherte</div>

</body>

類選擇器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            color:rebeccapurple;
        }
        .a{
            font-size: 35px;
        }
    </style>
</head>
<body>

<div class="p a">
    lalala
</div>
<div class="a">hahah</div>

</body>

2.3.2組合選擇器

後代選擇器、兒子選擇器、毗鄰選擇器、弟弟選擇器

後代選擇器：(後代都被選擇)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div div{
            color:darkred;
        }
    </style>
</head>
<body>
<div id="b" class="c">lalala
    <div>大兒子</div>
    <div class="a">二兒子
        <div>孫子</div>
    </div>
</div>
</body>

兒子選擇器：(只選兒子，屬性需爲不可繼承屬性)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a>div{
            background-image: url("1.jpg");
        }
    </style>
</head>
<body>
    <div class="a">爸爸
        <div class="b">兒子
            <div class="c">孫子
            </div>
        </div>
    </div>

</body>

弟弟選擇器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span~.a{color: dodgerblue}
    </style>
</head>
<body>
<div>
    <span>span</span>
    <h1 class="a">h1</h1>
    <h2 class="a">h2</h2>
    <p>p</p>
    <h4 class="a">h4</h4>
</div>
<p class="a">lalala</p>
</body>

毗鄰選擇器：(選擇相鄰位置)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div+p{color:grey;}p
    </style>
</head>
<body>
<div>lalala</div>
<p>hahahaa</p>
<p>nanana</p>
</body>

2.3.3 屬性選擇器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>div[name="123"]{color: darkturquoise;}</style>
</head>
<body>
<div name="123"> div</div>
<div name="455">我是div</div>
<div>沒有屬性的div</div>
</body>

2.3.4分組與嵌套

分組：

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。

div, p { color: red; }

嵌套：

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p { color: red; }

2.3.5 僞類選擇器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{color:yellow;}   未訪問連接
        a:hover{color:blue;}    鼠標移動到連接上
        a:active{color:orangered;}   點擊連接
    </style>
</head>
<body>
<a href="味蕾選擇器.html">lalala</a>
</body>

2.3.6 僞元素選擇器

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

    <script>
        p:first-letter
    </script>

</head>
<body>
<p>lalala<span style="color: darkkhaki">hahaha</span>llueluelue</p>

</body>

除了first-letter，還能夠用before、after。before和after多用於清除浮動。