HTML常用标签及CSS样式选择器

html部分

<!DOCTYPE html>
<html>
	<head>
		<!--头标记  写描述性的信息(css\javaScript)-->
		<!--引入外部的样式文件
			rel:relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间的关系
		-->
		<link rel="stylesheet" type="text/css" href="css/mycss.css" />
		<!--内部样式：样式是用来描述页面的，属于描述性的信息，应写在head中的style标签内-->
		<style>
			h1{
				color: red;
			}
			
		</style>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--体标记  写页面显示的信息-->
	    <!--a超链接或锚（anchor），  href（Hypertext Reference）:可以指定应用内或者是应用外的任意地址 -->
	    <a rel="nofollow" href="http://www.baidu.com">我是超链接，链接地址是百度</a>
	    <!-- 表单作用: 收集用户的信息，提交到后台服务器 -->
	    <form action="http://www.baidu.com" method="get/post">
	    	<!--提交到服务器的数据格式：name值=value值（如username=admin），服务器通过name值获得value值-->
	    	<!--文本输入框-->
	    	用户名称：<input type="text" name="username" value="admin" />
	    	<!--br换行-->
	    	<br />
	    	<!--密码-->
	    	用户密码：<input type="password" name="password"  />
	    	<br />
	    	<!--单选框-->
	    	<!--只用当name属性值相同的时候，才有单选的效果-->
	    	用户性别：男：<input type="radio" name="gender" value="男" />
	    	                   女：<input type="radio" name="gender" value="女" />
	    	<br />
	    	<!--多选框-->
	    	<!--name值要相同-->
	    	用户爱好：吃饭 <input type="checkbox" name="hobby" value="eat"/>
	    			   睡觉 <input type="checkbox" name="hobby" value="sleep"/>
	    			  打豆豆 <input type="checkbox" name="hobby" value="Beat beans "/>
	        <br />
	        <!--下拉列表-->
	     	   用户地址：省份<select name="province">
	     	   					<option value="山东省">山东省</option>
	     	   					<option value="江苏省">江苏省</option>
	     	   					<option value="北京市">北京市</option>
	     	  			 </select>
	     	<br />
	     	<!--提交按钮-->
	     	<input type="submit" value="提交"/>
	    </form>
	    
	    <!-- h1~h6:标题标签（header）-->
	     员工信息列表  
	    <!--表格-->
	    <!--cellpadding：单元格子的内容与单元格子四边边界之间空白距离
	    	cellspacing：table表格中的单元格子之间的空白距离
	    	tr：表格行  
	    	td：表格数据单元列
	    	th：表格标题列,自带居中并加粗的效果
	    -->
	    <table align="center" border="1px" cellspacing="0" cellpadding="10px" width="60%">
	    	<tr>
	    		<th>员工ID</th>
				<th>员工名字</th>
				<th>员工性别</th>
				<th>员工描述</th>
	    	</tr>
	    	<tr>
	    		<td>1</td>
	    		<td>张三</td>
	    		<td>男</td>
	    		<td>good man</td>
	    	</tr>
	    	<tr>
	    		<td>2</td>
	    		<td>小红</td>
	    		<td>女</td>
	    		<td>good woman</td>
	    	</tr>
	    </table>
	    <!--div:网页布局标签（divide）
	    	作用：选中某一区域，添加样式
	    -->
	    <div >
	    	这是div
	    </div>
	    <div id = "d1">
	    	这是div1
	    </div>
	    <div class = "d2">
	    	这是div2
	    </div>
	    <div class = "d2">
	    	这是div3
	    </div>
	</body>
</html>

css部分

             /*元素选择器*/
			div{
				width: 50px;
				height: 50px;
				border: 1px solid red;
				background: #FF0000;
			}
			/*id选择器
			 id不可重复，唯一*/
			#d1{
				background:aqua
			}
			/*类选择器
			 可重复*/
			.d2{
				background: yellow;
			}