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 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>*{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>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>
