IDE的使用
<! DOCTYPE html >
< html lang = " zh" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< ol>
< li style = " css language-css ">border : 1px solid red " > 子项1</ li>
< li style = " css language-css ">border : 1px solid red " > 子项2</ li>
< li style = " css language-css ">border : 1px solid red " > 子项3</ li>
< li style = " css language-css ">border : 1px solid red " > 子项4</ li>
< li style = " css language-css ">border : 1px solid red " > 子项5</ li>
< li style = " css language-css ">border : 1px solid red " > 子项6</ li>
< li style = " css language-css ">border : 1px solid red " > 子项7</ li>
< li style = " css language-css ">border : 1px solid red " > 子项8</ li>
< li style = " css language-css ">border : 1px solid red " > 子项9</ li>
</ ol>
</ body>
</ html>
表单标签
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> </ title>
</ head>
< body>
< form action = " #" method = " get" enctype = " text/plain" >
用户名:< input type = " text" name = " username" maxlength = " 6" placeholder = " 请输入你的用户名" > < br>
密 码:< input type = " password" name = " password" value = " 11111" /> < br>
爱 好:< input type = " checkbox" name = " fav" value = " bk" checked > 篮球
< input type = " checkbox" name = " fav" value = " sing" checked > 唱
< input type = " checkbox" name = " fav" value = " jump" checked > 跳
< input type = " checkbox" name = " fav" value = " rap" checked > Rap < br>
性 别:< input type = " radio" name = " sex" value = " 男" > 男
< input type = " radio" name = " sex" value = " 女" > 女
< input type = " radio" name = " sex" value = " 跨性别" checked > 跨性别 < br>
邮 箱:< input type = " email" name = " email" autofocus />
< input type = " submit" >
< button> 上传</ button>
< input type = " file" name = " avarta" >
< div style = " css language-css ">width : 100px; height : 100px; " > </ div>
< input type = " reset" >
< input type = " image" name = " avarta" src = " img/button.jpg" width = " 250px" height = " 100px" >
< input type = " hidden" name = " location" value = " 西安" >
< input type = " color" >
< input type = " date" >
< input type = " datetime-local" >
< input type = " time" name = " " id = " " >
< input type = " url" >
< input type = " range" max = " 100" min = " 20" >
</ form>
</ body>
</ html>
CSS 部分
css cascading_style_sheet_120">css 层叠样式表(cascading style sheet)
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> </ title>
< style type = " text/css " > css">
div {
width : 100px;
height : 200px;
background-color : black;
}
@import url ( "css /new_file.css " ) ;
</ style>
</ head>
< body>
< div> </ div>
< span> </ span>
</ body>
</ html>
基本选择器
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> </ title>
< style> css">
* {
margin : 0px;
padding : 0px;
background-color : black;
}
#first_div {
width : 200px;
height : 200px;
border : 1px dotted red;
}
.div_class {
width : 300px;
height : 300px;
background-color : aqua;
}
div {
width : 100px;
height : 100px;
border : 1px solid rebeccapurple;
}
</ style>
</ head>
< body>
< div id = " first_div" > </ div>
< div class = " div_class" > </ div>
< div class = " div_class" > </ div>
</ body>
</ html>
包含选择器
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> </ title>
< style> css">
div,.span_class,p {
padding : 10px;
background-color : aqua;
border : 1px dashed firebrick;
}
ul li {
border : 1px solid red;
}
</ style>
</ head>
< body>
< ul>
< li> 子项1</ li>
< li> 子项2</ li>
< li> 子项3</ li>
< li>
< ol>
< li> 子项的子项1</ li>
< li> 子项的子项2</ li>
< li> 子项的子项3</ li>
< li> 子项的子项4</ li>
</ ol>
</ li>
</ ul>
</ body>
</ html>