zoukankan      html  css  js  c++  java
  • 学习day03

    1、结构标记  *****   做布局
        1、<header>元素
        <header></header>
        ==> <div id="header"></div>
            定义网页头部,网站标题、LOGO
                header可以在网页上出现多次。可以表示任何一部分内容的头部信息
        2、<nav>元素
            <nav></nav>
            ==》 <div id="navigation"></div>
            <div id="nav></div>
            负责定义页面的导航链接部分
            <nav>
                <ul>
                <li></li>
                <li></li>
                <li></li>
                </ul>
            </nav>
        3、<section>元素
            <section></section>
               ==> <div id="main"></div>
            用于定义文档中的节
            特点:可以充当网页主体中的某一模块
            4、<article>元素
            <article></article>
            ==> <div id="article"></div>
        5、<aside>元素
            可以表示网页主体内容中的边栏部分
            <aside></aside>
            ==> <div id="left_side"></div>
        6、<footer>元素
            <footer></footer>
            ==> <div id="foot"></div>
            出现在网页偏下端部分,用来定义网页文档的页脚部分内容:友情链接、版权信息、授权、作者等
    2、表单  *****
        表单作用:
        用于显示、收集信息,并将信息提交到服务器

        表单两大部分:
        1、实现数据交互的可见界面元素,即表单控件
        2、提交表单后的处理操作

        1、如何实现表单
        语法:<form></form>
        特点:没有任何显示效果,默默的帮助网页完
        成信息提交的功能
        属性:
        1、action
        动作、行为
        表单要提交的服务器处理程序地址,通常都是由后台处理程序完成(JSP,php,aspx  java)
        <form action="test.java"></form><form action="#"></form>
        默认值:本页
        2、method
        提交方式
        取值:get或post
        get:(得到,获取)会将提交的信息全部显
        示在地址栏上(明文提交)。大小限制为2KB。
        使用场合:向服务器索取信息时,推荐使用get
        提交方式,比如,百度搜索、各个网站的搜索栏
        post:隐式提交,所提交的数据不会显示在地址栏上,安全性较高。并且没有提交数据的大小限制。
        使用场合:
          1、提交数据量较大时,上传头像、文档等
          2、提交安全性要求较高的数据时,比如密码等
        如果想将数据提交给服务器进行处理时,可以使用post,如 登录、注册。。
        默认值:get
        3、name
          定义表单名称
        4、id
          定义表单唯一标识

        注意:name 和 id , 最终获取表单的方式不同而已。
        5、enctype
           表单数据编码方式
        1、application/x-www-form-urlencoded
        默认值,能够提交普通数据(包含特殊符号 & , = , ?),无法提交文件
        2、multipart/form-data
        将所有内容都拆分成二进制进行提交  转字节

        支持 文件上传
        3、text/plain
        只负责提交基本数据,不包含任何特殊字符的数据
        尽量不用,有可能数据提交不完整

       2、表单控件
        具备可视化外观的html元素,并且能够接受用户输入的信息。而且表单控件中的数据是允许提交给服务器的。
        表单控件:
        1、input元素
        语法:<input />
        属性:
        1、type,根据不同的type值,可以创建
        各种类型的输入控件
        2、value,控件的值,允许将value的值提
        交给服务器
        3、name,控件的名称,服务器使用
        4、id,控件的唯一标识,本页面使用
        5、disabled :禁用控件
        <input id="value" disabled />
        1、文本框 与 密码框
        文本框:<input type="text"/>
        密码框:<input type="password" />
        属性:
        maxlength:限制输入的字符数
        readonly:只读

        name和id的命名规范:
        使用匈牙利命名法
        text --> txt
        password --> txt
        type缩写作用名称
        2、单选框 和 复选框
        单选框:<input type="radio">
        复选框:<input type="checkbox">
        属性:
        checked : 设置默认被选中
        注意:name属性,一组单选框或复选框,name属性要设置为一致的。
        一组中,只能有一个元素被选中

        radio --> rdo,rdoGender
        checkbox --> chk,chkHobby
        3、按钮
        1、提交按钮
        固定功能,将表单控件的数据提交到服务器指定的处理程序(action)上
        <input type="submit" value="按钮上的文字" />
        2、重置按钮
        固定功能,将表单控件的值都设置为默认值。
        <input type="reset" value="按钮上的文字" />
        3、普通按钮
        由用户来定义功能
        <input type="button" value="按钮上的文字" />

        <button>显示的文字</button>
        4、隐藏域 和 文件选择框
        1、隐藏域
        表单中,包含不希望用户看到的并且需要提交给服务器的信息,可以放在隐藏域中
        <input type="hidden" />
        2、文件选择框
        允许用户选择 要上传的文件
        <input type="file" name="" />
        注意:
        1、表单的 method 属性值 必须为 post
        2、enctype的值必须为 multipart/form-data


        2、其他元素
        1、<label>元素
        关联 文本与表单元素, 点击文本的时候相当于点击了表单元素一样
        语法:<label>文本</label>
        属性:for
        表示与该label相关联的控件的id值
        2、选项框(下拉列表框)
        两种:
        1、下拉选项框
        2、滚动列表
        语法:
        选项框:
        <select></select>
        属性:
        name:
        id:
        size:默认1,如果大于1则为滚动列表
        multiple:多选


        选项:
        <option value="选项的值" selected>显示的文本
        </option>
        3、textarea元素
        文本域,多行文本框元素
        语法:
        <textarea>
        多行文本
        </textarea>
        属性:
        name
        cols:指定文本区域的列数(宽度)
        rows:指定文本区域的行数(高度)
        以上两个属性,以字符数作为值
        readonly:只读
        4、为控件分组
        语法:
        分组:
        <fiedset>
        元素
        </fieldset>
        标题:
        <legend></legend>

     

  • 相关阅读:
    windows下多个python版本共存,删掉一个
    解决ModuleNotFoundError: No module named 'pip'问题
    Palindrome Linked List 综合了反转链表和快慢指针的解法
    30-Day Leetcoding Challenge Day9
    Longest Common Prefix 五种解法(JAVA)
    30-Day Leetcoding Challenge Day8
    30-Day Leetcoding Challenge Day7
    30-Day Leetcoding Challenge Day6
    30-Day Leetcoding Challenge Day2
    leetcode162 Find Peak Element
  • 原文地址:https://www.cnblogs.com/xujindi/p/10452666.html
Copyright © 2011-2022 走看看