HTML 第二天 10.18
一 列表标签
1.1列表
无序列表 ul li
<ul>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
</ul>
有序列表 ol li
<ol>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
<li>印媒：印度想派探险队深入喀喇昆仑山口 用盘外招对付中国</li>
</ol>
1.2 无意义标签
我们之前学过的标签 都有含义 例如： h1 一级标题 p 段落
无意义标签就是没有特殊的效果
这些标签在html布局的时候 常用来作为其他标签的载体
这俩标签分别是 div span
<div>你好 世界</div>
<span>你好</span>
我们通过查看taobao的网页代码发现 布局的时候都是使用大量div进行操作
二 表单和表单元素
2.1 什么是表单和表单元素？
表单：是html中的一个标签--form标签，是用来采集用户在表单元素中输入的内容并且发送给服务器的。
表单元素：就是在form中的输入框 下拉选项框 单选框 复选框等 内容。
2.2 表单的作用？
用来采集用户信息给服务器。例如 登录 注册 添加等功能。
2.3 具体的实现
<!-- 表单 功能标签 -->
<form action="http://www.baidu.com" method="" enctype="" >
</form>
action="" 用来填写服务器地址URL 写哪个服务器地址 就将采集的信息发送到哪
method="" 请求方式 http请求 方式 GET/POST
传递参数的形式不一样
get的方式 是将数据追加到URL后面 https://www.baidu.com/?a=123&b=123
? 分隔符 分割地址 和 数据
& 分隔符 分割多个数据
= 分割符 关键字和具体的数据
https://paimai.taobao.com/?spm=a21bo.2017.2005.2.5af911d9j5YXRP&acm=lb-zebra-634493-8610513.1003.4.8191527&scm=1003.4.lb-zebra-634493-8610513.OTHER_15917307995022_8191527
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=monline_3_dg&wd=lol&fenlei=256&oq=%25E7%25BB%259D%25E5%259C%25B0%25E6%25B1%2582%25E7%2594%259F%25E4%25B8%258B%25E8%25BD%25BD%25E5%25AE%2589%25E8%25A3%2585&rsv_pq=98ca5f560000045c&rsv_t=668bxRWA64Ex66DIsHJNYtclNHFyFAJF41uijS8kCITsrudbhP6UQHGx7PbSWbh18GTb&rqlang=cn&rsv_dl=tb&rsv_btype=t&inputT=616&rsv_enter=1&rsv_sug3=9&rsv_sug1=8&rsv_sug7=100&rsv_sug2=0&rsv_sug4=5010
post的方式 是将数据存放到httpbody中
enctype="" 数据形式
enctype="application/x-www-form-urlencoded" 默认是这种形式 为 普通表单数据提交
enctype="multipart/form-data" 文件上传
但是我们平时上网的时候 都是使用例如 http://www.baidu.com
因为ip地址+端口号的组合 是网络通信的根本 但是对于用户体验来说不友好。
所以就出现了一种功能 叫做 域名。其实就是公司去运营商购买域名 用来绑定具体的ip地址
表单元素：
①输入框 input
<input type="">
placeholder ：水印效果
required ： 必填
readonly ： 只读
disabled ： 不能输入
checked ：选中
name 名字 : 给表单元素添加name属性 此时form会进行采集 （也就是说 form表单只会采集有name属性的表单元素信息）
value 值 : 设定输入框的内容 如果是按钮 则代表设定按钮的标题
type 类型 : submit 提交按钮 text 文本 password 文本加密 file文件选取 date 日期 email 邮箱
radio 单选框（注意 单选框要想实现单选效果 就必须有相同的name值） checkbox 复选框
color 颜色 range范围 reset 重置
②下拉选项框
<select name="">
<option value="" disabled="disabled" selected="selected">请选择</option>
<option value="">初中</option>
<option value="">高中</option>
<option value="">大学</option>
<option value="">研究生</option>
</select>
③ 文本域
个人介绍
<textarea style="resize: none;" cols="5" rows="5"> </textarea>
案例：
<h1> 表单练习</h1>
<form action="https://www.baidu.com/" method="post" enctype="multipart/form-data">
<p>
账号: <input name="usename"/ placeholder="请输入账号" required="required">
</p>
<p>
密码: <input type="password" name="password" placeholder="请输入密码" required="required"/>
</p>
<p>
头像: <input type="file" name="head" />
</p>
<p>
生日: <input type="date" />
</p>
<p>
性别: <input type="radio" name="aaa" checked="checked" /> 男 <input type="radio" name="aaa"/>女
</p>
<p>
爱好: <input type="checkbox" />唱歌
<input type="checkbox" />唱歌
<input type="checkbox" />唱歌
<input type="checkbox" />唱歌
</p>
<p>
颜色 : <input type="color" />
</p>