html常用标签表单和表格等及css的简单入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> </head> <body> <!-- 表格table --> <table border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <th>name</th> <th>address</th> </tr> <tr> <td>jack</td> <td>shenzhen</td> </tr> <tr> <td>tom</td> <td>hangzhou</td> </tr> <tr> <td>lily</td> <td>chengdu</td> </tr> </tbody> </table> <br> <!-- form表单 --> <form action="http://www.baidu.com/" method="get"> 名字:<input type="text" name="username"> 密码:<input type="password" name="password"> <br> 爱好： <input type="checkbox" name="sports" value="zuqiu">足球 <input type="checkbox" name="sports" value="basketball">篮球 <input type="checkbox" name="sports" value="pingpang">乒乓球 <br> 性别：<input type="radio" name="gender" value="male">篮球 <input type="radio" name="gender" value="female">篮球 <br> 你在哪 <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="guangzhou">广州</option> <option value="hangzhou">杭州</option> <option value="chengdu">成都</option> </select> <input type="submit" value="提交"> </form> <!-- 标题标签 --> <h1>标题标题标题标题标题标题标题</h1> <h2>标题标题标题标题标题标题标题</h2> <h3>标题标题标题标题标题标题标题</h3> <h4>标题标题标题标题标题标题标题</h4> <h5>标题标题标题标题标题标题标题</h5> <h6>标题标题标题标题标题标题标题</h6> 换行br<br>标签 hr横线标签<hr> <div> div <span>span</span> </div> <!-- 标签列表 --> <ul> <li>段落1</li> <li>段落2</li> <li>段落3</li> </ul> </body> </html>
css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css test</title> <style type="text/css"> /* 标签选择器*/ div{ width: 200px; height: 150px; background: gray; margin-top: 20px; } .font-white{ /*类选择器小数点开头*/ color: white; } #box2{ /* id选择器 # 开头 id只能选择一个元素 */ font-size:20px; } [name="password"]{ /*属性选择器*/ border: 1px solid blue; } [chinasoft="css_study"]{ /*自定义属性选择器*/ border: 1px solid yellow; } </style> </head> <body> <input type="text" class="input" name="username" chinasoft="css_study"> <input type="text" name="password" class="input"> <div class="font-white">一个没有样式的盒子</div> <div class="font-white" id="box2">一个没有样式的盒子</div> <div>一个没有样式的盒子</div> </body> </html>
