HTML基础

一、列表

1.创建一个无序列表
无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。

<ul><li>牛奶</li><li>奶酪</li>
</ul>

2.创建一个有序列表
有序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾。

<ol><li>加菲猫</li><li>哆啦A梦</li>
</ol>

二、form表单

1.input输入框

<input type="text">

注意：input输入框是没有结束标记的。
2.Placeholder占位符
Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。（没输入之前的默认文本）

<input type="text" placeholder="this is placeholder text">

3.创建一个表单
通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。

<form action="/url-where-you-want-to-submit-form-data"></form>

4.给表单添加提交按钮
添加一个submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的地址上。

<button type="submit">this button submits the form</button>

5.给表单添加一个必填字段
如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了。

<input type="text" required>

确保input元素中有required属性，否则无法提交表单。
6.创建一组单选按钮
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label元素中。
所有关联的单选按钮应该拥有相同的name属性。
最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

7.创建一组复选框
复选框是input输入框的另一种类型。
每一个复选框都应该嵌套在它自己的label元素中。
所有关联的复选框应该拥有相同的name属性。
最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。

<label for="1"><input id="1" type="checkbox" name="check">足球
</label>
<label for="2"><input id="2" type="checkbox" name="check">篮球
</label>
<label for="3"><input id="3" type="checkbox" name="check">网球
</label>

8.给单选按钮和复选框添加默认选中项
通过给input元素添加checked属性，可以设置某个单选按钮或多选按钮被默认选中。

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" checked>Indoor
</label>
//单选
<label for="1"><input id="1" type="checkbox" name="check" checked>足球
</label>
//复选

你坚持看到了这儿，谢谢你的阅读！

HTML基础_Day02相关推荐

CSS基础_Day02
CSS基础一.字体 1.更改元素的字体大小字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
大数据_java基础_day02
基础案例 1.训练案例1 训练描述键盘录入一个int类型的数据,使用三元运算符判断这个数是奇数还是偶数操作步骤描述创建键盘录入对象调用方法获取输入的数据将变量%2如果 == 0 是偶数,否则 ...
【unity基础_Day02】 Tranform组件及常见的API
一.常用API 1.Transform (1)Vector3 (2)translate(参数1:世界坐标,参数2:局部坐标) (3)FixUpdate:以固定帧数更新,主要作用于物理或者刚体等组件 ( ...
每日整理Python基础——python教程入门学习
01_Linux基础 1.操作系统的作用? 操作系统是配置在计算机硬件上的第一层软件,主要作用是管理好硬件设备. 2.Linux中根目录和家目录分别用什么表示? /表示根目录.~表示家目录 3.Lin ...
java入门慕路径,Java入门基础知识总结学习教程大全【必看经典】
类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...
提交表单自动刷新_Web自动化测试：元素的基础操作和浏览器基础操作
上一节,我们了解了如何定位元素,其实也有涉及对于元素的操作,这一节我们就详细的介绍一下对于元素的操作和对于浏览器的一些操作一.对于元素的基础操作: clear():清除输入框内的文本 send_ke ...
java mybatis基础
java mybatis基础 1.1 什么是mybatis? mybatis是一个优秀的持久层框架. 避免几乎所有的JDBC代码和手动设置参数以及获取结果集的过程. 可以使用简单的xml或者注解来配置 ...
【J2SE】学习基础
Java基础语法基础 OO Exception Array 基础类 I/O Stream Collection/Generic Thread TCP/UDP GUI Meta Data Regula ...
【Linux系统】基础总结
我不太清楚运维部门具体是做什么的,就接触过一点点运维部门! 也就是是知道他们负责管理服务器,管理网络,管理项目部署偶尔自己需要部署,不得不接触一些linux命令.简单总结一些基础 linux系统发展 ...

HTML基础_Day02

HTML基础

一、列表

二、form表单

HTML基础_Day02相关推荐

最新文章

热门文章