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="border:1px solid red">子项1</li><li style="border:1px solid red">子项2</li><li style="border:1px solid red">子项3</li><li style="border:1px solid red">子项4</li><li style="border:1px solid red">子项5</li><li style="border:1px solid red">子项6</li><li style="border:1px solid red">子项7</li><li style="border:1px solid red">子项8</li><li style="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="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）

  • 外链样式的好处
    • 首先提高代码的复用性
    • 他可以降低代码的耦合性
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 100px;height: 200px;background-color: black;}/*第四种方式 @import */@import url("css/new_file.css");</style><div></div><span></span></body></html>

基本选择器

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>/* 优先级关系 id > class > 标签 > * *//* 通配符选择器：一般用于重置页面样式 */*{/* 间距 */margin: 0px;/* 边距 */padding: 0px;background-color: black;}/* id选择器 :对指定id的标签进行样式修整*/#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>/* 逗号选择器，可以将样式代码赋给多个选择器，选择器种类任意 */div,.span_class,p{padding: 10px;background-color: aqua;border: 1px dashed firebrick;}/* 子代选择器 *//* ul > li{border: 1px solid red;} *//* 后代选择器 */ulli{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>