【h5+css+js笔记】

HTML、CSS一周学习内容

HTML基础

什么是HTML5？

1. H5是HTML的第五个版本
2. H5是一门技术总称
3. HTML指的是超文本标记语言

文件的命名规范

1. 不建议使用中文（就是别用中文）
2. 只能用小写英文字母、数字、下划线_或者-的组合
3. 不能以数字开头
4. 不能用特殊字符

标签

1. 标题标签：

<h1>~<h6>

2. 段落标签:

<p></p>

3. 文本装饰标签:

<b>加粗</b>(<strong></strong>)、<i>倾斜</i>(<em></em>)、<del>删除线</del>、<u>下划线</u>、<sup>上标</sup>、<sub>下标</sub>

4. 强制换行：

<br>

5. 水平线：

<hr>

6. 插入图片：

<img src="图片路径"  title="鼠标悬停上去的提示信息"  alt="图片不显示的提示信息"/>

7. 最常用的盒子标签：

<div>用来划分页面区域</div>

8. 行内标签：

<span>用于为部分文本设置样式属性</span>

9. 表单的创建：

<form  method="get或者post" action="向何处发送表单数据">
			创建表单
				<input type="" placehoder="" name="" value=""/> 
				输入框
					type="text(文本）、password(密码)、submit(提交，和<button>提交按钮</button>一样)、button、reset"

10. post和get的区别：get是从服务器上获取数据，post是向服务器传送数据，get提交的数据可以在url中看到，post看不到，get和、传送的数据较小，post传送的数据量较大。get安全性非常低，post安全性较高
11. html常用特殊字符：

 ,©,®

12. 超链接标签：

<a href="路径、网址"  title=""  target="规定在何处打开文档">内容</a>
		属性：target="_self"默认值，在当前窗口打开
					target="_blank"新窗口打开

13. 常用列表：

<!-- 无序列表 -->
<!-- circle空心圆、disc实心圆、suqare方形 -->
<ul type="circle">
<li>无序列表</li>
</ul>
<!-- 有序列表 -->
<!-- 1、A、a、I、i...  type类型，start开始位置-->
<ol type="A">
<li>无序列表</li>
</ol>
<!-- 自定义列表 -->
<dl>
<li>无序列表</li>
</dl>

CSS基础

CSS盒子模型

CSS样式表的引入方式

<!-- 行内式 -->
<div style="color:red;" >我是div</div>
<!-- 内联式 -->
<style>
div{
color:red;
}
</style>
<!-- 外联式 -->
<link rel="stylesheet" type="text/css" href="css文件的路径"/>

CSS基本选择器

1. 标签选择器，例如：div{width:100px;}
2. 类选择器，例如：.box{width:200px}
3. id选择器，例如：#box{width:200px}
4. 通配符：*{margin:0;pdding:0;}
5. 并集选择器：.box,a,p{width:100px;}

CSS层次选择器

1. 后代选择器，例：div p{}
2. 子选择器，例：ul>li{]
3. 相邻兄弟选择器，例：div+p{]
4. 通用兄弟选择器，例：div~p{}
5. 权重

<!-- 

        !通配符选择器的权重是0
        !标签选择器是1
        !类选择器是10
        !id选择器是100
        !内联式权重是1000
        !并集选择器/群组选择器没有权重
        !层级选择器计算权重之和

     -->

CSS的文本属性

1. font-size：100px,字体大小
2. color：red,颜色
3. font-family：宋体,字体
4. font-weight：bloder,加粗
5. font-style:itail/oblique/normal(正常字体),倾斜
6. text-align:center(还可以是上下左右),文本水平对齐
7. line-height:行高
8. font:文字简写
9. text-decoration:none/underline/overline/line-through,文本装饰
10. text-indent，首行缩进
11. letter-spacing,字间距

CSS的背景属性

1. background-color,背景颜色
2. background-image，背景图片
3. background-repeat，图片的平铺
4. background-position，图片的定位
5. background-attachment，背景图片的固定

CSS的列表属性

list-style:none 去除列表符号

PS切图

注意：存为Web所用格式，保存的时候选择所有用户切片，切片快捷键C

js一周学习内容

三角形

等腰三角形的输出

for (var i = 1; i <= 5; i++) {
            for (var j = 5; j >= i; j--) {
                document.write('&nbsp')
            }
            for (var k = 1; k <= i; k++) {
                document.write('* ')
            }
            document.write('<br>')
        }

 for (var i = 1; i <= 5; i++) {
            if (i % 2) { //就是奇数行
                for (var j = 5; j >= i; j--) {
                    document.write('&nbsp')
                }
                for (var k = 1; k <= i; k++) {
                    document.write('* ')
                }
                document.write('<br>')
            }
        }

最大公约数，最小公约数

最大公约数

1. 辗转相除法
2. 设 m、n，如果m/n可以整除，那么最大公约数就是m
3. 如果不能整除，继续计算n/(m%n)，如果整除那么最大公约数就是（m%n)如果不能整除则继续计算

 function getGys(a, b) {
                    //先确定两个数的大小
                    if (a < b) {
                        var tmp = a
                        a = b
                        b = tmp
                    }

                    while (a % b !== 0) {
                        var tmp = a % b
                        a = b
                        b = tmp
                    }
                    return b
                }

最小公倍数

function getGbs(a, b) {
                    var res = getGys(a, b)
                    var gbs = a * b / res
                    return gbs
                }
                var res = getGbs(5, 6)
                document.write(res)

判断质数

function getGbs(a, b) {
                    var res = getGys(a, b)
                    var gbs = a * b / res
                    return gbs
                }
                var res = getGbs(5, 6)
                document.write(res)

js标记循环控制语句

//js标记
        here: //自己起名字（随便取）
            for (var i = 1; i <= 5; i++) {

                for (var j = 1; j <= 3; j++) {

                    if (i === 3 && j === 2) {
                        console.log("看到半条虫子")
                        break here //直接跳转到循环结束的地方
                    }

                    console.log('吃的第' + i + '个包子的第' + j + '口')
                }
                console.log('====================')
            } //会跳到这里,相等于直接结束

arguments

1. arguements 在函数内部天生自带的变量
2. 表示所有实参的集合(伪数组)
3. arguments[索引],表示你想获取对应索引位置的数据
4. arguments[索引]=设置的值,表示把对应位置的数据改变
5. 注意: 如果写入索引的数据是没有的,就是添加,如果有就是修改

 function fn() {
            console.log(arguments)
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i])
            }
        }
        fn(10, 11, 22, 33) 

 //计算数字的和
        function fn() {
            var sum = 0
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            alert(sum) //弹出框输出
        }
        fn(11, 22) 

         

function fn() {
            var sum = 0
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            document.write(sum) //显示在网页上
        }
        fn(1, 2) 

        

function fn() {
            var sum = 0
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            return sum
        }

        var ren = fn(1, 2)
        console.log(ren)
        document.write(fn(2, 3)) 
        
        
        
       

打断函数——return

/* 打断函数--return */
 function fn() {
            console.log(1)
            console.log(2)
            return //打断
            console.log(3)
            console.log(4)
        }
        fn()

斐波那契数列

1. 递归计算数列
2. 斐波那契数列：1，1，2，3，5，8，13…第一位、第二位是固定的，第三位开始是前两位数的和

function fn(n) {
            if (n === 1 || n === 2) {
                return 1
            }
            return fn(n - 1) + fn(n - 2)
        }
        var res = fn(10)
        console.log(res)

简单四则运算

1. 输入框，input
2. 下拉菜单，select

<input type="text" name="" id="one">
    <select name="" id="slt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" name="" id="two">
    <button id="btn">=</button>
    <input type="text" name="" id="result" disabled>
    <script>
        btn.onclick = function() {
            var a = parseFloat(one.value)
            var b = parseFloat(two.value)
            var t = slt.value
            var res
            switch (t) {
                case '+':
                    res = a + b
                    break
                case '-':
                    res = a - b
                    break
                case '*':
                    res = a * b
                    break
                case '/':
                    res = a / b
                    break
            }
            result.value = res
        }
    </script>

补充

/* 九九乘法表 */
        /* for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                document.write(j + '*' + i + '=' + i * j + ' ')
            }
            document.write('<br>')
        } */
        /* 64个格子 */
        /* var sum = 0
        for (var i = 0; i < 64; i++) {
            sum += 2 ** i
        }
        var res = sum * 0.0001
        console.log(res) */
        /* 这是可以计算输出并表示的最大数 */

        /* var num = -(2 ** 53 - 1)
        var num2 = 2 ** 53 - 1
        console.log(num)
        console.log(num2) */
        /* 解决方法在后面加1 */

        console.log(typeof(9007199254740995n))