HTML 第二天 10.18

最新推荐文章于 2024-10-10 17:42:11 发布

WGY0227

最新推荐文章于 2024-10-10 17:42:11 发布

阅读量375

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/WGY0227/article/details/120832652

版权

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属性的表单元素信息）等。