目录
1.1列表标签
1.1.1无序列表
1.1.2有序列表
1.1.3自定义列表
1.2表格标签
1.2.1表格标题和表头单元格标签
1.2.2合并单元格
1.3表单标签
1.3.1input系列标签
1.3.2input系列标签-文本框
1.3.3input系列标签-单选框-单选功能和默认选中
1.3.4input系列标签-文件选择
1.3.5input系列标签-按钮
1.3.6button按钮标签
1.3.7select下拉菜单
1.3.8textarea文本域标签
1.3.9label标签
1.4语义化标签
1.5字符实体
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>lll</li><li>hhh</li></ul>
1.1.2有序列表
列表的每一项前有序号标识(1,2,3)
1.1.3自定义列表
dd前会默认显示缩进的效果
<dl><dt>个人信息</dt><dd>姓名</dd><dd>性别</dd></dl>
1.2表格标签
<table border="1px" width="500px"><tr><td>姓名</td><td>成绩</td></tr><tr><td>小米</td><td>98分</td></tr></table>
1.2.1表格标题和表头单元格标签
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就是退回四个空格
用这些标签,其实并没有什么效果,只是让浏览器更好识别
1.2.2合并单元格
将水平或垂直的多个单元格合并成一个单元格
左上原则:
上下合并——只保留最上的,删除其他
左右合并——只保留最左的,删除其他
<tr><td>小明</td><td rowspan="2">99分</td><td>真棒</td></tr><tr><td>小米</td><td>真棒</td></tr>
1.3表单标签
1.3.1input系列标签
input标签可以根据type属性值的不同,展示不同效果
文本框:<input type="text">
1.3.2input系列标签-文本框
text/password常用属性:
文本框:<input type="text" placeholder="请输入用户名">
1.3.3input系列标签-单选框-单选功能和默认选中
radio常用属性
性别: <input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br><input type="checkbox" checked>
1.3.4input系列标签-文件选择
file常用属性
<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下拉菜单
提供多个选项的下拉菜单
selected:下拉菜单的默认选中
<select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>苏州</option></select>
1.3.8textarea文本域标签
提供可输入多行文本的表单控件
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语义化标签
1.5字符实体
网页不认识多个空格,只认识一个
我在学 空格