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)
    • 鼠标事件 - 事件发生的位置
      • 屏幕位置:screenXscreenY
      • 页面位置:pageXpageY
      • 客户端位置:clientXclientY
    • 键盘事件 - 哪个键被按下了
      • keyCode属性(有些浏览器使用which
      • String.fromCharCode(event.keyCode)
    • HTML5事件
      • DOMContentLoaded
      • hashchange
      • beforeunload

JavaScript API

  • 客户端存储 - localStoragesessionStorage

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

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