<!doctype html> <!-- 文档声明，声明位于文档中的最前面的位置 -->
<html>
<head>
<!-- 声明本网页使用了utf-8字符编码。如不声明字符编码会造成乱码情况 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页标题</title>
</head>
<body>
网页显示区域（一般要实现的代码都在这里写）
</body>
</html>
<HTML>和</HTML>标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。放在文件开头，放在文件结尾，在这两个标记中间嵌套其他标记。<HEAD>和</HEAD>标记，该标记出现在文件的起始部分。标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间、搜索引擎可用的关键词等。在head标记内最常用的标记是网页主题标记，即title标记，它的格式为： <title>网页标题</title> 网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中。一个网页只能有一个标题，并且只能出现在文件的头部。
- 元素语法：
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
| 标签 | 描述 |
|---|---|
<!--...--> |
定义注释。 |
<!DOCTYPE> |
定义文档类型。 |
<a> |
定义锚。 |
<b> |
定义粗体字。 |
<big> |
定义大号文本。 |
<body> |
定义文档的主体。 |
<br> |
定义简单的折行。 |
<button> |
定义按钮 (push button)。 |
<div> |
定义文档中的节。 |
<dialog> |
定义对话框或窗口。 |
<dl> |
定义定义列表。 |
<dt> |
定义定义列表中的项目。 |
<em> |
定义强调文本。 |
<embed> |
定义外部交互内容或插件。 |
<font> |
不赞成使用。定义文字的字体、尺寸和颜色。 |
<form> |
定义供用户输入的 HTML 表单。 |
<frame> |
定义框架集的窗口或框架。 |
<frameset> |
定义框架集。 |
<h1> to <h6> |
定义 HTML 标题。 |
<head> |
定义关于文档的信息。 |
<header> |
定义 section 或 page 的页眉。 |
<hr> |
定义水平线。 |
<html> |
定义 HTML 文档。 |
<i> |
定义斜体字。 |
<iframe> |
定义内联框架。 |
<img> |
定义图像。 |
<input> |
定义输入控件。 |
<label> |
定义 input 元素的标注。 |
<li> |
定义列表的项目。 |
<link> |
定义文档与外部资源的关系。 |
<ol> |
定义有序列表。 |
<option> |
定义选择列表中的选项。 |
<output> |
定义输出的一些类型。 |
<p> |
定义段落。 |
<param> |
定义对象的参数。 |
<script> |
定义客户端脚本。 |
<select> |
定义选择列表（下拉列表）。 |
<small> |
定义小号文本。 |
<span> |
定义文档中的节。 |
<strong> |
定义强调文本。 |
<style> |
定义文档的样式信息。 |
<sub> |
定义下标文本。 |
<sup> |
定义上标文本。 |
<table> |
定义表格。 |
<textarea> |
定义多行的文本输入控件。 |
<th> |
定义表格中的表头单元格。 |
<title> |
定义文档的标题。 |
<tr> |
定义表格中的行。 |
<u> |
不赞成使用。定义下划线文本。 |
<ul> |
定义无序列表。 |
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
</body>
<form method="post" action="https://www.baidu.com/">
<input type="text" name="firstname"> 文本输入<br>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female 单选按钮输入<br>
<input type="submit" value="Submit"> 提交按钮<br>
...
</form>
</form>
</html>
页面效果：
| 属性 | 描述 |
|---|---|
| value | 属性规定输入字段的初始值。 |
| readonly | 属性规定输入字段为只读（不能修改）。 |
| disabled | 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。 |
| size | 属性规定输入字段的尺寸（以字符计）。 |
| maxlength | 属性规定输入字段允许的最大长度。 |
由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
| 属性 | 值 | 描述 |
|---|---|---|
| onblur | script | 元素失去焦点时运行的脚本。 |
| onchange | script | 在元素值被改变时运行的脚本。 |
| onfocus | script | 当元素获得焦点时运行的脚本。 |
| onformchange | script | 在表单改变时运行的脚本。 |
| onforminput | script | 当表单获得用户输入时运行的脚本。 |
| oninput | script | 当元素获得用户输入时运行的脚本。 |
| onsubmit | script | 在提交表单时触发。 |
| 属性 | 值 | 描述 |
|---|---|---|
| onkeydown | script | 在用户按下按键时触发。 |
| onkeypress | script | 在用户敲击按钮时触发。 |
| onkeyup | script | 当用户释放按键时触发。 |
由鼠标或类似用户动作触发的事件：
| 属性 | 值 | 描述 |
|---|---|---|
| onclick | script | 元素上发生鼠标点击时触发。 |
| ondblclick | script | 元素上发生鼠标双击时触发。 |
| onmousedown | script | 当元素上按下鼠标按钮时触发。 |
| onmousemove | script | 当鼠标指针移动到元素上时触发。 |
| onmouseout | script | 当鼠标指针移出元素时触发。 |
| onmouseover | script | 当鼠标指针移动到元素上时触发。 |
当浏览器从 web 服务器请求服务时，可能会发生错误。从而有可能会返回下面的一系列状态消息：
| 消息: | 描述: |
|---|---|
| 100 Continue | 服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。 |
| 200 OK | 请求成功（其后是对GET和POST请求的应答文档。） |
| 400 Bad Request | 服务器未能理解请求。 |
| 403 Forbidden | 对被请求页面的访问被禁止。 |
| 404 Not Found | 服务器无法找到被请求的页面。 |
| 500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
| 504 Gateway Timeout | 网关超时。 |
| 505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面的示意图为您展示了上面这段代码的结构：
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| .class | .intro | 选择class="intro"的所有元素。 |
1 |
| #id | #firstname | 选择id="firstname"的所有元素。 |
1 |
| * | * | 选择所有元素。 | 2 |
| element | p | 选择所有<p>元素。 |
1 |
| element,element | div,p | 选择所有<div>元素和所有 <p> 元素。 |
1 |
| element element | div p | 选择<div>元素内部的所有 <p> 元素。 |
1 |
| element>element | div>p | 选择父元素为<div>元素的所有 <p> 元素。 |
2 |
| element+element | div+p | 选择紧接在<div>元素之后的所有 <p>元素。 |
2 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择target="_blank" 的所有元素。 |
2 |
| [attribute~=value] | [title~=flower] | 选择title 属性包含单词"flower"的所有元素。 |
2 |
| :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 | 选择每个<p>元素的首字母。 |
1 |
| :first-line | p:first-line | 选择每个<p>元素的首行。 |
1 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p>元素。 |
2 |
| :before | p:before | 在每个<p>元素的内容之前插入内容。 |
2 |
| :after | p:after | 在每个<p>元素的内容之后插入内容。 |
2 |
| :lang(language) | p:lang(it) | 选择带有以 "it"开头的lang属性值的每个<p>元素。 |
2 |
| element1~element2 | p~ul | 选择前面有 <p> 元素的每个<ul>元素。 |
3 |
| [attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个<a>元素。 |
3 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有<a>元素。 |
3 |
[attribute*=value] |
a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个<a>元素。 |
3 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个<p> 元素的每个 <p>元素。 |
3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个<p> 元素。 |
3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p>元素。 |
3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个<p>元素的每个 <p>元素。 |
3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个<p> 元素。 |
3 |
| :root | :root | 选择文档的根元素。 | 3 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 |
3 |
| :target | #news:target | 选择当前活动的#news 元素。 |
3 |
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 |
3 |
| :disabled | input:disabled | 选择每个禁用的<input> 元素 |
3 |
| :checked | input:checked | 选择每个被选中的<input>元素。 |
3 |
| :not(selector) | :not§ | 选择非<p> 元素的每个元素。 |
3 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
| 单位 | 描述 |
|---|---|
| (颜色名) | 颜色名称 (比如 red) |
| rgb(x,x,x) | RGB 值 (比如 rgb(255,0,0)) |
| rgb(x%, x%, x%) | RGB 百分比值 (比如 rgb(100%,0%,0%)) |
| #rrggbb | 十六进制数 (比如 #ff0000)s |
CSS 框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
CSS 样式
背景色（背景设置为灰色，增加一些内边距）：
p {}，p {background-color: gray; padding: 20px;}
背景图像：body {background-image: url(/i/eg_bg_04.gif);}
背景重复：body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}
背景定位：
body
{
background-image:url(’/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:center;
}
背景关联：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
CSS 背景属性：
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
CSS position 属性:
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
JavaScript 函数和事件:
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
实例：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
get请求:
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open(‘get‘,‘getStar.php?starName=‘+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}
post请求:
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open(‘post‘, ‘02.post.php‘ );
//发送请求
xhr.send(‘name=fox&age=18‘);
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};原文：https://www.cnblogs.com/fydkk/p/13800784.html