目录
Summary:
这里的name是为了将选项归为一组,只能选一个
只有在select下拉菜单时,默认选中用selected,其他的都用checked,比如checkbox, radio
在文本框中用placeholder--这时显示的是有透明度的字,输入时没有影响value中的内容会呈现出来,对输入有影响
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 用来提示输入者输入的类型
1.1列表标签
1.1.1无序列表
| 标签名 | 说明 |
| ul | 表示无列表的整体,用于包裹li标签 |
| li | 表示无序列表的每一项,用于包含每一行的内容 |
列表的每一项前默认显示圆点标识
<ul>
<li>lll</li>
<li>hhh</li>
</ul>
1.1.2有序列表
| 标签名 | 说明 |
| ol | 表示有列表的整体,用于包裹li标签 |
| li | 表示有序列表的每一项,用于包含每一行的内容 |
列表的每一项前有序号标识(1,2,3)
1.1.3自定义列表
| 标签名 | 说明 |
| dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
dd前会默认显示缩进的效果
<dl>
<dt>个人信息</dt>
<dd>姓名</dd>
<dd>性别</dd>
</dl>
1.2表格标签
| table | 表格整体,可用于包裹多个tr |
| tr | 表格每行,可用于包裹td |
| td | 表格单元格,可用于包裹内容 |
<table border="1px" width="500px">
<tr>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>小米</td>
<td>98分</td>
</tr>
</table>
1.2.1表格标题和表头单元格标签
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
caption标签书写在table标签内部
th标签书写在tr标签内部
<table border="1" width="300">
<caption><strong>学生成绩单</strong></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小明</td>
<td>99分</td>
<td>真棒</td>
</tr>
</table>
一个快捷键 Tab Shift+Tab就是退回四个空格
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
用这些标签,其实并没有什么效果,只是让浏览器更好识别
1.2.2合并单元格
将水平或垂直的多个单元格合并成一个单元格
左上原则:
上下合并——只保留最上的,删除其他
左右合并——只保留最左的,删除其他
| 属性名 | 属性值 | 说明 |
| rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
<tr>
<td>小明</td>
<td rowspan="2">99分</td>
<td>真棒</td>
</tr>
<tr>
<td>小米</td>
<td>真棒</td>
</tr>
1.3表单标签
1.3.1input系列标签
input标签可以根据type属性值的不同,展示不同效果
| type属性值 | 说明 |
| text | 文本框,用于输入单行文本 |
| password | 密码框,用于输入密码 |
| radio | 单选框,用于多选一 (圆圈) |
| checkbox | 多选框,用于多选多(方块) |
| file | 文件选择,用于之后上传文件 |
| submit | 提交按钮,点击之后提交数据给后端服务器 |
| reset | 重置按钮,点击之后恢复表单默认值 |
| button | 普通按钮,默认无功能,之后配合js添加功能 |
文本框:<input type="text">
1.3.2input系列标签-文本框
text/password常用属性:
| 属性名 | 说明 |
| placeholder | 占位符。提示用户输入内容 |
文本框:<input type="text" placeholder="请输入用户名">
1.3.3input系列标签-单选框-单选功能和默认选中
radio常用属性
| 属性名 | 说明 |
| name | 分组,有相同name属性值的单选框为一组 |
| checked | 默认选中 |
性别: <input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
<br>
<input type="checkbox" checked>
1.3.4input系列标签-文件选择
file常用属性
| 属性名 | 说明 |
| multiple | 多文件选择 |
<input type="file" multiple>
1.3.5input系列标签-按钮
按钮标签需要配合form标签使用
form使用方法:用form标签把表单标签一起包裹起来即可
<form action="">
文本框:<input type="text" placeholder="请输入用户名">
<br>
性别:<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
<br>
<input type="checkbox" checked>
<br>
<input type="file" multiple>
<br>
<input type="submit" value="">
<input type="reset">
<input type="button" value="普通按钮">
</form>
action属性规定当提交表单时,向何处发送表单数据
1.3.6button按钮标签
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
1.3.7select下拉菜单
提供多个选项的下拉菜单
| select | 下拉菜单的整体 |
| option | 下拉菜单的每一项 |
selected:下拉菜单的默认选中
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>苏州</option>
</select>
1.3.8textarea文本域标签
提供可输入多行文本的表单控件
| cols | 规定了文本域内可见宽度 |
| rows | 规定了文本域内可见行数 |
colspan水平合并
rowspan垂直合并
文本域右下角
可进行拖拽,以此改变大小
<textarea name="" id="" cols="30" rows="10"></textarea>
1.3.9label标签
用于绑定内容与表单标签的关系
性别:
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label><input type="radio" name="sex">女</label>
<!-- 这里要把for删除掉 -->
1.4语义化标签
| div标签 | 一行只显示一个(独占一行) |
| span标签 | 一行可以显示多个 |
1.5字符实体
网页不认识多个空格,只认识一个
| 空格 | |
我在学 空格
1973



被折叠的 条评论
为什么被折叠?



