列表标签
html中有 有序列表(ol)、无序列表(ul)和自定义列表(dl) 。不管何种列表,其中只能涵盖列表项标签(li),dl标签除外
有序列表
<ol></ol>
有序列表标签,第一层嵌套内只能包含<li></li>
<li></li>
列表项标签,可以包裹任何标签和文本,块级元素
无序列表
<ul></ul>
无序列表标签,第一层嵌套内只能包含<li></li>
type="disc"` 默认的
type="circle"` 空心圆点
type="square"` 小正方形(实心的)
嵌套列表
当需要多级⽬录,或多级列表时,可采取列标签套的⽅法,写法与普通列表书写⽅法⼀样,只是在列表项中再增加列表。
表格
表格标签
<table></table>
应用于pc端部分分布,手机端不可用table标签布局
<caption></caption> 表格标题标签
只可以包裹文本,必须在<table></table>标签内嵌套的第一行出现
<thead></thead> 表头标签
<tbody></tbody> 表体标签
表格的行列
<tr></tr> 行标签
<th></th> 加粗列标签,一般放在表头,当作列标题使用
<td></td> 列标签
表格标签的相关属性
<table>标签下的属性
border 表格边框宽度
height 表格整体高度
width 表格整体宽度
border-collapse 需要写在 style 样式中`style="border-collapse: collapse;"` 除去缝隙
cellpadding 边框与单元格的距离
cellspacing 单元格边框宽度
align
对齐方式
left、center、right
bgcolor 表格背景颜色
background
url
表格的背景图片
<th> 、<td>标签下的常用属性
width
设置单元格的宽
heigth
设置单元格的高
align
left、center、right
水平移动
拆分、合并单元格
colspan
合并列
rowspan
合并行
表单元素
表单标签
<form></form>
表单标签
常用属性
name 主要是对这个from进行标记
methood="get/post"
action 处理表单提交的URL(可以为node中的路由接口地址)
enctype
当method属性值为post时,enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded:未指定属性时的默认值。
input标签及控件
<input/> 最重要的表单元素。它有很多形态
input 标签是内联元素,但属于特殊的内联元素,可以定义宽度高度,单不自占一行 <input type="控件名称" />
文本框
type="text"`定义单行文本输入域,用户可在其中输入文本
value=""`代表初始值,用户输入后可通过事件获取该属性的值
placeholder="xxx"` 占位符,可用来作为对用户的提示文字
name=""`可与服务器交互数据的元素标示,可以在服务器端根据其 name 取得元素提交的值
maxlength` 属性配合使用,可创建合法值范围,直接写数字
<input type="text" placeholder="输⼊⽤户名" name="username" maxlength="10" />
密码框
type="password"`定义密码输入域,用户在该域中输入的字符不直接显示,而是显示星号或实心圆。
具有`value、placeholder、name`属性
<input type="password" placeholder="输⼊密码" name="pwd" />
单选框
`type="radio"`定义单选框,用户只能在多个选项中选择其中一个。
checked` 属性代笔表默认被选中的,可以不用写值
例:<input type="radio" name="sex" checked />男 <input type="radio" name="sex" />⼥
复选框
type="checkbox"`定义复选框,用户可以在多个选项中选择一个或多个。
复选框有一个很重要的属性,name 属性。name 属性相同则可以让复选框变为一组,从而达到记录复选内容的目的。
例:<input type="checkbox" name="eat" checked />吃⾯
<input type="checkbox" name="eat" />吃饭
<input type="checkbox" name="eat" checked />吃⼟
按钮
type="submit"`定义提交按钮
type="reset"`重制表单里所有的内容会被清空,默认按钮文字为重制
type="button"`普通按钮没有功能,需要 value 属性指定按钮文字
例:<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮" />
文件上传
type="file"` 的`<input>` 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上
multiple`属性表示允许选择多个文件。 当这个属性存在在标签中,则可以同时上传多个文件。
例:<input type="file" />
<!-- 多⽂件上传 -->
<input type="file" multiple />
html5新增type属性
type="number"`用于输入数字的字段,其中 min 设定允许的最小值;max 设定允许的最大值;value 规定默认值;还有 step 可规定合法数字间隔;
type="email"`专用于 email 的输入,省去了正则表达式的编写
type="color"`使用 color 属性能直接调用系统的颜色调节窗口,默认为黑色
type="range"`定义用于精确值不重要的输入数字的控件;min 属性指定最小值限制,max 属性指定最大值限制,step 属性规定合法数字间隔,value 属性规定默认值,
type="date"`可用来选择或输入日期,包括(年/月/日)不包括时间
标记标签
<label></label>
它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件
例:<label>⽤户名:</label><input type="text" placeholder="请输⼊⽤户名" />
<input type="checkbox" id="mianmi" /><label for="mianmi">30天免密码登录</label>
菜单标签
<select></select>` 下拉菜单标签,双标签,但不能单独存在,只能包裹
<option></option>` 标签是选项标签
<option></option>`的`value`属性是可以获取并且得到该下拉菜单用户选择的是哪一项
multiple`属性代表该下拉菜单可以多选。
文本域
<textarea></textarea>`文本域标签具有滚动条的多行文本输入控件,与单行文本框 text 控件不同
它不能通过 maxlength 属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。
- 文本域禁止缩放的样式`resize:none;`
例:<textarea name="" cols="30" rows="10" style="resize:none;"></textarea>
列表标签、表格、表单、input标签及控件
最新推荐文章于 2023-02-21 00:08:43 发布