很楠不爱3

这个屌丝很懒，什么也没留下！

热门标签

HTML、CSS、JavaScript

作者：很楠不爱3 | 2024-03-14 14:14:25

踩

HTML、CSS、JavaScript

W3C标准：网页主要由三部分组成

➢结构：HTML

➢表现：CSS

➢行为：JavaScript

HTML

HTML是一门语言，所有的网页都是用HTML这语言编写出来的

HTML(Hyper' Text Markup Language)：超文本标记语言

➢超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

➢标记语言：由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析

HTML标签都是预定义好的。例如:使用<img> 展示图片

快速入门

新建文本文件，后缀名改为.html

编写HTML结构标签

在<body>中定义文字

标签	描述
<HTML>	定义HTML文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主体


<html>
    <head>
        <title> </title>
    </head>
    </body>
 
    <body>
</html>

特点

HTML文件以.htm或. html为扩展名
不区分大小写
HTML标签属性值单双引皆可
HTML语法松散

基础标签

标签	描述
<h1> - <h6>	定义标题, h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线


<!-- html5标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--页面的字符集-->
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
 
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
 
<hr>
 
<font size="5" color="#b22222">Hello!</font> <!--font标签不建议使用，其功能可以用CSS完成-->
 
<hr>
<center><b>赤壁赋</b><br><i>唐 苏轼</i></center>  <!--center标签不建议使用，其功能可以用CSS完成-->
<p>壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。<u>浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。</u></p>
<p>于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉；余音袅袅，不绝如缕。<u>舞幽壑之潜蛟，泣孤舟之嫠妇。</u></p>
 
</body>
</html>

**转义字符**
HTML原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	"	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片

➢src：规定显示图像的URL (统一资源定位符)

➢height：定义图像的高度

➢width：定义图像的宽度

audio：定义音频。支持的音频格式：MP3、WAV、 OGG

➢src：规定音频的URL

➢controls：显示播放控件

video：定义视频。支持的音频格式：MP4、 WebM、OGG

➢src：规定视频的URL

➢controls：显示播放控件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    资源路径:
        1.绝对路径：完整路径
        2.相对路径：相对位置关系
            ./ 表示当前目录,可忽略不写
            ../表示上一级目录
    尺寸单位:
        1. px:像素
        2.百分比:
-->
<img src="a.jpg" width="400" height="400" alt="">
 
<audio src="b.mp3" controls></audio>
 
<video src="./c.mp4" controls width="400" height="400"></video>
</body>
</html>

超链接、列表标签

超链接标签

标签	描述
<a>	定义超链接，用于链接到另一个资源

href：指定访问资源的URL

target：指定打开资源的方式

➢_self：默认值，在当前页面打开

➢_ blank：在空白页面打开


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<a href="https://blog.csdn.net/GLATY?spm=1011.2415.3001.5343" target="_blank">超链接</a>
 
</body>
</html>

列表标签

列表有两种：序列表(order list)、无序列表(unorder list)

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type：设置项目符号（不建议使用，其功能可以用CSS完成）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<ul type="A">
    <li>Java</li>
    <li>MySQL</li>
    <li>JavaWeb</li>
</ul>
 
<ol>
    <li>Java</li>
    <li>MySQL</li>
    <li>JavaWeb</li>
</ol>
 
 
</body>
</html>

表格、布局标签

表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：定义表格

➢border：规定表格边框的宽度

➢width：规定表格的宽度

➢cellspacing：规定单元格之间的空白

tr：定义行

➢align：定义表格行的内容对齐方式

td：定义单元格

➢rowspan：规定单元格可横跨的行数

➢colspan：规定单元格可横跨的列数


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<table border="1" cellspacing="0" width="400" align="center">  <!--border、cellspacing、width、align不建议使用，其功能可以用CSS完成-->
    <tr align="center">
        <th rowspan="2" colspan="2">说明</th>
        <th>^_^</th>
    </tr>
    <tr>
        <th>^_^</th>
    </tr>
    <tr align="center">
        <th>标签</th>
        <th>描述</th>
        <th>说明</th>
    </tr>
 
    <tr align="center">
        <td>table</td>
        <td>定义表格</td>
        <th>***</th>
    </tr>
    <tr align="center">
        <td>tr</td>
        <td>定义行</td>
        <th>***</th>
    </tr>
    <tr align="center">
        <td>td</td>
        <td>定义单元格</td>
        <th>***</th>
    </tr>
 
</table>
 
</body>
</html>

布局标签

标签	描述
<div>	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
<span>	用于组合行内元素。

表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项(元素)：不同类型的input元素、下拉列表、文本域等

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

form：定义表单

➢action：规定当提交表单的URL。(表单项数据要想被提交，则必须指定其name属性)

➢method：规定用于发送表单数据的方式

get：浏览器会将数据直接附在表单的action URL之后。URL大小有限制4kb左右

post：浏览器会将数据放到http请求消息体中。大小无限制

intput：定义表单项

通过type属性控制输入形式

type取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件.上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<form action="#" method="post"> <!--#为本页-->
    <input type="hidden" name="id" value="1">
    <label>用户名字：<input type="text" name="username"><br> </label>
    <label>代号：<input type="text" name="code"><br> </label>
    <label>密文：<input type="password" name="password"></label><br>
    <label><input type="radio" name="gen" value="1">男</label><label> <input type="radio" name="gen" value="2">女 <br></label>
    <label>用户类型：
        <select name="kind">
            <option>A</option>
            <option>B</option>
        </select><br>
    </label>
    <label><input type="checkbox" name="other" value="1">备份</label><label><input type="checkbox" name="other" value="2">下载</label><br>
    <label>说明：<textarea cols="20" rows="1">xxx</textarea><br> </label>
    资料<input type="file"><br>
    <br>
    <input type="reset"> <input type="button" value="..."><br>
    <input type="submit" value="提交信息">
 
</form>
 
</body>
</html>

CSS

CSS是一门语言，用于控制网页表现

CSS(Cascading Style Sheet)：层叠样式表

CSS导入方式

CSS导入HTML有三种方式:

内联样式

在标签内部使用style属性，属性值是CSS属性键值


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
    <div style="color: red">hello</div>
</body>
</html>

内部样式

定义<style>标签，在标签内部定义CSS样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        span {
            color: red;
        }
    </style>
 
</head>
<body>
 
    <span>hello</span>
 
</body>
</html>

外部样式

定义link标签，引入外部的CSS文件

1.创建一个文件，写CSS代码


p{
    color: red;
}

2.导入到HTML中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <link href="./css.css" rel="stylesheet"><!--href是引入的路径，rel是文件的类型，stylesheet表示是css类型-->
 
</head>
<body>
 
    <p>hello</p>
 
</body>
</html>

CSS选择方式

选择器是选取需设置样式的元素(标签)

分类：元素选择器、id选择器、类选择器

元素选择器

元素名称{color: red;}

id选择器(唯一)

#id属性值{color: red;}

类选择器

.class属性值{color: red;}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        div {
            color: red;
        }
 
        #name {
            color: blue;
        }
 
        .cls{
            color: green;
        }
    </style>
</head>
<body>
 
<div>hello</div>
<div id="name">hello</div>
<div class="cls">hello</div>
 
</body>
</html>

JavaScript

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互（JavaScript能够改变HTML内容、JavaScript能改变图像的src属性值JavaScript能够进行表单验证）

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。

ECMAScript 6 (ES6)是最新的JavaScript版本(发布于2015年)。

引入方式

有内部脚本、外部脚本两种

内部脚本

将JS代码定义在HTML页面中

在HTML中，JavaScript 代码必须位于<script>与</script>标签之间


<script>
    alert("hello~~");
</script>

在HTML文档中可以在任意地方，放置任意数量的<script>。

一般把脚本置于 <body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

外部脚本

将JS代码定义在外部JS文件中，然后引入到HTML页面中

1.创建外部文件，在文件中写JS代码（name.js）

alert("hello~~");

2.将JS文件导入到HXML中

<script src=./name.js"> </script> <!--src为路径-->

外部脚本不能包含<script> 标签

基础语法

书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无

注释:

➢单行注释：//注释内容

➢多行注释：/* 注释内容*/

大括号表示代码块

输出语句

使用window.alert()写入警告框（window. 可以省略）

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台


window.alert("hello1")  //弹出警告框
alert("hello2")        //与上列代码功能一样
 
document.write("hello")  //写入HTML
 
console.log("hello")  // 写入浏览器的控制台

变量

JavaScript中用var关键字(variable 的缩写)来声明变量，而且是全局变量还可以重复定义

JavaScript是一门弱类型语言，变量可以存放不同类型的值

变量名需要遵循如下规则：

➢组成字符可以是任何字母、数字、下划线 (_)或美元符号($)

➢数字不能开头

➢建议使用驼峰命名

ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

ECMAScript 6新增了const关键字，用来声明一个常量(值不可更改)。一旦声明，常量的值就不能改变。

数据类型

JavaScript中分为：原始类型和引用类型

5种原始类型:

number：数字(整数、小数、NaN(Not a Number))

string：字符、字符串，单双引皆可

boolean：布尔。true, false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型


var num = 1
typrof num

数据不赋值默认为undefined类型

运算符

一元运算符：++，--

算术运算符：+，-，*，/，%

赋值运算符：=，+=，-=...

关系运算符：>，<，>=，<=，!=，==，===...

逻辑运算符：&&，||，！

三元运算符：条件表达式 ? truevalue : false_value

运算符与Java中的基本一样

* 使用==时，会先判断类型是否一样，如果不一样，则进行类型转换再比较值

*使用===时，会判断类型是否一样，如果不一样会直接返回false

类型转换

1.其它类型转换为number

string会按字符串的字面值转为数字，如果字面值不是数字则转换NaN，一般使用paresInt函数

boolean：true转换为1，false转换为0

2.其它类型转换为Boolean

number：0和NaN转换为false，其它转为0

string：空字符串转为0，其它转为true

null：转为false

undefind：转为false

流程控制语句

有if、switch、for、while、do.while，与Java的用法一摸一样

函数

函数是被设计为执行特定任务的代码块

定义函数通过function关键词进行定义

function name(参数1，参数2...){

要执行的代码

}

f

var return = name(参数, ...)

*形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return即可

调用时与Java中的方法类似

result = name();

js函数调用可以传递任意个数参数

常用对象

Array对象

Array原来定义数组

定义

var 变量名 = new Arrsy(素列表);

var 变量名 = [元素列表];

访问

arr [索引] = 值

索引从0开始

JS数组类似于Java集合，长度、类型都可变。

Array对象属性

属性	概述
constructor	返回对创建此对象的数组函数的引用
length	设置或返回数组中元素的数目
prototype	使您有能力向对象添加属性和方法

对象方法

方法	概述
concat()	连接两个或更的数组,并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shif()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()	返回数组对象的原始值

String

定义

var 变量名 = new String(a); //方法一

var 变量名 = s; //方法二

属性

属性	概述
length	字符串的长度

方法

方法	概述
charAt()	返回在指定位置的字符
IndexOf()	检索字符串

Java里有的方法JS里差不多也都有

*trinm()：该方法可以去除字符串两端的空白字符

自定义对象

格式

var 对象名称 = {

属性名称1：属性值1,

属性名称2：属性值2,

...

函数名称：function(形参列表){

}

...

};

BOM&DOM&事件监听

BOM对象

简介

Browser Object Model 浏览器对象模型

JavaScript将浏览器的各个组成部分封装为对象

组成：

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

Window

获取

直接使用window，其中window.可以省略

属性

获取其他BOM对象

属性	概述
history	对History对象的只读引用。请参数History对象。
Navigator	对Navigator对象的只读引用。请参数Navigator对象。
Screen	对Screen对象的只读引用。请参数Screen对象。
location	用于窗口或框架的Location对象。请参阅Location对象。

方法

方法	概述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。(点击确认会返回true，点击取消返回false)
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式(只执行一次)


setTimeout(function () {
    alert("hello")
},3000) // 3秒后弹出“hello”
 
setInterval(function (){
    alert("hello")
},3000)  // 每3秒弹出“hello”

History

获取

使用window.history获取，其中window.可以省略

window.history.方法();

history.方法();

方法

方法	概述
back	加载history列表中的前一个URL
forword	加载history列表中的后一个URL

Location

获取

使用window.location其中window.可以省略

window.location.方法();

location.方法();

属性

属性	概述
href	设置或返回完整的URL

DOM对象

简介

Document Object Model文档对象模型

将标记语言的各个组成部分封装为对象

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作了

改变HTML元素的内容

改变HTML元素的样式(CSS)

对HTML DOM事件作出反应

添加和删除HTML元素

DOM是W3C (万维网联盟)的标准

DOM定义了访问HTML和XML文档的标准

W3C DOM标准被分为3个不同的部分：

1.核心 DOM：针对任何结构化文档的标准模型

        Document：整个文档对象

        Element：元素对象

        Attribute：属性对象

        Text：文本对象

        Comment：注释对象

2. XML DOM：针对XML文档的标准模型

3.HTML DOM：针对HTML文档的标准模型

        Image：<img>

        Button：<input type='button'>

获取Element对象

使用Document对象的方法来获取

1. getElementByld：根据id属性值获取，返回一个Element对象

2. getElementsByTagName：根据标签名称获取，返回Element对象数组

3. getElementsByName：根据name属性值获取，返回Element对象数组

4. getElementsByClassName：根据class属性值获取，返回Element对象数组

*HTML Element对象的使用一般是查阅文档使用

事件监听

事件：HTML 事件是发生在HTML元素上的“事情”。比如：按钮被点击、鼠标移动到元素之上按下键盘按键。

事件监听：JavaScript 可以在事件被侦测到时执行代码

事件绑定

事件绑定有两种方式，可以通过HTML标签中的事件属性进行绑定，还可以通过DOM元素属性绑定


//方式一：通过HTML标签中的事件属性进行绑定
//<input type="button" onclick="on()">
 
function on(){
    alert("hello")
}
 
 
//方式二：通过DOM元素属性绑定
//<input type = "button" id="btn">
 
document.getElementById("btn").onclick = function (){
    alert("hello")
}

常见事件

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

*Event代表事件对象

正则表达式

概念

正则表达式定义了字符串组成的规则

定义

1.直接量（不要加引号）

var reg = /^\w{6,10}$/;

2.创建RegExp对象

var reg = new RegExp("/^\\w{6,10}$/");

方法

test(str)：判断指定字符串是否符合规则，返回true或false

语法

符号	解释
^	表示开始
$	表示结束
[]	表示某个范围内的单个字符
.	代表任意单个字符
\w	代表单词字符：字母、数字、下划线
\d	表示数字字符

量词
符号	解释
+	至少一个
*	零个或多个
?	零个或一个
{x}	x个
{m,}	至少m个
{m,n}	至少m个，至多n个

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/235089?site