HTML三大件学习笔记

霁华TEL

已于 2022-05-17 15:23:33 修改

阅读量179

点赞数

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

于 2022-05-17 15:17:25 首次发布

本文链接：https://blog.csdn.net/jihuaTEL/article/details/124822163

版权

笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

HTML

什么是HTML?

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的
HTML(HyperText Markup Language):超文本标记语言
- 超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言:由标签构成的语言
HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如:使用展示图片
W3C标准:网页主要由三部分组成
- 结构:HTML
- 表现:CSS
- 行为: JavaScript

基础标签

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

表单项标签

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

input的type取值

在这里插入图片描述

CSS

CSS 导入HTML有三种方式:
1.内联样式:在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello css~</div>

2.内部样式:定义

<style type="text/css">
div{
	color: red;}
</style>

3．外部样式:定义link标签，引入外部的css文件

<link rel="stylesheet"href="demo.css">

demo.css文件:

div{
	color: red;
}

Javascript

什么是JavaScript ?

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互

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

结构: HTML
表现: CSS
行为: JavaScript

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

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

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

JavaScript引入方式

内部脚本:将JS代码定义在HTML页面中

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

提示:

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

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

外部文件:

//demo.js
alert("hello JS ~");

引入外部js文件

<script src=" ./js/demo.js"></script>

注意:

外部脚本不能包含

JavaScript基础语法

书写语法

区分大小写:与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分有可无
注释:
- 单行注释:/注释内容
- 多行注释:/*注释内容*/
大括号表示代码块
```
if (count == 3) {
	alert( count);
}
```

输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出

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

window.alert("hello JS ~");//弹出警告框
document.write("hello JS ~");//写入HTML
console.log("hello JS~");//写入控制台

变量

JavaScript中用var关键字(variable的缩写来声明变量
```
var test = 20;
test ="张三";
```
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_）或美元符号(S)
- 数字不能开头
- 建议使用驼峰命名

var:

作用域:全局变量
变量可以重复定义

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

数据类型

JavaScript中分为:原始类型和引用类型5种原始类型:

number:数字（整数、小数、NaN(Not a Number))
string:字符、字符串，单双引皆可
boolean:布尔。true，false
null:对象为空
undefined:当声明的变量未初始化时，该变量的默认值是undefined

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

alert(typeof age);

注释：您也许会问，为什么 typeof 运算符对于null值会返回"Object"。这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

运算符

一元运算符: ++,–
算术运算符: +，-，*，/，%
赋值运算符: =，+= , -= …
关系运算符: >，<，>=，<=，!=，=== …
逻辑运算符:&&，ll，!
三元运算符:条件表达式? true_value : false_value
==:等等于

判断类型是否一样，如果不一样，则进行类型转换
再去比较其值

===:全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 如果类型一样，再去比较其值

var a = 20;
var b = "20";
alert(a==b);//true
alert(a===b);//false

类型转换

其他类型转为number:

string:按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。在前面加±号就可以，但一般使用parseInt()
boolean: true转为1，false转为0

其他类型转为boolean:

number:0和NaN转为false，其他的数字转为true
string:空字符串转为false，其他的字符串转为true
null:false
undefined:false

流程控制语句

if:
switch:
for:
while:
do…while:

函数

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

定义:JavaScript函数通过function关键词进行定义，语法为:
```
function functionName(参数1,参数2..)
	要执行的代码
}
```

注意:

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

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

function add(a, b){
	return a + b;
}

调用:函数名称(实际参数列表);
```
let result = add(1,2);
```

定义方式二:

var functionName = function (参数列表){
	要执行的代码
}

var add = function (a,b){
	return a+ b;
}

调用:JS中，函数调用可以传递任意个数参数
```
let result = add(1,2,3);
```

JavaScript对象

Array

JavaScript Array对象用于定义数组

定义

//方式1
var arr = new Array(1,2,3);
//方式2
var arr =[1,2,3];

访问

arr[索引]=值;

arr[0] = 1;

注意：JS数组类似于Java集合，长度，类型都可变

var arr[3] = [1,2,3];
arr[10] = 10;
alert(arr[9]);//undefined

属性:

length:数组中元素的个数

方法:
push :添加方法

splice:删除元素

arr.splice(从第几个开始删, y)

String

定义

//方式一
var str = new String("hello");
//方式二
var str = "hello";
var str = 'hello';

属性
length：字符串的长度
方法
- charAt()：返回在指定位置的字符。
- indexOf()：检索字符串。(返回字符第一次出现的位置)
- trim()∶去除字符串前后两端的空白字符
```
var str = '   hello   ';
alert(1+str.trim()+1);//1hello1
```

自定义对象

格式

var 对象名称={
    属性名称1:属性值1,
        属性名称2:属性值2,
    ...
    函数名称:function (形参列表)
    ...
};

示例

var person = {
	name:"zhangsan",age:23,
	eat:function (){
        alert("千饭~");
    }
};

BOM

Browser Object Model 浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象

Window

Window:浏览器窗口对象
获取:直接使用window，其中window.可以省略
```
window.alert("abc");
```
属性:获取其他 BOM对象

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

方法

方法	作用
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框，返回一个布尔值
setInterval(function，毫秒值)	按照指定的周期(以毫秒计）来调用函数或计算表达式。
setTimeout(function，毫秒值)	在指定的毫秒数后调用函数或计算表达式。

History

History:历史记录
获取:使用window.history获取，其中window. 可以省略
```
window.history.方法();
history.方法();
```
方法

方法	作用
back()	加载history列表中的前一个URL。
forward()	加载history列表中的下一个URL。

Location

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:注释对象

XML DOM:针对XML文档的标准模型
HTML DOM:针对HTML文档的标准模型
- lmage:
- Button :

获取Element

Element:元素对象
获取:使用Document对象的方法来获取
1. getElementByld: 根据id属性值获取，返回一个Element对象
2. getElementsByTagName: 根据标签名称获取，返回Element对象数组
3. getElementsByName: 根据name属性值获取,返回Element对象数组
4. getElementsByClassName: 根据class属性值获取,返回Element对象数组

事件监听

事件: HTML事件是发生在HTML元素上的“事情”。比如:
- 按钮被点击
- 鼠标移动到元素之上
- 按下键盘按键
事件监听: JavaScript 可以在事件被侦测到时执行代码

事件绑定

事件绑定有两种方式:

方式一: 通过HTML标签中的事件属性进行绑定

<input type="button" onclick='on()>
function on(){
	aler("我被点了");
}

●方式二:通过DOM元素属性绑定

<input type="button" id="btn">
document.getElementByld("btn").onclick = function (){
	alert("我被点了");
}

常见事件

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

正则表达式

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

定义:

直接量:注意不要加引号
```
var reg = /^\w{6,12}$/;;
```
创建RegExp对象
```
var reg = new RegExp("^\\w{6,12}$");
```

方法:
- test(str)：判断指定字符串是否符合规则，返回true或 false
语法:
- ^:表示开始
- $:表示结束
- []:代表某个范围内的单个字符，比如:[0-9]单个数字字符
- .:代表任意单个字符，除了换行和行结束符
- \w:代表单词字符:字母、数字、下划线(_)，相当于[A-Za-z0-9]
- \d:代表数字字符:相当于[0-9]
量词:
- +:至少一个
- *:零个或多个
- ?:零个或一个
- {x}: x个
- {m,}:至少m个
- {m,n}:至少m个，最多n个

霁华TEL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML三大件学习笔记

HTML什么是HTML?HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Language):超文本标记语言超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言:由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如:使用展示图片W3C标准:网页主要由三部分组成结构:HTML表现:CSS行为: JavaScript基础标签
复制链接

扫一扫

专栏目录