菜单 搜索
首页 前端知识 HTML、CSS、JS复习

HTML、CSS、JS复习

2024-07-10 22:07:38 前端知识 前端哥 166 123 我要收藏

HTML

meta

meta 标签定义关于 HTML 文档的元数据。
meta 元素有三种典型的用法：

  1. 指定名/值元数据对
    meta 元素可以使用名/值对定义元数据，为此需要用到其 name 和 content 属性。
    <!-- 为搜索引擎定义关键字 -->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- 定义有关网页的描述-->
<meta name="description" content="Free Web tutorials for HTML and CSS">
<!-- 定义页面的作者： -->
<meta name="author" content="John Doe">
<!-- 设置视口，改善网站在各种设备上的外观-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. 使用 charset 属性声明该页面采用 UTF-8 字符编码
    <meta charset="UTF-8">
  3. 模拟 HTTP 标头字段
    使用 http-equiv 属性和 content 属性，每 30 秒刷新一次文档
    <meta http-equiv="refresh" content="30">

a

超链接标签

  1. href
    超链接所指向的 URL
    <a href="https://www.baidu.com">baidu</a>
  2. download
    浏览器将链接的 URL 视为下载资源
    <a href="./example.pdf" download>download</a>
  3. target
    该属性指定在何处显示链接的 URL
    <!-- 当前页面加载 -->
<a href="https://www.baidu.com" target="_self">baidu</a>
<!-- 通常在新标签页打开 -->
<a href="https://www.baidu.com" target="_blank">baidu</a>
<!-- 当前浏览环境的父级浏览上下文 -->
<a href="https://www.baidu.com" target="_parent">baidu</a>
<!-- 最顶级的浏览上下文 -->
<a href="https://www.baidu.com" target="_top">baidu</a>

更多常用标签例如div、img、input、table、form、button等可自行查阅W3school或者MDN

CSS

引入方式

行内样式、内部样式、外部样式

<!-- 行内样式 -->
<div style="color: red"></div>
<!-- 内部样式 -->
<head>
    ...
    <style>
        p{
            color: red;
        }
    </style>
</head>
<!-- 外部样式 -->
<head>
    ...
	<link rel="stylesheet" href="./style.css">
</head>

选择器

  1. 类型选择器
    也叫做标签名选择器或者是元素选择器
	   p{
           color: red;
       }
       div{
           width: 200px;
           height: 200px;
       }
  1. 类选择器
       .container{
           height: 200px;
           width: 200px;
       }
       .inner{
           margin: 20px;
       }
  1. ID选择器
       #index{
           color: blue;
           font-size: 10px;
       }
  1. 伪类
       .container:hover{
           cursor: pointer;
       }
       .container:focus{
           color: red;
       }
  1. 伪元素
       .container::before{
           content: "before";
       }
       .container::after{
           content: "after";
       }
  1. 后代选择器
        div p{
            color: red;
        }
  1. 子代选择器
        div > p{
            color: red;
        }
  1. 邻接兄弟
        div + p{
            color: red;
        }

##hc 层叠、优先级与继承

  1. 层叠
    当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
    例如：
       p{
           color: blue;
       }
       p{
           color: red;
       }

实际应用的就是红色字体效果

  1. 优先级
    第一优先级：!important。
    第二优先级：内联样式
    第三优先级：id选择器
    第四优先级：类选择器
    第五优先级：类型选择器
    第六优先级：通配选择器
  2. 继承
    一些常见的可继承属性包括color、font-family、font-size、font-weight、line-height、list-style、text-align等。

JS

引入方式

<script>
    ...
    js代码
    ...
</script>
<script src="./main.js"></script>

基础语法

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol
引用数据类型(对象类型)：对象(Object)、数组(Array)、函数(Function)、正则（RegExp）和日期（Date）

变量声明

let, const具有块级作用域，var具有函数作用域或全局作用域

    let x = 1
    var y = 1
    const z = 1

for循环

    for(let i = 1; i <= 10; i++){
        console.log(i)
    }

    let person = {
        name: "jack",
        age: 18
    }
    for(let x in person){
        console.log(person[x])
    }

    let a = [1, 2, 3, 4, 5, 6]
    for(let x of a){
        console.log(x)
    }

函数

    function func(){
        console.log("func")
    }
    func()

    let func = ()=>{
        console.log("func")
    }
    func()

    let func = function(){
        console.log("func")
    }
    func()

注意：
function(){}有自己的this上下文，即this在函数内部指向调用它的对象。
()=>{}:箭头函数没有自己的this上下文，它会捕获其所在父作用域的this值，作为自己的this值。

DOM

文档对象模型（Document Object Model，DOM）是一种用于表示任何基于 HTML 或 XML 的标记语言文档并能与之交互的 API。它是加载在浏览器中的文档模型，可以将文档表示为节点树，或称 DOM 树，其中每个节点代表文档的一部分（例如，元素、文本字符串或注释）。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
在这里插入图片描述

获取元素

    // 根据元素ID查找DOM元素
    let main = document.getElementById('main')
    // 根据标签名查找元素的集合
    let p = document.getElementsByTagName('p')
    // 根据类名查找元素的集合
    let myclass = document.getElementsByClassName('myclass')
    // 根据CSS选择器查找第一个匹配的元素
    let selector = document.querySelector('.myclass')
    // 根据CSS选择器查找所有匹配的元素
    let selectorAll = document.querySelectorAll('.myclass')
    // 根据元素的name属性查找元素的集合
    let myname = document.getElementsByName('myname')
    // 获取元素的子元素集合
    let children = element.children
    // 获取元素的父元素
    let parent = element.parentNode

修改元素

    let element = document.getElementById('main')
    // 用于设置或返回元素的文本内容，它会替换元素内的所有子节点
    element.textContent = 'text'
    // 用于获取或设置元素的文本内容，与textContent类似，但innerText不会返回隐藏的元素或script和style元素的文本
    element.innerText = 'text'
    // 用于设置或返回元素的HTML内容，包括元素的子元素
    element.innerHTML = '<p>HTML</p>'
    // 用于获取或设置元素的外部HTML内容，包括元素本身
    element.outerHTML = '<p>HTML</p>'
    // 创建文本节点
    let node = document.createTextNode('node')
    // 创建新元素
    let div = document.createElement('div')
    // 用于将字符串写入文档
    document.write('content')

    let element = document.getElementById('main')
    // 设置元素属性
    element.setAttribute('title', 'title')
    // 获取元素属性
    let attr = element.getAttribute('title')
    //给element添加子元素
    let newDiv = document.createElement('div')
    newDiv.innerText = "newDiv"
    element.appendChild(newDiv)

事件监听器

		let element = document.getElementById('main')
		function hanleClick(){
            console.log('click')
        }
		// 添加监听器
		element.addEventListener('click', hanleClick)
		// 默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播
        // element.addEventListener('click', hanleClick, true)
        
        // 移除监听器
        element.removeEventListener('click', hanleClick)

		<div id="main" onclick="alert('click')">hello world</div>

BOM

浏览器对象模型(Browser Object Model，BOM)允许 JavaScript 与浏览器对话。
对应于DOM的document对象，BOM有window对象。
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。(document 对象也是 window 对象属性)
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

定时器

定时器的执行是异步的

        setTimeout(()=>{
            console.log("timeout")
        }, 1000)
        setInterval(()=>{
            console.log("interval")
        }, 1000)
        clearTimeout(timeout)
        clearInterval(interval)

其他对象还有Screen、Location、History、Navigator、弹出框、Cookies等

Web

JSON

JSON 是一种存储和交换数据的语法。
JSON 是通过 JavaScript 对象标记法书写的文本。

        {
            "name": "jack",
            "age" : 18,
            "addr" : "cn",
            "school" : "nenu"
        }

JavaScript提供了JSON对象方便JS对象和JSON之间的互相转换

        let person = {
            name: "jack",
            age : 18,
            addr : "cn",
            school : "nenu"
        }
        console.log(JSON.stringify(person))
        console.log(JSON.parse(JSON.stringify(person)))

AJAX

可以通过XMLHttpRequest对象或者 Fetch API实现AJAX

XMLHttpRequest

GET请求

		let xhr = new XMLHttpRequest();
		xhr.open("GET","http://127.0.0.1:8080/course/getall");
		xhr.send();
    	xhr.onreadystatechange = ()=>{
	    	if(xhr.readyState == 4 && xhr.status == 200){
        		console.log(xhr.responseText)
	    	}
    	}

POST请求

		let xhr = new XMLHttpRequest();
		let user = '{"username": "user", "password": "123456"}';
    	xhr.setRequestHeader('Content-Type', 'application/json')	
		xhr.open("POST","http://127.0.0.1:8080/user/login");
		xhr.send(user);
    	xhr.onreadystatechange = ()=>{
	    	if(xhr.readyState == 4 && xhr.status == 200){
        		console.log(xhr.responseText)
	    	}
    	}

Fetch

GET请求

        const url = "http://127.0.0.1:8080/course/getall"
        fetch(url, {
            method: 'get'
        }).then(response => response.json())
        .then(data => {
            console.log(data)
        }).catch(error => error)

POST请求

        const url = "http://127.0.0.1:8080/user/login"
        const user = {username: "user", password: "123456"}
        fetch(url, {
            method: 'post',
            headers: {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify(user)
        }).then(response => response.json())
        .then(data => {
            console.log(data)
        }).catch(error => error)

示例

  1. 接口url: http://localhost:8080/course/getall
    接口接受的请求方法: GET
    返回数据为JSON格式
           fetch(url, {
        	method: 'get'
    	}).then(response => response.json())
    	.then(data => {
        	console.log(data)
    	}).catch(error => error)
    结果:
    在这里插入图片描述
  2. 接口url: http://localhost:8080/course/search
    接口接受的请求方法: GET
    查询的参数为content
    返回数据为JSON格式
        	const url = "http://localhost:8080/course/search?content=计算机网络"
    	fetch(url, {
        	method: 'get'
    	}).then(response => response.json())
    	.then(data => {
        	console.log(data)
    	}).catch(error => error)
    结果:
    在这里插入图片描述
  3. 接口url: http://localhost:8080/user/login
    接口接受的请求方法: POST
    请求体格式为JSON格式，并且包含键username, password，例如:
    {
    “username” : “user”,
    “password” : “123456”
    }
    返回数据为JSON格式
        const url = "http://localhost:8080/user/login"
    const user = {
        username: "alice",
        password: "111111",
    }
    fetch(url, {
        method: 'post',
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify(user)
    }).then(response => response.json())
    .then(data => {
        console.log(data)
    }).catch(error => error)
    结果:
    在这里插入图片描述
  4. 上传文件
        	<input type="file" id="file">
		<input type="button" value="上传" id="upFile">

            let upFile = document.getElementById('upFile')
    	upFile.addEventListener('click', ()=>{
        let file = document.getElementById('file')
        let formData = new FormData()
        formData.append('file', file.files[0])
        fetch("http://localhost:8080/user/file/up",{
            method: 'post',
            body: formData
        }).then(response => response.json())
        .then(data => {
            console.log(data)
        }).catch(error => error)
    })
转载请注明出处或者链接地址：https://www.qianduange.cn//article/13923.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery-w3school（2020

2024-08-04 23:08:08

jQuery常用方法总结

2024-08-04 23:08:34

JQuery-JavaScript代码库-获取内容及删除篇—我耀学IT

2024-08-04 23:08:34

Vue2使用echarts树图（tree）

2024-08-04 23:08:29

图表库-Echarts

2024-08-04 23:08:57

echarts 横向柱状图 刻度标签

2024-08-04 23:08:50

无恙的笔记1：Echarts数据视图采用jquery.table2excel.js生成Excel

2024-08-04 23:08:50

❤ 让echarts更简单酷炫的网站

2024-08-04 23:08:49

（vue）elementUI实现登录以及导航栏子路由实现 ——学习记录

2024-08-04 23:08:14

vue3结合Element Plus动态表单组件

2024-08-04 23:08:14

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！