HTML銆丆SS鍜孞S

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML銆丆SS鍜孞S相关的知识，希望对你有一定的参考价值。

鏍囩锛?/p>

涓€銆乭tml

1銆亀eb娴佺▼涓殑HTML

HTML---->璧よ８瑁哥殑浜?/p>

CSS  ---->绌垮崕涓界殑琛ｆ湇

JS    ---->璁╀汉鍔ㄨ捣鏉?/p>

娴忚鍣ㄥ拰server绔箣闂寸殑閫氫俊鏈川涓婃槸瀛楃涓?娴忚鍣ㄥ皢瀛楃涓插鐞嗕负鍙鍖栫殑涓滆タ;

web妗嗘灦鐨勭瀹楁槸socket锛?/p>

鎶€鏈垎浜? id= 
#!/usr/bin/env python
# _*_ coding:utf-8 _*_
import socket
def handle_request(client):
    buf = client.recv(1024)
    client.send("HTTP /1.1 200 OK \r\n\r\n")
    client.send("<h1 style=鈥榗olor=red;鈥?gt;123456</h1>")

def main():
    sock = socket.socket()
    sock.bind((鈥?/span>localhost鈥?/span>,8004))
    sock.listen(5)
    while True:
        connection,address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == 鈥?/span>__main__鈥?/span>:
    main()
View Code
鎶€鏈垎浜? id= 
#!/usr/bin/env python
# _*_ coding:utf-8 _*_
import socket
def handle_request(client):
    buf = client.recv(1024)
    client.send("HTTP /1.1 200 OK \r\n\r\n")
    f = open(鈥?/span>s.html鈥?/span>)
    data = f.read()
    f.close()
    client.send(data)

def main():
    sock = socket.socket()
    sock.bind((鈥?/span>localhost鈥?/span>,8004))
    sock.listen(5)
    while True:
        connection,address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == 鈥?/span>__main__鈥?/span>:
    main()
浣跨敤html鏂囦欢

2銆乭tml鏂囨。鏍戜箣head淇℃伅

a銆乭ead澶?/p>

b銆乥ody

鍐呰鏍囩:鑷繁鏈夊灏戝崰澶氬皯

鍧楃骇鏍囩:鍗犳暣琛?/p>

鎶€鏈垎浜? id= 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">     <!--椤甸潰缂栫爜-->
    <!--<meta http-equiv="REFRESH" content="5"> -->   <!--鍒锋柊5s-->
   <!-- <meta http-equiv="refresh" content="5; url=http://www.baidu.com"> -->   <!--5绉掍箣鍚庤烦杞埌鍚庨潰鐨刄RL-->
    <title>My test</title>
    <!--<link rel="short icon" href="favicon.icon">-->     <!--CSS鍦ㄥ叾浠栨枃浠朵腑娓叉煋娓叉煋-->
</head>
<!--鍐呭祵鏍囩鍜屽潡绾ф爣绛?->
<body>
<h1 style="background-color: red">abdsdfdfdfdfdf</h1>   <!-- 涓€涓睘鎬у彲浠ヤ笉鍔?鍙?->
<a style="background-color: green;color: antiquewhite;">姹借溅涔嬪</a>    <!--澶氫釜灞炴€ч渶瑕佸姞;鍙凤紝鍙鏂囧瓧閮ㄥ垎娑傝壊-->
<p>1234</p>    <!--娈佃惤锛屽垎涓€娈碉紝鍙﹁捣涓€娈?->
<p>ABC<br/>abc</p>    <!--<br/>鎹㈣-->
<a href="http://www.taobao.com">Charles </a>    <!--瓒呴摼鎺?->
<a target="_blank" href="http://www.qq.com">鍝囧搱鍝?lt;/a>    <!--鍦ㄦ柊鐨則ab涓墦寮€閾炬帴-->
<a href="#a2">涔︾</a>    <!--璺宠浆鍒癐D涓?鐨勪綅缃?->
<div id="a1" style="height: 700px;">1</div>
<div id="a2" style="height: 500px;">2</div>    
</body>
</html>
View Code

 c銆佹爣绛?/p>

鎶€鏈垎浜? id= 
<select name="group">    <!--鎻愪氦鐨勬椂鍊欙紝璁﹙alue鐨勫€肩瓑浜巊roup锛屽湪from琛ㄥ崟鐨勬椂鍊欎娇鐢?->
    <option value="1">涓婃捣</option>    
    <option value="2">鍖椾含</option>
    <option value="3" selected="selected">骞垮窞</option>    <!--榛樿-->
select 鏍囩
鎶€鏈垎浜? id= 
<select>
    <optgroup label="娌冲寳鐪?/span>">    涓嶅彲閫?
        <option>鐭冲搴?lt;/option>
        <option>閭兏</option>
    </optgroup>
</select>
select鏍囩
鎶€鏈垎浜? id= 
<input type="checkbox" />    鍐呭祵鐨勶紝鍋氬閫夋
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked="checked"/>    榛樿
input鏍囩

鎶€鏈垎浜? src=

鎶€鏈垎浜? id= 
<input type="radio" name="gender"/>    #name鐩稿悓鐨勫閫夋涔嬮棿浜掓枼
<input type="radio" name="gender"/>
<input type="radio" />
<input type="radio" />
input
鎶€鏈垎浜? id= 
<input type="text" />
<input type="text" value="123"/>    <!--榛樿鍊?->
<input type="password" />
<input type="email" />    <!--蹇呴』涓篹mail鏍煎紡-->
input杈撳叆妗?/span>

鎶€鏈垎浜? src=

鎶€鏈垎浜? id= 
<input type="button" value="鎻愪氦" \>
<input type="submit" value="鎻愪氦" \>
input button

鎶€鏈垎浜? src=

鎶€鏈垎浜? id= 
<input type="file" />
input file涓婁紶鏂囦欢

鎶€鏈垎浜? src=

鎶€鏈垎浜? id= 
<textarea style="height: 50px;width: 20px;">xxxxx</textarea>
textarea

form琛ㄥ崟

鎶€鏈垎浜? id= 
<form action="http://127.0.0.1:8000/login">
    <p>鐢ㄦ埛鍚?<input type="text" name="user" />  </p>    鎻愪氦鍒板悗鍙扮殑閮ㄥ垎涓哄瓧鍏?
    <p>瀵嗙爜:<input type="password" name="pwd" />  </p>
    <p>
        <input type="radio" name="gender" value=1 />鐢?lt;br>
        <input type="radio" name="gender" value=1 />濂?lt;br>
    </p>
    <p>
        閮ㄩ棬:<select name="depart" >
        <option value="1">CEO</option>
        <option value="2">DBA</option>
    </select>
    </p>
    <input type="submit" value="鎻愪氦" />    <!--鍙湁涓簊ubmit鎵嶅彲浠ユ彁浜?->
</form>

</body>
</html>
form琛ㄥ崟

鎶€鏈垎浜? src=

鎶€鏈垎浜? id= 
<textarea name="multi" ></textarea>
<input type="checkbox" name="favor" value="v1" />
<input type="checkbox" name="favor" value="v2" />
<input type="checkbox" name="favor" value="v3" />
<input type="checkbox" name="favor" value="v4" />    <!--鎻愪氦鐨勬椂鍊檣鈥?/span>favor鈥?/span>:v1,v2,v3}-->
View Code

lable

鎶€鏈垎浜? id= 
<div id="t312">
    <h2>
        lable
    </h2>
    濮撳悕:
    <input id="name1" type="text">
    濠氬惁:
    <input id="marry" type="checkbox">
    <br>
</div>

<label for="name2" >
    濮撳悕:
    <input id="name2" type="text">
</label>
<label for="marry2" >
    濠氬惁:
    <input id="marry2" type="checkbox">
</label>
divhe lable瀹炵幇

鎶€鏈垎浜? src=

鍒楄〃:

鎶€鏈垎浜? id= 
<ul>
    <li>zbc</li>
    <li>ccc</li>
    <li>ggg</li>
</ul>
<ol>
    <li>zbc</li>
    <li>ccc</li>
    <li>ggg</li>
</ol>
<dl>
    <dt>娌冲寳鐪?lt;/dt>
    <dd>閭兏</dd>
    <dd>鐭冲搴?lt;/dd>
</dl>
鑷姩鍔犻粦鐐广€佸姞鏁板瓧浠ュ強鍐呭鍜屾爣棰?/span>

鎶€鏈垎浜? src=

table

鎶€鏈垎浜? id= 
<table border="1">    <!--border琛ㄧず杈规-->
    <tr>
        <td>1</td>    <!--tr琛ㄧず琛岋紝td琛ㄧず鍒?->
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>    <!--澶氳鍙互澶氬姞鍑犱釜tr-->
        <td colspan="2">2</td>
        <td rowspan="2">3</td>
    </tr>

</table>
View Code

鎶€鏈垎浜? src=

鎶€鏈垎浜? id= 
<table border="1">    <!--border琛ㄧず杈规-->
    <tr>
        <td>1</td>    <!--tr琛ㄧず琛岋紝td琛ㄧず鍒?->
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>    <!--澶氳鍙互澶氬姞鍑犱釜tr-->
        <td colspan="2">2</td>    <!--妯悜鍗犱袱涓牸-->
        <td rowspan="2">3</td>    <!--绾靛悜鍗犱袱涓牸-->
    </tr>
table鍚堝苟鍗曞厓鏍?/span>

 缁檛able娣诲姞琛ㄥご

鎶€鏈垎浜? id= 
<table border="1">    <!--border琛ㄧず杈规-->
    <thead>
        <tr>
            <th>鏍囬1</th>      <!--th琛ㄧず鍒?->
            <th>鏍囬2</th>
            <th>鏍囬3</th>
        </tr>
    </thead>
    <tbody>    <!--table鐨勫唴瀹?->
        <tr>
            <td>1</td>    <!--tr琛ㄧず琛岋紝td琛ㄧず鍒?->
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>    <!--澶氳鍙互澶氬姞鍑犱釜tr-->
            <td colspan="2">2</td>    <!--妯悜鍗犱袱涓牸-->
            <td rowspan="2">3</td>    <!--绾靛悜鍗犱袱涓牸-->
        </tr>
    </tbody>

</table>
View Code

 fieldset澧炲姞鐢绘

鎶€鏈垎浜? id= 
<fieldset>
    <legend>鐧诲綍</legend>
    <p>鐢ㄦ埛鍚?</p>
    <p>瀵嗙爜:</p>
</fieldset>
View Code

鎶€鏈垎浜? src=

浜屻€丆SS鐨勫熀鏈娇鐢?/p>

鎶€鏈垎浜? id= 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">     <!--椤甸潰缂栫爜-->
    <!--<meta http-equiv="REFRESH" content="5"> -->   <!--鍒锋柊5s-->
   <!-- <meta http-equiv="refresh" content="5; url=http://www.baidu.com"> -->   <!--5绉掍箣鍚庤烦杞埌鍚庨潰鐨刄RL-->
    <title>My test</title>
    <!--<link rel="short icon" href="favicon.icon">-->     <!--CSS鍦ㄥ叾浠栨枃浠朵腑娓叉煋娓叉煋-->
    <style>
        .re{
            color: red;    
        }
        span{
            font-size: 100px;
        }
        #name2{
            background-color: antiquewhite;
        }
        
    </style>
</head>
head
鎶€鏈垎浜? id= 
<div style="color: red">
    abcd
    </div>

<span class="re">wahaha</span>
<span id="name2" class="re">wwwww</span>
<div style="background-color: aquamarine;">asjhdgsjhgdhjash</div>
<div style="background-image: url(鈥?1111.jpg鈥?;height: 1000px;background-repeat: no-repeat">sasaasdasddasdas</div>

涔熷彲浠ュ皢css浠ｇ爜鏀惧埌.css鏂囦欢涓?/span>
body

鎶€鏈垎浜? src=

border璁剧疆杈规

鎶€鏈垎浜? id= 
<div style="border: 3px solid green;">
    hhhhhhhhhh
</div>
璁剧疆涓婁笅宸﹀彸杈规
鎶€鏈垎浜? id= 
<div style="border: 3px solid green;">
    hhhhhhhhhh
</div>
<span style="display: none"  id="name2" class="re">ahahaha</span>    <!--display涓簄one锛岀敤浜庡褰撳墠寮瑰嚭鐨勭獥鍙ｆ椂锛岀偣鍑诲叧闂椂娑堝け-->
View Code

cursor鏀瑰彉榧犳爣鏀惧湪瀵瑰簲浣嶇疆鐨勫浘鏍?/p>

鎶€鏈垎浜? id= 
<div style="border-left: 10px solid green;cursor: pointer">
    bbbbbsbsbsbsbsbxzxxxcccccccc
</div>
View Code

棰滆壊锛?/p>

鎶€鏈垎浜? id= 
    <style>
        .w_left{
            width: 20%;
            background-color: red;
            height: 500px;
            float: left;
        }
        .w_right{
            width: 80%;
            background-color: green;
            height:500px;
            float: left;
        }
    </style>


<div>
    <div class="w_left"></div>
    <div class="w_right"></div>
</div>
View Code

榛樿div鏍囩鏄潡绾ф爣绛?/p>

 涓夈€佸墠绔紑鍙戠殑蹇呰鎬?/p>

鍏堟帹鑽愪袱涓墠绔紑鍙戠殑缃戠珯:http://echarts.baidu.com/         http://www.hcharts.cn/,杩欎袱涓彲瑙嗗寲缃戠珯閮芥槸鐢ㄨ繃JS瀹炵幇鐨?

 

鍥涖€丆SS閫夋嫨鍣?/p>

1銆乨iv閫夋嫨鍣ㄣ€乮d閫夋嫨鍣ㄣ€乧lass绫婚€夋嫨鍣ㄤ互鍙婂叧鑱旈€夋嫨鍣?/p>

鎶€鏈垎浜? id= 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <style>
        div{        /*鏍囩閫夋嫨鍣?/span>*/
            font-size: 50px;
        }
        #i1{    /*id閫夋嫨鍣紝id鍜宒iv涓€鑸笉瑕佷娇鐢紝鐢╟lass*/
            background-color: red;
        }
        .c1{       /*class绫婚€夋嫨鍣?/span>*/
            color: cornflowerblue;
        }
        .p{
            background-color: pink;
            }
        .container li a{    /*鍏宠仈閫夋嫨鍣紝鎵惧埌container涓嬬殑li,li涓嬬殑a搴旂敤杩欎釜閫夋嫨鍣?/span>*/
                background-color: red;
            }

        .container .l .a{
                background-color: red;
            }
    </style>
</head>
<body>
    <title>Title</title>
    <div>This is  a test</div>
    <a id="i1">閫夋嫨鍣?lt;/a>    <!--html涓殑ID鏄笉鑳介噸澶嶇殑-->
    <a class="c1">aaa</a>
    <span class="c1">This two test</span>    <!--class鍙互閲嶅-->

    <div class="container">
        <ul>
            <li>
                <a>hhhhh</a>
            </li>
            <li class="p">1111鍟婂晩鍟?</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>
                <a class="l">
                    <span class="a">shshshhshshs</span>
                </a>
            </li>

        </ul>
    </div>
</body>
</html>
View Code

2銆佺粍鍚堥€夋嫨鍣ㄥ拰灞炴€ч€夋嫨鍣?/p>

鎶€鏈垎浜? id= 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 #il a .cc1,.c1 #il a .cc2{
            color: red;
            }
        .c1 #il a .cc1,.cc2{       /*缁勫悎閫夋嫨鍣紝閫楀彿琛ㄧず鎴栫殑鎰忔€濓紝涓婇潰鐨勯€夋嫨鍣ㄦ剰涔夌浉鍚岋紱*/
            color: cornflowerblue;
        }
        .con input[type="text"][name="username"]{     /*#棣栧厛浠巌nput鏍囩涓壘鍒皌ype涓簍ext鐨勬爣绛撅紝鐒跺悗鍐嶆壘鍒皀ame涓簎sername鐨勬爣绛?/span>*/
            border: 3px solid red;                       /*灞炴€ч€夋嫨鍣細鍦ㄥ啓琛ㄥ崟楠岃瘉鐨勬椂鍊?/span>*/
        }                                                   /*閫氳繃鑷畾涔夊睘鎬х洿鎺ユ壘鍒板搴旂殑鏍囩锛屾墍鏈夌殑鏍囩閮藉彲浠ヤ娇鐢ㄨ嚜瀹氫箟灞炴€?/span>*/
        .con input[alex="xxx"]{

        }
    </style>
</head>
<body>
    <div class="c1">
        <ul id="il">
            <a>
                <span class="cc1">
                    浣犲ソ锛侊紒锛侊紒锛?
                </span>
                <span class="cc2">
                    鏂扮殑涓€澶╃湡濂斤紒锛侊紒
                </span>
            </a>
        </ul>
    </div>
    <div class="con">
        <input alex="xxx" type="text" name="username" />
        <input type="text" />
        <input type="file" />
        <input type="password"/>
        <input type="button"/>
        <input type="checkbox"/>
        <input />
    </div>
</body>
</html>
View Code

 

浜斻€丣S涔婦om

1銆佹壘鍒扮壒瀹氱殑鏍囩锛屽苟淇敼鏍囩涓殑鍐呭

鎶€鏈垎浜? id= 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="l1">
        123
    </div>

    <script type="text/javascript" src="j1.js"></script>
    <script type="text/javascript">
//        var i = document.getElementById(鈥榣1鈥?            /*鏈夎祴鍊?/锛宨d鏈変竴涓?
//        var i = document.getElementsByName(鈥榣1鈥?;         // /*娌℃湁璧嬪€?/锛?*name鍙互鏈夊涓猧nnertext锛屽涓猧nnertext涓嶅彲浠ョ洿鎺ヨ祴鍊?/
//        i.innerText = "456";
 //       var i = document.getElementsByName(鈥榣1鈥?;
  //      for (var item in i){        //寰幆鍙互璧嬪€?
//            i[item].innerText = "456";
        var i=document.getElementsByTagName(鈥?/span>div鈥?/span>)        //缁欐墍鏈夌殑div鏍囩璧嬪€?/span>
        for (var item in i){
            i[item].innerText = "456"
        }
    </script>
</body>
</html>
document.getElementById銆乨ocument.getElementsByName鍜宒ocument.getElementsByTagName

2銆乯s搴旂敤css鏍峰紡

鎶€鏈垎浜? id= 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="l1">
        123
    </div>
    <script type="text/javascript" src="j1.js"></script>
    <script type="text/javascript">
       var i = document.getElementById(鈥?/span>l1鈥?/span>)   
       i.className = "red";
    </script>
</body>
</html>
View Code

3銆丏om浜嬩欢娉ㄥ唽涓庢墽琛?/p> 

娉ㄥ唽浜嬩欢:灏嗗嚱鏁颁笌浜嬩欢杩涜缁戝畾锛屾敞鍐屽埌鏍囩涓婃潵锛?/pre>

鎶€鏈垎浜? id=



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="l1">
        123
    </div>
    <input type="button" onclick="edit();" value="淇敼" />
    <script type="text/javascript" src="j1.js"></script>
    <script type="text/javascript">
  
        function edit(){
            alert(鈥?/span>123鈥?/span>);
        }
    </script>
</body>
</html>



alert


鎶€鏈垎浜? src=


鎶€鏈垎浜? id=