1.无序列表显示的是无序的,前面有圆点
<ul>
<li></li>
</ul>
2.有序列表显示出来是1. 2. 3. 4.
<ol>
<li></li>
</ol>
3.自定义列表
注意:dt和dd是平级的 dt是标题,dd是内容的描述
<dl>
<dt></dt>
<dd><dd>
<dd></dd>
</dl>
4.表格标签
table是一整个表格;tr表示一行;td表示每个单元格里的内容
表格的属性:边框值:border="1" 宽:width="500" 高:height="500
<table>
<tr></tr>
<td></td>
<td></td>
</table>
表格的标题:
<!-- caption:表格的标题 -->
<caption>标题</caption>
表头单元格:
<!-- th:表格每一列的小标题 在表格第一行 -->
<th></th>
注意:caption标签书写在table标签内部 th标签书写在tr标签内部(用于替换td标签)
表格的结构标签:thead:表格头部 tbody:表格主体 tfoot:表格底部
合并单元格步骤:
1.先合并判断合并哪几个单元格
2.上下合并,保留最上边的 左右合并,保留最左边的
3.合并行:rowspan 合并列:colspan
5.input标签
input标签很多属性值要牢记这些属性值
<!-- input 收集用户信息并提交给后台 -->
<!-- 文本框 text属性: placeholder:占位符 意思就是给个提示
只有输入框可以使用placeholer -->
<!-- value="姐姐" name="刘佳慧" -->
昵称:<input type="text" placeholder="请输入您的昵称" /><br /><br />
<!-- 密码框 如果password后加一个空格,输入密码的时候会把密码显示出来,意思就是看见密码 -->
密码:<input type="password" placeholder="请输入密码" /><br /><br />
<!-- 单选框 要想实现单选,必须给name加上属性值
默认选中属性:checked 多选和单选属性一样都是checked-->
性别:<input type="radio" name="gender" />男
<input type="radio" name="gender" checked />女 <br /><br />
答案:<input type="radio" name="password" />A
<input type="radio" name="password" />B <br /><br />
<!-- 复选框 -->
爱好:<input type="checkbox" />篮球 <input type="checkbox" />游泳
<input type="checkbox" />画画 <br /><br />
<!-- 文件框 multiple选择多个文件上传 -->
<input type="file" multiple /> <br /><br />
input 按钮标签
<!-- form:表单域 按钮要放在form表单域里才能生效 -->
<!-- 提交按钮 数据提交给后台 -->
<button type="submit">提交按钮</button>
<!-- 重置按钮 输入的数据清空 -->
<button type="reset">重置按钮</button>
<!-- 普通按钮 后期和js搭配使用 -->
<button type="button">普通按钮</button>
6.select 下拉标签
<!-- 用select搭配option来写
要想运行结果出来的时候默认显示谁,加上selected -->
城市:<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
<option>深圳</option>
<option>石家庄</option>
<option>南京</option>
</select>
7.label 标签 label标签的作用是点击文字可以选择而不是点击按钮
<!-- label标签 增加用户美观性 点击文字可以选择 -->
<!-- 第一种写法 -->
<label><input type="radio" name="gender" checked />男</label>
<input type="radio" name="gender" />女
<!-- 第二种写法 -->
<input type="radio" name="gender" checked id="ABC" />
<label for="ABC">男</label>
8.字符实体
空格:
小于号:<
大于号:>
9.布局标签
div: <div>独占一行</div>
span: <span>占整个文字的大小</span>