JavaWeb开发----web前端（一）

墨染星辰云水间

已于 2024-11-11 11:58:30 修改

阅读量719

点赞数 27

文章标签： html css javascript

于 2024-10-21 09:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52554463/article/details/143000853

版权

参考手册：w3school 在线教程

一、HTML（Hyper Text Markup Language）

1、定义：超文本标记语言。负责网页的结构（元素和内容）。

超文本：除了文字信息，还可定义图片、音频、视频等内容；
标记语言：由标签构成的语言。HTML的标签都是预定义好的。

2、特点：

HTML标签不区分大小写；
HTML标签属性值单双引号都可以；
HTML语法松散。

3、结构标签：

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
    </body>
</html>

4、常见标签：

（1）标题：通过 <h1> - <h6> 等标签进行定义；

（2）段落：通过 <p> 标签进行定义；

（3）换行：通过 <br /> 标签实现；

（4）水平线：通过<hr />标签实现；

（5）文本加粗：通过<b>或者<strong>标签实现；

（6）超链接：通过 <a> 标签进行定义；

herf：指定访问的url；
target：指定在何处打开链接。_self，默认值，在当前页面打开；_blank，在空白页面打开。

（7）图片：通过 <img> 标签进行定义；

src，指定图像的url；
width：图片宽度；height：图片高度。

（8）视频：通过 <video> 标签进行定义；

src：规定视频的url；
controls：显示播放控件。

（9）音频：通过 <audio> 标签进行定义；

（10）布局标签：

<span>标签：一行可以显示多个（组合行内元素），宽度和高度默认由内容撑开，不可以设置宽高；
<div>标签：一行只显示一个（独占一行），宽度默认父元素的宽度，高度默认由内容撑开，可以设置宽高；

（11）表格：<table>，表格整体；<tr>，行；<td>，列（表头可用<th>）；

border：表格边框的宽度；
width：表格的宽度；
cellspacing：单元之间的空间；

<table border="1px" cellspacing="0" width="600px">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>住址</th>
    </tr>
    <tr>
        <td>stars</td>
        <td>女</td>
        <td>18</td>
        <td>内蒙古呼和浩特</td>
    </tr>
    <tr>
        <td>originall</td>
        <td>男</td>
        <td>21</td>
        <td>广东省深圳市</td>
    </tr>
</table>

（12）表单：<form>；属性：

action：表单提交的url，默认提交当前页面；
methond：表单提交方式。GET，默认值，在url后面拼接表单数据，url长度有限制；POST，在消息体（请求体）中传递，参数大小无限制；

注：表单项必须有name属性才可以提交。

表单项：

<input>：定义表单项，通过type属性控制输入形式；

type	描述
text	默认值，单行输入
password	密码
radio	单选按钮
checkbox	复选框
file	文件上传按钮
date/time/datetime-local	日期/时间/日期时间
number	数字输入框
email	邮件输入框
hidden	隐藏域
submit/reset/button	提交/重置/可点击按钮

<select>：下拉列表；<option>定义列表项；
<textarea>：文本域；

<form action="" method="post">
    姓名：<input type="text" name="name"><br><br>
    密码：<input type="password" name="password"><br><br>
    性别：<label><input type="radio" name="gender" value="1">男</label>
          <label><input type="radio" name="gender" value="2">女</label><br><br>
    爱好：<label><input type="checkbox" name="hobby" value="java">java</label>
          <label><input type="checkbox" name="hobby" value="game">game</label>
          <label><input type="checkbox" name="hobby" value="sing">sing</label>
    <br><br>
    图像：<input type="file" name="image"><br><br>
    生日：<input type="date" name="birthday"><br><br>
    时间：<input type="time" name="time"><br><br>
    日期时间：<input type="datetime-local" name="datetime"><br><br>
    邮箱：<input type="email" name="email"><br><br>
    年龄：<input type="number" name="age"><br><br>
    学历：<select name="degree">
            <option value="">----------请选择----------</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
            </select> 
    <br><br>
    描述：<textarea name="description" cols="30" rows="10"></textarea><br><br>
    <input type="hidden" name="id" value="1">
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <br>
</form>

说明：<label>标签加大了控件的可点击区域；

二、CSS（Cascading Style Sheets）

1、定义：层叠样式表。负责网页的表现（外观、位置等页面样式）。

行内样式：写在标签的style属性中；
内嵌样式：写在style标签中；
外联样式：写在单独的.css文件中，需通过link标签引入；

2、CSS选择器：用来选取需要设置样式的元素（标签）。

元素选择器：元素名称 { }，优先级最低；
id选择器：#id属性值 { }，优先级最高；
类选择器：.class属性值{ }。

3、CSS属性/样式：

（1）color：设置文本颜色；

颜色表示形式：

关键字：预定义的颜色名。例如：red、green等；
rgb表示法：红绿蓝三原色，每项取值范围：0~255。例：rgb(0,0,0)、rgb(255,255,255)；
十六进制表示法：#开头将数字转换成十六进制表示。例：#000000、#ffffff；

（2）font-size：字体大小；

（3）text-decoration：规定添加到文本的修饰，none通常用于从链接上删除下划线；

（4）line-height：设置行高；

（5）text-indent：定义第一个行内容的缩进；

（6）text-align：规定元素中的文本的水平对齐方式；

<!-- 方式一：行内样式 -->
<h1 style="color: red;">Hello HTML</h1>

<!-- 方式二：内嵌样式 -->
<style>
    /* 元素选择器 */
    h1{
        /*color: red;
          color: rgb(255, 0, 0);*/
          color: #4D4F53;
    }
    /* 类选择器 */
    .cls{
        color: #968D92;
    }
    /* ID选择器 */ 
        #time{
            color: #968D92;
            font-size: 13px;
        }
</style>

<!-- 方式三：外联样式 -->
<link rel="stylesheet" href="./css/news.css">

（7）width：宽度；height：高度；

（8）border：设置边框属性；

（9）padding：内边距；margin：外边距；

注：空格占位符：&nbsp；

4、 CSS盒子模型：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

三、JavaScript

1、定义：跨平台，面向对象的脚本语言。负责网页的行为（交互效果）。

2、引入方式：

内部脚本：将JS代码定义在HTML页面中（<script></script>标签之间）；
外部脚本：将JS代码定义在外部JS文件中（不包含<script>标签），引入到HTML页面中（<script src=""></script>）；

注：<script>标签不能自闭合！

3、语法：区分大小写；每行结尾的分号可有可无；单行注释//，多行注释/**/；

4、输出语句：

window.alert()：警告框；
document.write()：写入HTML，在浏览器展示；
console.log()：写入浏览器控制台；

5、变量：弱类型语言，变量可以存放不同类型的值；声明：

var：全局变量，可以重复定义；
let：局部变量，不可重复定义；
const：只读常量，不能改变；

6、数据类型：

原始类型：number（整数、小数、NAN）、string、boolean、null（对象为空）、undefined（未初始化）。（可通过typeof运算符获取数据类型）
引用类型

7、运算符：

算数运算符：+、-、*、/、%、++、--；
赋值运算符：=、+=、-=、*=、/=、%=；
比较运算符：>、<、>=、<=、!=、==、===（==比较时会进行类型转换，===不会进行类型转换）；
逻辑运算符：&&、||、!；
三元运算符：条件表达式 ? true_value : false_value。

8、类型转换：

字符串转数字：parseInt()，字符串字面值转成数字，如果字面值不是数字，转为NaN；
其他类型转boolean：对于Number类型，0和NaN为false，对于String类型，空字符串为false，Null和undefined均为false，其余均为true。

9、流程控制语句：if...else if...else...、switch、for、while、do...while。

10、函数：通过function关键字定义。

// 定义1
function functionName(参数1,参数2...){
// 执行的代码
}

// 定义2
var functionName(参数1,参数2...){
// 执行的代码
}

// 调用

functionName(参数列表)

注意：

形参不需要类型；
返回值也不需要定义类型；

11、对象

（1）Array：数组，长度可变，可以存储任意类型的数据；

// 定义1

var valueName = new Array(元素列表)；

// 定义2

var valueName = [元素列表];

// 访问

valueName[索引] = 值;

属性：length，设置/返回数组中元素的数量；

方法：

forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数；
push()：将新元素添加到数组的末尾，并返回新的长度；
splice()：从数组中删除元素；

注：箭头函数() => { }；

// 数组
var arr = new Array(1,2,3,4);
// var arr = [1,2,3,4];
console.log(arr[0]);    // 1

arr[10] = 50; 

// 遍历，1,2,3,4,undefined...,50
for (let index = 0; index < arr.length; index++) {
    console.log(arr[index])
}

console.log("==============================")

// forEach，1,2,3,4,50
arr.forEach(function(e){
    console.log(e);
})

// 箭头函数: (...) => {...}
arr.forEach((e) => {
    console.log(e);
})
        
// push，arr[11]=7, arr[12]=8, arr[13]=9, arr.length=14
arr.push(7,8,9);
console.log(arr);

// splice，删除arr[2]（包含）后的两个元素，arr[8]=50,...,arr[11]=9,arr.length=12
arr.splice(2,2);
console.log(arr);

（2）String：字符串。

// 定义1

var valueName = new String("...");

// 定义2

var valueName = "...";

var valueName = '...';

属性：length，字符串长度；

方法：

charAt()：返回在指定位置的字符；
indexOf()：检索字符串；
trim()：去除字符串两边的空格；
substring()：提取字符串中两个指定的索引号之间的字符（含头不含尾）；

// 字符串
var str = new String("Hello String");
var str1 = " Hello String ";
//var str = 'Hello String';
console.log(str);

// length
console.log(str.length);    // 12

// charAt
console.log(str.charAt(4));    // o

//indexOf
console.log(str.indexOf("lo"));    // 3

//trim
var s = str1.trim();
console.log(s);

//substring
console.log(str.substring(0,5))     // Hello

（3）JSON（JavaScript Object Notation）：通过JS对象标记法书写的文本，多用于作为数据载体，在网络中进行数据传输。

JavaScript自定义对象

定义格式：

var objectName = {

attributeName1: value1,

attributeName2: value2,

attributeName3: value3,

...

functionName: function(形参列表){ }

};

调用格式：

objectName.attributeName;

objectName.functionName();

基础语法：var valueName = {"key1": value1, "key2": value2, ...} ;（value的数据类型为：数字（整形或者浮点型）、字符串（双引号中）、逻辑值（true或false）、数组（方括号中）、对象（花括号中）、null）。

JSON字符串转JS对象：var jsObject = JSON.parse(userStr);

JS对象转JSON字符串：var jsonStr = JSON.stringify(jsObject);

（4）BOM（Browser Object Model）：浏览器对象模型，允许JS与浏览器对话，JS将浏览器的各个部分封装为对象。

Window：浏览器窗口对象；

获取：直接使用window，其中window.可以省略，例如：window.alert();<==>alert();

属性：

history：对History对象的只读引用；
location：用于窗口或框架的Location对象；
navigator：对Navigator对象的只读引用；

方法：

alert()：显示带有一段消息和一个确认按钮的警告框；
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框；
setInterval()：按照指定的周期（毫秒）来调用函数或计算表达式；
setTimeout()：在指定的毫秒数后调用函数或计算表达式；

Navigator：浏览器对象；
Screen：屏幕对象；
History：历史记录对象；
Location：地址栏对象；

获取：使用window.location获取，其中window.可以省略。window.location.属性;

属性：

href：设置或返回完整的URL；

（5）DOM（Document Object Model）：文档对象模型，将标记语言的各个组成部分封装为对应的对象；定义了访问HTML和XML文档的标准，分为3个不同的部分：

Core DOM - 所有文档类型的标准模型：

Document：整个文档对象；
Element：元素对象；
Attribute：属性对象；
Text：文本对象；
Comment：注释对象；

XML DOM - XML文档的标准模型；

HTML DOM - HTML文档的标准模型；

JS通过DOM，能够对HTML进行如下操作：

改变HTML元素内容；
改变HTML元素样式；
对HTML DOM时间作出反应；
添加和删除HTML元素；

Document对象中提供的获取Element元素对象的函数：

根据id属性值获取，返回单个Element对象：var id = document.getElementById('id');
根据标签名获取，返回Element对象数组：var tagNames = document.getElementByTagName('tagName');
根据name属性值获取，返回Element对象数组：var names = document.getElementByName('name');
根据class属性值获取，返回Element对象数组：var classNames = document.getElementByClassName('className');

注：使用innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

例如：使用document.getElementById(‘’).innerHTML 来获取对应id的对象的内嵌内容，使用document.getElementById(‘’).innerHTML=’’向对应id的对象插入内容;

12、事件监听

（1）事件绑定：

通过HTML标签中的事件属性进行绑定，例：<input type="button" οnclick="on()" value="按钮">；
通过DOM元素属性绑定，例：document.getElementById('').οnclick=function(){}；

（2）常见事件

事件名	说明
onclick	鼠标点击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时出发
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="light" src="img/off.gif">
    <br>

    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br>

    <input type="text" id="name" value="hello" onfocus="upper()" onblur="lower()">
    <br><br>

    <input type="checkbox" name="hobby"> 唱歌
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 电影
    <br>

    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="全不选" onclick="checkNone()">

</body>

<script>
    // 1.灯泡控制
    function on(){
        // 获取img元素对象
        var img = document.getElementById("light");

        // 设置src属性
        img.src = "img/on.gif"
    }

    function off(){
        // 获取img元素对象
        var img = document.getElementById("light");

        // 设置src属性
        img.src = "img/off.gif"
    }

    // 2.输入框聚焦显示大写，离焦显示小写
    function lower(){
        // 获取对象
        var input = document.getElementById("name");
        // 转小写
        input.value = input.value.toLowerCase();
    }

    function upper(){
        // 获取对象
        var input = document.getElementById("name");
        // 转大写
        input.value = input.value.toUpperCase();
    }

    // 3.实现全选和全不选
    function checkAll(){
        // 获取对象
        var hobbies = document.getElementsByName("hobby");
        // 设置选中状态
        for (let i = 0; i < hobbies.length; i++) {
            const element = hobbies[i];
            element.checked = true;
        }
    }

    function checkNone(){
        // 获取对象
        var hobbies = document.getElementsByName("hobby");
        // 设置选中状态
        for (let i = 0; i < hobbies.length; i++) {
            const element = hobbies[i];
            element.checked = false;
        }
    }
</script>
</html>