Collection
Collection
课程目录：
1 HTML列表
2 HTML块元素
3 HTML布局
4 HTML表单
5 HTML文本和密码输入框
6 HTML文本域
7 HTML单选框和复选框的使用
8 HTML下拉列表框
9 HTML下拉列表框多选
10 HTML表单提交按钮
11 HTML重置按钮
12 form表单中的label标签
1 HTML列表
①有序列表ol>li，默认排序方式以数字开头，通过type属性定义其他排序，添加start属性决定起始位置
<ol start="6"><li>测试文本1</li><li>测试文本2</li><li>测试文本3</li></ol><ol type="a"><li>测试文本1</li><li>测试文本2</li><li>测试文本3</li></ol>
②无序列表ul>li,设置属性disc实心圆，circle空心圆，square方块等
③定义列表dl>dt>dd<dl><dt>文本</dt><dd>说明补充</dd></dl>
2 HTML块元素
什么是块元素，什么是内联元素？块级元素（block属性）可定义宽width，高height及边框，边距，独占一行；内联元素(inline属性)与之相反。
①标签div
①-1：用来定义文档中的分区或节（division/seltion），没有特定含义，可以用来组合其他html元素的容器
①-2：由于它属于块级元素，浏览器会在其前后折行
①-3：容器、文档布局，取代table传统定义布局，表格table主要是用来显示表格的数据
②标签span
②-1：它用来组合文档中的其他行内元素，无特定含义，与css一起使用
②-2：它用来部分文本设置样式属性
3 HTML布局
大多数网页布局需要配合css来完成，css常用来对元素定位或者为网页面创建背景以及色彩丰富的外观
<!DOCTYPE HTML><html><head><title></title></head><body><container><header></header><pagebody><sidebar></sidebar><mainbody></mainbody></pagebody><footer></footer></container></body></html>
4 HTML表单
网站如何与用户进行交互？使用html表单(form)，表单是可以把浏览器输入的数据传送到服务器端，这样服务器端就可以处理表单传送过来的数据
①语法<form method="传送方式" action="服务器文件"></form>
②释义：
②-1：form标签成对出现
②-2：其中action为浏览者输入的数据，被传送到的地方，比方php页面(save.php)
②-3:其中method数据传送的方式为get或者post
5 HTML文本和密码输入框
①语法
<form method="传送方式" action="服务器文件"><input type="text/password" name="名称" id="" value="文本" /></form>
②释义
②-1：当type值为text时，文本输入框；当type值为password时，密码输入框
②-2:位文本框命名name属性，方便后台程序（asp、php）使用
②-3：位文本框设置默认值通过value属性值，一般起提示作用
6 HTML文本域
支持多行文本输入，当用户需要在表单中输入大段文字时，要用到文本输入框
①语法<textarea cols="列数" rows="行数">文本</textarea>
注意在文本域中输入默认值后，其中的cols域rows分别可以通过width域height代替
7 HTML单选框和复选框的使用
在使用表单设计调查表时，为了减少用户的操作，使用选择框是不错选择，html有2种选择框，即单选框和复选框
①语法<input type="radio/checkbox" value="值" name="名称" checked="checked" />
②释义
②-1:当type为radio时，控件为单选框；当type为checkbox时，控件为复选框；
②-2：value提交数据到服务器端的值
②-3：name属性为控件命名
②-4：checked=“checked”，默认选中
注意：同一组的单选框按钮，neme取值一定要一致，这样才可以起到单选框作用
8 HTML下拉列表框
<select name="city"><option value="北京" name="beijing">北京</option><option value="上海" name="shanghai" selected="selected">上海</option><option value="广州" name="guangzhou">广州</option></select>
有效节省网页空间，可单选也可多选；当设置option选项时，其中的selected=”selected”为默认选中
9 HTML下拉列表框多选
<select name="" multiple="multiple"><option value="">选项卡一</option><option value="">选项卡二</option><option value="">选项卡三</option></select>
在标签select中设置multiple=”multiple”属性，当windoes操作系统下多选为ctrl+单击
10 HTML表单提交按钮
<input type="submit" name="" id="" value="提交" />
11 HTML重置按钮
<input type="reset" name="" id="" value="重置" />
12 form表单中的label标签
语法<label for="控价名称"></label>
<form action="" method="post"><label>性别</label><input type="radio" name="sex" id="" value="boy"/><label for="boy">男孩</label><input type="radio" name="sex" id="" value="girl"/><label for="girl">女孩</label><input type="radio" name="sex" id="" value="wz"/ checked="checked"><label for="wz">未知</label></form>
说明：标签的for属性应该与相邻的控件id属性一致，标签label不会向用户展示任何特殊效果，它的作用是为鼠标改进了可用性；如果你在label标签内点击文本，就会触发控件，浏览器会自动将焦点转到和标签相关的表单控件，自动选中（对别添加label标签for属性的前后变化）
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
