2021.10.5(总结)

最新推荐文章于 2023-09-21 22:23:38 发布

sgfy_

最新推荐文章于 2023-09-21 22:23:38 发布

阅读量523

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/sgfy_/article/details/120616574

版权

02021年10月1日开始

1、特殊字符

常用的特殊符号：

< “&lt”

 >     "&gt"

空格 “&nbsp”

2、标题标签

h1-h6都是标题标签：

h1最大 h6最小

align属性是对齐属性：

left：左对齐（默认）

center：居中

right：右对齐

3、超链接

a 标签是超链接：

href属性设置连接的地址

target属性设置哪个目标进行跳转

_self 表示当前页面（默认值）

_blank 表示打开新页面进行跳转

4、列表标签

无序列表：ul

有序列表：ol

5、img标签

src设置图片路径

在JavaSE中路径分为相对路径和绝对路径：

相对路径：从工程名开始算

绝对路径：盘符：/目录/文件名

在web中路径分为相对路径和绝对路径：

相对路径：

. 表示当前文件所在的目录

… 表示当前文件所在的上一级目录

文件名表示当前文件所在的目录的文件，相当于./文件名 ./可以省略

绝对路径：

http：//ip:port/工程名/资源路径

alt属性设置当指定路径找不到图片时，用来代替显示的文本内容

6、table标签

table标签是表格标签

border 设置表格标签

width 设置表格宽度

height设置表格高度

tr 是行标签

th 是表头标签

td 是单元格标签

cellspaceing 设置单元格间距

colspan 属性设置跨列

rowspan 属性设置跨行

7、iframe框架标签

iframe标签可以在页面上开辟一个小区域显示一个单独的页面

1.在iframe标签中使用name属性定义一个名称

2.在a标签的target属性上设置iframe的name的属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRemVdzU-1633428982404)(file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle\YL@H}RP@EFSE%{TJS$QRWM7.png)]

8、表单标签

表单就是HTML页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

form标签就是表单

input type=text 是文本输入框 value设置默认显示内容

input type=password 是密码输入框 value设置默认显示内容

input type=radio 是单选框 name属性可以对其进行分组 checked=“checked”表示默认选中

input type=checkbox 是复选框 checked=“checked”表示默认选中

input type=reset 是重置按钮 value属性修改按钮上的文本

input type=submit 是提交按钮 value属性修改按钮上的文本

input type=button 是按钮 value属性修改按钮上的文本

input type=file 是文件上传域

input type=hidden 是隐藏域当我们要发送某些信息，不需要用户参与，就可以使用隐藏域

select 标签是下拉列表框

option 标签是下拉列表框中的选项 selected=“selected”设置默认选中

textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）

rows 属性设置可以显示几行的高度

cols 属性设置每行可以显示几个字符的宽度

9、表单提交的细节

action属性设置提交的服务器地址

![img](file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle\XJP@X52E3DDY~YJ8R3{O3.png)

method属性设置提交的方式GET（默认值）或POST

表单提交的时候，数据没有发送给服务器的三种情况：

1.表单项没有name属性值

2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器

3.表单项不在提交的form标签中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FI69DrAo-1633428982406)(file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle\Z$RQE0J7R8TWU03{2060D}C.png)]

GET请求的特点是：

1.浏览器地址中的地址是action属性[+？+请求参数]

2.不安全

3.他有数据长度的限制

POST请求的特点是：

1.浏览器地址栏中只有action属性值

2.相对于GET请求更安全

3.理论上没有数据长度的限制

10、其他标签

div标签默认独占一行

span标签它的长度就是分装数据的长度

p段落标签默认会在段落的上方或下方各空出一行（如果已有就不再空）

11、CSS

CSS是【层叠样式表单】。是用于（增强）控制网页样式并允许将样式信息与内容分离的一种标记性语言

1.语法规则img

2.CSS和HTML的结合方式

第一种：在标签的style属性上设置“key：value value；”，修改标签样式。

缺点：①代码量庞大

②可读性差

③css没复用性可言

第二种：在head标签中使用style标签来定义各种自己需要的css样式。

格式如下：

XXX{

Key：value value；

}

![img](file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle`%C~ZEM]RTF@F{[5YWP47.png)

缺点：

①只能在同一页面中复用代码，不能在多个页面中复用css代码。

②维护不方便，工作量大。

第三种：

把css样式

使用html的标签导入css样式文件。

12、css选择器

1.标签名选择器

标签名选择器的格式是

标签名{

属性：值；

}

2.id选择器

id选择器的格式是：

#id属性值{

属性：值；

}

id选择器可以让我们通过id属性选择性去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #id001{
            color: blue;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>

3.class选择器

class类型选择器的格式是：

.class属性值{

属性：值；

}

class类型选择器，可以通过class属性有效的选择性去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class01{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="class01">div标签</div>
</body>
</html>

4.组合选择器

组合选择器的格式是：

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让多个选择器共用同一个css样式代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id001{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
<div class="class01">div标签class01</div><br />
<span id="id001">span 标签</span><br/>

</body>
</html>

13、JavaScript介绍

Js是弱类型，Java是强类型

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释js的浏览器都可以执行和本平台无关）

14、JavaScript和html代码的结合方式

第一种方式：

只需要在head标签中，或在body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数。
        //它可以接收任意类型的参数，这个参数就是警告框的提示信息。
        alert("hello javascript!");
    </script>
</head>
<body>

</body>
</html>

第二种方式：

使用script标签引入单独的JavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="02.js"></script>
</body>
</html>

15、变量

什么是变量？变量是可以存放某些值的内存的名称。

Javascript的变量类型：

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

JavaScript里特殊的值：

undefind 未定义，所有js变量未赋予初始值的时候默认值都是undefined.

null 空值

NAN 全称是：Not a Number。非数字。非数值。

JS中定义变量格式：

var 变量名；

var 变量名=值；

16、关系（比较）运算

等于：== 等于是简单的做字面值的比较

全等于：===除了做字面值的比较之外还会比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a="12";
        var b=12;
        alert(a==b);//ture
        alert(a===b);//false
    </script>
</head>
<body>

</body>
</html>

17、逻辑运算

且运算：&&

或运算：||

取反运算：！

在Javascript语言中，所有的变量都可以作为一个boolean类型的变量去使用。

0、null、undefine、”“（空串）都认为是false；

&&且运算

有两种情况：

第一种：当表达式全为真的时候，返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a="abc";
        var b=true;
        var d=false;
        var c=null;
        //alert(a&&b);//true
        //alert(b&&a);//abc
        //alert(a&&d);//false
        //alert(a&&c);//null
        //alert(a&&b&&c);//null
        //alert(a&&d&&c);//false
    </script>
</head>
<body>

</body>
</html>

||或运算

有两种情况：

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真，就会返回第一个为真的表达式的值

18、Javascript数组

JS中数组的定义：

格式：

var 数组名=[];//空数组

var 数组名=[1,‘abc’,true];//定义数组同时赋值元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        var arr=[];//定义一个空数组        //alert(a.length);//0        arr[0]=12;        //alert(arr[0]);//12        alert(arr.length);//1        //javascript语言中的数组，只要我们通过数组下表赋值，那么最大的下标值，        //就会自动给数组做扩容操作        arr[2]="abc";        //alert(arr.length);//3        //alert(arr[1]);//undefined        for (var i=0;i<arr.length;i++){            alert(arr[i]);        }    </script></head><body></body></html>

19、JavaScript函数

函数的两种定义方式

第一种：使用function关键字来定义函数。

使用的格式如下：

function 函数名(形参列表){

函数体

}

在JavaScript语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用return语句返回值即可！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        //定义一个无参函数        function f() {            alert("无参函数f()被调用了")        }        //函数调用===才会执行        //f(); //------------------------------------        //定义一个有参函数        function f1(a,b) {            alert("有参函数f1()被调用了a=>"+a+"  b=>"+b);        }        //f1(12,"abc"); //------------------------------------        //定义带有返回值的参数        function sum(num1,num2) {            var result=num1+num2;            return  result;        }        alert(sum(500,166));    </script></head><body></body></html>

第二种：

使用格式如下：

var 函数名=function(形参列表){函数体}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        var fun=function () {            alert("无参函数");        }        //fun();        var fun1=function (a,b) {            alert("有参函数a=>"+a+",b=>"+b);        }        //fun1(1,2);        var fun2=function (num1,num2) {            return num1+num2;        }           alert(fun2(500,166));    </script></head><body></body></html>

注：在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function fun(a,b) {        alert("有参函数fun(a,b)");    }        function fun() {            alert("无参函数fun()");        }       fun(123,"abc");//无参函数fun()    </script></head><body></body></html>

20、函数的arguments隐形参数（只在function函数内）

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管他叫隐形参数。

隐形参数特别像Java基础的可变长参数一样。

public void fun（obje…args）；

可变长参数其他就是一个数组。

那么js中的隐形参数也跟Java的可变长参数一样。操作类似数组。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function f() {            //alert(arguments.length);//可查看参数个数            //alert(arguments[0]);            //alert(arguments[1]);            //alert(arguments[2]);           for (var  i=0;i<arguments.length;i++){               alert(arguments[i]);           }        }        f(1,"ad",true);//3        // alert("无参函数fun（）")        //需求：要求编写一个函数，用于计算所有参数相加的和并返回        function sum(num1,num2) {            var result=0;            for (var i=0;i<arguments.length;i++){                if(typeof arguments[i]=="number"){                    result+=arguments[i];                }            }            return result;        }        alert(sum(1,1,1,1,1,"abc"))//5    </script></head><body></body></html>

21、js中的自定义对象

Object形式的自定义对象

对象的定义：

var 变量名=new Object(); //对象实例（空对象）

变量名.属性名=值； //定义一个属性

变量名.函数名=function(){} //定义一个函数

对象的访问：

变量名.属性/函数名();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        var obj=new Object();        obj.name="脑堵";        obj.age="6";        obj.fun=function () {            alert("姓名："+this.name+"年龄"+this.age);        }        obj.fun();    </script></head><body></body></html>

{}花括号形式的自定义对象

var 变量名={ //空对象

属性值：值， //定义一个属性

函数名：function(){}//定义一个函数

};

对象的访问：

变量名.属性/函数名();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">    var obj={        name:"xiye",        age:18,        fun:function () {            alert("姓名："+this.name+"年龄"+this.age);        }    };    obj.fun();</script></body></html>

22、JS中的事件

什么是事件？

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload加载完成事件：页面加载完成之后，常用于做页面js代码初始化操作

onclick单机事件：常用于按钮的点击响应操作。

onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。

onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作。

onsumbit表单提交事件：常用于表单提交之前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行那些操作代码，叫做事件注册或事件绑定。

静态注册事件：通过html标签的事件直接赋予事件相应后的代码，这种方式我们叫静态注册。

动态注册事件：是指通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function（）{}这种形式赋予事件响应后的代码，叫动态注册。

动态注册基本步骤:

1.获取标签对象

2.标签对象.事件名=function（）

onload加载完成事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        //onload事件的方法        function onloadFun() {            alert('静态注册onload事件所有代码');        }        //onload事件动态注册，是固定写法        window.οnlοad=function () {            alert("动态注册的onload事件");        }    </script></head><!--静态注册onload事件        onload事件是浏览器解析完页面之后就会自动触发的事件        <body οnlοad="onloadFun()">--><body></body></html>

onclick单机事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><script type="text/javascript">    function onClickFun() {        alert("静态注册onclick事件");    }    //动态注册onClick事件    window.οnlοad=function () {        //1.获取标签对象        //document是javaScript语言提供的一个对象（文档）        //get       获取        //Element   元素（就是标签）        //By        通过。。        //Id        id属性        var btnObj=document.getElementById("btn01");        //alert(btnObj);        //2.通过标签对象.事件名=function(){}        btnObj.οnclick=function () {            alert("动态注册的onclick事件");        }    }</script><body><!--    静态注册onClick事件-->    <button onclick="onClickFun()">按钮1</button>    <button id="btn01">按钮2</button></body></html>

onblur失去焦点事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        //静态注册失去焦点事件        function onblurFun() {            //console是控制台对象，是由JavaScri语言提供，专门用来向浏览器的控制台打印输出，用于测试使用            //log()是打印方法            console.log("静态注册失去焦点事件");        }        //静态注册onblur事件        window.οnlοad=function () {        //1.获取标签对象            var passwordObj=document.getElementById("password");            //alert(passwordObj);        //2.通过标签对象.事件名=function(){};            passwordObj.οnblur=function () {                console.log("动态注册失去焦点事件");            }        }    </script></head><body>    用户名：<input type="text" onblur="onblurFun()"><br/>    密码：<input id="password" type="text"><br/></body></html>

onchange内容发生改变事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onchangeFun() {            alert("男神已经改变了");        }        <!--动态注册onchange事件-->        window.onload=function () {            //1.获取标签对象            var selObj = document.getElementById("s01");            //2.通过标签对象.事件名=function(){}            selObj.οnchange=function () {                alert("男神已经改变了");            }        }    </script></head><body>    请选择你心中的男神：    <!--静态注册onchange事件-->    <select onchange="onchangeFun()">        <option>---男神---</option>        <option>dog</option>        <option>cat</option>        <option>panda</option>        <option>fish</option>    </select>    请选择你心中的男神：    <select id="s01">        <option>---男神---</option>        <option>dog</option>        <option>cat</option>        <option>panda</option>        <option>fish</option>    </select></body></html>

onsumbit表单提交事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        //静态注册表单提交事件        function onsubmitFun() {            //要验证所有表单项是否合法，如果有一个不合法就阻止表单提交           alert("静态注册表单提交事件---发现不合法");           return false;//return ture提交        }        window.οnlοad=function () {            //1.获取标签对象            var formObj = document.getElementById("form01");            //2.通过标签对象.事件名            formObj.οnsubmit=function () {                //要验证所有表单项是否合法                alert("静态注册表单提交事件---发现不合法");                return false;//return ture提交            }        }    </script></head><body>    <!--return false 可以阻止表单提交-->    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">        <input type="submit" value="静态注册">    </form>    <form action="http://localhost:8080" id="form01">        <input type="submit" value="动态注册">    </form></body></html>

23、doucument对象概念介绍

DOM模型

DOM全称是Doucument Object Model 文档对象模型

就是把文档中的标签，属性，文本，转换为对象来管理。

Document对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GraApVbn-1633428982408)(C:/Users/上官飞羽/Desktop/无标题2.png)]

Doucument对象的理解

第一点：Document它管理了所有的HTML文档内容

第二点：docunment它是一种树结构的文档。有层级关系。

第三点：他让我们把所有的标签都对象化。

第四点：我们可以通过document访问所有标签对象。

sgfy_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021.10.5(总结)

02021年10月1日开始1、特殊字符常用的特殊符号： < “&lt” > "&gt"空格 “&nbsp”2、标题标签h1-h6都是标题标签： h1最大 h6最小align属性是对齐属性： left：左对齐（默认） center：居中 right：右对齐3、超链接a 标签是超链接： href属性设置连接的地址 target属性设置哪个目标进行跳转 _self 表示当前页面
复制链接

扫一扫