HTML常用标签及CSS样式选择器 html部分 !DOCTYPE htmlhtml head !--头标记 写描述性的信息(css\javaScript)-- !--引入外部的样式文件 rel:relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间
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 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）-->
<h1 align="center"> 员工信息列表 </h1>
<!--表格-->
<!--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;
}