HTML
框架
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
文本
- 注释
<!-- 注释 --> - 换行
<br> - 标题
<h1></h1> - 段落
<p></p> - 分割线
<hr>，属性：color width size align - 加粗
<b></b> - 斜体
<i></i> - 字体
<font></font>，属性：color size face - 居中
<center></center>
注意，HTML5不建议使用标签属性，建议使用css设置。属性值单双引号都可以。
属性color的表示：
- 英文：red green blue
rgb(0, 0, 255)- 十六进制
#0000FF
图片
标签：<img src="./image/test.jpg">
属性：
- align width height
- alt="xxx", 图片加载失败，提示信息
列表
标签：
- 有序
<ol> <li></li> </ol> - 无序
<ul> <li></li> </ul>
列表属性：
- 有序type：1 A a I i
- 无序type: disc square circle
超链接
标签：<a href="http://www.baidu.com">百度</a>
属性：
- target打开位置：_self当前标签打开 _blank空白标签打开
表格
<table border="1" cellspacing="0">
<caption>信息表</caption>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
</table>
表格属性：width border cellpadding cellspacing bgcolor align
HTML5新增（没有格式）：
<thead>表格头<tbody>表格体<tfoot>表格尾
行属性：bgcolor align
单元格属性：colspan合并列 rowspan合并行
表单
method有get和post
get显示密码，参数长度受限，封装在请求行中。
post不会显示，参数长度不限制，会封装在请求体内。
标签：
- input：通过type属性改变样式
- select: 下拉列表
- textarea: 文本域
<label for="name"></label>标签中的for属性需要后面的有一个id属性，说明标签对应的选项。
<form action="#" method="get">
<label for="username">昵称：</label>
<input type="text" name="username" placeholder="请输入用户名" id="username"> <br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"> <br>
性别：<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女 <br>
爱好：<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="java" checked> Java <br>
图片：<input type="file" name="file"> <br>
生日：<input type="date" name="birth"> <br>
<!--下拉列表-->
地区：
<select name="city">
<option selected> --请选择--</option>
<option value="1">北京</option>
<option value="2">南京</option>
</select> <br>
备注：<br>
<textarea cols="20" rows="3"> </textarea> <br>
<!--隐藏域--> <input type="hidden" name="id" value="aaa">
<!--一般提交按钮--> <input type="submit" value="提交"> <br>
<!--图片提交按钮--> <input type="image" src="image/icon_1.jpg"> <br>
</form>
块
标签：
<dev></dev>占一行，块级别<span></span>行内标签
语义化标签
html5中为了提高程序的可读性，提供了一些标签，但是这些标签都没有格式。
页眉<header></header>
页脚<footer></footer>
CSS
CSS使用方式
Cascading style sheets层叠样式表
使用方式：
- 内联样式：定义在标签内
<div style="color:red;"></div> - 内部样式：定义在head内，在
<style> div{...} </style>定义 - 外部样式：用
<link rel="stylesheet" href="css/a.css">引用
CSS定义
语法：
- css定义格式：
选择器{属性名:属性值;...} - 选择器：基本选择器，扩展选择器
- 属性：有许多，下一章讲
基本选择器：
- 元素选择器：等级最低
- 类选择器：等级中间，设置具有同样属性的内容，可以共用。
- id选择器：等级最高，设置特定标签的内容，单独使用。
<!DOCTYPE html>
<head>
<title>Test</title>
<style>
#div1{color: red;}
div{color: green;}
.cls1{color: blue;}
</style>
</head>
<body>
<div id="div1">Hello</div>
<div>Word</div>
<div class="cls1">haha</div>
</body>
</html>
扩展选择器：
- 选择所有元素：
*{}； - 并集选择器：
选择器1,选择器2{}； - 子选择器：
选择器1 选择器2{}； - 父选择器：
选择器1>选择器2{}； - 属性选择器：
元素名称[属性名="属性值"]{}； - 伪类选择器：
元素:状态{}， 比如a:link{color:red;}；
CSS属性
文本
font-size: 20px;color: red;text-align: left;line-height: 15px;
背景: background: url("image/logo.jpg") no-repeat center;
边框: border: 1px solid green;
尺寸: 200px; height: 100px;
盒子模型
- 外边距
margin: 50px 50px; - 内边距
padding: 50px 50px;默认情况下，内边距会影响盒子大小 - float：
float:left;