Web前端开发技术实训第一天

  • Post author:
  • Post category:其他

简易学习了HTML的语句

例如:

span 是一个没有任何样式的段落标签

pre 是一个有带格式的p标签,可以保留缩进、换行(用于展示代码)

div是没有任何样式的块级元素  用来包裹内容和分割内容

<iframe> 这是一个框架元素,用来显示其他内容

label 本身不会有任何的视觉效果,但是优化了鼠标用户的用户体验

 

熟悉CSS的用法

例如:
css选择器有5种

        .class 类名选择器
        #id  id选择器
        tagName  元素名选择器
        *  通配符选择器
        html,body,.box 分组选择器

css样式分为

内联样式 写到元素内部的
    <div style=”width: 200px;”>这是一个div</div>
内部样式 写到head里面的style标签
外部样式 独立的css文件;
margin: 外边距
padding:内边距
margin简写属性

margin:0;
上下左右全部为0;

margin:10px 20px;
上下为10  左右为20

margin:10px 20px 30px
上为10px  左右为20px  下为30px

margin:10px 20px 30px 40px;
        上    右   下   左

/*圆角属性*/
    border-radius: 5px;
/*浮动属性*/
    float:right; 
    float:left;
/*相对定位*/
    position: relative;
相对于自身的静态位置定位

left 相对于原先的静态位置的left走,偏移了多少距离
right
top
bottom

字体左右居中
text-align: center;

行高等于高度时,字体上下居中
line-height:字体行高

 

学习了部分JavaScripts

例如:<script type=”text/javascript”>
    window.οnlοad=function()

console.log();

 

题目1:交换ab(在不引入第三个变量时)

解:利用数学公式的+-*/;

源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>swap</title>
</head>
<body>
    <script type=”text/javascript”>
            window.οnlοad=function(){
                var a=2;
                var b=8;
                console.log(‘a=’,a,’b=’,b)
                console.log(‘交换之后’)
                document.write(‘a=’,a,'</br>’,’b=’,b,'</br>’,’交换之后’,'</br>’);
                a=a*b;
                b=a/b;
                a=a/b;
                console.log(‘a=’,a,’b=’,b)
                document.write(‘a=’,a,'</br>’,’b=’,b);
            }        
    </script>
</body>
</html>

题目2:打印9*9乘法口诀表

源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>99乘法表</title>
</head>
<body>
       <script type=”text/javascript”>  
    window.οnlοad=function(){
            document.write(‘乘法口诀表’+'</br>’);
        for (var i = 1; i < 10; i++) {
            for (var j = 1 ;j<=i ;j++ ) {
            console.log(‘%d * %d = %d’, i, j, i*j);
            document.write(j,’*’,i,’=’,i*j,’ ‘);
            }
            document.write(‘</br>’);
    }
}
    </script>
</body>
</html>

 


版权声明:本文为weixin_40909604原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。