文档章节

HTML基础2

ricardohn
 ricardohn
发布于 2016/11/23 14:30
字数 397
阅读 25
收藏 0

无序列表:

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

有序 列表:

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

输入框:

<input type="text" placeholder="cat photo URL"> // 带占位符的文本输入框

表单交互:

<form action="/submit-cat-photo"> //action参数表示将表单数据提交到哪个接口进行处理
  <input type="text" required placeholder="cat photo URL"> //required属性表示必填
  <button type="submit">Submit</button> //提交按钮
</form>

单选按钮:

单选就是你只能在多个选项中选择一个,就好比你有很多追求者,但却只能选择一个结婚。

多选一的场景就用radio button(单选按钮)

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

注意:所有关联的单选按钮应该使用相同的name属性。

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> //checked属性表示默认选中
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <button type="submit">Submit</button>
</form>

复选按钮:

当你在大学选课时,面对几百门课程,而因为时间和精力,你只能从中选择十几门。

这样的场景就用checkboxes(复选按钮)

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

<form action="/submit-cat-photo">
  <label><input type="checkbox" name="personality" checked> 必须</label> //checked属性表示默认选中
  <label><input type="checkbox" name="personality"> 统一</label>
  <label><input type="checkbox" name="personality"> 中国</label>
  <button type="submit">Submit</button>
</form>

 

© 著作权归作者所有

上一篇: HTML基础3
下一篇: HTML基础1
ricardohn
粉丝 1
博文 76
码字总数 30236
作品 0
成都
私信 提问
完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号
2018/01/22
0
0
Linux运维有绝招

想要成为新时代的运维达人吗?全面掌握正确的学习路线。介绍一些入门教程带你轻松走进Linux世界的大门:1、Linux基础入门和架构了解:http://edu.51cto.com/course/course_id-948.html简介:...

让往事随风
2016/06/07
92
0
WebView与JS的交互

上一篇介绍了WebView的基础用法,可以移步下面的链接 WebView的基础用法 下面进入今天的正题 WebView与JS的交互 1.Android调用JS里面的方法 html文件如下 callJS里面有2句代码 1调用alter()...

tmyzh
2018/01/03
0
0
来自IOS开发工程师的零基础自学HTML5经验分享

移动互联网的火爆,而Html具有跨平台、开发快的优势,越来越受到开发者的青睐。感谢IOS开发工程师“小木_Boy”’带来的HTML5学习经验分享。 一、学习途径 1、很多视频网站 比如慕课、和极客学...

inw3cschool
2017/03/21
0
0
php递归函数实现无限级树型菜单

!!写递归函数,可考虑缓存,定义一些静态变量来存上一次运行的结果,多程序运行效率很有帮助. 大概步骤如下: 首先到数据库取数据,放到一个数组, 然后把数据转化为一个树型状的数组, 最后把这...

雍雍_yoyo
2014/09/24
427
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部