设为首页 加入收藏

TOP

day 44 前端HTML(三)
2019-05-23 22:14:21 】 浏览:126
Tags:day 前端 HTML
对URL - 指向另一个站点(比如 href="http://www.jd.com)
  • 相对URL - 指当前站点中确切的路径(href="index.htm") #学django的时候会用的比较多
  • 锚URL - 指向页面中的锚(href="#top"),博客的目录经常用到,还可以跳转到 name属性为p1的a标签上,<a name='top'>xxx</a>
  •      

     

        target:

    • _blank表示在新标签页中打开目标网页
    • _self表示在当前标签页中打开目标网页

      列表

        1.无序列表

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>

        type属性:

    • disc(实心圆点,默认值)
    • circle(空心圆圈)
    • square(实心方块)
    • none(无样式)

        2.有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>

        type属性: start是从数字几开始

    • 1 数字列表,默认值
    • A 大写字母
    • a 小写字母
    • Ⅰ大写罗马
    • ⅰ小写罗马

        3.标题列表(就像大纲一样,有一个层级效果)

    复制代码
    复制代码
    <dl>
      <dt>标题1</dt>
      <dd>内容1</dd>
      <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
    </dl>
    复制代码
    复制代码

      表格

        表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
        表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
        表格的基本结构:

    复制代码
    复制代码
    <table border='1'>
      <thead> #标题部分
      <tr> #一行
        <th>序号</th> #一个单元格
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      </thead>
      <tbody> #内容部分
      <tr> #一行
        <td>1</td> #一个单元格
        <td>Egon</td>
        <td>杠娘</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Yuan</td>
        <td>日天</td>
      </tr>
      </tbody>
    </table>
    复制代码
    复制代码

      属性:

    • border: 表格边框.
    • cellpadding: 内边距 (内边框和内容的距离)
    • cellspacing: 外边距.(内外边框的距离)
    • width: 像素 百分比.(最好通过css来设置长宽)
    • rowspan: 单元格竖跨多少行
    • colspan: 单元格横跨多少列(即合并单元格)

        

        效果

        

        上面这几个属性基本上用不到。

      其实标签又可以分为两类:1、展示给用户看的  2、获取用户输入内容的标签,刚才前面的这些标签都是展示内容用的,下面要学的标签是捕获用户输入的标签。基本上HTML中常用的就这些标签

      form(最后再学这个标签,先去学input标签)

        功能:

        表单用于向服务器传输数据,从而实现用户与Web服务器的交互

        表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

        表单还可以包含textarea、select、fieldset和 label标签。

      表单属性

     

    属性 描述
    accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
    action 规定向何处提交表单的地址(URL)(提交页面)。
    autocomplete 规定浏览器应该自动完成表单(默认:开启)。
    enctype 规定被提交数据的编码(默认:url-encoded)。
    method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
    name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
    novalidate 规定浏览器不验证表单。
    target 规定 action 属性中地址的目标(默认:_self)。

     

      表单元素

        基本概念:
        HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
        表单一般用来收集用户的输入信息
        表单工作原理:
        访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
        服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。

        

     

        

         点击提交按钮,input中type=submit的那个按钮,然后就会将form表单中所有用户输入的内容或者选择的内容({name属性:值,})都发给服务端(以我们自己写的那个socket举例,打印一下接收的内容),但是所有的输入标签必须有一个叫做name的属性。

        

        发现跳到这个页面了:看url的内容,有了我们输入的内容,并且是给你组合起来的,name属性值和你输入的值组合到一起了,通过&符号分隔,并且在路径那里加了个问号

        

        打印一下socket接收的消息,你就发现已经接受到这些数据了

        

        

          

          让用户选择的,必须指定一个value值,要不然后端接收不到内容,用户自己填写的标签,不需要指定value值

          然后再点击提交,后端打印一下接收的数据:

          

          但是这样并不好,因为url中显示了你的信息,并且如果内容很多的话,你的地址栏不能够输入那么长的内容,为什么会默认拼接到url里面呢,因为form表单默认是get请求提交内容,我们可以改为post,来看看:post会把所有你提交的信息封装到一个消息体里面,在浏览器上就看不到了,对于小白来说,看着安全一些。

          

          

          点击提交就跳到这个网址了:

          

          在看后端打印的内容:

          

          你会发现一个post请求:

          把内容往后拉,就能看到咱们提交的数据了

          

          那么你看,你的浏览器再你点击提交的时候,获取了你所输入的内容,然后通过网络提交给你的服务端代码程序了。

            然后我们后端通过提交过来的数据,来做某些事情,该验证的验证,该保存的保存

    首页 上一页 1 2 3 4 下一页 尾页 3/4/4
    】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
    上一篇社区发现 下一篇IP代理池之验证是否有效

    最新文章

    热门文章

    Hot 文章

    Python

    C 语言

    C++基础

    大数据基础

    linux编程基础

    C/C++面试题目