零碎前端基础知识笔记

HTML

HTML：超文本标记语言，是一种用于创建网页的标准标记语言。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">
```

```
HTML链接：
1. 使用 target 属性，你可以定义被链接的文档在何处显示。
  
  下面的这行会在新窗口打开文档：
```
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
```
1. 在HTML文档中插入ID:<a id="tips">有用的提示部分</a>
  
  在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：<a href="#tips">访问有用的提示部分</a>
  
  或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
```
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
```
HTML<head>:
1. <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
  
  可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
2. <title> 标签定义了不同文档的标题。
3. <link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表.
4. meta标签描述了一些基本的元数据。
5. <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
  
  META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
  
  <meta> 一般放置于 <head> 区域
  
  为搜索引擎定义关键词:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  
  为网页定义描述内容:<meta name="description" content="免费 Web & 编程教程">
  
  定义网页作者:<meta name="author" content="Runoob">
  
  每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">
6. HTML5 中 <title>元素是必须的，标题名描述了页面的主题
HTML样式：

CSS 可以通过以下方式添加到HTML中:
1. 内联样式- 在HTML元素中使用"style" 属性
2. 内部样式表 -在HTML文档头部 <head>区域使用<style>元素来包含CSS
3. 外部引用 - 使用外部 CSS 文件
  
  最好的方式是通过外部引用CSS文件
HTML图片：
1. <img src="url" alt="some_text">
  
  src 指 “source”，源属性。源属性的值是图像的 URL 地址,URL 指存储图像的位置。
  
  alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
2. <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
  
  height（高度）与 width（宽度）属性用于设置图像的高度与宽度。
HTML表单和输入：

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:<form>.input 元素.</form>
1. 文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
2. 密码字段通过标签<input type="password"> 来定义,密码字段字符不会明文显示，而是以星号或圆点替代。
3. 表单单选框选项通过<input type="radio">来定义，<input type="radio" name="sex" value="male">
4. 复选框通过<input type="checkbox">定义：<input type="checkbox" name="vehicle" value="Bike" checked>
5. 提交按钮通过<input type="submit">定义：<input type="submit" value="Submit">
6. 下拉列表：
```
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
</select>
```
7. 多行输入：
```
<textarea rows="10" cols="30">
		我是一个文本框。
</textarea>
```
8. 按钮：
```
<input type="button" value="Hello">` 或`<button type="button">点我!</button>
```
XHTML是以 XML 格式编写的 HTML。

XHTML 指的是可扩展超文本标记语言，XHTML 是更严格更纯净的 HTML 版本。XML 是一种必须正确标记且格式良好的标记语言。
HTML Canvas

HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas>标签只是图形容器，元素本身是没有绘图能力,您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
SVG
1. 什么是SVG：
  
  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  
  SVG 用于定义用于网络的基于矢量的图形
  
  SVG 使用 XML 格式定义图形
  
  SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  
  SVG 是万维网联盟的标准
2. SVG 的优势：
  
  SVG 图像可通过文本编辑器来创建和修改
  
  SVG 图像可被搜索、索引、脚本化或压缩
  
  SVG 是可伸缩的
  
  SVG 图像可在任何的分辨率下被高质量地打印
  
  SVG 可在图像质量不下降的情况下被放大
3. SVG与Canvas两者间区别：
  
  SVG 是一种使用 XML 描述 2D 图形的语言。
  
  Canvas 通过 JavaScript 来绘制 2D 图形。
  
  SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  
  在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
  
  Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
4. Canvas与SVG的比较：

Canvas	SVG
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

HTML应用程序缓存：

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：
1. 离线浏览 - 用户可在应用离线时使用它们
2. 速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML Web Workers：

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

CSS

CSS

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

CSS注释以 “/" 开始, 以 "/” 结束: /这是个注释/
插入样式表的方法有三种:

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

优先级如下：

( 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是"margin-left: 20px"
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
嵌套选择器：

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

但这两种方法会产生不同的结果：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
CSS Position：
1. static ：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
2. fixed ：固定定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
3. relative ：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
4. absolute ：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
5. sticky ：粘性定位的元素是依赖于用户的滚动。在position:relative 与 position:fixed定位之间切换。
  
  它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed;它会固定在目标位置。
  
  元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
  
  这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
CSS组合选择符：

在 CSS3 中包含了四种组合方式:
1. 后代选择器(以空格分隔)
2. 子元素选择器(以大于号分隔）
3. 相邻兄弟选择器（以加号分隔）
4. 普通兄弟选择器（以破折号分隔）
  
  其中：
  
  后代选择器用于选取某元素的后代元素。div p{}
  
  子元素选择器只能选择作为某元素子元素的元素。div>p{}
  
  相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。 div+p{}:选取了所有位于 <div>元素后的第一个 <p>元素
  
  后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。div~p{}:选取了所有<div>元素之后的所有相邻兄弟元素 <p>
text-decoration: none;可以清除<a>自带的字体颜色
导航栏一般用<ul>, <li>实现
当鼠标移动到指定元素上时，会出现下拉菜单。当鼠标指针在类名为dropown的元素上时，类名为dropdown-content的元素会显示，切类名为droptn的元素背景色会改变。
```
.dropdown-content {
    display: none;
    position: absolute;
    
.dropdown:hover .dropdown-content {
    display: block;
} 

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
```

小三角的实现：

.tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

ul.pagination li a:hover:not(.active) {background-color: #ddd;}`

<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li> 
<li><a href="#">»</a></li>
</ul>

为了让开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width  表示宽度是设备屏幕的宽度。
initial-scale=1  表示初始的缩放比例。
shrink-to-fit=no  自动适应手机屏幕的宽度。

HTML DOM

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
HTML DOM 是：
1. HTML 的标准对象模型
2. HTML 的标准编程接口
3. W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1. 整个文档是一个文档节点
2. 每个 HTML 元素是元素节点
3. HTML 元素内的文本是文本节点
4. 每个 HTML 属性是属性节点
5. 注释是注释节点

AJAX

AJAX：
1. AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
2. AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3. AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
4. AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
5. AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

JSON

JSON：
1. JSON: JavaScript Object Notation(JavaScript 对象表示法)
2. JSON 是存储和交换文本信息的语法。类似 XML。
3. JSON 比 XML 更小、更快，更易解析。
4. JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
5. JSON 是轻量级的文本数据交换格式
6. JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
7. JSON 具有自我描述性，更易理解
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

林夏天

发布了33 篇原创文章 · 获赞 73 · 访问量 2786

私信关注

零碎前端基础知识笔记

HTML

CSS

HTML DOM

AJAX

JSON

猜你喜欢