软测基础之前端基础

一、HTML

1、HTML基础标签

1.1 head 标签

  • title(标题)
  • meta(网页基本信息(供搜索引擎))
  • style(CSS样式)
  • link(链接CSS文件或脚本文件)
  • script(定义脚本语言)
  • base(定义页面所有链接的基础定位)

1.2 body 标签

(1)段落文字标签

  • ~

          标题
  •                     段落


  •                    换行

  •                    水平线
  •                   分割(块元素)
  •                区域(行内元素)

(2)文本格式化标签

  •                     加粗
  •                          倾斜
  •                          删除线
  •                          下划线
  •                         上标
  •                         下标
  • " "                     空格 

2、图片标签

图片不能显示时出现的文字

属性间用空格分开 

3、超链接

文本或图像
  • target="_blank"  新窗口打开
  • target="_self"     当前窗口打开 

软测基础之前端基础_第1张图片

 3.1 锚点链接

4、表格

  •         表格
  •               行
  •        表头
  •        表身
  •          表脚
    • 合并行     
                 单元格
  •      标题
  •              表头单元格
  • 合并列       
  • 5、列表

    •  
           有序列表
        •    无序列表
        •    定义列表

    语法:

    
    
    
        
        
        
        列表练习
    
    
        
        
    1. 兴趣是最好的老师,其次是耻辱。
    2. 好听的话不该记着,也不该当真。
    • 兴趣是最好的老师,其次是耻辱。
    • 好听的话不该记着,也不该当真。
    杨绛先生
    你的问题主要在于读书太少而想的太多。
    故人笑比中庭树,一日秋风一日疏。

    页面效果

    6、表单

    ① input表单

    type 属性值 :

    • text(单行文本框)
    • passward(密码文本框)
    • button(按钮)或者
    • submit(提交按钮)
    • reset(重置按钮)
    • image(图像形式的提交按钮)
    • radio(单选按钮)
    • checkbox(复选框)
    • hidden(隐藏字段)
    • file(文件上传)

    (用户体验细节:刷新后想让第一个输入框默认选中状态,给输入框设置autofocus="autofucus")

    ②textarea 标签表单 — — 多行文本框

    多行文本框内容

    注意:每个浏览器解析不一样,多行文本框可以在CSS上设置width & height

    ③ 下列列表

    7、插入音频、视频、flash

    
    #px作为单位

    8、插入背景音乐

    bgsound标签 只适用于IE浏览器(除了bgsound,还有embed标签和object标签)

    loop = "2"   重复2次

    loop = "infinite"  或 loop = "-1"     无限次循环

    9、悬浮框架 iframe

    • scrolling = "auto"    根据需要显示(默认值),在浏览器页面左对齐
    • scrolling = "yes"     总是显示
    • scrolling = "no"      不显示

    10、HTML5 新标签

    
        
    头部
    文章块
    底部

    这些 HTML5 新标签IE低版本不识别,只能用在手机网站的书写。

    二、CSS

    写在head标签内部

    1、CSS基础语法

    • color            颜色(不是标准色时,利用PS提取颜色参数,eg:#cc3300)
    • font-size      字大小
    • font-family   字体
    • text-align:left/center/right     内容水平对齐方式
    • text-indent    首行缩进(2em:2个文字大小)
    • width             宽度
    • height           高度
    • background  背景色

    2、CSS三种引用方法

    内嵌式 外链式 行内式
    位置 style标签放在head标签中

    通过link放在head标签中

    ,把外部CSS文件引入到HTML文件中(link回车)

    在body的语句中
    优点

    加载速度快

    (电商网站首页必须用这种方式,因为电商首页要求加载速度必须快,内嵌式比外链式快一些)

    实现了代码分离,方便修改、管理 一定不要用,权重很大且不方便修改
    缺点 HTML和CSS代码没有实现分离,不方便修改 运行速度比内嵌式快一些

    3、CSS选择器

    3.1 标签选择器

    
    
    
        
        
        
        
        css选择器
    
    
        

    你的问题主要在于读书太少而想的太多。

    我甘心当个零,别人不把我当个东西,我正好可以吧看不起我的人看个透。

    3.2 类选择器(.class)

    
    
    
        
        
        
        
        css选择器
    
    
        

    你的问题主要在于读书太少而想的太多。

    我甘心当个零,别人不把我当个东西,我正好可以吧看不起我的人看个透。

    3.3 ID选择器(#ID)

    
    
    
        
        
        
        
        css选择器
    
    
        

    你的问题主要在于读书太少而想的太多。

    我甘心当个零,别人不把我当个东西,我正好可以吧看不起我的人看个透。

    3.4 后代选择器(用空格连接)

    
    
    
        
        
        
        
        css选择器
    
    
        

    秋有三五七言,有几朵浪漫 苹果 草莓
    杨绛先生
    你的问题主要在于读书太少而想的太多。
    故人笑比中庭树,一日秋风一日疏。

    软测基础之前端基础_第2张图片

    3.5 并集(并列选择器)(用逗号连接)

    
    
    
        
        
        
        
        css选择器
    
    
        

    秋有三五七言,有几朵浪漫 苹果 草莓
    杨绛先生
    你的问题主要在于读书太少而想的太多。
    故人笑比中庭树,一日秋风一日疏。

    软测基础之前端基础_第3张图片

    4、高级权重对比

    4.1 引入方式不同

    • 外链式和内嵌式权重一样,先写的会被后写的覆盖
    • 行内式的权重是最大的,如果想覆盖它,则需要在样式上添加!important 来把权重提高

    4.2 复合选择器权重

    • 认为 标签1斤;类10斤;ID100斤(综合起来大的权重就高,若权重一样,先写的被后写的覆盖) 

    5、CSS常用的文字属性

    文字加粗

    font-weight normal    不加粗
    bold        加粗
    文字倾斜 font-style normal    不倾斜
    italic        倾斜
    文字修饰线 text-decoration none        没有线
    underline  下划线
    overline    上划线
    line-through   删除线
    强迫字母换行 word-break:break all

    6、行高属性

    一行文字的结束到下一行文字结束的间距:line-height

    7、边框属性

    border:10px solid green;
    • border(全边框)
    • border-botton
    • border-top
    • border-left
    • border-right
    • solid(实线)
    • dashed(虚线) 

    8、盒子模型

    盒子模型的组成=宽高+边框+内边距+外边距

    • 内边距 padding : 内容和边框的距离
    • 外边距 margin : 盒子和盒子的距离
    
    
    
        
        
        
        
        盒子模型
    
    
        
    一辈子太短,想吃的就去买,想的人就去找,如果能快乐,不要等。
    没有人永远18岁,但永远有人18岁。

    软测基础之前端基础_第4张图片

    (运行后可按 F12 查看) 

    三、JavaScript

    1、JS三种引用方式

    内嵌式 写在
    行内式 权重很大。写在标签的事件属性当中(以on开头的属性)

    2、JS基础语法

    2.1 JS注释

    • 单行注释: //
    • 多行注释: /*.....*/

    2.2 js变量

    js是弱类型语言(没有严格意义上的类型),定义变量用 var 关键字

    var a=3;
    var b="java1010";

    2.3 js 基本数据类型

    数值类型、字符串类型、布尔类型、underfined(变量不含有值)、null(变量值为空)

     软测基础之前端基础_第5张图片

    2.4 js运算符

    • 算术运算符:+、-、*、/、%、++、--
    • 比较运算符:==、===、!=、!==、>、<、>=、<=
    • 逻辑运算符:&&、||、!
    • 三元运算符:表达式?true值:false值
    • 赋值运算符:=、+=、-=、*=、/=、%=
    
    
    
    
    算术运算符
    
    
    
    
    
    
    
    
    
    字符串连接“+”
    
    
    
    
    
    
    
    
    
    比较运算符
    
    
    
    
    
    
    
    
    
    逻辑运算符
    
    
    
    
    
    
    
    
    
    
    三目运算符
    
    
    
    
    
    
    
    
    
    赋值运算符
    
    
    
    
    

     2.5  js 选择语句

    if..else、switch...case

    var a=2;
    if(a==1){
    	alert("a="+a);
    }
    else{
    	document.write("a="+a);
    }
     var grade='A';
     switch(grade){
         case 'A':
         document.write('优秀');
         break;
         case 'B':
         document.write('良好');
         break;
         case 'C':
         document.write('合格');
         break;
        }
    

    2.6  js 循环语句

    for、foreach

    document.write("
    "); for(var i=0;i<10;i++){ document.write("i="+i+"
    "); }

    foreach是用于遍历数组的方法,遍历的数组不能是空的要有值。

    foreach 语法:

    [].forEach(function(value,index,array){//code something});

     forEach方法中的function回调有三个参数:
    第一个参数是遍历的数组内容,
    第二个参数是对应的数组索引,
    第三个参数是数组本身

    2.7  js 函数

    document.write("
    "); function speak(){ document.write("我是一个函数"); } function speak2(message){ document.write("我是一个函数"+message); } speak(); document.write("
    "); speak2("信息传递"); document.write("
    ");

     

     2.8 js 的 break 函数和 continue 函数

    document.write("
    "); for(var i=0;i<10;i++){ if(i==3){ break; } document.write("i="+i+"
    "); }

    document.write("
    "); for(var i=0;i<10;i++){ if(i==3){ continue; } document.write("i="+i+"
    "); }

     

    你可能感兴趣的:(软件测试基础,前端开发入门,css,html,javascript,html5)