• html--笔记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)
    <form action="test.php"></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>

  • 相关阅读:
    二分图匹配【模板】
    高斯消元【模板】
    G. 小花梨的函数
    数字计数
    选课
    二叉苹果树
    重建道路
    【UVA10187】Headmaster's Headache(校长的烦恼)
    【51NOD1447】好记的字符串
    【51NOD1779】逆序对统计
  • 原文地址:https://www.cnblogs.com/lijun6/p/10396693.html
Copyright © 2020-2023  润新知