HTML
-
HTML:超文本标记语言,是一种用于创建网页的标准标记语言。
对于中文网页需要使用
<meta charset="utf-8">
声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为<meta charset="gbk">
<!-- 这是一个注释 -->
-
HTML链接:
-
使用
target
属性,你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档:
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
-
在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>
:-
<head>
元素包含了所有的头部标签元素。在<head>
元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为:
<title>
,<style>
,<meta>
,<link>
,<script>
,<noscript>
, and<base>
. -
<title>
标签定义了不同文档的标题。 -
<link>
标签定义了文档与外部资源之间的关系。通常用于链接到样式表. -
meta标签描述了一些基本的元数据。
-
<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">
-
HTML5 中
<title>
元素是必须的,标题名描述了页面的主题
-
-
HTML样式:
CSS 可以通过以下方式添加到HTML中:
-
内联样式- 在HTML元素中使用"style" 属性
-
内部样式表 -在HTML文档头部
<head>
区域使用<style>
元素 来包含CSS -
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件
-
-
HTML图片:
-
<img src="url" alt="some_text">
src 指 “source”,源属性。源属性的值是图像的 URL 地址,URL 指存储图像的位置。
alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。
-
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
-
-
HTML表单和输入:
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列 表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签
<form>
来设置:<form>.input 元素.</form>
-
文本域通过
<input type="text">
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。 -
密码字段通过标签
<input type="password">
来定义,密码字段字符不会明文显示,而是以星号或圆点替代。 -
表单单选框选项通过
<input type="radio">
来定义,<input type="radio" name="sex" value="male">
-
复选框通过
<input type="checkbox">
定义:<input type="checkbox" name="vehicle" value="Bike" checked>
-
提交按钮通过
<input type="submit">
定义:<input type="submit" value="Submit">
-
下拉列表:
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab" selected>Saab</option> </select>
-
多行输入:
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>
-
按钮:
<input type="button" value="Hello">` 或`<button type="button">点我!</button>
-
-
XHTML是以 XML 格式编写的 HTML。
XHTML 指的是可扩展超文本标记语言,XHTML 是更严格更纯净的 HTML 版本。XML 是一种必须正确标记且格式良好的标记语言。
-
HTML Canvas
HTML5
<canvas>
元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas>
标签只是图形容器,元素本身是没有绘图能力,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
-
SVG
-
什么是SVG:
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
-
SVG 的优势:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
-
SVG与Canvas两者间区别:
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
-
Canvas与SVG的比较:
-
Canvas | SVG |
---|---|
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序(比如谷歌地图)复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)不适合游戏应用 |
-
HTML应用程序缓存:
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
-
离线浏览 - 用户可在应用离线时使用它们
-
速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
-
-
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:
-
static
:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 -
fixed
:固定定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。 -
relative
:相对定位元素的定位是相对其正常位置。移动相对定位元素,但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。 -
absolute
:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
。absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素重叠。 -
sticky
:粘性定位的元素是依赖于用户的滚动。在position:relative
与position:fixed
定位之间切换。它的行为就像
position:relative;
而当页面滚动超出目标区域时,它的表现就像position:fixed;
它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
-
-
CSS组合选择符:
在 CSS3 中包含了四种组合方式:
-
后代选择器(以空格分隔)
-
子元素选择器(以大于号分隔)
-
相邻兄弟选择器(以加号分隔)
-
普通兄弟选择器(以破折号分隔)
其中:
后代选择器 用于选取某元素的后代元素。
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 是:
-
HTML 的标准对象模型
-
HTML 的标准编程接口
-
W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
-
-
DOM节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
-
整个文档是一个文档节点
-
每个 HTML 元素是元素节点
-
HTML 元素内的文本是文本节点
-
每个 HTML 属性是属性节点
-
注释是注释节点
-
AJAX
-
AJAX:
-
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
-
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
-
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
-
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
-
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
-
JSON
-
JSON:
-
JSON: JavaScript Object Notation(JavaScript 对象表示法)
-
JSON 是存储和交换文本信息的语法。类似 XML。
-
JSON 比 XML 更小、更快,更易解析。
-
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
-
JSON 是轻量级的文本数据交换格式
-
JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
-
JSON 具有自我描述性,更易理解
-
-
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。