html-Day02

今天学习内容

1:复习昨天重点

2:作业

3:今天任务

   3.1:列表    -- 重点

作用:列表标签多用于网页布局(设计)  [div;span;ul li] -菜单列表  --导航列表   --轮播图列表

-创建列表标签   --定义列表标签类型     <ol></ol>  order list   有序列表     #在列表前 1 2 3 4 ...     <ul></ul>  unorder list 无序列表    #在列表前 * * *   --添加列表项(列表标签中间内容)    <li></li>    list item    列表项目[内容]

-有序列表标签属性                         --知道   type="i"     列表项的样式        1      默认值: 1 2 3 4 5        a A            a b c d        i I             罗马

-无序列表标签属性 type                        --知道    disc    实心小黑点    circle   空心小黑点    square  实心距形    none   去掉列表前标记 #列表前数字符号外观太差不能满足商业要求

--列表嵌套   所有嵌套必须写在li中   <ul>     <li><ul><li></li><li></li></ul></li>     <li></li>     <li></li>   </ul>

--定义列表  <dl>     <dt>定义列表单说明</dt>     <dd>内容1</dd><dd>内容2</dd>..  </dl>

练习:使用列表完成如下任务:   ul li  10:10~10:20

完成功能 1:在最外层添加一个标签,标签包裹所有功能  <div class="container"></div>              # container 容器  div 指定整体功能背景颜色;大小;位置 2:列表   <ul>     <li>       <a  href="#">       #点击图片或文字跳转位置;网页        <img src=""><span>文字</span>       </a>    </li>   </ul>

结构标记                                 -了解 #HTML5.0  新增加结构标签,希望一部分替换div <header></header>     定义网页内容部头部 <footer></footer>      定义网页内容部底部 <section></section>    定义网页主体部分 <nav></nav>          定义导航菜单 <aside></aside>       定义侧边栏 <article></article>     定义文本内容,留言 #标签从名称上看出标签作用,更容易被网络爬虫搜索[百度]到

 

   3.2:表单    -- 重点

作用:收集用户数据:用户名 密码 搜索文字

哪些项目常用表单 -企业内部项目         ---非常频繁使用 报销;请假;.. -互联网项目           ---使用   注册;登录;购物车...

-表单组成部分  表单由三个部分组成=表单域+表单控件+提示消息

-表单域标签    <form></form>

-表单域标签属性    --method 表单提交方式[向服务器发送数据方式]          GET   默认 不安全 乱码     发数量少1k          POST       安全   不乱码   发数量(不限)       #注意:如果你操作重要[发送包含密码]用POST    #用户注册[POST]   用户登录[POST]   查询订单 [GET]    --action      保存处理表单程序地址  通过node.js接口    示例: action="http://127.0.0.1:8080/login"    --enctype  附加属性       -application/x-www-form-urlencoded   POST提交使用       -text/plain                         发送普通文本       -multipart/form-data                 上传文件   #上传头像

-表单控件(特殊标签)      -input   基础标签9种(重点)      新input 10种(了解)      -textarea  多行文本域(重点)      -select    下拉选择框(重点)      -其它控件

-表单最常用控件 input      -input    #输入   #输入框      [      ]  输入任意类型字符串,长度不限      -通用属性      type=""    设置输入框的类型 text;password;hidden;reset;file;....      name=""   指定输入框的名字 #只有添加name属性输入框，才能被提交服务器      value=""   代表输入框中的(值)中间内容 #在提交时随name发送到服务器      disabled   无值的属性,    禁用此输入框[不能够输入任何内容]      #通用:手机收到短信验证码 60s之内禁用

-input type  9种常用类型

type="text"           文本输入框    显示用户输入内容   type="password"       密码输入框   隐藏用户输入内容   maxlength            #最大输入字符个数(长度)   readonly             #只读[只能看不能改]输入框   placeholder           提示占位符

-input 按钮(小心#按钮自带功能)   type="submit"     #提交按钮,点击此按钮表单自动触发"提交"操作  #少用   type="button"     #普通按钮,点击此按钮表单无操作                    #项目大量使用ajax处理表单数据提交,常用   type="reset"       #重置(清空)按钮，将表单恢复初始状态         #少用   <button></button> #功能与submit按钮相同                       #少用   #submit button 功能太多[清空输入数,重新刷新网页]

-多选框单选框  type="radio"    单选框[按钮]  type="checkbox" 多选框[多选按钮]  #单选和多选的name属性，为了控制命名还有分组功能  #单选和多选一定要定义value属性值  #checked  无值属性    默认选中

#示例:创建表单与控件完成如何功能 -新用户注册   a    -input text password  -checkbox  a  -button

-文件选择框;隐藏域;文本域  -文件选择框                        #实现文件上传操作(上传头像;上传照片)  <input type="file" name="">  注意事项  (1)提交方式一定修改 POST    method="POST"  (2)表单域添加附加属性       enctype="multipart/form-data"  #默认情况表单将用户数据转换字符串但是上传文件不能字符串  #添加附加属性  表单用户数据转换 101010101010101 上传成功 数字合并图片

-隐藏域    在表单中如果存在不希望用户看到的数据则将其添加进隐藏域 示例: 记录用户填写表单时间 <input type="hidden" name="ctime" value="20210602181400"> <input type="submit">

-文本域     #如果用户填写多行文本内容则需要文本域     购买商品:评论 <textarea></ textarea> 属性: rows        #设置文本域多少行   5 cols         #设置文本域多少列   30            #如果内容超过范围添加滚动条 示例: 商品评论 <textarea name="data" rows="5" cols="30"></ textarea >

-下拉选择框  作用:显示下拉列表菜单                 #年月日 省市县  日历  地区    <select  name="">      下拉列表域    <option></option>     下拉列表项  </select>  select标签属性    size="1" 默认选中项  multiple 多选  option属性       value="" 列表项中值  selected 默认选中

-提示消息

 

   3.3:AJAX    --网络协议HTTP  重点

 

 

作业

  1:创建表单

  

  2:课前预习视频                  ajax   必做

  3:课前预习视频_pro>day05-预习   15段