form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單的例子-注冊(cè)</title>
<style>
.a{
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<p class="a">
用戶名：
<input type="text" name="username" size="30" maxlength="20" placeholder="用戶名由6~20個(gè)字符構(gòu)成" required> <!--readonly:只讀不能改-->
</p>
<p class="b">
密碼：
<input type="password" name="password" required>
</p>
<p>
確認(rèn)密碼：
<input type="password" name="repassword" required>
</p>
<p>
性別：
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="2">女
</p>
<p>
愛好：
<input type="checkbox" name="fav" value="閱讀" checked>閱讀
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食">美食
<input type="checkbox" name="fav" value="運(yùn)動(dòng)" checked>運(yùn)動(dòng)
</p>
<p>
省份：
<select name="province">
<option value="110000">北京</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="500000">重慶</option>
<option value="510000" selected>四川省</option>
</select>
</p>
<p>
生日：
<input type="date" name="birthday">
</p>
<p>
郵箱：
<input type="email" name="email" required>
</p>
<p>
頭像：
<input type="file" name="photo" enctype="multipart/form-data"> <!--multiple:放多個(gè)文件-->
</p>
<p>
自我介紹：
<textarea cols="30" rows="10" name="intro"></textarea>
</p>
<p>
<input type="submit" value="確認(rèn)注冊(cè)">
<input type="reset" value="重新填寫">
</p>
<p hidden="hidden">隱藏的文字</p>
</form>
</body>
</html>
av
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>av_example</title>
</head>
<body>
<audio controls autoplay loop>
<source src="audio/Madison%20Beer%20_%20??%20(美延)%20_%20???%20(田小娟)%20_%20Jaira%20Burns%20-%20POP_STARS.mp3"></source>
</audio>
<video width="400" controls>
<source src="video/Red%20Velvet%20(????)-Bad%20Boy(藍(lán)光).mp4"></source>
</video>
</body>
</html>
frame
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--行級(jí)標(biāo)簽（元素）/ 塊級(jí)標(biāo)簽（元素）-->
<!-- h1~h6/p/div/ul/dl/ol/table/form/hr - 塊級(jí)標(biāo)簽-->
<!-- a/img/iframe/button/span/input - 行級(jí)標(biāo)簽-->
<iframe src="https://map.baidu.com" width="400" height="400" frameborder="0"></iframe>
<iframe src="https://www.taobao.com" width="400" height="400" frameborder="0"></iframe>
</body>
</html>
css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_example</title>
<!--一般情況下網(wǎng)站首頁(yè)用內(nèi)部樣式表 - 首頁(yè)正常渲染-->
<!--其他的可以共享一個(gè)或多個(gè)外部樣式表 - 代碼復(fù)用/減少對(duì)貸款和流量的消耗-->
<!--外部樣式表-->
<link rel="stylesheet" href="css/style.css">
<!--內(nèi)部樣式表-->
<style>
* {
border: 1px dashed black;
}
</style>
</head>
<body>
<div id="header"></div>
<h1 class="a">hello world</h1>
<h1 class="b">hello world</h1>
<h1 class="c">hello world</h1>
<h1 class="d">hello world</h1>
<h1 class="e">hello world</h1>
<h1 class="f">hello world</h1>
<h1 class="g">hello world</h1>
<p class="c h big">李白-靜夜思</p>
<div id="footer"></div>
</body>
</html>
style.css
/*通配符選擇器*/
* {
margin: 0;
padding: 0;
}
/*標(biāo)簽選擇器*/
h1 {
width: 960px;
height: 40px;
margin: 5px auto;
text-align: center;
}
/*類選擇器*/
.a{
background-color: red;
}
.b{
background-color: orange;
}
.c{
background-color: rgba(255, 0, 0, 0.5);
}
.d{
background-color: green;
}
.e{
background-color: cyan;
}
.f{
background-color: blue;
}
.g{
background-color: purple;
}
.h{
color:blue;
text-align: center;
width: 100px;
height: 40px;
overflow: scroll;
}
.big{
font-size: 32px;
}
.normal{
font-size: 18px;
}
.small{
font-size: 12px;
}
/*ID選擇器*/
#header, #footer {
width:800px;
height:120px;
border:1px solid red;
margin: 10px auto;
}
css2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<!--不沖突的樣式會(huì)疊加，有沖突的樣式遵循三條原則-->
<!--1.就近原則-->
<!--2.具體性原則-->
<!--3.重要性原則-->
<style>
#h1{color:blue;}
.h1{
color:pink !important;
border: 5px dotted #ffA500;
width:300;
height: 80px;
text-align: center;
margin-top:50px;
padding: 100px 100px;
}
h1{color: red;}
</style>
</head>
<body>
<h1 class="c">I love you</h1>
<!--box model (盒子模型)-->
<h1 class="h1" id="h1">Goodbye</h1>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
