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

HTML、CSS、JS复习

2024-07-10 22:07:38 前端知识 前端哥 180 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基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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