HTML+CSS+JS
1. HTML（超文本标识语言）http://www.w3school.com.cn/html/index.asp
1.1 基本结构
<!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文档的主体部分。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。
1.2 常用元素
- 元素语法：
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> | 定义无序列表。 |
1.3 表单（form）
实例：
<!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>
页面效果：
1.3.1 表单属性
| 属性 | 描述 |
|---|---|
| value | 属性规定输入字段的初始值。 |
| readonly | 属性规定输入字段为只读（不能修改）。 |
| disabled | 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。 |
| size | 属性规定输入字段的尺寸（以字符计）。 |
| maxlength | 属性规定输入字段允许的最大长度。 |
1.3.2 Form 事件
由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
| 属性 | 值 | 描述 |
|---|---|---|
| onblur | script | 元素失去焦点时运行的脚本。 |
| onchange | script | 在元素值被改变时运行的脚本。 |
| onfocus | script | 当元素获得焦点时运行的脚本。 |
| onformchange | script | 在表单改变时运行的脚本。 |
| onforminput | script | 当表单获得用户输入时运行的脚本。 |
| oninput | script | 当元素获得用户输入时运行的脚本。 |
| onsubmit | script | 在提交表单时触发。 |
1.3.3 Keyboard 事件
| 属性 | 值 | 描述 |
|---|---|---|
| onkeydown | script | 在用户按下按键时触发。 |
| onkeypress | script | 在用户敲击按钮时触发。 |
| onkeyup | script | 当用户释放按键时触发。 |
1.3.4 Mouse 事件
由鼠标或类似用户动作触发的事件：
| 属性 | 值 | 描述 |
|---|---|---|
| onclick | script | 元素上发生鼠标点击时触发。 |
| ondblclick | script | 元素上发生鼠标双击时触发。 |
| onmousedown | script | 当元素上按下鼠标按钮时触发。 |
| onmousemove | script | 当鼠标指针移动到元素上时触发。 |
| onmouseout | script | 当鼠标指针移出元素时触发。 |
| onmouseover | script | 当鼠标指针移动到元素上时触发。 |
1.3.5 http 消息
当浏览器从 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协议版本。 |
2. css（层叠样式表）http://www.w3school.com.cn/css/index.asp
2.1 CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
2.2 CSS 基础语法
-
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
-
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
-
下面的示意图为您展示了上面这段代码的结构：
2.3 css 选择器
| 选择器 | 例子 | 例子描述 | 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 |
2.4 其他属性
- 颜色
| 单位 | 描述 |
|---|---|
| (颜色名) | 颜色名称 (比如 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 {background-color: gray;}，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 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS position 属性:
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
3. JavaScript http://www.runoob.com/js/js-tutorial.html
3.1 简介
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
3.2 用法
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>
3.3 ajax
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);
}
};
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
