1.重点掌握:
html:
1.form表单:input,checkbox,seelct,radio,button,submit
2.table表格:thead-->tr-->th;tbody-->tr-->td
3.ul列表:ul-->li
css:
选择器：
id
class
element
2.HTML：
table表格：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表格</title>
</head> <body> <table border="1">
<colgroup><!-- 定义了一个列的分组 -->
<!-- 选中表格前两列，把背景色定义为红色 -->
<col span="1" style="background: red;" /><!-- span代表选中的某些列 -->
<col span="4" style="background: yellow;" />
</colgroup>
<!-- 把表格外部边框加粗，数值没有上限，下限为0或者-1 -->
<thead>
<!-- 表格的标题 -->
<tr>
<!-- 代表了一行数据 -->
<th>编号</th>
<!-- 标题的内容 -->
<th>名字</th>
<th>年龄</th>
<th>描述</th>
<th>入职日期</th>
<th>操作 |
<a href="">新增</a>
</th>
</tr>
</thead>
<!-- tfoot是HTML5的，他定义了一个表格的底部，无论顺序放在哪，总是在表格的最下面 -->
<!--<tfoot>
<tr>
<td>总人数</td>
<td>100人</td>
</tr>
</tfoot>-->
<tbody>
<!-- 表格标题对应的内容，标题和内容是一一对应的 -->
<tr>
<!-- 代表一行数据 -->
<td>1</td>
<!-- 标题的数据内容 -->
<td>zhangsan</td>
<td>35</td>
<td>我是张三</td>
<td>1999-07-05</td>
<td>
<a href="">修改</a> |
<a href="">删除</a>
</td>
</tr>
<tr>
<!-- 代表一行数据 -->
<td>2</td>
<!-- 标题的数据内容 -->
<td>lisi</td>
<td>30</td>
<td>我是李四</td>
<td>1999-07-06</td>
<td>
<a href="">修改</a> |
<a href="">删除</a>
</td>
</tr>
<tr>
<!-- 代表一行数据 -->
<td>3</td>
<!-- 标题的数据内容 -->
<td>wangwu</td>
<td>32</td>
<td>我是王五</td>
<td>1999-07-07</td>
<td>
<a href="">修改</a> |
<a href="">删除</a>
</td>
</tr>
</tbody> </table> </body> <ml>
列表：
<<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body> <ul><!-- 无序的列表标签 -->
<ol>李四</ol>
<ol>王五</ol><!---->
<ol>张三</ol><!---->
</ul> <!-- li标签都不会自己使用，通常配合ol或者ul来使用 -->
<ol><!-- 有序的列表，通常情况下会配合li使用 -->
<li>张三<>
<li>李四<>
<li>王五<>
</ol>
<!-- 最常用 -->
<ul>
<li>张三<><!-- 和ul配合使用，是列表中的某一行数据，没有顺序要求，也没有唯一要求 -->
<li>李四<>
<li>王五<>
</ul> <hr />
<dl>
<dt>汽车</dt><!-- 标题 -->
<dd>奇瑞</dd><!-- 标题内容 -->
<dd>帝豪</dd>
<dd>吉利</dd>
<dt>家具</dt>
<dd>床</dd>
<dd>柜子</dd>
<dd>桌子</dd>
<> </body>
<ml>
Test1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<acronym title="我是teacher">teacher</acronym><!-- 不会换行 -->
<abbr title="我也是缩写">我是缩写</abbr>
<bdi>我里面有东西</bdi>
<span>我是span</span>
<center>我是居中的元素</center>
<mark>我是标记标签</mark><!-- 自动会给文字加上一个背景色 -->
<progress value="22" max="100"></progress>
<strong>我是strong标签</strong>
<p>我们一般都是<time>9:00</time>上课</p>
<wbr>Hello</wbr>World<!-- 换行符标签，把写在一起两个单词分离开 -->
<a>我是第一个a标签</a>
<a href="#">我是第二个a标签</a><!-- a标签中，如果href属性不填或者填写#号，默认刷新页面，也就是默认跳转本页面 -->
<nav><!-- 定义一组连接 -->
<a href="">第三个a标签</a> |
<a href="">第四个a标签</a>
</nav>
</body>
</html>
Test2：
<!DOCTYPE html><!-- 这里是注释 DOC:document的简称 Type:类型 文档类型：HTML:Hyper Text Mark-up language:超文本标记语言 , 就是一个页面-->
<html><!--用<a>,<html></html>,<body></body>统称为html的标签/元素 -->
<head>
<meta charset="utf-8" /><!-- 辅助标签，最常用的地方：设置编码 -->
<title>Hello HTML</title>
</head>
<body><!-- 才是真正显示页面内容的 -->
<h1>我是h1标签</h1>----<h6>我是h6标签</h6><!-- 标题 , 默认自动换行 -->
<p>我是P标签</p><!-- 自动换行的 -->
<a href="index2.html" target="_blank">我要跳转到index2页面</a><!-- 超文本连接 a标签不能自动换行， 在标签中能控制某种效果的关键字就叫属性 --><br /><!-- 强制换行标签 -->
<a href="http://www.baidu.com">我要去百度</a>
<img src="img/1.jpg" alt="该图片无法展示" /><!-- 图片标签 也不会自动换行 -->
<a href="index2.html"> <img src="img/1.jpg" /> </a>
<hr /><!-- 实现一个分割的效果 -->
<font size="1">我是胖子</font><!-- size属性最大是7，最小是1,不会自动换行 -->
<b>我被加粗了</b><!-- 加粗标签,也不会自动换行 -->
<i>我是斜体字</i><!-- 斜体字，也不会自动换行 -->
<em>我是强调用的</em><!-- 也不换行 -->
<small>我是小号文字</small><!-- 也不换行 -->
<code>测试code</code><!-- 根据自己浏览器和计算机自动显示在页面上，基本没用过 -->
1<sub>0</sub> 2<sub>1</sub> 3<sub>2</sub><!-- 下标，不会自动换行 -->
<sup>我是上标(次方)</sup> 2<sup>5</sup><!-- 不会换行 -->
<del>我被废弃了</del><!-- 不会换行 -->
<ins>带下划线</ins><!-- 不会换行 -->
<pre>我有一个空格存在 我有一个空格存在</pre><!-- 用在讲课，在html上写Java代码 -->
<kbd>键盘输入</kbd><!-- 都不会换行 -->
<span>键盘输入</span><!-- 都不会换行 -->
<em>我叫定义地址</em>
<address>我也是定义地址</address>
</body>
</html>
3.CSS（Cascading Style Sheets）层叠样式表：
页面布局：
为标签定义颜色的三种方式：
Link方式插入CSS样式表；
写在HTML的head中的标签定义式；
写在内容的中的标签定义式；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<!-- 引入样式分为3种：讲究就近原则：离的越近，就先加载 -->
<!-- 使用link标签引入的样式，称为引入样式文件 -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- 第二种为一个标签定义一个样式 -->
<!-- 写在html的head标签中的样式称为内部样式(页面样式) -->
<style>
div {
color:blue;
font-size: 50px;
}
</style>
<!-- 第三种为一个标签定义一个样式 -->
<!--<link rel="stylesheet" type="text/css" href="css/index.css" /> 把需要的css样式文件导入到页面中，使页面可以使用css-->
</head>
<body>
<!-- 如果给标签添加一个样式 ：在标签中使用style属性 -->
<!-- 所有定义颜色的样式，都有两种写法：1.英文单词(red,yellow,blue,purple...),2.以#开头后面英文字母和数字组成的颜色编码(#e0e0e0,#eee,#000000...) -->
<!-- 第一种为一个标签定义一个样式 style="color: #eee;" -->
<!-- 一旦行内样式存在，其他的样式就不再起作用 -->
<div style="color: red;">我是div1</div><!-- 直接在标签中，以属性的形式添加的样式称为行内样式 -->
<!--<div>我是div2</div>-->
</body>
<ml>
引入的.css文件：
div {
color:yellow;
}
样式选择器：
id选择器；
类选择器；
标签选择器；
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>样式选择器</title>
<style>
/* 标签选择器 */
p {
color: red;
} span {
color: yellow;
}
/* id选择器 */
#div1 {
color: pink;
}
/* 类选择器 */
.h {
color:palegreen;
}
</style>
</head> <body>
<!-- 行内样式是不需要选择器的，写在哪个标签中就对这一个标签起作用，不会对任何其他标签起作用 -->
<p style="color:blue;">我是p标签1</p>
<!-- 标签选择器 -->
<p>我是p标签2</p>
<span>我是span标签</span>
<!-- id选择器，每一个标签中都存在一个id属性，如果不声明不可以使用，一个页面中只能出现一次id的名称，也就是id="div1"双引号中的值(div1)必须是唯一的，不能出现重复 -->
<div id="div1">我是div1</div>
<div id="div1">我是div2</div>
<h2 id="div1">我是h2标签</h2>
<!-- 类选择器 -->
<h3 class="h">我是h3标签</h3>
<h4 class="h">我是h4标签</h4>
<h1 class="h">我是h1标签</h1>
</body> </html>
样式Test：
a:link,a:hover,a:visited,a:active是有顺序的，如果不按照这个顺序是无法正确显示操作的样式，注意清空浏览器缓存
顺序为：
a:link {
color:green;
}
a:visited {
color:black;
}
a:hover{
color:red;
}
a:active {
color:yellow;
}
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>样式</title>
<style>
body {
/* background 背景*/
/*background-color: red; = background-color : red; */
/*background-image: url(img/beautiful.jpg);*/
/* 背景图片，默认平铺 */
/*background-repeat: no-repeat;*/
/*position:设置一个背景图片的位置，上下左右，左上左下右上右下，中间；背景图片一定不能平铺 */
/*background-position:center;*/
/* no-repeat:不平铺 repeat-x:横向平铺 repeat-y:纵向平铺 */
/*background-attachment: fixed;*/
/* fixed：(以center为例)背景图片固定不动，总是会出现屏幕的正中间 scroll:滚动，会一直在页面的正中间*/
/* 终极版 */
/*background: url(img/beautiful.jpg) no-repeat left top scroll;*/
} .h {
/* text */
/*text-align: center;*/
/* center:使文本居中 */
/*text-align: center;*/
text-align: justify;
/* 就是把文本的两端对齐 */
text-indent: 50px;
/* 缩进(单位是px(像素)) */
} #a1 {
text-decoration: none;
/* 去掉文本的下划线 */
} span {
text-decoration: line-through;
} h2 {
text-decoration: underline;
} h3 {
color: red;
/* 定义一个文本字体颜色只能用color */
font-family: "楷体";
/*font-family:默认微软雅黑(你的系统默认字体) 设置字体*/
font-style: oblique;
/* 倾斜的字体和斜体没有任何区别 */
font-size: 100%;
/* 字体的极小值为0，没有极大值 如果size的单位为百分号：100%就是默认的大小，以默认大小为基础，进行放大和缩小*/
font-weight: 900;
}
/* hover 当鼠标悬浮的时候执行的一种状态 */
/*.a2:hover {
color:orange;
}*/
/*hover, link, visited..只适用于a标签*/ .a2:link {
/* 在还没有点击a标签的时候显示成紫色 */
color: red;
} .a2:hover {
/* 当鼠标放在a标签上的时候，显示的颜色 */
text-decoration: none;
/*color:black;*/
} .a2:visited {
/* 当鼠标点击后，显示的颜色 */
color: brown;
} .a2:active {
/* 当正在点击a标签时，显示的颜色 */
background-color: red;
/*color:aqua;*/
}
/* circle：空心圆 */
/*#ul1 {
list-style-type: circle;
}*/
/* square：实心正方块 */
/*#ul1 {
list-style-type: square;
}*/
/* upper-roman:罗马数字 */
/*#ul1 {
list-style-type: upper-roman;
}*/
/**/
/* 小写的英文字母 */
#ul1 {
list-style-type: lower-alpha;
}
</style>
</head> <body> <h1 class="h">我是h1标签1</h1>
<h1 class="h">我是1标签2我是h12我是h1标签2我是h是h1标签2我是h1标签2我是h1标签2我是h1标签2我是h1标签2我是h1标签2我是h1标签2我是h1标签2我是h1标签2</h1>
<div class="h">我是div是v是div是div是diviv是div是div是div是v是div是div是div是div是div是div是div是div是div</div>
<a href="index.html">我要去index</a>
<a id="a1" href="http://www.baidu.com">我要去百度</a>
<del>我是del标签</del>
<span>我是span标签</span>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3> <a id="a3" href="#">收藏夹</a>
<a class="a2" href="#">商品分类</a>
<a class="a2" href="#">卖家中心</a>
<a class="a2" href="#">联系客服</a> <ul id="ul1">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul> </body> </html>