HTML学习笔记

 <!DOCTYPE html> //html5版本标识

<html>

        <head>
                <meta charset="utf-8">

                <!--网页解析用，不可见内容-->

        </head>

        <body>

                <!--可见内容-->

                <h1>这个是标题</h1>

        </body>

</html>

布局

头部

主体

<main></main>网页上只有一个

尾部

侧边栏

文章

div!!!!

万能

语法

自结束标签

加重

<em></em>斜体

<strong></strong>加粗

<blockquote></blockquote>首行缩进2

<q></q>带“”的话

注释

块元素

独占一行的为块元素<h1><p>，对页面布局

行内元素

包裹文字

换行

<br>一个换一行

组

<hgroup>
    <h1>xxx</h1>
    <h2>xxx</h2>
</hgroup>

属性

实体（转义字符）

&nbsp; 空格
&gt; 大于
&lt; 小于

列表

可以嵌套

<!--
        列表list
        1.有序
            ol---li
        2.无序
            ul
        3.定义
            dt
    -->
    <ul>
        <li>???</li>
        <li>...</li>
    </ul>
    <ol>
        <li>lll</li>
        <li>'''</li>
    </ol>

超链接

href跳转目的

新页面？用target属性_self/_blank

回到顶部

href=“#”

id属性可以实现页面内部位置跳转

javascript:;占位符相当于python的pass

图片

内联框架

向页面引入其他网页

音视频

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>音频视频</title>
</head>
<body>
    <h1>Hello mp3</h1>
    <!--
        auto引入音频
        controls 显示可控组件
        autoplay 自动开始放 //一般不用
    -->
    <div>署前街少年</div>
    <audio src="../audio/10.署前街少年.flac" controls></audio>

    <!--
            auto引入音频
            controls 显示可控组件
            autoplay 自动开始放 //一般不用
    -->
    <div>视频</div>
    <video src="../audio/烟花.mp4" controls width="300"></video>
    <br>
    <!--可以引入其它视频网站-->
    <iframe frameborder="1" src="https://v.qq.com/txp/iframe/player.html?vid=q0013b6lunl" width="500" height="300"></iframe>

</body>
</html>

坑

多个空格解析为1个

CSS

使用方式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 2.
    <style>
        p{
          color: green;
          font-size: x-large;
        }
    </style> 
-->
    <!-- 3. -->
    <link rel="stylesheet" href="test.css">


</head>
<body>
    <!--
        CSS:
            1.行内形式style——只能生效一行，不推荐使用
            2.<head>中创建<style>内部样式表——只能在当前页面用
            3.外部样式表,link引入,可以复用
    -->
    <p style="color:blue; font-size: x-large;">
        寒雨连江夜入吴，平明送客楚山孤</p>
    <p>落霞与孤鹜齐飞</p>
</body>
</html>

语法

选择器p 声明块color:red;

id选择器

隐患就是id不能重复

类选择器

属性选择器

参考：属性选择器 - CSS（层叠样式表） | MDN

/* 存在 title 属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

伪类:伪元素::

：*** 修饰前面标签，系统内置

鼠标移入

点击事件

:active

属性

超链接的伪类

伪元素

继承

对一个样式设置也会作用到后代身上

盒模型

默认下父元素被子元素撑开

组成

内容content

边框border

内边距padding

外边距margin

border

可以无视顺序设计

border: 50px solid orange;

等式

左外边距+左边框+左内边距+内容宽+右内边距+右边框+右外边距=父内容宽

坑

css块里可以用/* */作为注释

JavaScript

输入输出语句

    <script>
        prompt('请输入:');
        alert('弹出警示');
        console.log('控制台输出');
    </script>

存储输入

    <script>
        var age = prompt('请输入年龄:');
        alert('你的年龄是：'+ age);
    </script>

变量

js中的变量弱类型，用var定义，实际使用再确定，可以后期改变类型

var age = 18;

alert(age);

var name = 'cxk';

转义字符也是\

数组

创建

        var arr = new Array();
        var arr2 = [];
        var arr3 = [1,2,3,4,5];

新增

var arr = [1,2,3];
arr[3]=4;
alert(arr[3]);

函数

    <script>
        function Sum(num1, num2){
            var s = 0;
            for(var i = num1; i <= num2; i++){
                s += i;
            }
            return s;
        }

        console.log( Sum(1, 100) );
    </script>

内置对象arguments

伪数组

        function argu(){
            console.log(arguments);
        }

        argu(1,2,3);

匿名函数

        var fun=function(){
            console.log('我是匿名函数');
        }
        fun();

对象

    <script>
        var student={
            name:'cxk',
            age:18,
            sex:true,
            sayHi:function(){
                console.log('hi~');
            }
        }
        //---------------------------
        var student2 = new Object();
        student2.name = 'zhangsan';
        student2.sayHi=function(){
            console.log(hi);
        }
        //---------------------------
        function people(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.hi = function(){
                console.log('hipeople');
            }
        }

        var xiaoming = new people('小明', 18, true);
        for(var k in xiaoming){
            console.log(xiaoming[k]);
        }
        
    </script>