day2_HTML&CSS
案例1：网站注册页面
表单标签
1.表单标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="#" > 用户名：<input type="text" /><br /> 密码：<input type="password" /><br /> 确认密码：<input type="password" /><br /> 性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女<br /> 爱好：<input type="checkbox" name="hobby"/>钓鱼 <input type="checkbox" name="hobby"/>打电动 <input type="checkbox" name="hobby"/>写代码<br /> 头像：<input type="file" /><br /> 籍贯：<select name="province"> <option>--请选择--</option> <option>北京</option> <option>上海</option> <option>广州</option> </select><br /> 自我介绍： <textarea> </textarea><br /> 提交按钮：<input type="submit" value="注册"/><br /> 普通按钮：<input type="button" value="zhuce"/><br /> 重置按钮：<input type="reset" /> </form> </body> </html>
submit是表单的提交属性，可以实现将所在表单的数据进行的提交。
2表单标签属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单标签属性介绍</title> </head> <body> <form action="#" method="get"> 隐藏字段:<input type="hidden" name="id" value="" /><br /> 用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br /> 密码：<input type="password" name="password" required="required"/><br /> 确认密码：<input type="password" name="repassword"/><br /> 性别：<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女" checked="checked"/>女<br /> 爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼 <input type="checkbox" name="hobby" value="打电动"/>打电动 <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br /> 头像：<input type="file" name="file"/><br /> 籍贯：<select name="province"> <option>--请选择--</option> <option value="北京">北京</option> <option value="上海" selected="selected">上海</option> <option value="广州">广州</option> </select><br /> 自我介绍： <textarea name="zwjs"> </textarea><br /> 提交按钮：<input type="submit" value="注册"/><br /> 普通按钮：<input type="button" value="zhuce"/><br /> 重置按钮：<input type="reset" /> </form> </body> </html>
将表单标签加了很多属性，可能有些属性我们不需要。
案例2：使用DIV+CSS完成首页重构
01DIV和span效果演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div效果演示</title> <style> div{ border: 1px solid red; /*width: 400px; height: 200px;*/ } </style> </head> <body> <div id="1"> 锄禾日当午 </div> 汗滴禾下土 </body> </html>
div最基本的操作只是实现了，两部分的一个分区
为加上更复杂的参数
02span效果演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>span演示</title> <style> span{ font-size: 10px; } </style> </head> <body> <span> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！ </span> </body> </html>
上面是span的一个小例子。在style中设置apan的属性达到控制显示字符的不同形式。font-size: 10px;//控制显示字体的大小。
02CSS基本选择器
1元素选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style> div{ font-size: 30px; color: pink; } </style> </head> <body> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11 </div> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22 </div> </body> </html>
元素选择器，将整个元素都选中，上面操作的就是整个div元素。使得只要元素是div的就会显示为style中设置的样子
2类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .div2{ font-size: 30px; color: gold; } </style> </head> <body> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11 </div> <div class="div2"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22 </div> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11 </div> <div class="div2"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44 </div> </body> </html>
上面的语句不以元素分类（div等），而是加入一个关键词class 来进行区分，注意调用方式.div 进行设置。
3id选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id选择器</title> <style> #div5{ font-size: 30px; color: yellow; } .div2{ font-size: 10px; color: green; } </style> </head> <body> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11 </div> <div class="div2"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22 </div> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33 </div> <div class="div2"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44 </div> <div id="div5"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55 </div> </body> </html>
选择器的使用都在style中设置。元素选择器直接用元素名设置
类选择器使用.+class名设置
id选择器使用#+id名设置
03CSS其他选择器
1层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <style> div p{ font-size: 30px; color: green; } </style> </head> <body> <div> <p> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44 </p> </div> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55 </div> <p> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66 </p> </body> </html>
层级选择器以<p></p>为标志
2属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> input[type='text']{ background-color: red; } input[type='password']{ background-color: blue; } </style> </head> <body> 用户名；<input type="text" name="username"/><br /> 密码：<input type="password" name="password"/> </body> </html>
