HTML5+CSS3 html02-基础
1、无序列表
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
有序列表
<ol>
<li>张三100</li>
<li>里斯90</li>
</ol>
自定义列表
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
dt标签：表示自定义列表的主题 dd前会默认显示缩进效果 如图
2、代码往后 tab 往前shift+tab
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒, 第一名</td>
</tr>
</tbody>
</table>
注释:boder 边框
caption表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 替换td
thead：表格头部 • tbody：表格主体 • tfoot：表格底部 视觉上无变化，提高代码处理效率
3、合并单元格
rowspan：跨行合并→垂直方向合并colspan：跨列合并→水平方向合并
![]()
![]()
![]()
左上原则 合并保留位置左边和上边的单元格代码
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>99分</td> -->
<td>真棒, 第二名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- <td>真棒, 相亲成功</td> -->
</tr>
</tfoot>
不能跨：thead、tbody、tfoot合并
4、input标签的type属性值
占位符(没有输入值的提醒文字)：placeholder
如果需要实现单选效果，需要设置相同的name属性值 • 单选框和多选框的默认选中：checked
multiple 多文件选择
按钮框上文字：value
下拉菜单select标签：下拉菜单的整体
option标签：下拉菜单的每一项
selected：下拉菜单的默认选中
textarea文本域标签
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
lab标签：实现点字也能选中单选框
使用方法：1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可
例 <label><input type="radio" name="sex"> 女</label>
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
空格的字符实体是？
快速复制 alt+shift+向下箭头
加标签 先剪切 敲新标签 再粘贴
表格案例
<body>
<table border="1" width="500" height="400">
<caption><strong>优秀学生信息表格</strong></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</table>
</body>
会员注册表单
<body>
<form action="">
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
昵称：<input type="text" placeholder="请输入昵称">
<br>
<br>
性别：
<label><input type="radio" name="sex" checked> 男</label>
<label ><input type="radio" name="sex"> 女</label>
<br>
<br>
所在城市：
<select >
<option >北京</option>
<option selected>上海</option>
<option >广州</option>
<option >深圳</option>
</select>
<br>
<br>
婚姻状况：<input type="radio" name="hunyin" id="" checked>未婚
<input type="radio" name="hunyin" id="" >已婚
<input type="radio" name="hunyin" id="" >保密
<br>
<br>
喜欢的类型：
<label ><input type="checkbox" name="" id="" checked>可爱</label>
<label ><input type="checkbox" name="" id="" checked>性感</label>
<label ><input type="checkbox" name="" id="">御姐</label>
<label ><input type="checkbox" name="" id="">萝莉</label>
<label ><input type="checkbox" name="" id="">小鲜肉</label>
<label ><input type="checkbox" name="" id="">大叔</label>
<br>
<br>
个人介绍：
<br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<br>
<br>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>年满18岁、单身</li>
<li>年满18岁、单身</li>
</ul>
<input type="checkbox">我同意所有条款
<br>
<!-- <button type="submit">免费注册</button> -->
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
效果图
浙公网安备 33010602011771号