HTML+CSS基础知识个人笔记_1
HTML表格
表格的创建
表格创建方式， table>cap+tr>td或者table>tr>th，th为表头，caption为标题
注意和dl的小差别，dl dt dd 的dd为空，不会占位。目前是如此。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 三参为0！！！ border cellspacing cellpadding -->
<!-- cellspacing 单元格与单元格之间的距离 类似margin -->
<!-- cellpadding 单元格内容与单元格边框的距离 类似padding -->
<!-- 与dl dt dd区分，dl>dt+dd
table>cap+tr>td table>tr>th -->
<table width="200" align="center" border="0" cellspacing="0" cellpadding="0">
<!-- 表格标题紧跟表格！ 且只存在于此！ 一般而言，td方可包含任意，此为唯一
例外 -->
<caption>user info</caption>
<!-- align 加在tr，行内居中 用CSS更简单-->
<tr align="center">
<!-- align 加在td，单元格内居中 -->
<!-- th表头 -->
<th>name</th>
<th>sex</th>
<th>num</th>
</tr>
<tr>
<!-- 表格td为空，但是会占一个单元格，区别自定义列表元素为空 -->
<td></td>
<td>male</td>
<td>111</td>
</tr>
<tr>
<td>xiaohong</td>
<td>female</td>
<td>222</td>
</tr>
</table>
<!-- 无序列表为空，会占位 -->
<ul>
<li></li>
<li>123</li>
<li>123</li>
</ul>
<!-- 有序列表为空，会占位 -->
<ol>
<li></li>
<li>123</li>
<li>123</li>
</ol>
<!-- 自定义列表为空，不会占位 -->
<dl>
<dt>name</dt>
<dd>123</dd>
<dd></dd>
<dd>123</dd>
</dl>
</body>
</html>
合并单元格
自左向右，自上而下，不要忘记注释或删掉被合并的单元格，个数不要超出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03_合并单元格</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr align="center">
<td colspan="3">123</td>
<!-- colspan rowspan 自左向右，自上而下，不要忘记注释或删掉被合并的
单元格，个数不要超出，虽然目前OK -->
<!-- <td>abc</td> -->
<!-- <td>ABC</td> -->
</tr>
<tr align="center">
<td>123</td>
<td rowspan="2">abc</td>
<td>ABC</td>
</tr>
<tr align="center">
<td>123</td>
<!-- <td>abc</td> -->
<td>ABC</td>
</tr>
</table>
</body>
</html>
HTML input 控件
input radio类型一组的要指定相同的name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>04_input控件</title>
<style>
/*选择器 { 属性： 值； } ------ 选择器，选择标签的*/
th {
color: skyblue;
}
td {
font-size: 14px;
}
tr {
height: 20px;
}
</style>
</head>
<body>
<table width="600" align="center">
<!-- 行内式 内联样式 -->
<caption> <h3 style="color: pink; font-size: 35px;">information</h3>
</caption>
<!-- 以下是性别 -->
<tr height = "50px">
<td>性别</td>
<td>
<!-- radio 一组的必须指定相同的name -->
<input type="radio" name="sex" checked="checked" /> 男
<input type="radio" name="sex" /> 女
</td>
</tr>
<!-- 以下是所在地区 -->
<!-- CSS修饰优先级似乎高于HTML，内联样式似乎高于内部样式表 -->
<tr style="height: 50px;">
<td> <label for="diqu">所在地区</label> </td>
<td>
<input type="text" value="北京" style="color: #ccc;" id="diqu" />
</td>
</tr>
<!-- 以下是年份 -->
<tr height = "50px">
<td>年份</td>
<td>
<select>
<option>选择年份</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
</select>
</td>
</tr>
<!-- 以下是籍贯 -->
<tr height = "50px">
<td>籍贯</td>
<td>
<select>
<option>选择籍贯</option>
<option>上海</option>
<option>杭州</option>
<option>广州</option>
<option selected="selected">台州</option>
</select>
</td>
</tr>
<!-- 以下是婚姻状况 -->
<tr height = "50px">
<td style="color: blue;">婚姻状况</td>
<td>
<input type="radio" name="hunyin" /> 未婚
<input type="radio" name="hunyin" /> 离婚
<input type="radio" name="hunyin" /> 丧偶
</td>
</tr>
<!-- 以下是学历 -->
<tr height = "50px">
<td>学历</td>
<td>
<input type="text" value="小学" />
</td>
</tr>
<!-- 以下是月薪 -->
<tr height = "50px">
<td>月薪</td>
<td>
<input type="text" value=“5000-10000 />
</td>
</tr>
<!-- 以下是手机号 -->
<tr height = "50px">
<td>手机号</td>
<td>
<input type="text" />
</td>
</tr>
<!-- 以下是昵称 -->
<tr height = "50px">
<td>昵称</td>
<td>
<input type="text" />
</td>
</tr>
<!-- 以下是喜欢的类型 -->
<tr height = "50px">
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="xihuan" checked="checked" /> A
<input type="checkbox" name="xihuan" /> B
<input type="checkbox" name="xihuan" /> C
<input type="checkbox" name="xihuan" /> D
</td>
</tr>
<!-- 以下是密码 -->
<tr height = "50px">
<td>密码</td>
<td>
<input type="password" maxlength="6" />
</td>
</tr>
<!-- 以下是按钮 -->
<tr height = "50px">
<td></td>
<td>
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="https://edu-ad-test-
cdn.cdn.bcebos.com/d33cbe6cd5bf44e168940d576b0477d9
/b92c5a029665d33cf0ebb318517666ca.png" />
</td>
</tr>
<!-- 以下是上传头像 -->
<tr height = "50px">
<td>上传头像</td>
<td>
<input type="file" />
</td>
</tr>
<!-- 以下是同意 -->
<tr height = "50px">
<td></td>
<td>
<input type="checkbox" />
我同意
</td>
</tr>
<!-- 以下是会员 -->
<tr height = "50px">
<td></td>
<td>
<a href="https://wenku.baidu.com/user/mydocs">我是会员，立即
登录</a>
</td>
</tr>
<!-- 以下是建议 -->
<tr height = "50px">
<td>建议</td>
<td>
<textarea cols="50" rows="30">now</textarea>
</td>
</tr>
<!-- 以下是标语 -->
<tr height = "50px">
<td></td>
<td>
<h4>null</h4>
<ul>
<li>abc</li>
<li>ABC</li>
<li>123</li>
</ul>
</td>
</tr>
</table>
</body>
</html>