Web总结

2020-06-17

Web开发由超文本标记语言 ( HTML )，层叠样式表 (CSS)，一种被用来添加交互功能到你的网站的编程语言(JavaScript)构成。下面总结一下这些语言的常见用法。

html

(Hyper Text Markup Language)

由标签和标签内的属性集组成

常见标签

<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 头部信息，不显示
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
<div> 可定义文档中的分区或节（division/section）
<a> 链接
<img /> 图像，单标记，不需要结束
<table> 表格
<hr/> 标签在 HTML 页面中创建水平线。 
<br/> 换行

常见标签查表：https://www.w3school.com.cn/tags/index.asp

常见属性

<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<a href="http://www.w3school.com.cn">This is a link</a> //链接
<img src="w3school.jpg" width="104" height="142" />  //图像
<table border="1"> 拥有关于表格边框的附加信息。

常见属性查表：https://www.w3school.com.cn/cssref/index.asp

示例

Look! Styles and colors

This text is in Verdana and red

This text is in Times and green

This text is 30 pixels high

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains
_subscript

This text contains
^superscript

<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>
<!-- 在此处写注释 -->
    
<!-- 此刻不显示图片：
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->
    
<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

CSS

引用CSS

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。<link> 标签在（文档的）头部：

1
2
3

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

1
2
3

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

1
2
3

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

示例

margin: 0;(外边距)
padding: 0;	（填充）
list-style-type: none;
text-decoration: none;

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

1 2	list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。 none 不显示列表项的标记。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

选择器种类

选择器	例子	例子描述	CSS版本
.class	.intro	选择 class=”intro” 的所有元素。	1
#id	#firstname	选择 id=”firstname” 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有元素。	1
element,element	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element>element	div>p	选择父元素为元素的所有元素。	2
element+element	div+p	选择紧接在元素之后的所有元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target=”_blank” 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。	2
[attribute	=value]	[lang	=en]
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2

JavaScript

引用JS

内部

在 HTML 中，JavaScript 代码必须位于标签之间。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>

外部

1	<script src="myScript.js"></script>

函数方法

javascript函数一共可分为五类：
•常规函数
•数组函数
•日期函数
•数学函数
•字符串函数

javascript常规函数包括以下9个函数：
(1)alert函数：显示一个警告对话框，包括一个OK按钮。
(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
(3)escape函数：将字符转换成Unicode码。
(4)eval函数：计算表达式的结果。
(5)isNaN函数：测试是(true)否(false)不是一个数字。
(6)parseFloat函数：将字符串转换成符点数字形式。
(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数：显示一个输入对话框，提示等待用户输入。例如：

<script language="javascript"> 
<!-- 
alert("输入错误"); 
prompt("请输入您的姓名","姓名"); 
confirm("确定否！"); 
//-->  
script>

(9)unescape函数：解码由escape函数编码的字符。

参考：https://www.cnblogs.com/HDK2016/p/6985442.html

HTML DOM Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

示例

JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id=”demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

1	document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript 能够隐藏 HTML 元素

可通过改变 display 样式来隐藏 HTML 元素：

1	document.getElementById("demo").style.display="none";

注

具体参看jQuery案例