WEB第二天

列表的使用

<ul>
</ul>
<ol>
<li>有序列表</li>
</ol>

无序列表一般默认为实心圆,可在style里设置list-style-type为:square(小方块) disc(实心圆) circle(空心圆);list-style:none;清除列表格式。
自定义列表的应用:
<dl>自定义标签中最大的结构盒子
<dt>顶层项目 前面 上面 左边 (注意:不能嵌套块级标签)
<dd>底层项目 后面 下面 右边 (任何标签都可以嵌套)
<dl>
<dt>计算机</dt>
<dd>用来计算的机器</dd>
<dl>
设置下划线text-decoration:underline ;

表单(form)常见元素
<label> <input>(常见type有:text、password、radio、checkbox、button、image、submit、reset、number、file) <select>(搭配option使用) 
<textarea>
*type为radio时要设置name才能实现单选功能。
*type为text时,与label搭配,text设置id,label for="text的id"。即可实现鼠标移到文字可使文本框获取焦点。
*所有按钮放到表单内才能对表单内元素起作用。例如:reset、submit。
*input的type值为number时, <input type ="number" min="" max="" step=""/>设置最大最小值,加减的幅度为step数值。
*file(浏览计算机文件)
list的应用
预设text的可能值,在输入框输入值时,匹配的相关可能值在文本框下方列出。

<input type="text" list="list"/>
<datalist id="list">
<option value="56231"></option>
<option value="452"></option>
<option value="233"></option>
同时选择多个文件:
<input type="file" mutiple="mutiple"/>
pattern正则表达式(简单验证)
<form action=""> <input type="tel" pattern="[0-9]{11}" required/> <input type="submit" /> </form>
<input type="tel" pattern="[0-9]{11}" required/>
<input type="submit" />
</form>
<input type="tel" pattern="[0-9]{11}" required/>
<input type="submit" />
</form>
*【0-9】:只能输入0-9的数值。
*{11}位数为11位。
*required:验证是否为空值。
autofocus:自动获取焦点。
<input type="text" autofocus/>


fieldset表单
<fieldset>
<legend>表单标题</legend>
<form>
<input type="text"/>
<input type="text"/>
</form>
</fieldset>

<ul type="none">

<li>1</li>

<li>2</li> <li>3</li> <li>4</li> </ul> <ol> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ol> <ul> <li>咖啡 <ul> <li>蓝山</li> <li>摩卡</li> </ul> </li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶 <ul> <li>纯牛奶</li> <li>酸奶</li> </ul> </li> </ul>

 
 
 
 

</datalist>

 
 
 
 

                
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值