html虽然学过,而且自己几乎可以熟练布局整个网站,但是这次学习更加深刻的学习了一些内容,比如表单,以前只会按照别人的代码去写,这次几乎明白了所有原理。
css样式以前学过,但是这次还是很清晰的认识到,js的权重是最高的 然后是行内样式style=“”,然后是id选择器#class=“”然后是类选择器.id="" 然后才是标签选择器h1{}、body{};
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>2018年1月14日作业</title> </head> <style> body{padding:0; margin:0; height: 2000px; } u l,o l{list-style-type: none;} .zuoye{width:1902px;background-color: rgb(6, 100, 69); color:#ffff;t ext-align:center; padding:0;margin:0;} </style> <body> <!--1、html中常用的标签 --> <div class="zuoye"> <h1 >开始我的作业吧,这是一个h1标签的文字</h1> <h2 >这是一个h2标签的文字</h2> <p>前端有一些基础的我来说这些还算简单,但是我怕后面跟不上,对,这是一个P标签</p> <h1><strong>下面我们写一个加粗的文本</strong></h1> <p><em>再写一个啥,斜体的吧</em></p> <hr> <!--无序列表--> <ul> <li>这是无序列表,我也不改变文字了</li> <li>这是无序列表,我也不改变文字了</li> <li>这是无序列表,我也不改变文字了</li> <li>这是无序列表,我也不改变文字了</li> <li>这是无序列表,我也不改变文字了</li> </ul> <!--有序列表--> <ol> <li>这是有序列表,</li> <li>这是有序列表,</li> <li>这是有序列表,</li> <li>这是有序列表,</li> <li>这是有序列表,</li> </ol> <!--定义列表--> <dl> <dt>定义列表</dt> <dd>现在看见的就是所谓的定义列表</dd> </dl> <hr> <!--表格--> <table border="1" cellpadding="5" cellspacing="0" width='500' height='150'> <caption >简单做一个表格吧</caption> <thead bgcolor="#aaa"> <tr align="center"> <td>序号</td> <td>名称</td> <td>价格</td> </tr> </thead> <tbody> <tr align="center"> <td>1</td> <td>白菜</td> <td>3.5元</td> </tr > <tr align="center"> <td>2</td> <td>罗布</td> <td>1.2元</td> </tr> <tr align="center"> <td>3</td> <td>眨巴</td> <td>1万元</td> </tr> </tbody> </table> <hr> <!--表单--> <form acction='' method="GET"> <div> <label for="username">用户名</label> <input type="text" id="username" name="username" value="" placeholder="想写什么就些什么吧"> </div> <div> <label> 密码:<input type="password" name="password" value="" placeholder="至少输入一百个字符的密码" size="45"> </label> </div> <div> <label> 确认密码:<input type="password" name="password" value="" placeholder="至少输入一百个字符的密码" size="40"> </label> </div> <div> 性别: <input type="radio" name="gander" id="male" value="male" checked><label for="male">女</label> <input type="radio" name="gander" id="fomale" value="fomale"><label for="fomale">男</label> </div> <div> <label >爱好:</label> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打球</label> <input type="checkbox" name="hobby[]" value="smoke"id="smoke" ><label for="smoke">抽烟</label> <input type="checkbox" name="hobby[]" value="hejiu"id="hejiu" checked ><label for="hejiu">喝酒</label> <input type="checkbox" name="hobby[]" value="head"id="head" ><label for="head">烫头</label> </div> <div> <label for="home">您的家乡是:</label> <select id="home" value="" name="" > <option value="1">拉萨</option> <option value="2" selected>山南</option> <option value="3">昌都</option> <option value="4">那曲</option> <option value="5">阿里</option> </select> </div> <label for="common">有啥想告诉我的吗?</label> <br> <textarea id="common" value="" cols="100" rows="15" placeholder="写下你要写的的那个东西,但是不要超过500000字,不然我们念不完"></textarea> <div> <input type="submit" value="提交"> <input type="reset" value="重置"> <button type="button" >注册 </button> </div> <hr> <div> <img src="images/zly.jpg" alt="这是一个美女的图片"> <video src="images/demo.mp4" controls="controls" width="500" ></video> </div> <hr> </form> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css优先级</title> <style> h2{background-color: darkslategrey;} .biaoqian {background-color: darkblue;} #jinghao{background-color: darkmagenta;} </style> </head> <body> <!--css的常用选择器与优先级--> <h1 style="background-color: cadetblue; color: crimson;" >我们练习一下css的行内修饰</h1> <h2 class="biaoqian" id="jinghao" sty le="background-color:indianred;" >练习几个选择器的优先级吧 id选择权大于类选择器 类选择权>标签选择器 内联样式(行内)>id选择器</h2> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
难点在于,<input>表单里加的 name=“”value=“” id=“”等因为太多,还是搞不清楚为什么要加,因为自己实验以后不加也程序可以正常弄。希望老师能解答。