JavaWeb笔记——01.HTML、CSS和JavaScript概述

最新推荐文章于 2024-07-16 16:43:05 发布

江湖野客

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量177

点赞数

分类专栏： JavaWeb学习笔记文章标签： javascript css html dom

本文链接：https://blog.csdn.net/qq_43544021/article/details/120767412

版权

JavaWeb学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01.HTML、CSS和JavaScript概述

属性的值可以使用单引号也可以使用双引号，但是注意单引号和双引号不能在一个属性值里面混用

//正确的写法
<a href="http://www.example.com">示例站点链接</a>
<a href='http://www.example.com'>示例站点链接</a>
<a href='http://www.example.com' title='hahaha'>示例站点链接</a>
<a href='http://www.example.com' title="ha'ha'ha">示例站点链接</a>

//在一个HTML中已使用一种引号，你可以在此引号中嵌套另外一种引号
<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>

//错误的写法
<a href="http://www.example.com'>示例站点链接</a>

如果你想将引号当作文本显示在html中，你就必须使用实体引用。

实体引用

在HTML中，有许多特殊字符，如"<"，">"，" ” "，” ’ “和&，他们本身是HTML语法的一部分，所以我们必须使用字符引用——表示特殊编码，它们可以在这些情况下使用，每个字符引用以符号&开始，以分号;结束

原义字符	等价字符引用
<	&lt
>	&gt
"	&quot
’	&apos
&	&amp

注意：字符引用结束要加” ; “

//第一种
<p>HTML 中用 <p> 来定义段落元素。</p>
//结果
HTML 中用

来定义段落元素。

//第二种
<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>
//结果
HTML 中用 <p> 来定义段落元素

注释

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->

表单form

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

表单没有name属性值
单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
表单项不在提交的form标签中

get请求的特点是：

浏览器地址栏中的地址是：action属性[+?+请求参数]，请求参数的格式是：name=value&name=value
不安全
它有数据长度的限制

post请求的特点是

浏览器地址栏中只有action属性值
相对于get请求要安全
理论上没有数据长度的限制

<!--https://www.baidu.com/?action=login&%E8%B4%A6%E5%8F%B7=123456&passward=147258&sex=on-->
<form action="http://www.baidu.com" method="get">
    <input type="hidden" name="action" value="login">
    <table align="center">
        <h1 align="center">用户注册</h1>
        <tr>
            <td>用户账号：</td>
            <td><input type="text" value="默认值" name="账号"></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="111" name="passward"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="111"></td>
        </tr>
        <tr>
            <td>选择性别：</td>
            <td><input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>选择爱好：</td>
            <td><input type="checkbox" checked>Java
                <input type="checkbox">C++
                <input type="checkbox">Python
            </td>
        </tr>
        <tr>
            <td>选择国家：</td>
            <td>
                <select >
                <option>--请选择国家--</option>
                <option selected value="cn">中国</option>
                <option value="usa">美国</option>
                <option value="jp">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我描述：</td>
            <td><textarea rows="10" cols="10">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="abc"></td>
            <td align="center"><input type="submit"></td>
        </tr>
    </table>
</form>

div，span，p标签

div标签默认独占一行

span标签它的长度是封装的长度

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

CSS选择器

标签名选择器：可以决定哪些标签被动的使用这个样式

格式为：标签名 { 属性:值; }

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

格式为：#id属性值{ 属性:值; }

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

格式为：.class属性值{ 属性:值; }

组合选择器：可以让多个选择器公用一个CSS样式代码

格式为：选择器1，选择器2，…，选择器n{ 属性:值; }

JavaScript介绍

JavaScript是弱类型，Java是强类型

弱类型就是类型可改

强类型就是定义变量时，类型已确定，而且不可改

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

注意：script标签既可以用来定义js代码，也可以用来引入js文件，但是，两个功能二选一使用，不能同时使用（解决办法：再写一个script）

JavaScript的变量类型：

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

特殊的值

undefined：未定义，所有js变量未赋予初始值的时候，默认值都是undefined
null：空值
NAN：全称是Not a number，非数字，非数值

定义变量格式：

var 变量名;
var 变量名 = 值;

关系运算

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

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

其他的和Java一样

var q = 10;
var w = "10";
alert(q == w);//true
alert(q === w);//false

逻辑运算

在JavaScript中，所有的变量都可以作为boolean类型的变量去使用

0，null，undefined，""（空串）都认为是false

&&有两种情况：

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

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

||有两种情况：

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

第二种：当表达式中有一个为真时，返回第一个为真的表达式

并且&&和||有短路，和Java一样

数组

格式：

var 数组名 = []; 空数组

var 数组名 = [1,“abc”,false];

JavaScript语言中，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容

var arr = [];
arr[3] = 9;
for (var i = 0; i < arr.length; i++) {
    alert(arr[i]);//输出undefined，undefined，undefined，9
}

var arr = [];
alert(arr[5]);//输出undefined，必须要赋值才能扩容，能访问，不会报错，但数组长度还是0
alert(arr.length);//输出0

函数

定义方式

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

格式：function 函数名(形参列表){ 函数体 }

如果需要返回值，直接在函数体内使用return语句返回值即可

function fun1() {
alert("无参函数被执行");
}

fun1();

function fun2(a, b) {
alert("有参函数被执行: a=" + a + ", b=" + b);
}

fun2("abc", 12);

function fun3(num1, num2) {
var sum = num1 + num2;
return sum;

}

alert(fun3(100, 200));

第二种：格式：var 函数名 = function(形参列表){ 函数体 }

注意：JS中不允许函数重载，会直接覆盖之前定义的函数

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

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量（特别像Java中的可变长参数）

function fun() {
    alert("无参");
}

function fun(num1, num2) {
    alert("有参");
}

fun();//输出的是 有参

function fun() {
    alert(arguments);//输出 object Arguments
     alert(arguments.length);//输出0
    alert("无参");
}

function fun() {
    alert(arguments[0]);//输出1
    alert(arguments[1]);//输出abc
    alert(arguments[2]);//输出true
    alert(arguments.length);
    alert("无参");
}
fun(1,"abc",true);

JS中数字和字符串也是拼接操作

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

alert(fun(1, 2, 3, 4, 5, 6, "abc", 7, 8, 9, 10));//返回21abc78910

JS中的自定义对象

Object形式的自定义对象

var 变量名 = new Object(); 对象实例（空对象）
变量名.属性名 = 值定义一个属性
变量名.函数名 = function(){} 定义一个函数
对象的访问：变量名.属性/函数名()

var obj = new Object();
alert(typeof obj);
obj.name = "abc";
obj.fun = function (num1,num2) {
var sum = num1 + num2;
return sum;
}
alert(obj.name);
alert(obj.fun(100,200));

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

var 变量名 = {}; 对象实例（空对象）
var 变量名 = { 属性名:值,属性名:值,函数名:function(){} } 注意：属性名和方法名后面是:号，不是=号；两个定义之间要用,号隔开，不是;号；最后一个定义结束不要加,号，不然系统会以为你还有定义
对象的访问：变量名.属性/函数名()

var obj = {
    name: "abc",
    age: 10,
    fun: function (num1, num2) {
        var sum = num1 + num2;
        alert(sum);
    }
}
alert(obj.name);
alert(obj.age);
obj.fun(100, 200);

事件

常见的事件：

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

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

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

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

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

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

事件的注册（绑定）：其实就是告诉浏览器，当事件响应后要执行哪些操作代码

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码

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

动态注册的基本步骤：1.获取标签对象 2.标签对象.事件名 = function(){}

onload加载完成事件：

//静态注册
//可以在body后面直接写语句，但是太臃肿，推荐在script里写好，body中调用
<script type="text/javascript">
    function fun() {
    alert('静态注册onload事件')
}
</script>
<body onload="fun()">
   
//动态注册
//直接在script中window.onload
<script type="text/javascript">
    window.onload = function () {
        alert('动态注册onload事件');
    }
</script>
<body>

onclick单击事件：

//静态事件和onload类似
//动态事件需要1.获取标签对象2.通过对象.事件名 = function(){}
function onclickfun() {
    alert('静态注册onclick事件');
}
window.onload = function () {
    //1.获取标签对象
    var btn02 = document.getElementById("btn02");
    //2.通过对象.事件名 = function(){}
    btn02.onclick = function () {
        alert('动态注册onclick事件');
    }
}
<body>
<button onclick="onclickfun()">按钮1</button>
<button id="btn02">按钮2</button>
</body>

onblur失去焦点事件：

function oncblurfun() {
    console.log("静态注册onblur事件");
}
window.onload = function () {
    //1.获取标签对象
    var password = document.getElementById("password");
    //2.通过对象.事件名 = function(){}
    password.onblur = function () {
        console.log("动态注册onblur事件");
    }
}
用户账号：<input type="text" value="默认值" onblur="oncblurfun()"><br>
用户账号：<input type="text" id="password"><br>

onchange内容发生改变事件：

function onchangefun() {
    alert("静态onchange事件");
}
window.onload = function () {
    var sel = document.getElementById("sel");
    sel.onchange = function () {
        alert('动态注册onchange事件');
    }
}
<select onchange="onchangefun()">
    <option>--女神--</option>
    <option>哈哈</option>
    <option>呵呵</option>
    <option>嘻嘻</option>
</select>
<br>
<select id="sel">
    <option>--女神--</option>
    <option>哈哈</option>
    <option>呵呵</option>
    <option>嘻嘻</option>
</select>

onsubmit表单提交事件：

function onsubmitfun() {
    alert("静态注册onsubmit事件——发现不合法");
    return false;
}
window.onload = function () {
    var form01 = document.getElementById("form01");
    form01.onsubmit = function () {
        alert("动态注册onsubmit事件——发现不合法");
        return false;
    }
}
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitfun();">
    <input type="submit" value="静态注册">
</form>
<form action="http://www.baidu.com" method="get" id="form01">
    <input type="submit" value="动态注册">
</form>

DOM模型

Document对象的理解

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

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

第三点：它把所有对象的标签都对象化

第四点：可以通过Document访问所有的标签对象

注意：document对象的三个查询方法，如果有id属性，优先使用getElementById方法来查询，如果没有id属性，则优先使用getElementByName方法来查询，如果id属性和name属性都没有最后再按标签名查getElementByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

节点的常用属性和方法

节点简单地说就是标签对象（实际上远远不止）

window.onload = function () {
    var divObj = document.createElement("div");
    document.body.appendChild(divObj);
    //方法一
    divObj.innerHTML = "溢大师好帅";
   
    //方法二
    var textObj = document.createTextNode("溢大师好帅");
    divObj.appendChild(textObj);
}

江湖野客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb笔记——01.HTML、CSS和JavaScript概述

01.HTML、CSS和JavaScript概述属性的值可以使用单引号也可以使用双引号，但是注意单引号和双引号不能在一个属性值里面混用//正确的写法<a href="http://www.example.com">示例站点链接</a><a href='http://www.example.com'>示例站点链接</a><a href='http://www.example.com' title='hahaha'>示例站点链接</a
复制链接

扫一扫