编程技术

Document

HTML、CSS、JavaScript总结概括

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前端，如果想要深入了解，可以去一些优秀的前端网站，有系统性的学习！

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