H5&css&js

最新推荐文章于 2024-04-28 14:44:52 发布

jokerBi

最新推荐文章于 2024-04-28 14:44:52 发布

阅读量1.2k

点赞数

分类专栏： qiangduan

本文链接：https://blog.csdn.net/qq_42806416/article/details/82669455

版权

qiangduan 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

H5

<!--注释内容ctrl+/-->
<!--document type文档类型
    定义你这个文档是什么类型
-->
<!DOCTYPE html>
<!--将来html所有的内容都写在这个标签里
    文件的开始
-->
<html>
    <!--头标签 定义一些html页面的设置-->
    <head>
        <!--设置编码格式-->
        <meta charset="UTF-8">
        <!--标题标签 定义网页的标题-->
        <title>哈哈</title>
    </head>
    <!--身体标签 html的各种标签写在body里
        将来网页上显示的是body标签里的内容
    -->
    <body>
        你好，世界
    </body>
</html>

标题标签

    <body>
        <!--标题标签
            h(1-6)数字越大字越小
            自动换行
        -->
        <h1>一级标题</h1>
        <h2>二级</h2>
        <h3>三级</h3>
        <h4>四级</h4>

        <!--段落标签 自动换行-->
        <p>万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。</p>

        <h3>网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点</h3>

        <font size="7" color="#ff00ff">awsdfgyh</font>

    </body>

字体相关标签

    <body>
        <!--标题标签
            h(1-6)数字越大字越小
            自动换行
        -->
        <h1>一级标题</h1>
        <h2>二级</h2>
        <h3>三级</h3>
        <h4>四级</h4>

        <!--段落标签 自动换行-->
        <p>万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。</p>

        <h3>网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点</h3>

        <font size="7" color="#ff00ff">awsdfgyh</font>

    </body>

图像标签

    <body>
        <!--标题标签
            h(1-6)数字越大字越小
            自动换行
        -->
        <h1>一级标题</h1>
        <h2>二级</h2>
        <h3>三级</h3>
        <h4>四级</h4>

        <!--段落标签 自动换行-->
        <p>万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。</p>

        <h3>网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点</h3>

        <font size="7" color="#ff00ff">awsdfgyh</font>



    </body>

超链接

    <body>
        <!--超链接：a
            如果要想让a标签具有超链接的效果需要加上href属性
            href：写要连接的地址
                超链接的地址
                    1.可以是一个网址
                    2.也可是自己写的html页面
            target:
                _self:在自己当前页面打开
                _blank:在当前窗口新建一个页面打开

        -->
        <a href="http://www.baidu.com">百度</a>
        <br />
        <a href="4.图像标签.html" target="_blank">跳转到图像页面</a>
    </body>

内嵌窗口

<body>
        <!--iframe:内嵌窗口
            在当前页面会插入一些别的页面
            src属性：要显示的页面的地址
        -->
        <iframe src="4.图像标签.html" width="500px" ></iframe>
        <iframe src="5.超链接.html"></iframe>
    </body>

特殊符号

    <body>
        <!--
            br：换行
            hr:分割线
            &nbsp;  ----空格
            &gt;----大于号
            &lt;---小于号
            &quot;---引号
            &copy;---版权
        -->
        <p style="background-color: aquamarine; color: red;">寥落古行宫，宫花寂寞红。</p>
        <hr />
        <p style="background-image: url(../img/1.jpg)">据美国《纽约时报》、美联社等2日报道，美国明尼苏达州亨内平县警长办公室的监狱名单显示，中国亿万富翁、京东创始人刘强东被证实涉嫌性犯罪行为被捕。
根据警方记录提供的信息，刘强东8月31日晚间被明尼阿波利斯警方拘留，并于9月1日下午获释。监狱记录没有提供所谓事件的细节。</p>

        <a>白头宫女在 &nbsp;&nbsp;&nbsp;</a>
        <a>白头宫女在 &gt; &lt;&Aring;&quot;&copy;</a>
    </body>

锚点跳转

<body>
        <a href="#p1">第一个p段落</a>
        <br />
        <a href="#p2">第二个p段落</a>
        <br />
        <a href="#p3">第三个p段落</a>
        <p id="p1" style="height: 500px; background-color: aqua;"></p>
        <p  id="p2" style="height: 500px; background-color: red;"></p>
        <p id="p3" style="height: 500px; background-color: green;"></p>

列表

<body>
        <a href="#p1">第一个p段落</a>
        <br />
        <a href="#p2">第二个p段落</a>
        <br />
        <a href="#p3">第三个p段落</a>
        <p id="p1" style="height: 500px; background-color: aqua;"></p>
        <p  id="p2" style="height: 500px; background-color: red;"></p>
        <p id="p3" style="height: 500px; background-color: green;"></p>

表格

<body>
        <!--表格标签table
            caption----表格标题
            tr:行
            td:列
            th：加粗
            cellspacing属性：设置单元格和单元格之间的间隙
            cellpadding属性：设置内容和边框之间的间隙
        -->
        <table border="1" cellspacing="0" cellpadding="10" style="text-align:center;">
            <caption>学生成绩表</caption>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>爱好</td>
                <td>爱好</td>
            </tr>

            <tr>
                <td>张三</td>
                <td>10</td>
                <td rowspan="2">男</td>
                <td colspan="2">学习</td>
                <!--<td>学习</td>-->
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <!--<td>男</td>-->
                <td bgcolor="red">打游戏</td>
                <td bgcolor="red">打游戏</td>
            </tr>
        </table>
    </body>

其他设置

<body>
        <!--
            div就相当于一个盒子、容器
            一般分区域的时候div
        -->
        <div style="font-weight:bold ;color: red;" >
            <a>新闻</a>
            &nbsp;&nbsp;
            <a>hao123</a>
            &nbsp;&nbsp;
            <a>百度</a>
            &nbsp;&nbsp;
            <a>淘宝</a>
            &nbsp;&nbsp;
            <a>京东</a>
        </div>

        <span>aaaa</span>
        <span>bbbb</span>

        <p style="text-shadow: 1px 1px 20px green;text-indent: 2em;line-height: 40px;">洋洋洒洒几行文字，就一个意思，说他觉得刘强东是无辜的。

第一，凭印象。<span style="color: red;">周立波</span>说，自己印象里的刘强东不是那样的人，除非自己看走眼。

接下来，周立波用自己的亲身经历，给了刘强东一些意见和建议，还冷不防地说，他和刘强东一样，问题都是出在了“枪”上。</p>
    </body>

音频

    <body>
        <audio  src="../img/Justin Timberlake-Five Hundred Miles.mp3" controls="controls" ></audio>

        <video src="../img/Justin Timberlake-Five Hundred Miles.mp3" controls="controls"></video>
    </body>

表单

表单标签一般分为三部分

· 表单标签：包含了服务器地址和数据的提交方式

· 表单域：采集用户输入信息

· 表单按钮：将用户输入的信息提交给服务器

¨ 表单标签

· action属性：写服务器地址，现在没有服务器，暂时用#占位，以本地为服务器。将数据提交到本地。

· method属性：数据的提交方式。

1) post提交:想服务器传递数据时采用的是http post机制，这个过程用户看不到。相当于get要安全一些。一般注册、登陆等涉及用户隐私信息的用这种方式。 Post可以传递大数据。

2) get提交：数据提交的信息显示在网址上就是get的提交方式。使用？和服务器地址隔开，多个数据间用&拼接。 Get传递数据大小不能超过2kb。

¨ 表单域：

· 普通文本输入：

2) type:指定输入框的类型，text就是普通文本

3) placeholder：输入框中显示的空白提示信息

4) name：设置服务器接受提交数据的字段名

5) 将来在网址上就会显示：username=输入的内容

6) required:设置为必填内容，不输入就提交不成功。

7) pattern:可以设置正则表达式

· 提交按钮：

2) type=submit：提交的意思

3) value：按钮上显示的文字

· 密码框：

· 单选框：

1) 男

2) type=radio:单选框

3) name和value是提交之后显示在网址上的信息

4) checked：默认选中

5) id：给标签设置id值，方便别人定位的这个标签。

6) label for:默认单选框只能点击原点，如果想让他点击字也可以，可以用这个选项。For的值写的是要选中哪个框的id。

· 复选框：

1) 英语

· 下拉菜单：

· 其他

1) 日期

2) 时间

3) 选取文件

4) 数值框。可以上下点击选取数字，max能点击到的最大值，min最小值，step步长

5) 颜色选取框

6) 滑动条

7) 重置按钮

8) 普通按钮。

¨ 一些属性设置

· type：设置输入的类型

· placeholder:设置空白提示符

· name、value：设置服务器提交数据的字段和值

· required：设置必填项

· pattern：设置正则表达式

· checked：默认选中

· disabled:禁用

· max：规定输入字段的最大值

· maxlength:规定输入字段的最大字符数

· readonly：只读

· size：规定输入字段的宽度

· step：步长

音频

¨ 使用标签的形式设置音频、视频浏览器不需要安装插件就可以播放。

¨ 音频的标签：

CSS

认识

3.1 概述

¨ CSS称之为层叠样式表，作用是用来为html页面布局和添加样式的。

¨ 层叠：使用不同的方式为同一个标签添加样式，最后所有的样式都作用于该标签。

¨ 注释/注释内容/

3.2 使用css的方式

¨ 行内引用：在标签内添加style属性，他的作用范围是当前行。

¨ 内部引用：如果用行内引用的方式添加样式，加入现在有很多的段落，需要给这些段落都添加样式，那么就得给每一个标签后面都加上这个样式，这种方式太麻烦了，所以可以使用内部引用的方式减少代码的编写。比如现在有个需求：将下面这些p标签内的文字颜色改为红色，要修改的话就必须在每一个标签内都写上样式语句。这样太麻烦。

解决方案:用内部引用的方式。

       格式：在head标签中引用style标签

      ![img](file:///C:\Users\BIYUNS~1\AppData\Local\Temp\msohtmlclip1\01\clip_image008.gif)

¨ 外部引用：单独生成一个css文件，在这个css文件中编写样式，在head中通过link标签引入css文件。

3.3 三种引用css使用方式的优先级

¨ 行内引用的优先级高于内部引用和外部引用

¨ 内部引用和外部引用谁后执行就引用谁的样式

CSS选择器

4.1 标签选择器

¨ 通过标签名称在html页面中找对应的标签

¨ 格式：标签名称{

样式：样式值；

}

¨ 写了标签在这个html页面中所有符合这个标签的都会使用

4.2 全局选择器

¨ 类似于通配符，匹配html页面中所有的标签

¨ 格式：*{

样式：样式值；

}

4.3 id选择器

¨ 通过html页面中元素的id标识进行定位查找

¨ 格式：#id名称{

样式：样式值；

4.4 类选择器

¨ 通过html页面中元素的class标识进行定位查找

¨ 类表示的符号是点

¨ 格式： .类名称{

样式：样式值；

}

¨ 一个标签可以有多个不同的类型，一个类型可以作用于不同的标签

¨ 比如张三这个人可以给他定义人类型标签和学生类型标签，李四也能设置为学生标签。

¨ 为标签添加类别是通过class属性来添加的

¨ 格式：class=‘类别1 类别2 类别3’

¨ 通过空格把不同的类别区分开

4.5 其他属性选择器

¨ 格式：选择器[属性名]{}

¨ 精确到属性值：选择器[属性名=‘属性值’]{}

4.6 包含选择器

¨ 在指定的标签下找指定的后辈标签

¨ 先辈选择器后辈选择器{}

¨ 只找子标签：父选择器>子选择器{}

4.7 组合选择器

¨ 不同的选择器对应的标签具有相同的样式，不用给每一个选择器都设置，可以将这些选择器组合在一起统一设置。

¨ 格式：选择器1 选择器2 选择器3{}

4.8 伪类选择器

¨ 针对于超链接标签的：

\1. 未访问的状态：选择器：link{}

\2. 即将访问的状态：选择器：active{}

\3. 访问过的状态：选择器：visited{}

\4.

¨ 针对鼠标悬浮的

\1. 鼠标滑过：选择器：hover{}

¨ 针对自动换行标签的

\1. 自动换行的标签，比如：div h1 p

\2. 选择器：first-line:设置第一行文本样式

\3. 选择器：first-letter：设置首字符文本样式

\4. 选择器：before：添加前缀

\5. 选择器：after：添加后缀

\6.

¨ 针对于被包含的标签

\1. 选择器：first-child：设置第一个子标签

\2. 选择器：last-child：设置最后一个子标签

\3. 选择器：nth-child(数值、even、odd)

\4.

4.9 结构选择器

\5. ：root—-根节点选择器（只有子标签没有父标签的）

\6. ：empty—-空节点只有标签，没有标签内容的

\7. 选择器：not(指定选择器)：否定选择器，指定标签中为不是指定选择器的那些标签设计样式

\8.

选择器的优先级：查找标签越精确，优先级越高

                   前端

1关于背景颜色、图片的设计

可以创建个*div*来设置，给这个*div*加关于背景的设计

1.1 给背景颜色赋值的方式：

¨ 用颜色单词赋值

¨ 用rgb(r,g,b)赋值，取值范围是0-255

¨ 十六进制赋值：(#ff00aa)

1.2 背景图片的设置

¨ 如果图片大小小于标签大小，是平铺的效果

¨ 如果图片大小等于标签大小，正好全部显示

¨ 如果图片大小大于标签大小，截取标签大小的图片进行显示。

1.3 设置背景图片是否平铺

¨ background-repeat:no-repeat;不平铺

¨ repeat：平铺

¨ repeat-x:横向平铺

¨ repeat-y：纵向平铺

1.4 设置背景图片位置

¨ background-position: right bottom;

¨ 第一个值是水平第二个值是垂直

¨ 也可以定义数值

1.5 同时设置背景图片、平铺、位置

¨ background: url(../img/5.jpg) no-repeat 20px 100px;

1.6 设置一个背景颜色由多个颜色组成

¨ background: linear-gradient(red,green,blue);

¨ 默认颜色顺序纵向显示

¨ 如果要水平显示：第一个位置写to right

¨ background: linear-gradient(to right, red,green,blue);

¨ 右下角：right bottom

2 关于字体的样式设计

2.1 设置文字颜色

¨ color: red;

2.2 设置字体

¨ font-family

¨ 字体可以一次设置多个，之间用空格隔开

¨ 从左到右适配字体，匹配到哪个就用哪个，如果都匹配不上，则使用浏览器默认的。

2.3 设置字号大小

¨ font-size:15px;

¨ 自定义字号：

1) px 像素

2) em 原字体大小的倍数谷歌默认16px

2.4 字体加粗

¨ font-weight: 100;

¨ 数值越大越明显

2.5 字体样式

¨ font-style: normal;

2.6 行高：

¨ line-height: 24px;

¨ 每一行文本所占的高度

2.7 字间距

¨ letter-spacing: 10px;

2.8 单词间距

¨ word-spacing: 20px;

¨ 使用空格隔开的就是单词

2.9 标签内容溢出

¨ overflow: scroll;

¨ hidden：隐藏

¨ visible：可见

¨ scroll：滚动

2.10设置文本划线的

¨ text-decoration: none;

¨ none:没有线

¨ line-through：删除线

¨ underline：下划线

3 关于列表的设计

3.1 项目符号

¨ list-style-type

3.2 自定义项目符号

¨ list-style: url(../img/1.jpg);

4 盒子模型

4.1 概述

¨ 把一个标签当做一个盒子。一般盒子模型有4部分组成，外边距、边框、内边距、标签内容。

1) 外边距（margin）：平级的标签和标签的间隙成绩为外边距。每个手机盒之间的间距。

2) 边框（border）：标签的宽度，厚度。手机盒自身的厚度

3) 内边距（padding）：标签和标签内容之间的间隙。手机盒和手机之间的间隙。

4) 标签内容（connet）：标签中内容的显示区域。

4.2 盒子模型模式

¨ 标准盒子模型（默认）

1) 给标签设置宽度和高度，这个宽和高是标签内容显示区的大小。

2) 标签的真实大小:margin（外边距）+border（边框）+padding（内边距）+width/height（宽或高）。

3) 特点：设置了外边距、内边距、边框盒子会变大

¨ 怪异盒子模型

1) 设置怪异盒子模型的语句：

· box-sizing: border-box;

2) 给标签设置宽度和高度，这个宽度和高度就是整个标签也就是（border+padding+内容大小）

3) 特点:设置了内边距、边框盒子整体大小不会发生变化，整个大小一只保持设置的宽和高。

¨ 当标签设置了边框和内边距标签的大小还是设置的宽和高不会撑大，不会发生变化就用怪异盒子模型

4.3 各种设置

¨ 四边间距一样：margin: 10px;

¨ 设置上下和左右：margin: 10px 20px;

¨ 设置上、左右、下

1) margin: 10px 20px 30px;

¨ 设置上右下左：

1) margin: 10px 20px 30px 40px;

¨ 设置某一边的外边距

1) margin-top: 10px;

2) margin-bottom: 20px;

3) margin-left: 30px;

4) margin-right: 40px;

¨ 切圆角border-radius: 8px;

¨ 切圆形：border-radius: 50%;

¨ 设置标签阴影：box-shadow: 5px 5px 8px green;

4.4 居中设置

¨ 2个div嵌套，outer嵌套inner，让子标签位于父标签的中心，设置子标签的margin时，父标签和子标签会一起移动，因为2边重叠，被浏览器视为同一个边，要解决这个问题，可以给outer设置明显的边界border

5 float浮动

¨ 一般页面的显示效果是从上到下显示的。比如：创建4个div标签，并设置这4个div的宽和高和背景颜色。

¨ 上图我们创建了4个div并设置了宽和高还有背景颜色，这4个div的排版显示是从上到下显示的。

¨ 浮动就是更改页面的显示效果，可以将以前的从上到下显示改为从左到右或者从右到左显示。

¨ float: left;设置页面的布局为从左到右显示

在div样式设计里加一个浮动设置：

¨ float: right;从右向左显示

¨ 上面的设置是对整个div做了浮动设置，我们也可以单独对某一个div做设置，比如现在让id为a的div设置为左浮动，案例效果会是什么样子呢？？？

¨ 从上图我们看到单独对id为a的div设置了左浮动，id为b的就会被a给覆盖，为什么会造成这种现象呢？

¨ 解释：float是浮动标签，浮动标签会脱离普通文档流，简单点说就是设置了浮动的标签和别的标签显示就不在同一个层面了，它会比普通标签往上一层显示。因为a标签浮动起来了，不再和bcd在同一个层面了，a标签原本的位置没有内容了，那个地方也不能空着，所有后面的内容就会依次向前推，占用原来a标签的位置，就会造成a覆盖b的现象。

¨ 现在既想让a浮动也不想让b往上移动，也就是不想让a覆盖b这个问题怎么解决呢？

¨ 现在b这个div盒子是被a给覆盖了，a我们设置的是左浮动，也就是说被左浮动给覆盖了，如果不想被覆盖，不想被遮挡我们可以在b里边清楚a左浮动的效果。其实这个作用并不是把a的浮动给删了，a的浮动本身还是在的，只不过是保留了a原来的位置不被其他标签占用。

¨ 清除浮动：

1) clear: left;清除左浮动

2) clear: right;清除右浮动

3) clear: both;2边都清除

6 标签显示display

¨ 标签显示一般有三种状态

1) 块级标签block：特点：宽度和父标签宽度一致，高度随着内容自适应，独占一行，设置宽高有效。比如有：div标签 p h1-h6 li

2) 行内标签（内联标签）inline：特点：宽高随着内容自适应，设置宽高无效，一般是修饰段落中某些单独的内容的，比如：a b I span

3) 行内块级标签inline-block：特点：宽高随着内容自适应，不会独占一行，设置宽高有效，比如：img

¨ 设置标签显示状态的样式属性为：display

¨ 当display的值为none的时候该标签处于隐藏状态，不会保留原有位置。

¨ 想保留原有位置并惊醒隐藏可以设置：visibility:hidden

7 关于布局的定位

¨ 设置标签的摆放位置，样式属性名为：position

¨ 一般定位方式有4种：

1) static：所有标签的默认定位方式

2) relative:相对定位，他的参照物是自己原有的位置，这种定位不会让标签脱离普通文档流，会保留原来的位置。

3) absolute:绝对定位，他的参照物是：找先辈标签中具有position样式的标签作为参照物。Position样式属性的值除了static其余的都可以作为参照物。如果先辈标签中没有找到position就以body参照物。会脱离原来的文档流。

4) fixed：固定定位，他的参照物是窗口，会脱离原来的文档流

5) 注意：设置了定位之后需要确定标签位于何处，得结合top、left、right、bottom一起使用

javescrip

1 JS组成部分

1.1 ECMAscript部分—包含了js的基本语法

1.2 BOM部分

¨ 全拼是Browser Object Model，浏览器对象模型

¨ 提供了与浏览器交互的方法

1.3 DOM部分

¨ Document Object Model

¨ 提供了访问和操作网页内容的方式，可以和html css进行交互

2 JS的引入方式

2.1 内部引用

¨ 在head或者body中引入script标签

2.2 外部引用

¨ 在外部创建js文件，在head或者body中通过script标签在src中引入js路径。

<script type="text/javascript" src="tools.js" ></script>

3 第一个js文件

3.1 输出语句

¨ 弹框输出alert(“hello world”)

¨ 控制台输出console.log(“hello world”)

¨ 输出到网页上document.write(“hello world”)

4 变量的定义

¨ 在js中定义变量的时候使用var关键字，不需要写变量的类型，变量的类型由赋的值来决定。

¨ 格式：var 变量名=值;

¨ 在js中定义一个变量可以不用赋初始值,如果不赋值他的值是undefined。这种赋值方式不建议，最好给他一个初始值。实在是不知道该赋什么初始值那就写null。

¨ js中可以同时声明多个变量。格式如下：

¨ var a=10,b=11,c=12;

¨ 注意：js中是区分大小写的

5 js中的数据类型

¨ 数值类型Number，包含了整数和小数

¨ 字符串String

¨ 布尔类型Boolean，值为true何false 0为false

¨ 数组类型Array，类似于python中的元组

¨ 空值Null

¨ 未定义undefined

¨ 函数类型function

¨ 正则RegExp，在双斜杠中间写正则的语法/内容/，验证是否匹配规则用test()

¨ 对象object

¨ 注意：在js中所有的事物都是对象，创建一个变量就是创建了一个新的对象。

¨ 可以用typeof来检测变量的类型

6 isNaN()函数

¨ 检测是否不是一个数值，false代表是数值

7 类型转换

¨ parseInt（）–转为整型。

¨ parseFloat（）–转为浮点型

¨ 转换规则：检测字符串是否以数字开头，如果不是返回NaN如果是数字开头，则遍历取值，一直取到非数字为止

8 运算符的操作

8.1 算术运算符

¨ + - * / %

¨ 加号对于字符串而言是拼接操作，字符串可以和任意类型拼接，拼接的结果是字符串。

8.2 关系运算符

¨ > < >= <= == != ===

¨ ==比较的时候不管数据类型只管数据内容是否一致

¨ ===表示恒等，不进要比较数据内容，也比较数据类型

¨ 上图中x==y只要内容相等即可，所以内容为true，x===y数据类型不一样所以false

8.3 逻辑运算符

¨ &&：逻辑与and

¨ ||：逻辑或or

¨ ！：逻辑非 not

8.4 赋值运算符

¨ = += -= *= /= %=

8.5 自增自减

¨ ++:加一

¨ –：减一

¨ ++或–放在操作数的前面，先自增或自减，再参与运算

¨ ++或–放在操作数的后面，先参与运算再自增或自减

8.6 三元运算符

¨ 标志：？：

¨ 格式：var result=条件表达式？表达式1：表达式2；

¨ 条件成立返回冒号前的，不成立返回冒号后的。

9 流程控制语句

¨ 流程控制语句一般分为三类，分别是：

\1. 顺序结构—从上到下依次执行

\2. 分支结构—判断语句

\3. 循环结构

10 分支结构

10.1if判断语句

¨ 格式一：if(条件表达式){执行语句}

¨ 格式二: if(条件表达式){执行语句1}else{执行语句2}

¨ 格式三: if(条件表达式){执行语句}

else if(条件表达式){执行语句}

else{执行语句}

10.2switch选择语句

¨ 格式：

¨ switch中的表达式运算完必须要有一个结果

¨ case后的是一个准确的值，数据类型可以是字符串和整数。

¨ 分析上述的题用if和switch哪个做会更好。

11 循环结构

11.1while循环

11.2do…while循环

while和do…while的区别：while先判断后执行，do…while先执行后判断，当判断条件第一次就不满足的情况下while一次都不执行，do…while会执行一次。

11.3for循环

11.4for in循环

注意：此处的变量指的不是元素而是下标

11.5死循环的简洁格式

¨ while(true)

¨ for(;;)

12 Math类

¨ Math.PI—圆周率

¨ Math.random()–随机数0-1之间的小数

¨ Math.round()–四舍五入

¨ Math.abs()–绝对值

¨ Math.ceil()–向上取整

¨ Math.floor()–向下取整

¨ Math.pow()–a的b次方

¨ Math.sqrt()–开方

¨ Math.max()/min

¨ 随机数的公式：min+Math.random()*(max-min)

13 函数

¨ 函数的定义格式：

¨ 函数的命名规范：

\1. 命名规范一般采用驼峰命名法，分为大驼峰和小驼峰

\2. 小驼峰：第一个单词的首字母小写，之后每个单词的首字母都是大写，比如：getMaxValue。

\3. 大驼峰：给个单词首字母都大写，比如：GetMaxValue。

\4. js中给函数起名建议用小驼峰。

¨ 参数问题:同python。但是js中形参的个数可以和实参树木不符。在python当不知道将来要传递多少个参数的时候可以用不定长参数。但是在js中函数体中自带了一个数组专门用来存放实参的，这个数组的名字叫做：arguments。

¨ 获取数组的长度：数组名.length

¨ 获取数组的内容：循环遍历。

14 字符串的操作

14.1 声明字符串的方式

¨ var str=”hello”;

¨ str=new String(“hello”);

¨ str=String(“hello”);

14.2 字符串拼接操作

\1. +拼接：可以和任意类型拼接，结果都是字符串

u var str=”hello”;

u str=str+10;—hello10

\2. concat() 可以一次拼接多个，用逗号隔开

u var str1=”hello”;

u varstr2=str1.concat(10,true,”world”)

14.3 获取字符串的长度

¨ 变量名.length()

14.4 获取某个索引位置上的字符

¨ [下标]

¨ charAt(下标)

14.5 截取，获取某一部分字符串

¨ substr(start,length)

¨ substring(startIndex,endIndex)–包含前面不包含后面

14.6 查找字符串出现的位置

¨ indexOf(object，index)

¨ 参数：查找谁从哪开始查

14.7 大小写转换

¨ toUpperCase—大写

¨ toLowerCase—小写

14.8 拆分

¨ split()

14.9 验证字符串是否和指定的正则匹配

¨ str.match()

14.10替换

¨ replace(old,new)

15 数组的操作

15.1 数组的定义方式

\1. var arr=new Array(长度)

\2. eg：var arr=new Array(10);—创建一个长度为10的数组

\3. var arr=new Array(“hello”,10,true)

\4. var arr=[10,20,”hello”]

15.2 修改元素

¨ 数组名[下标]=值

15.3 获取数组长度

¨ 数组名.length

15.4 添加元素

¨ 数组名[下标]=值

¨ 在js中没有越界这种说法

15.5 追加元素

¨ arr.push(10,20)

¨ 在末尾追加，可以追加多个元素，元素间通过逗号分开

15.6 在头部添加元素

¨ arr.unshift(10,20)

15.7 在指定位置添加元素

¨ arr.splice(index,count,object)

¨ 参数分别是：在哪个位置添加，要删除的个数，要添加的元素，可以是多个

15.8 删除元素

¨ 删除尾部元素–arr.pop() 一个一个删除

¨ 删除头部元素–arr.shift() 一个一个删除

15.9 拼接数组中的元素

¨ arr.join(拼接符号)

15.10排序

¨ arr.sort()–根据第一个元素进行排序

¨ 自己写排序函数

16 对象

¨ 在python中要创建对象必须得先有类，在类中可以定义一些属性和行为。这个对象跟着也会有定义的属性和行为。

¨ 在js中创建一个对象不需要设计类，它可以直接创建对象。

16.1 创建对象的方式

\1. var obj=new object()

¨ 对象的特征信息通过点直接添加。

¨ obj.name=”张三”;

¨ bj.eat=方法名;||obj.eat=function(){}

¨ this—谁调用方法this就代表谁和self一样

\2. 可以采用键值对的方式赋值

17 Date类

¨ Date是一个时间类

17.1 创建时间对象

¨ var date=new Date();

¨ 此对象中包含的是当前的时间

17.2 设置自定义时间

¨ var date=new Date(“2018/2/3”);

¨ 根据字符串设置时间的格式：

n 年/月/日

n 年-月-日

n 年，月，日，时，分，秒（这里的月份从0开始）

17.3 获取指定时间的时间戳

¨ date.getTime()

17.4 根据时间戳得到对应的时间

¨ var date =new Date(时间戳的值)

17.5 获取年

¨ date.getFullYear()

¨ date.getYear()-以1900年为分割点

17.6 获取月、日

¨ date.getMonth()

¨ date.getDate()

17.7 获取时分秒

¨ date.getHours()

¨ date.getMinutes()

¨ date.getSeconds()

17.8 获取星期

¨ date.getDay()–0-6 0代表星期天

17.9 将时间转为字符串

¨ date.toDateString()–只显示星期和年月日

¨ date.toTimeString()–显示时分秒和时区

18 浏览器对象模型BOM

¨ 所有浏览器都支持window对象，window表示的是浏览器窗口，在js中，所有的变量、函数、对象都是window的成员。

¨ 变量是window对象的属性，函数是window对象的方法。

18.1 获取浏览器窗口尺寸

¨ 获取高度：document.write(window.innerHeight)

¨ 获取宽度：document.write(window.innerWidth)

¨ 上面这种获取尺寸的方式只针对IE、谷歌、火狐、opera、Safari。它获取的宽高时包含边距的。

¨ 对于ie5 6 7 8获取方式是：

\1. 获取高度：document.write(document.documentElement.clientHeight)。

\2. 获取宽度：document.write(document.documentElement.clientWidth)。

¨ 如果以后获取宽高想涵盖所有浏览器：

18.2 打开新窗口

¨ 当做了某一件事情比如点击了一个按钮想要打开一个新窗口的话可以使用open（）函数。

18.3 关闭当前窗口

¨ window.close()

18.4 获取用户屏幕的宽度和高度

¨ document.write(screen.availHeight)

¨ document.write(screen.availWidth)

18.5 location对象

18.6 常用方法

¨ alert（）—弹框

¨ prompt()—输入框

¨ confim()—带有确认和取消键的弹框

18.7 计时器

¨ 计时器在规定的时间之后或者时间间隔之后来执行某一段代码，而不是在函数调用后立即执行。

¨ setIntervar()—间隔指定的毫秒去不停止的执行某一件事情。

¨ setTimeout()—在指定的毫秒数后执行某段代码，执行一次。

¨ 这2个函数的参数分别是：要执行的函数和毫秒值。

¨ 下面代码是每一秒打印一个hello。

¨ 下面代码是一秒之后打印出hello

¨ 开始计时器和停止计时器结合使用

¨ 结束settimeout的是cleartimeout

¨ 练习：分别用setIntervar和setTimeout做关闭广告的效果。

19 DOM

操作属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li class="banana">香蕉</li>
            <li class="apple">苹果</li>
            <li class="pear">梨子</li>
        </ul>


        <script>
            var banaNode = document.querySelector(".banana");
            // 1. 点语法设置和获取属性值
            banaNode.id = "b";
            // 获取
            //alert(banaNode.id);

            // 关于类别的有一个特殊的方式
            //alert(banaNode.className);
            //banaNode.className = "littlebanana"

            // 不可以设置自定义属性
            //banaNode.bname = "香蕉";

            // 通过方法设置 或者获取
            banaNode.setAttribute("title", "列表");
            banaNode.setAttribute("bname","香蕉");

            // 获取
            //alert(banaNode.getAttribute("title"));
            alert(banaNode.getAttribute("bname"));
        </script>

    </body>
</html>

dom操作样式属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #p1{
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="p1" style="background-color: blue;">红豆生南国, 春来发几枝</p>
        <p id="p2">愿君多采撷, 此物最相思</p>

        <script type="text/javascript" src="../js/tools.js" ></script>
        <script>
            // 获取p1
            var pNode1 = document.getElementById("p1");
            // 设置样式
            pNode1.style.border = "solid 10px black";
            // 获取样式
            // 背景颜色
            // 这种获取方式只能获取行内设置样式
            //var value = pNode1.style.backgroundColor;
            //var value = pNode1.style.color;
            //alert(value);

            // 想获取其他设置样式的方式
            // 适合IE  不适合谷歌
            //          var value = pNode1.currentStyle["color"];
            //          alert(value);

            // 这个只适配了IE的高版本  低版本没有适配到
            //          var value = getComputedStyle(pNode1)["color"];
            //          alert(value);

            // 如果想适配所有的浏览器 需要做一下兼容
            var value = getStyle(pNode1, "color");
            alert(value);

        </script>
    </body>
</html>

jokerBi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5&css&js

H5&amp;amp;amp;lt;!--注释内容ctrl+/--&amp;amp;amp;gt;&amp;amp;amp;lt;!--document type文档类型定义你这个文档是什么类型--&amp;amp;amp;gt;&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;!--将来html所有的内容都写在这个标签里文件的开始--&amp
复制链接

扫一扫

专栏目录