HTML 第二天 10.18

HTML第二天

一 列表标签

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"               文件上传

但是我们平时上网的时候 都是使用例如 百度一下，你就知道

因为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><p>范围 : <input type="range" /></p><p>邮箱 : <input type="email" /></p><p> 学历<select><option disabled="disabled" selected="selected">请选择</option><option>小学</option><option> 中学</option><option>大学</option></select></p><p>个人介绍<textarea rows="30" cols="30" style="resize: none;"></textarea></p><!-- <input type="submit" value="注册" /> -->&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;<input type="reset" /> <!-- 重置按钮 -->&nbsp;  &nbsp;  &nbsp;  &nbsp;<button>注册</button></form>

三 iframe框架

其实就是一个内置窗口。

​<a href="http://www.taobao.com" target="haha">taobao</a><a href="http://www.douyu.com" target="haha">douyu</a><a href="http://www.huya.com" target="haha">huya</a><a href="http://www.qq.com" target="haha">qie</a><br/><iframe src="" name="haha" width="1200" height="500"></iframe>
​
​
target 目标  默认是 _self 当前网页自身跳转 可以设定其他的内容进行跳转

四 总结

1.列表分为有序列表和无序列表 ul ol

2 form表单元素 placeholder shuiplaceholder ：水印效果required ： 必填readonly ： 只读disabled ： 不能输入checked ：选中name 名字 : 给表单元素添加name属性 此时form会进行采集 （也就是说 form表单只会采集有name属性的表单元素信息）等。

1. iframe 标签