HTML、CSS、JavaScript总结概括

最新推荐文章于 2024-09-16 23:05:35 发布

木子: ^O^

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量105

点赞数 3

本文链接：https://blog.csdn.net/weixin_53415026/article/details/132216935

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML、CSS、JavaScript总结概括

注意：不是详细介绍，适合有点基础的同学！

导言

这是前端的基础语言，csdn上有很多大牛写了很详细的文章，也有很多好的web前端网站也有很详细的教程，如果是初学者可以看看我这篇文章，可能对你学习后续详细的教程有一定方向上的帮助，如果是有基础的同学也可以巩固一下！

HTML

简介

“是一种超文本标记语言，用来描述网页的语言！”

但这个太官方了，我们可以把前端界面比作一个人：

HTML: 网站的骨架，把这个网站撑起来！
CSS: 网站的衣服，让这个网站好看起来！
JavaScript: 网站的肌肉，让这个网站动起来！

结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js" defer="defer"></script>
</head>
<body>
    
</body>
</html>

<!-- <html>: 定义整个HTML文档。
<head>: 包含了所有的元数据，如字符集、标题、链接到样式表等。
<title>: 定义了网页的标题，显示在浏览器的标签页上。
<body>: 包含了所有的页面内容，如文本、图片、视频等。
<header>: 定义了头部区域，通常包含网站的标志、导航菜单等。
<nav>: 定义了导航链接区域，通常包含主导航菜单和其他辅助性的导航链接。
<main>: 定义了主要内容区，包含了页面的核心内容。
<article>: 定义了独立的内容块，通常是一个完整的文章或一段信息。
<section>: 定义了一个独立的部分，可以包含多个<article>元素。
<aside>: 定义了侧边栏区域，通常包含了与主内容相关的辅助信息。
<footer>: 定义了页脚区域，通常包含了版权信息、联系方式、其他链接等。
<figure> 和 <figcaption>: 用于对图像进行分组和描述。
<ul>、<ol>、<li>: 用于创建无序列表和有序列表。
<table>、<tr>、<th>、<td>: 用于创建表格。
<form>、<input>、<textarea>、<button>: 用于创建表单。
<img>、<video>、<audio>: 用于插入图片、视频和音频文件。
<link> 和 <script>: 分别用于引入样式表和JavaScript文件。
<meta>: 用于定义网页的元数据，如字符集、视口设置、关键词等。 -->

文本

标题（heading）和段落（paragraph）
- h1 ~ h6
- p
上标（superscript）和下标（subscript）
- sup
- sub
折行（break）和水平标尺（horizontal ruler）
- br 换行
- hr 水平线
文本标签
- 加粗 - strong
- 引用 - blockquote
- 缩写词和首字母缩写词 - abbr / acronym
- 所有者联系信息 - address
- 内容的修改 - ins / del

列表(list)

有序列表（ordered list）- ol / li
无序列表（unordered list）- ul / li
自定义列表（definition list）- dl / dt / dd

链接(anchor)

页面链接
锚链接
功能链接

图片(image)

图像存储位置
图像及其宽高
选择正确的图像格式
- JPEG
- GIF
- PNG
矢量图
语义化标签 - figure / figcaption

表格(table)

基本的表格结构 - table / tr / th / td
表格的标题 - caption
跨行和跨列 - rowspan属性 / colspan属性
长表格 - thead / tbody / tfoot

表单(form)

重要属性 - action / method / enctype
表单控件（input）- type属性
- 文本框 - text / 密码框 - password / 数字框 - number
- 邮箱 - email / 电话 - tel / 日期 - date / 滑条 - range / URL - url / 搜索 - search
- 单选按钮 - radio / 复选按钮 - checkbox
- 文件上传 - file / 隐藏域 - hidden
- 提交按钮 - submit / 图像按钮 - image / 重置按钮 - reset
下拉列表 - select / option
文本域（多行文本）- textarea
组合表单元素 - fieldset / legend

音视频(audio/video)

视频格式和播放器
视频托管服务
添加视频的准备工作
video标签和属性 - autoplay / controls / loop / muted / preload / src
audio标签和属性 - autoplay / controls / loop / muted / preload / src / width / height / poster

窗口（frame）

过时了不用 frameset / frame

其他

*   属性
*   id：唯一标识
*   class：元素所属的类，用于区分不同的元素
*   title：元素的额外信息（鼠标悬浮时会显示工具提示文本）
*   tabindex：Tab键切换顺序
*   contenteditable：元素是否可编辑
*   draggable：元素是否可拖拽

块级元素 / 行级元素
字符实体（实体替换符）

CSS

简介

CSS的作用
CSS的工作原理
规则、属性和值
常用选择器

颜色（color）

如何指定颜色
颜色术语和颜色对比
背景色

文本（text / font）

文本的大小和字型(font-size / font-family)
粗细、样式、拉伸和装饰(font-weight / font-style / font-stretch / text-decoration)
行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)
对齐(text-align)方式和缩进(text-ident)
链接样式（:link / :visited / :active / :hover）
CSS3新属性
- 阴影效果 - text-shadow
- 首字母和首行文本(:first-letter / :first-line)
- 响应用户

盒子（box model）

盒子大小的控制（width / height）
盒子的边框、外边距和内边距（border / margin / padding）
盒子的显示和隐藏（display / visibility）
CSS3新属性
- 边框图像（border-image）
- 投影（border-shadow）
- 圆角（border-radius）

列表、表格和表单

列表的项目符号（list-style）
表格的边框和背景（border-collapse）
表单控件的外观
表单控件的对齐
浏览器的开发者工具

图像

控制图像的大小（display: inline-block）
对齐图像
背景图像（background / background-image / background-repeat / background-position）

布局

控制元素的位置（position / z-index）
- 普通流
- 相对定位
- 绝对定位
- 固定定位
- 浮动元素（float / clear）
网站布局
- HTML5布局
适配屏幕尺寸
- 固定宽度布局
- 流体布局
- 布局网格

JavaScript

语句和注释
变量和数据类型
- 声明和赋值
- 简单数据类型和复杂数据类型
- 变量的命名规则
表达式和运算符
- 赋值运算符
- 算术运算符
- 比较运算符
- 逻辑运算符：&&、||、!
分支结构
- if...else...
- switch...cas...default...
循环结构
- for循环
- while循环
- do...while循环
数组
- 创建数组
- 操作数组中的元素
函数
- 声明函数
- 调用函数
- 参数和返回值
- 匿名函数
- 立即调用函数

面向对象

对象的概念
创建对象的字面量语法
访问成员运算符
创建对象的构造函数语法
- this关键字
添加和删除属性
- delete关键字
标准对象
- Number / String / Boolean / Symbol / Array / Function
- Date / Error / Math / RegExp / Object / Map / Set
- JSON / Promise / Generator / Reflect / Proxy

BOM

window对象的属性和方法
history对象
- forward() / back() / go()
location对象
navigator对象
screen对象

DOM

DOM树
访问元素
- getElementById() / querySelector()
- getElementsByClassName() / getElementsByTagName() / querySelectorAll()
- parentNode / previousSibling / nextSibling / children / firstChild / lastChild
操作元素
- nodeValue
- innerHTML / textContent / createElement() / createTextNode() / appendChild() / insertBefore() / removeChild()
- className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()
事件处理
- 事件类型
  - UI事件：load / unload / error / resize / scroll
  - 键盘事件：keydown / keyup / keypress
  - 鼠标事件：click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout
  - 焦点事件：focus / blur
  - 表单事件：input / change / submit / reset / cut / copy / paste / select
- 事件绑定
  - HTML事件处理程序（不推荐使用，因为要做到标签与代码分离）
  - 传统的DOM事件处理程序（只能附加一个回调函数）
  - 事件监听器（旧的浏览器中不被支持）
- 事件流：事件捕获 / 事件冒泡
- 事件对象（低版本IE中的window.event）
  - target（有些浏览器使用srcElement）
  - type
  - cancelable
  - preventDefault()
  - stopPropagation()（低版本IE中的cancelBubble）
- 鼠标事件 - 事件发生的位置
  - 屏幕位置：screenX和screenY
  - 页面位置：pageX和pageY
  - 客户端位置：clientX和clientY
- 键盘事件 - 哪个键被按下了
  - keyCode属性（有些浏览器使用which）
  - String.fromCharCode(event.keyCode)
- HTML5事件
  - DOMContentLoaded
  - hashchange
  - beforeunload

JavaScript API

客户端存储 - localStorage和sessionStorage

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

获取位置信息 - geolocation

navigator.geolocation.getCurrentPosition(function(pos) { 		  
    console.log(pos.coords.latitude)
    console.log(pos.coords.longitude)
})

从服务器获取数据 - Fetch API
绘制图形 - <canvas>的API
音视频 - <audio>和<video>的API

结语

希望可以帮助到你，本文知识是web前端方向的指引，让你更加的了解web前端，如果想要深入了解，可以去一些优秀的前端网站，有系统性的学习！

留下足迹吧！现在和未来的大牛们！！！

木子: ^O^

关注

3
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录