练习
1.表单练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action= "http: //www. tmooc.cn method="get "> <!--- 下拉选--> 所在城市: <select name= "city"> <option value="bj">北京</option> <option value="sh" selected="selected">上海</option> <option value="gz">广州</option> </select><br> <!-- 文本域 rows行 cols列 --> 自我介绍: <textarea name="intro" rows="3" cols="20 placeholder="说点儿啥..."></textarea> <!-- 提交按钮 --> <input type= "submit" value="注册"/> <!-- 重置按钮 --> <input type="reset"/> <!-- 自定义按钮 --> <input type = "button" value="按钮"/> <button type="button">按钮</button> </form> <p>测试 空格<abc></p> <div id="">div1</div><div id="">div2</div> <div id="">div3</div> <span>span1</span> <span>span2</span> < span>span3</span> </body> </html>
显示效果：
2.CSS引入方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 通过选择器选择到标签后 再添加样式 */ /* 标签名选择器:通过标签的名称选择标签*/ h4{ color:blue; } </style> <!-- 引入外部css样式文件 --> <link rel="stylesheet" type="text/css" href="first.css"/> </head> <body> <!-- 内敛样式:不能复用 --> <h3 style="color:red;">测试内联样式1</h3> <h3 style="color:red;">测试内联样式2</h3> <!-- 内部样式:好处:可以当前页面复用 --> <h4>测试内部样式1</h4> <h4>测试内部样式2</h4> <!--外部样式:好处:可以多页面复用,可以将css样式代码和html代码分离--> <h2>测试外部样式1</h2> <h2>测试外部样式2</h2> </body> </html>
显示结果：
3.选择器练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* id选择器 */ #p2{ color:red; } /* class选择器 */ .c1{ color:blue; } /* 分组选择器 将多个选择器通过逗号合并成一个*/ h3,#p2,.c1{ background-color:yellow; } /* 属性选择器 */ input[type='button']{ color:red; } /* 任意元素选择器 border:边框粗细 样式(solid实线) 颜色*/ *{ border: 1px solid red; } </style> </head> <body> <input type="button" value="按钮"/> <input type="submit" value="按钮"/> <p>p1</p> <p id="p2">p2</p> <p class="c1">p3</p> <div>div1</div> <div>div2</div> <div class="c1">div3</div> <span>span1</span> <span>span2</span> <span class="c1">span3</span> <h3>h3</h3> </body> </html>
测试结果：
