案例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>day2_HTML&CSS
原文地址：https://www.cnblogs.com/road-of-mike/p/8629763.html