前端

作者: 宋song一 | 来源:发表于2018-08-28 15:44 被阅读0次

一. jquery

validation 表单form校验插件

二. html

 DOM:文档对象模型

1.frame

frame标签与body标签不能共存
被frame标签引用的页面可以不要页面结构,只保留body内部分

2.form

属性:
1. action: 把当前表单的数据提交到哪里
2. method: 请求方式.get请求,get请求在传递参数的时候,直接拼接在原来的URL地址之后,?key=value&.默认的请求方式.1KB,大小取决于浏览器/os/后台程序,最小的生效
post请求,参数封装在请求体中.相对安全.传输文件时,必须使用post请求.hou
内部常用的标签:input(输入框选择框),select(下拉框),textarea(大的输入框)

2.1 input标签

name 属性
1.单选框/复选框分组.
2.如果表单域中的数据要提交给后台服务器,就一定要设置该属性
placeholder:提示文字,用于输入框和文本域
checked : 默认选中
value:
1.设置按钮的文本
2.设置输入框中的值
3.设置单选/复选/下拉框中传递给后台的值
type:
1. text 默认,文本
2. file 文件选择框
3. radio 单选框
4. checkbox 复选框
5. password 密码(不可见,*表示)
6. reset 重置按钮,value值为显示的文字
7. submit 提交按钮
8. button 自定义按钮,事件需要自己指定
9. image 等同于submit,可以设置图片
10. hidden 隐藏域

2.2 select

       option选项,显示的下拉项元素
       selected  默认选中元素
      可设置optgroup项用于分组,其label属性为分组名

3. a标签

       href属性: 跳转地址
                      相对路径,站内
                      绝对路径,站外
                      #id, 指向页面中的指定id
       target: 何处打开页面
                   _blank,新窗口打开
                  _self,当前框架打开,默认

4. 字体

  <em>标签,显示为斜体.和<i>标签显示效果一样
 <strong>与<b>标签显示效果一致,html5建议b标签作为最后的选项
 <u>标签,显示为下划线,一般用于超链接
     <hr />水平分割线,自闭合标签.

三.css

 用于定义样式

3.1 使用方法:

       1. 行内使用 style属性
       2.内部样式表 head标签中使用style标签,使用选择器
       3.外部样式表 link调用.外部样式表内只保留style内部代码
       4.导入式样式表. 一般不用,网速慢时样式可能随后显示.head标签中使用style标签,@import url("*.css")

3.2 选择器

       1.群组选择器
          样式相同的部分,可以将共同部分抽取出来,选择器直接用 , 分开
       2.后代选择器
          包含孙子节点. 选择器之间用空格隔开
       3.标签选择器
       4.子元素选择器, > 分割.不包含孙子节点
       5.属性选择器 
          多数情况下操作的是input节点
          [属性名]{
           }
         或
           [属性名=属性值]{
           }

3.3 样式

       1. background背景样式
                 background可以直接定义5个属性.简写模式
                 background-attachment定义背景图位置是否固定/滚动
       2.文本样式
          text-indent 首行缩进2个字符,可设置为2em
      3.列表样式
         list-style-image:      将图象设置为列表项标志
         list-style-type:         设置列表项标记的类型
      4.轮廓样式
          outline

3.4 盒子模型 Box Model

         box-sizing: border-box; 可设置盒子模型为指定宽高
         magin可设置为负值,可实现部分可见
         magin: 0  auto; 可实现水平对齐,上下为0,左右自动.

3.5 元素

         1. 行内元素,行宽足够时在一行显示,不够时再换行. span,a,em
            使用 display:block; 可转换为块级元素,可设置宽高
         2.块级元素,独占一行
           display: inline; 可转换为行内元素
      display实现 行内元素 和 块级元素 的转换
           display: inline-block;把块级元素以行内元素的形式展现,同时保留块级元素可以设置宽高的特性
           display:none;隐藏元素

3.6 定位

     position:relative;相对定位
    position: absolute;参考系是整个页面
    position: fixed;页面始终可见.参考系是浏览器窗口

3.7 其它属性

                 1.清除浮动效果
      <div class="cls"> 
      </div>

同时在style内

             .cls{
             clear: both;
             }
      2.
       z-index,值越高,显示层级越高,可以保证在页面上面可见

相关文章

  • 前端文章系列

    【前端】从0.1开始,创建第一个项目 【前端】初识HTML 【前端】HTML标签 【前端】HTML属性 【前端】C...

  • Web前端小白入门指迷

    大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR...

  • 推荐几个好的前端博客和网站

    前端开发博客前端开发博客-前端开发,前端博客 对前端知识结构的理解人类身份验证 - SegmentFault 脚本...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • 前端学习:一个好的前端导航可以更好的学习前端

    前端导航: 前端网课(前端的网络课程,在线网站) 前端资源(有论坛等交流平台) 前端手册(html手册,css手册...

  • 2018-09-25

    前端学习 前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

网友评论

      本文标题:前端

      本文链接:https://www.haomeiwen.com/subject/unfxwftx.html