HTML和CSS的精华
一.html中的表单元素
举例说明Form表单的元素吧，
用户名一般为一个文本框，所以把type设置为text即可；
type为password则为“密文型的文本框”；
性别一般为单选按钮，type为radio,但是在这里需要注意的是，在添加两个单选按钮时间需要把他们的值设置为一样的这样才能陈文给单选；
个人爱好一般为多选框，所以在这里用的checkbox来设置，则输出的为多选框的样式；
下面还有一个选择国籍，则选择的是下拉列表，type为select；
当type为file时间，则为我们往常看到的文件的上传下载格式，在这里textarea即设置上传文件的文本框的行和列；
接下来就是按钮，当type为重置时间一般设置type为reset，当为注册时间一般为submit，登录时间就用button，虽然它不是Form中的元素，但是可以显示，而其设置的值就是按钮上面显示的字体；
还有一个是图片按钮，设置tyre为inage，属性src为图片路径，然后是图片的宽度和高度。
如下代码所示以及在浏览器中浏览显示的格式：
复制代码
<body>
<form action="https://www.baidu.com" method="post">
<label>用户名:</label><input type="text" name="txtUserName" maxlength="4" value="刘德华" size="100"/><br />
<label>密 码:</label><input type="password" name="txtUserPwd" maxlength="6" value="123456" size="100" /><br />
<label>性 别:</label><label>男</label><input type="radio" name="txtGender" /><label>女</label>
<input type="radio" name="txtGender" /><br />
<label>个人爱好:</label><input type="checkbox" name="txtMusic" checked /><label>音乐</label>
<input type="checkbox" name="txtsport"/><label>体育</label><input type="checkbox" name="txtmovie" value=" " />
<label>电影</label><br />
<label>选择您的国籍</label>
<select name="select" multiple>
<option value="china">中国</option>
<option value="koren">韩国</option>
<option value="japan">日本</option>
</select><br />
<input type="file" name="upload" value="uploadimage" /><br/>
<textarea rows="20" cols="20"></textarea><br />
<input type="submit" name="name" value="注册 " />
<input type="button" name="name" value="登录" /> <button>登录</button>
<input type="reset" name="reset" value="重置" />
<input type="image" src="7.jpg" size="100" height="20" width="20" />
</form>
</body>
复制代码
另外还有一些设置，如下面代码和图片可以看出来其代码实现的功能。
复制代码
<body>
<center>
<form action="/" method="post">
<table>
<tr>
<td>数字：</td>
<td><input type="number" name="txtNumber" value=" " step="2" /></td>
</tr>
<tr>
<td>颜色输入框：</td>
<td><input type="color" name="txtColor" value=" " /></td>
</tr>
<tr>
<td>邮箱地址:</td>
<td><input type="email" name="txtEmail" value=" " /></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input type="tel" name="txttel" value=" " /></td>
</tr>
<tr><td>范围:</td>
<td><input type="range" name="txtrange" /></td>
</tr>
<tr>
<td>日期:</td>
<td><input type="date" name="txtdate" value=" " /></td>
</tr>
<tr>
<td>日期时间:</td>
<td><input type="datetime" name="txtdate" value=" " /></td>
</tr>
<tr>
<td>月:</td>
<td><input type="month" name="txtMonth" value=" " /></td>
</tr>
<tr>
<td>周:</td>
<td><input type="week" name="txtWeek" value=" " /></td>
</tr>
<tr>
<td>时间:</td>
<td><input type="time" name="txttimer" value=" " /></td>
</tr>
<tr>
<td>Url:</td>
<td><input type="url" name="txtUrl" value=" " /></td>
</tr>
<tr>
<td>隐藏:</td>
<td><input type="hidden" name=" txtHidden" value="云和学院 " /></td>
</tr>
<tr>
<td>搜索框:</td>
<td><input type="search" name="txtSearch" value=" " /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="name" value="提交 " /></td>
</tr>
</table>
</form>
</center>
</body>
复制代码
上面的设置我想通过标签的显示就能看出其格式的设置啦吧，所以以上这些就是html中的From表单。
二.html的框架
在这里创建一个Html静态页面，然后删除<body></body>标签，添加<frameset></frameset>，其格式就是这样的，如下代码所示：
在这里可以看到在标签<frameset></frameset>中有一个rows属性，他的值为25%和*，在这里25%表示搜狐网页占25%，下面一个网站占剩下的部分，这里仅仅是一个举例，对比下框架的分配以及各式的显示，大体上面分为三部分，如下图所示：
三.CSS层叠样式表
1. 下面举例说一下css的优点，为什么我们要用css样式那？
复制代码
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p {
font-size:xx-large;
font-family:隶书;
color:green
}
</style>
</head>
<body>
<p><font face="隶书" color="yellow" size="10">大家好！欢迎在云和学院学习Net开发</font> </p>
<p><font face="隶书" color="yellow" size="10"> 大家好！欢迎在云和学院学习Net开发</font></p>
<p>大家好！欢迎在云和学院学习Net开发</p>
<P>大家好！欢迎在云和学院学习Net开发。</P>
<p>大家好！欢迎在云和学院学习Net开发。</p>
</body>
</html>
复制代码
上面的代码运行的结果如下所示：
在这里，前两行的字体都要在<p>标签中设置，感觉很麻烦，而最后三行的字体就是把p标签给提取出来放在head里面，但是要用标签stytle，格式如上面所示，在p标签里面设置字体的属性，从而使在p标签中的元素都可以显示其属性，这样就是简单多啦。而前两个内容也是在p标签中，但是他们设置的有自己的属性，在css中有一个特性就是就近一致原则，因此前两行就显示了其自己的行内的属性，像这样在行内设置其css样式的就叫做行内样式；想下面的那种把p标签提取出来的就叫做标签选择器。
2.下面说一下css中的类选择器和id选择器
复制代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p {
color:blue;
font-size:x-small;
font-family:'Agency FB'；
}
.label
{
color:silver;
font-size:1.5em;
font-family:KaiTi
}
#label {
color: azure;
font-size: 1.5em;
font-family: KaiTi;
}
</style>
</head>
<body>
<p style="font-family:仿宋; font-size:xx-large;color:pink">大家好！欢迎在云和学院学习Net开发</p>
<!--行内样式-->
<p>大家好！欢迎在云和学院学习Net开发</p>
<p class="label">大家好！欢迎在云和学院学习Net开发</p>
<p id="label">大家好！欢迎在云和学院学习Net开发</p>
</body>
复制代码
上面所示，在p标签中仅仅需要写一个 class=”label“,class可以任意取名字，然后像上面的方法一样，把其p标签中的属性提取出来，即.class的值,然后在花括号里面设置其属性，像这样的方法就是类选择器；而在p标签中仅仅需要写一个id=”id“，id的值也可以任曦选取名字，然后#id的值加上花括号，并在花括号内设置其属性，这样的方法叫去哦id选择器。
复制代码
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p {
color:blue;
}
p.color {
color:green;
}
#id {
color:red;
}
</style>
</head>
<body>
<p>欢迎来到云何学院学习.net</p>
<!--<p style="color:green">风急天高猿啸哀，尚思为国树轮台</p-->
<p class="color">欢迎来到云何学院学习.net</p>
<p>欢迎来到云何学院学习.net</p>
<p class="color">
欢迎来到云何学院学习.net
</p>
<span class="color">
欢迎来到云何学院学习.net
</span>
<p id="id">欢迎来到云何学院学习.net</p>
</body>
</html>
复制代码
前面说过啦标签选择器和id选择器，而在上面例题中还有一个p.color，其实上面这个就是对其中一个设置了class的p标签设置其属性，而只想让其设置了class的显示其属相，只需要用p.class的值加上花括号，在花括号内设置其属性即可。
3.多选择器
复制代码
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css005.css" rel="stylesheet" />
</head>
<body>
<p class="c1">还记得家乡的味道</p>
<p class="c2">还记得家乡的味道</p>
<span class="c3">还记得家乡的味道</span>
</body>
</html>
复制代码
.c1, .c2, .c3 {
color:bisque
}
像上面所示，把css添加在样式表中，在html页面中调用css样式表，格式如上面所示，即在head标签中用link标签即可，而在p标签，p标签和span标签都设置了class的值，然后分别设置值为c1，c2，c3，然后再样式表中用逗号（，）隔开，加上花括号即可，在花括号内设置其属性，这样的方法就叫做多选择器。
4.需要注意的是，在css样式表中设置字体时间可以设置任意几种字体格式，如下所示：
复制代码
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p {
color:blue;
font-size:100px;
font-family:Algerian,Andalus,AngsanaUPC,'Agency FB';
font-style:italic;
font-weight:bolder;
}
</style>
</head>
<body>
<p>天青色等烟雨，而我在等你</p>
</body>
</html>
复制代码
上面的p标签中在设置字体时间就是设置了多种格式，这个是由于可以根据浏览器的不同，自动选择不同的字体样式，更加方便。
总结一下css中字体的属性：
color：字体颜色；
font-size:字体大小；
font-fanily：字体格式；
font-weight：jiacu。
图片的属性：border：图片边框。
另外还学习了a标签和list标签的属性以及盒子模型，明天我再写吧，嘿嘿，可能是html和css这个东西比较碎吧，但是总体上东西还是比较容易学习的啦，可能是因为我们仅仅了解一下吧，毕竟我们是写后台程序的，嘿嘿，就写到这里啦。
上一篇： Python中代码换行