国际知名观众
国际知名观众

HTML+CSS+JavaScript学习笔记~ 从入门到精通！

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、HTML
    • 1. 什么是HTML？
      • 一个完整的页面：
      • 声明
      • 中文编码
    • 2.HTML基础
      • ①标签
        • 头部元素
        • 标题
        • 段落
        • 注释
        • 水平线
        • 文本格式化
      • ②属性
    • 3.HTML_CSS
      • 内联样式
      • 内部样式表
      • 外部引用
    • 4.HTML应用
      • 布局
      • 表单
      • 框架
      • 脚本
    • 5.资源总结
      • 颜色
      • HTML速查列表
      • 标签简写及全称
  • 二、CSS：层叠样式表 (Cascading Style Sheets)
    • 1.语法
      • CSS 规则
      • CSS 注释
    • 2.class用法
    • 3.其他属性值可以用到的时候再百度~
  • 三、JS
    • 1.简介
    • 2.用法
    • 3.输出
    • 4.语法
      • 数据类型
      • 数组（Array）
      • 对象（Object）
      • 函数（Function）
      • 变量（一个名称
      • 语句
    • 5.HTML中的window对象和document对象（存疑）
    • 6.事件

前言

导师布置了任务，原话是“多学习一下界面开发设计，也算掌握一门技能”；我觉得老师说的对！所以，搞一下~
之前开会的时候说到过vue框架开发前端很好用，所以就先从这里入手啦~
大二的时候自己学过html＋css＋js，但是很遗憾两年没用了，现在都又还回去了QAQ 所以还是先复习一下，再学习Ajax和vue~

一、HTML

1. 什么是HTML？

  • HTML 是用来描述网页的一种语言，目前最新常用的版本为HTML5(2012年发布）
  • HTML文档也叫做 web 页面
  • HTML 不是一种编程语言，而是一种标记语言
  • HTML标签通常是成对出现的，比如 和 ；开始：开放标签、结束：闭合标签
  • 一个 HTML 元素包含了开始标签与结束标签，如这是一个HTML元素：
 <p>这是一个段落。p>
  • Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）可以读取HTML文件，并将根据其标签，将HTML页面展现给用户。

一个完整的页面：

HTML+CSS+JavaScript学习笔记~ 从入门到精通！_第1张图片

声明

doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本，这个一定要写！（为了防止页面渲染出错。
html5的声明为：

 DOCTYPE html>

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。

2.HTML基础

  • HTML元素的内容写在开始标签与结束标签之间
  • 大多数 HTML 元素可拥有属性（写在开始标签内部，以名称/值对的形式出现，值加引号，比如：name=“value”。）
  • 虽然html标签和属性值都对大小写不敏感，但建议使用小写标签和属性（值）
  • 虽然
    （换行标签，没有内容的空元素）目前有效，但使用
    闭合一下是更长远的保障

①标签

HTML标签参考手册：https://www.runoob.com/tags/html-reference.html
常用的标签：

头部元素

HTML+CSS+JavaScript学习笔记~ 从入门到精通！_第2张图片

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<base href="http://www.baidu.com/images/" target="_blank">

标签定义了文档与外部资源之间的关系，常用于链接到样式表:

<link rel="stylesheet" type="text/css" href="mystyle.css">


<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
style>
标题

通过

-

标签来定义的，1最大，6最小；浏览器会自动地在标题的前后添加空行，搜索引擎使用标题为网页的结构和内容编制索引。

段落
<p>这是一个段落p>
注释
水平线
标签在 HTML 页面中创建水平线。 #### 超链接 ```html 百度 ``` 使用 target 属性可以定义被链接的文档在何处显示（例如：target="_blank"，在新窗口打开）。 #### 图像 标签也是空标签 ```html ``` alt 属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/79de2419f4bf4e08973d59b45c21a342.png)
文本格式化

详情参考：https://www.runoob.com/html/html-formatting.html
HTML+CSS+JavaScript学习笔记~ 从入门到精通！_第3张图片

②属性

HTML标准属性参考手册：https://www.runoob.com/tags/ref-standardattributes.html
一些常用的属性如下：
HTML+CSS+JavaScript学习笔记~ 从入门到精通！_第4张图片

3.HTML_CSS

CSS 可以通过以下方式添加到HTML中:

内联样式

  • 在HTML元素中使用"style" 属性
 <p style="color:blue;margin-left:20px;">这是一个段落。p>

style属性中可以用的键有很多，例如：background-color:yellow（背景颜色）；font-family（字体）；color（颜色）；和font-size（字体大小）； text-align（文字对齐）

内部样式表

  • 在HTML文档头部 区域使用
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
style>
head>

外部引用

  • 当同一个样式需要被应用到很多页面时，可以在头部引用外部css文件（样式表）。这样就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>

4.HTML应用

布局

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如:

,

,