VIII. List
1. The role of the list
| Let structured data display, add identification before data But now the page layout, often used to unordered list |
2. The composition of the list
① ordered list
| <ol> <li></li> ... </ol> Attributes: type: set list identifies the type of Value: 1 Default a A letter identification item i I identify items to Roman numerals start: Start value setting ID entry |
② unordered list
| <ul> <li></li> .... </ul> Attributes: type setting identifies the type of list item Value: disc solid dots circle Hollow circle square square none None ul very frequently used in the project, commonly used in the layout and typesetting for a group of similar content |
3. nested list
All nested content, must be written in li, this is a semantic requirements
① other elements nested in a list
| <ol> <Li> <a href="#"> dumpling copy orange </a> </ li> <a href="#"> fried rice balls orange </a> <Li> <a href="#"> tomatoes, fried moon cake </a> </ li> <a href="#"> tomatoes, fried moon cake </a> <Li> <a href="#"> fried rind bitter </a> </ li> <a href="#"> fried rice balls orange </a> </ol> |
② list nested list
| <H2> list nested lists </ h2> <ul> <Li> American super hero pole <ul> <li>狼叔</li> <li>寡姐</li> <li>小姐姐</li> </ul> </li> <li>日本的超极英雄 <ul> <li>凹凸曼</li> <li>夜礼服假面</li> <li>蜡笔小新</li> </ul> </li> <li>中国的超极英雄 <ul> <li>葫芦娃</li> <li>孙悟空</li> <li>蔡徐坤</li> </ul> </li> </ul> |
4.定义列表
| 对一个名词，进行解释说明的时候，使用的列表，h5新标签 <dl> <dt>要解释的名词</dt> <dd>对名词的说明内容</dd> </dl> |
九.结构标记
1.作用
| 用于网页布局,h5新出了一批结构标记，替代div做布局 这些结构标记与div的作用一模一样，只是增加了可读性 |
2.常用的结构标记
| <header></header>
导航栏<nav></nav> aside section
<footer></footer> |
1.<header></header> 定义网页的头部，或者某个区域的头部 2.<footer></footer> 定义网页的底部，或者某个区域的底部 3.<nav></nav>定义网页导航栏 4.<section></section> 定义网页主体内容 5.<aside></aside>定义侧边栏 6.<article></article> 定义与文字相关的内容 ex：论坛，回帖，用户评论 |
十.表单(重点&难点************)
1.作用
| 1.提供可视化的输入控件 2.收集用户输入的信息，并提交请求给服务器 总结： form自带提交请求收集数据的功能 ajax提交请求，需要自己去收集数据 使用ajax就不要使用form |
2.form的组成
| 前端：提供表单控件，与用户交互的可视化控件 后端：后台的接口对提交的数据进行处理 |
3.form表单的使用
①语法
| <form action="接口url" method="提交的方法"></form> |
②form的属性
| 1.action 定义表单提交时发送的动作(向哪个url发送请求) 如果action不写，或者action没有值，默认把请求发给本页面 |
| 2.method 定义表单的提交方式 2.1 get方法 默认值 特点：明文提交，提交的内容会显示到地址栏上 get提交的数据，有大小限制，最大2kb 使用时机：向服务器要数据的时候使用 2.2 post方法 特点：隐式提交，提交的内容不会显示到地址栏 post提交的数据没有大小限制 使用时机：要传递数据给服务器的时候使用 2.3其它的方法---使用form表单，目前不许使用delete,put,option delete put option---ajax使用这些方法 |
| 3.enctype 指定表单数据的编码方式 允许将什么样数据提交给服务器 取值：1.text/plain 允许提交普通字符给服务器 2.multipart/form-data 允许提交文件给服务器 3.application/x-www-form-urlencoded允许提交任意字符给服务器(文件不能提交) |
4.表单控件，在form表单中，能够与用户进行交互的可视化控件
①分类
| input标签 基础9种， h5新标签10种 textarea 多行文本域 select和option 下拉选择框 其它元素 |
②input元素
| <input type=""> 属性： 1.type 指定input元素的类型 2.name 为控件定义名称，把名称提供给服务器端使用 如果form表单想提交数据，必须写name属性 3.value 控件的的值，就是传递给服务器的值 例外，在button中使用的时候，value是按钮上的文本 4.disabled 禁用 不能修改，也不可提交 无值属性，在使用的时候，不写值 |
③input详解
| 1.文本和密码框 文本框 type="text" input默认是文本框 密码框 type="password" 属性： maxlength 设定输入的最大长度 readonly 只读，无值属性。不能修改但是可以提交 placeholder 占位提示符，默认显示在框内的提示文本 |
| 2.按钮 type="submit" 将表单中的数据，收集整理，并发送给服务器 type="reset" 将当前表单恢复到初始化状态 type="button" 没有功能，配合事件，调用js代码 附加知识点 <button></button>替代了submit |
| 3.单选/复选按钮 name属性除了作为控件名称以外，还作为控件分组 单选按钮 type="radio" 必须有value才能正确的传递值 复选按钮 type="checkbox" 必须有value才能正确的传递值 checked 无值属性，默认选中 |
| 4.隐藏域 type="hidden" 想把数据提交给服务器，但是不想展示给用户看 这种数据就放在隐藏域中 隐藏域，用户看不到，但是又可以提交 |
| 5.文件选择框(上传文件的时候使用) type="file" 注意，使用文件选择框，需要保证form的属性 1.method="post" 2.enctype="multipart/form-data" 属性：multiple 多重，无值属性 |
④多行文本域（大的文本框）
| <textarea></textarea> 允许录入多行文本 属性 cols rows 根据计算机硬件的不同，有不同的显示，不准确 |
⑤下拉选
| <select name="city"> <option>佳木斯儿</option> <option>淄博</option> <option>张家口</option> <option>香格里拉</option> <option>重庆</option> </select> 注意： 如果option没有value属性，那么提交的select的value就是 选中的option的内容 如果option有value，那么select的value就是选中的option的value值 属性 size="4" size>1 变成滚动选择框 multiple 滚动选择框时，可以实现多选 |
⑥其它元素
| 1.label元素 替代form中span 文本和表单控件的关联 <input type="radio" name="gender" value="un" id="r3"> <label for="r3">不透露</label> |
| 2.为控件分组 <fieldset></fieldset> 控件分组 <legend></legend> 分组的标题 |