当前位置: 首页>编程语言>正文

html javascript使用Handsontable实现excel模板加载并填充数据预览及打印 html excel表格

知识点一:表格

1、什么是表格 ? 跟excel表格类似
  2、表格标签  table
  3、表格的组成  行 tr  单元格  td
  4、建立表格步骤
        1、建立表格,
        2、判断行数和列数
        3、用行去包含单元格
        4、在每个单元格中去添加内容

  5、表格的各大属性
        cellspacing:边框与边框之间的距离
        Cellpadding:单元格内容与边框之间的距离
        border:表格的边框
        width:表格的宽
        height:表格的高
  6、表格的结构:
        标题:caption标签
        表头:thead标签 表格的第一行,一般用来描述每一列所显示的内容,用thead标签讲第一行包起来,然后用th替换td,单元格中的内容相对于单元格水平居中,且加粗
        表格主体:tbody标签
  7、表格的标题,caption只在表格中使用
  8、将excel中的表格模拟到网页中

知识点二:合并单元格

1、在Excel中演示合并单元格,运用到网页中
  2、分类:跨行合并、跨列合并
  3、步骤
        1、判断是跨行合并还是跨列合并
        2、跨行合并用rowspan属性,跨列合并用colspan属性
        3、将属性写在需要合并的单元格上
        4、将合并的行数或者列数写在对应的属性值中
        5、将多余的单元格注释掉

知识点三:表单

1、各个网站的注册页面就是表格实现的
  2、作用:显示、存储、提交数据
  3、组成:表单域、表单标签、提交按钮
  表单标签:action:表单向后台提交的地址 
           method:向后提交的方式 get  post
  表单域:表单中的元素:包含了文本框、密码框、隐藏域、多行文本框、
  复选框、单选框、下拉选择框和文件上传框
  input控件
  普通的文本框   type = text
  获取焦点:光标放在输入框内,可以打出文字
  单击指定名字获取焦点需要将label标签中的属性值与input输入框的属性值保持一级即可 
  value:输入框的值 
  placeholder:提示信息 
  密码框 :type=post
  单选框:type =radio
  默认单选选中 1、checked="checked
              2、checked
              3、checked=true
  多选框:默认多选选中 1、checked="checked”
                    2、checked
                    3、checked=true
  选择框默认选中:1、selected=”selected”
                2、selected
                3、selected=true
                4、按照淘宝注册分别讲解form表单

知识点四:CSS

为什么要用CSS:使用标签中的属性去改变元素的样式会使页面显得瘫痪臃肿 
  CSS:(网页美颜相机)  层叠样式表
        作用:用来美化网页的

知识点五:样式表

样式表:行内样式表 内部样式表 外部样式表 
  行内样式表(内联样式表):内嵌的标签中,通过style
        style是标签的属性 、属性值是多个样式
        px:像素单位 
        在样式表中:width是样式的属性,200px是样式的属性值,属性与属性值之间用:隔开,多个属性之间用;隔开 
 内部样式表:  在head标签中使用style标签 
 外部样式表 : link:建立与外部CSS文件的链接
              rel="stylesheets":定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件 
  CSS规范: 1、 选择器与花括号之间加空格
          2、冒号与属性值之间加空格
          3、多个属性值之间用;

知识点六: 字体样式属性

1、利font-size:字号大小   用像素 属性值一般设置偶数  页面中默认字体大小是16像素
  2、利font-family:字体的家族  汉字表示:黑体  英文表示 SimSun Unicode 编码: "B8BF53"
  3、区font-weight:字体粗细   bold
  4、font-style:字体风格  oblique/italic 表示倾斜
  5、font:综合设置字体样式

  选择器{font: font-style  font-weight  font-size  font-family;}

知识点七:外观属性

1、color:文本颜色
        十六进制  0-9 A-F 用六位 
        #000000黑色
        #ffffff黑色 
  2、RGB
        red 红色  green  绿色  blue蓝色 
  3、0-225 

  1、通line-height:行间距
   行高属性 
        文本垂直居中,属性值与盒子高度相同 
        line-height: 100px;
        数值小于高度,文本靠上
        line-height: 60px; 
        数值大于高度, 文本靠下
  2、text-align:水平对齐方式	
  3、text-indent:首行缩进
  4、text-decoration
  文本下划线 
        text-decoration: underline; 
  文本删除线 
        text-decoration: line-through; 
  文本上划线

知识点八:选择器

选择器:通过一种方式去选择指定的元素,这种方式就是选择器       
  选择器:基本选择器、复杂选择器、伪类选择器 
  基本选择器:标签选择器、类名选择器(.)、多类名选择器、id选择器(*)、通配符选择器 
  复杂选择器:交集、并集、子代、后代
  伪类选择器::link、:visited、:hover、:active




https://www.xamrdz.com/lan/5pn1960940.html

相关文章: