HTML+CSS+js笔记

最新推荐文章于 2024-09-21 10:28:42 发布

锦鲤柠檬

最新推荐文章于 2024-09-21 10:28:42 发布

阅读量251

点赞数

分类专栏： # javaweb 文章标签： html css javascript

本文链接：https://blog.csdn.net/lemonfish_1/article/details/124963063

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML+CSS+js笔记

HTML

解释型文本标记语言，不区分大小写

在这里插入图片描述

基础标签

HTML页面由一对标签组成
```
<html></html>
```
- <html>：开始标签
- </html> ：结束标签
<table> 网页的标题
可以在meta标签中设置编码方式
<br/> 换行，是单标签（当开始标签和结束标签表示同一个时，/ 写在后面）
<p> </p> 段落标签
```
<img/>
```
图片标签
- src属性表示图片文件的路径
- Width和Height表示图片的大小
- alt：图片没加载成功时显示的文字
<h1></h1> 标题 1级到7级
```
<ol></ol>
```
：order list 有序列表
- type指定是以数字还是字母排序
- Start 表示从* 开始
```
<ul></ul>
```
表示无序列表
- type属性包括：disc(default)、circle、square
U 下划线，i 斜体，b粗体
实体
- 上标 sup 下标 sub
- 小于号 < 大于等于号 &ge；版权符号 &copy
<span></span> 表示中间的东西进行独立的处理
```
<a></a>
```
超链接
- Href：网址
- Target： _self 在本窗口打开 _blank 在新窗口打开 _parent 在父窗口打开 _top 在顶层窗口打开
div ：层

表格标签 table

```
<table></table>
```
表格
- <th></th> 表头
- ```
<tr></tr>
```
  行
  - t中的属性：align -> center, left, right（文字居中，左，右）
- <td></td> 列

table中的属性（已淘汰）

border：表格边框的粗细
width：表格的宽度
cellspacing：单元格间距
cellpadding：单元格填充
rowspan：行合并
colspan：列合并

表单标签 form

form在页面中是显示不出来的，要设置style
在这里插入图片描述

get的提交不安全，一般使用post提交

<input type="next" name = nickname"/> 表示文本框，其中name属性必须要指定，否则这个文本框的数据将来不会发给服务器
<input type="password" name="pwd"> 表示密码框
<input type="radio" >表示单选按钮，name属性值保持一致才会有互斥的效果；可以通过checked属性设置默认选中的项
Select 表示下拉列表，每一个选项是option，其中value属性是发送给服务器的至，selected表示默认选中的项
Textarea 表示多行文本框（或者文本域），它的value值就是开始结束标签之间的内容
<input type="subit"> 表示提交按钮
<input type="reset"> 表示重置按钮
<input type="button"> 表示普通按钮

frameset/iframe标签

frameset表示页面框架，已淘汰

frame表示框架中的具体页面引用

iframe：表示在一个页面中嵌入子页面

CSS

层叠式样式表，决定页面的美观程度

样式表分类

CSS最基本的分类

标签样式表
类样式表
ID样式表

在这里插入图片描述

除此之外还有组合样式表

在这里插入图片描述

根据位置分类

如果冲突了，就近原则设置属性

嵌入式样式表：写在标签内部

在这里插入图片描述

内部样式表
外部样式表：把这些CSS代码放到另一个文件管理，然后再导入

在这里插入图片描述

盒子模型

border：边框样式

在这里插入图片描述

Margin 间距

在这里插入图片描述

Padding 填充

在这里插入图片描述

间距设成0

在这里插入图片描述

chrome浏览器：实际尺寸=width+左右border+padding-width

IE浏览器：实际尺寸 = width

CSS布局

在这里插入图片描述

绝对定位

position ：需要配合使用left, top

在这里插入图片描述

相对定位

relative ：一般会和float, margin, padding…一起使用

相对布局时，子容器随着父容器的高度变化而变化

在这里插入图片描述

注意float 和margin java

JavaScript

三种方式添加JavaScript

内部

在这里插入图片描述

外部

在这里插入图片描述

内联（×）

在这里插入图片描述

类型

整型

console.log(); //在控制台输出

boolean型

1 === 1 //条件判断
1 > 2
true && truw
false && false
true || true

变量

var 全局变量
let 局部变量
Const 常量

在这里插入图片描述

运算符

自加/自减
两个字符串也可以相加

// 字符串相加
var y;
y = "3" + "4";
console.log(y);
> 34

y = "3" + 4 + 5; // y = "3" + "4" + "5"
>345

y = 3 + 4 + "5";
// 7 + "5"

=== 和 ==

// == 会强制类型转换 === 不会
console.log(123 == "123"); //"123" "123"
console.log(123 === "123"); // 123 "123"

控制结构

和java一样别看了

if … else
if … else if … else
While
do{}…while()
for
三元表达式

在这里插入图片描述

switch … case … Default

向下检查case，如果都不是，执行default,

对象

// 初始化
var obj = new Object();
var obj2 = {};

// 赋值
obj = {
    name: "Simon",
    age: "20",
    email: "simon@gmail.com",
    concact:{
        phone: "1234567",
        Telegram: "@Simon"
    }
};

console.log(obj);

结果：

在这里插入图片描述

数组

// 初始化
var a = new Array();
var b = [];
//添加元素
a[0] = "dog";
a[1] = "cat";
a[5] = "tiger";

在这里插入图片描述

函数

//函数
let a = 1;

// 无参
function add(){
    a++;
}
add();
console.log(a);


//有参数 argument指的是参数列表
function add(){
    let sum = 0;
    for(let i = 0, j = arguments.length; i < j; i++){
        sum += arguments[i];
    }
    return sum;
}
let sum = add(1, 2, 3, 4, 5);

闭包

function makeAdder(a){
    return function (b){
        return a + b;
    };
}

var x = makeAdder(5);
var sum = x(6);

console.log(sum);

DOM技术

Document Object Model 文档对象模型，将标记语言的各个组成部分封装为对象：

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

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

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

Image:
Button:

在这里插入图片描述

事件监听

JS可以在事件被侦测时执行代码

事件绑定

通过HTML标签中的事件属性进行绑定

在这里插入图片描述

通过DOM元素进行绑定

在这里插入图片描述

锦鲤柠檬

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录