CSS基础

发表于 2023-03-21 更新于 2023-04-20 分类于 Learn Disqus：本文字数： 397 阅读时长 ≈ 1 分钟

一、初识CSS

1.1 CSS是什么

CSS：Cascading Style Sheet 层叠级联样式表

CSS作用：表现（美化网页）

    字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……

CSS的优势：

    1、内容和表现分离

    2、网页结构表现统一，可以实现服用

    3、样式十分的丰富

    4、建议使用独立于html的css文件

    5、利用SEO，容易被搜索引擎收录！

1.2 CSS发展史

    CSS1.0

    CSS2.0    DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

    CSS2.1    浮动，定位

    CSS3.0    圆角，阴影，动画……    浏览器兼容性

1.3 CSS的三种导入方式

1.3.1 内部样式：

在<head> 中用<style> 可以编写css的代码，每一个声明最好使用分号结尾，语法如下：

选择器{
    声明1;
    声明2;
    声明3;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <!--规范,<style> 可以编写css的代码,每一个声明 最好使用分号结尾
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
 
</head>
<body>
 
<h1>我是标题</h1>
 
</body>
</html>

1.3.2 外部样式（推荐使用）：

两种写法：

①链接式（推荐）：在html文件的<head>中，用 <link> 引用css文件

<link rel="stylesheet" href="css/style.css">
注：css文件夹与此 html 在同一个文件夹里

index.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <!--引用css文件-->
    <link rel="stylesheet" href="css/style.css">
 
</head>
<body>
 
<h1>我是标题</h1>
 
</body>
</html>

css/style.css ：

1
2
3

h1 {
     color:red;
}

②导入式：在html中，在<head> 的 <style> 中使用 @import

1
2
3

<style> 
    @import url("css/style.css"); 
</style>

HTML基础

发表于 2023-03-20 更新于 2023-04-20 分类于 Learn Disqus：本文字数： 2.1k 阅读时长 ≈ 8 分钟

HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言。

标记语言是由标签构成的语言。<标签名称>例如html,xml;标记语言不是编程语言。

HTML运行在浏览器上,由浏览器来解析

标签的内部是可以定义属性的,属性由键值对构成,值需要用双引号括起来,多个属性用空格隔开

<标签名称属性名1=”属性值” 属性2=”属性值”></标签名称>

<p id=”p1” name=”p1”> </p>

HTML文档的基本结构

HTML文档也叫web页面。

基本结构

<!DOCTYPE html>

<html>

<!-- html,根元素,围堵标签-->

<head>

<!--
head,头元素:
    作用:
    1.用于指定HTML文章中的一些元数据,例如元数据 meta:定义页面的编码格式title:定义页面的标题
    2.引入外部的资源的文件
-->

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!--

body,主体: 浏览器显示内容都将在这里编写

格式化代码的快捷键: ctrl+shift++f(英文状态下使用)

-->

</body>

</html>

HTML中常用标签

1.<h1></h1> ....<h6></h6> 分别是一级标题到六级标题。

2.<h2></h2>:段落标签一般用在正文。

3.</br>:一般用在段落中强制换行。

4.<hr/>:一般用来分隔内容。(color和size可以设置分割线的颜色和大小)
<span>内容</span>：一般在大段落中为了突出部分内容使用的标签;很少独立使用,一般嵌套在其他标签中使用。

5.< img src=” ” title=”” width=”px / %” height=”px / %” >:图片标签

常用属性:

title: 
    作用1:鼠标悬浮在图片上的时候显示的文字。
    作用2:当图片因为各种原因无法正常显示的时候,应该显示图片的位置显示title中的文字。
src:
    指定图片的路径路径的分类:相对路径(表示与当前文件同级的文件夹下的图片 推荐使用)  绝对路径(一般以盘符开头 不推荐使用)

alt与title作用相同,但是浏览器不支持该属性,所以我们一般使用title属性

width和height:高度和宽度,设置之后图片可能会失真。

6.有序和无序列表

<ul>    
<li>12345</li>        
<li>上山打老虎</li>   
</ul>

<ol>    
<li>老虎没打着</li>   
<li>打着个小松鼠</li>   
</ol>

ul-li表示无序列表 li标签可以多个

ol-li表示有序列表,与无序列表功能一样只是样式不同。

7.dl-dt-dd:定义描述标签,一般用在图文混编的场合

     dl:只能盛放dt和dd标签,不推荐放其他内容

     dt:一般用来盛放图片或者标题

     dd:一般用来补充对dt的描述说明

8.标签分类 :

    html标签可以分为块状元素和行集元素两大类

    块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素

    行集元素:一般都是语义级别的基本元素,一般只能容乃文本或者掐腰行内元素

    区分方法:是否独占一行

块状元素和行内元素的区别：

1.块级元素会独占一行,其宽度自动填满父元素宽度;
 行内元素会排列到同一行里,其宽度随元素的内容变化而变化

2.块级元素可以设置宽高;行内元素设置宽高无效

3.块级元素可以设置margin,padding属性;行内元素的水平方向的padding会有边距效果,但是竖直方向的padding没有效果

超链接

超链接标签一般有两个作用:1.用来实现页面之间的跳转 2.实现锚链接的功能

1.页面键的跳转<a href= ” ” target=” ”>内容

a:超链接,作用:跳转到其他资源

属性:href=”目标资源路径” //路径推荐相对路径

 target=”打开资源的位置” 默认值:_self --在当前页面打开

                              _blank--在新的页面打开资源

2.锚链接

当一个页面长度超过一个屏的时候,想迅速跳转到制定的位置,例如大家浏览网页的时候,滑动超过一屏的时候,右下角会有返回顶部连接,这个就是用锚链接来实现的.这个定位可以实现本页间的锚链接也可以实现不同页面的锚链接.

表格标签

规则表格: table定义表格.

       常用属性:    height:高度 width:宽度

                   border:边框

                   cellpadding:内容与单元格之间的距离

                   cellspacing:单元格和单元格之间的距离

<table border=” ” cellpadding=” ” cellsacing=” ” width=” ” height=” ”>

tr:定义行常用属性:

    align:文本水平方向上的对齐方式

    有三个数值: 默认left-左对齐 center-居中对齐 right-右对齐

th和td标签都用来定义单元格,

th:一般用来定义表头单元格,即做标题那一行中的单元格

td:一般用来定义非表头单元格,即除了标题正文内容的单元格

两种方法没有严格限制

常用属性: valign:文本垂直方向上的对齐方式,top-顶部对齐 bottom-底部对齐 middle-居中对齐

不规则–跨行跨列

colspan=” 3” : 意思是它和合并包括自身在行内的三列单元,所有本行后面的两个单元格要被它占用,所有要删除后面两个单元格

rowspan=”3”: 意思是它要和包括自身在内的本列的三行单元格,所有本列后面两行的同样位置的单元格的位置要被它占用,所有要删除后面两行的同位置单元格

表单

概念:用于采集用户输入的数据,用于和服务器进行交互.

form：用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围

常用属性: action:指定提交的数据URL

     method:指定提交方式,一共7种,以下俩种比较常用

             get:

                1.请求参数会在地址栏中显示.会封装到请求中.

                2.请求参数大小是有限制的

                3.不太安全

             post:

                1.请求参数不会在地址栏中显示.会封装到请求中.

                2.请求参数大小是没有限制的

                3.较为安全

     enctype:表中有上传的文件的时候必备属性,且取值为multipart/form-data

1	<form action=” .html” method=”get” enctype=”multipart/form-data”></form>

常用表单元素

1.id:元素的唯一表示,不重复

2.name:表单项元素的名称,很重要:提交数据到服务器之后,服务器获取数据通过该名称

3.value:表单项元素的值,服务器获取数据通过name获取到的就是value

4.type:表示表单元素的呈现形式

5.class:表示样式名称

6.readonly:表示只读,用户只能看不能改

7.disabled:表示禁用,该元素不能改而且背景是灰色

8.required:表示用户必须填写此内容,如没有填写在提交表单时会给错误提示

一.文本框:<input type=”text” />

二.密码框:<input type=”password” />

三.单元按钮:<input type=”radio” name=”” />:name相同是一组,同组按钮互斥

四.复选框:<input type=”checkbox” />:name同组可以选择多个

五.文件件域:<input type=”file” /> :multip表示可以上传多个文件

六.日期-html5的新特性：type=”data”：表示年月日

                   type=”datatime-local”:表示年月日时分秒

七:隐藏域:<input type=”hidden”>:页面看不到任何效果

     作用:程序员需要的值

八.下拉列表框:<select name=””> <option> 内容</option> </select>:

option:select中的所有选项,其中value表示下拉列表中被选中项对应的值

  其中selected表示默认选中

九.文本域:<textarea rows=”” cols=” ” readonly=”readonly” disabled=”disabled”></textarea>

cols:指定行数,每一行有多少个字符

rows:默认多少行

readonly:表示只读内容不可修改

disabled:表示不可用,样式呈现灰色

十一．按钮

1.type=”submit”:提交按钮,提交到form的指定路径

2.type=”image”:等价于提交按钮,只是没有value值,多了src=”提交按钮图片”

3.type=”reset”:清空表单中的所有用户输入,回到默认原始状态

4.type=”button”:普通按钮,没有任何功能,有按钮的长相

ATM

发表于 2023-03-20 分类于 Learn Disqus：本文字数： 102 阅读时长 ≈ 1 分钟

// A T M 
        var money = 100;
        var price = 0;
        while (num != 4) {
            var num = prompt('请输入你要的操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出')
            switch (num) {
                case '1':
                    price = prompt('输入要存的钱数；');
                    money = money + parseFloat(price);
                    alert('您的余额；' + money);
                    continue;
                case '2':
                    price = prompt('输入你要取出的钱: ');
                    money = money - parseFloat(price);
                    alert('您的余额' + money);
                    continue;
                case '3':
                    alert('您的余额：' + money);
                    continue;
                case '4':
                    alert('正在退出...')
                    break;
            }
        }

JavaScript基础

发表于 2023-03-20 更新于 2023-04-20 分类于 Learn Disqus：本文字数： 2.8k 阅读时长 ≈ 10 分钟

一、前端知识

1.1、Web发展史

Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于 1993 年问世。 1994 年 4 月，马克.安德森和 Silicon Graphics（简称为 SGI，中译为“视算科技”或“硅图”）公司的创始人吉姆·克拉克（Jim Clark）在美国加州设立了“Mosaic Communication Corporation”。 Mosaic 公司成立后，由于伊利诺伊大学拥有 Mosaic 的商标权，且伊利诺伊大学已将技术转让给 Spy Glass 公司，开发团队必须彻底重新撰写浏览器程式码，且浏览器名称更改为 Netscape Navigator，公司名字于 1994 年 11 月改名为“Netscape Communication Corporation”，此后沿用至今，中译为“网景”。微软的Internet Explorer及Mozilla Firefox等，其早期版本皆以Mosaic为基础而开发。微软随后买下Spy Glass公司的技术开发出Internet Explorer浏览器，而Mozilla Firefox 则是网景通讯家开放源代码后所衍生出的版本。

阅读全文 »