关于一点HTML的东西(2)
2015-07-21 21:58
417 查看
<!DOCTYPE html> <html> <head> <title>简单html第二天</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--在css里面的注释只能是/**/--> <style type="text/css">/*在html5中 type可以不写*/ h3{background-color: red;}/*所有h3标题的背景色*/ body{font-family: '微软雅黑','文泉驿正黑' }/*设置body里面的字体是微软雅黑,要是没有字体就是文泉驿正黑*/ /*选择器可分为 元素选择器,类选择器,id选择器,分组选择器,派生选择器, 伪类选择器*/ /*元素选择器*/ p{color: blue; }/*p里面的所有字体是蓝色,也可以设置背景色*/ /* 选择器组:对一组选择结果统一设置样式效果*/ h5,h6{ border: 1px solid black; } /*id选择器*/ #choseid{ color: red; background: yellow; } /* 类选择器 .demo*/ .demo{ color: red; font-size: 2pt; } /*类选择器和元素选择器可以层叠使用*/ p{ background-color: pink; } p.error{/*选择p元素class属性是error的*/ color: red; border: 1px solid red; /*添加边框*/ } h3 span{ color: yellow; } .list li{/*选择类是list的元素,全部li子孙*/ color: blue; } .list > li{/*选择类是list的元素,全部li孩子中不包括孙子,指第一次孩子*/ color: green; } </style> <!--href连接的文件必须是以css类型文件,且编码与目标一致,link是用来外联式样,用外联式样的好处就是不用改代码,该css文件就行,方便--> <link rel="stylesheet" type="text/html" href="style.css"> </head> <body> <!--css有三个特点继承性(内部元素继承外部元素的css样式),层叠性(多个样式叠加作用在一个元素上:p元素叠加了字体,背景色,前景色),优先级--> <h3>测试h3背景色</h3> <!--下面p段落里的字体没有按照style里面规定的颜色显示,这是因为与p自定义的颜色发生冲突,就采取”就近原则“--> <p style="background-color:yellow; ">测试内联样式(只能作用在当前元素上),p背景色,</p> <h4>外联测试link连接,形式和h3的一样</h4> <h5>测试组选择器</h5> <p id="choseid">id选择器</p> <h6>测试组选择器</h6> <p class="demo">类选择器</p> <ul class="list"> <li>第一层 <ul> <li>第2层 <ul> <li>第3层</li> <li>第3层</li> </ul> </li> <li>第2层</li> </ul> </li> <li>第一层 <ul> <li>第2层</li> <li>第2层</li> </ul> </li> </ul> <h1>复杂表格</h1><!--复杂表里面用了thead,tbody,tfoot,是为了让结构看起来更加清晰--> <table border="1"> <thead > <tr><!--下面的th替换了td,自动加粗居中--> <th rowspan="2">编号</th><!--rowspan表示跨了几行--> <th colspan="4">商品</th><!--colspan表示跨了几列--> </tr> <tr> <td>商品</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>屠龙刀</td> <td>2.00</td> <td>1</td> <td>2.00</td> </tr> <tr> <td>1</td> <td>倚天剑</td> <td>2.00</td> <td>1</td> <td>2.00</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">合计</td> <td>4.00</td> </tr> </tfoot> </table> <h1>表单演示</h1> <form method="post"> <h2>注册用户</h2> <!-- input是行内块,name是给服务器使用的属性,value是默认数据。发送给服务器的数据--> <!--maxlength规定了长度--> <!--文本输入的类型时text,密码类型时password--> <p>用户名<input type="text" maxlength="10" name="username" value="su"></p> <p>密码<input type="password" maxlength="10" name="pws"></p> <!--radio类型表示只能选择其一,单选。checkbox类型表示多选--> <p>性别<input type="radio" name="sex" value="nan">男<input type="radio" name="sex" value="woman">女</p> <p>角色<input type="checkbox" name="char" value="student">学生<input type="checkbox" name="char" value="teacher">老师</p> <!--除了上述类型外。file是任意类型,指的是需要放入的文件--> <p>照片<input type="file" name="image"></p> <p>是否公开<!--radio类型中 name的内容必须一致 id与lable for搭配使用,属性的内容必须一致,这样就能进行自动关联--> <input type="radio" name="public" id="pub"><label for="pub">公开 <input type="radio" name="public" id="pri"><label for="pri">保密 </p> <p>选择课程<!--select是行内块,与option搭配使用,size=1,是下拉框,size>1,是列表框--> <select name="course" size="1"> <option value="1">javase</option> <!--value与实现效果无关,selected加在value,则默认显示的就是有selected的--> <option value="2">javame</option> <option value="3">javaee</option> </select> </p> <p>多行文本框<br> <textarea name="memo" id="" cols="30" rows="10">自我介绍</textarea> </p> <p> <fieldset ><!--分组控件,这个基本不用--> <legend>地址信息</legend><!--为分组指定一个标题--> 地址:<input type="text"><br> 邮编:<input type="text"> </fieldset> </p> <div> <input type="submit" value="保存"> <input type="reset" value="重填"> <input type="button" value="空白"> </div> <input type="hidden" name="loc" value="大家好"><!--向服务器发送隐藏数据--> </form> </body> </html>
相关文章推荐
- 史上最全的html标签属性用法对照表
- input属性及用法浅析
- html button标签
- Html学习笔记3
- HTML学习笔记——box
- HTML学习笔记——标签设置格式
- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
- HTML学习笔记——块级标签、行级标签、图片标签
- html标签属性
- HTML特殊符号对照表
- HTML学习笔记——选择器
- document.getElementById("id").innerHTML=""与document.getElementById("id").style.display="none"
- web html调用百度地图
- html学习笔记(3)----display属性值
- display属性值
- HTML的总结
- @Html.ValidationSummary()的使用
- XHTML事件属性
- XHTML学习笔记(一)
- html注册登录模板