会html css找啥类型工作,HTML+CSS+JS

HTML+CSS+JS

1. HTML(超文本标识语言)http://www.w3school.com.cn/html/index.asp

1.1 基本结构

网页标题

网页显示区域(一般要实现的代码都在这里写)

和标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。放在文件开头，放在文件结尾，在这两个标记中间嵌套其他标记。

文件头用

和标记，该标记出现在文件的起始部分。标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间、搜索引擎可用的关键词等。在head标记内最常用的标记是网页主题标记，即title标记，它的格式为： 网页标题 网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中。一个网页只能有一个标题，并且只能出现在文件的头部。

文件主体用和标记，它是HTML文档的主体部分。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。

1.2 常用元素

元素语法：

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容(empty content)

空元素在开始标签中进行关闭(以开始标签的结束而结束)

大多数 HTML 元素可拥有属性

标签

描述

定义注释。

定义文档类型。

定义锚。

定义粗体字。

定义大号文本。

定义文档的主体。

定义简单的折行。

定义按钮 (push button)。

定义文档中的节。

定义对话框或窗口。

定义定义列表。

定义定义列表中的项目。

定义强调文本。

定义外部交互内容或插件。

不赞成使用。定义文字的字体、尺寸和颜色。

定义供用户输入的 HTML 表单。

定义框架集的窗口或框架。

定义框架集。

to

定义 HTML 标题。

定义关于文档的信息。

定义 section 或 page 的页眉。

---

定义水平线。

定义 HTML 文档。

定义斜体字。

定义内联框架。

定义图像。

定义输入控件。

定义 input 元素的标注。

定义列表的项目。

定义文档与外部资源的关系。

定义有序列表。

定义选择列表中的选项。

定义输出的一些类型。

定义段落。

定义对象的参数。

定义客户端脚本。

定义选择列表(下拉列表)。

定义小号文本。

定义文档中的节。

定义强调文本。

定义文档的样式信息。

定义下标文本。

定义上标文本。

定义表格。

定义多行的文本输入控件。

定义表格中的表头单元格。

定义文档的标题。

定义表格中的行。

不赞成使用。定义下划线文本。

定义无序列表。

1.3 表单(form)

实例：

测试

     文本输入

Male     

Female     单选按钮输入

     提交按钮

...

页面效果：

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

选择所有

元素。

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

: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

:lang(language)

p:lang(it)

选择带有以 "it"开头的lang属性值的每个

元素。

2

element1~element2

p~ul

选择前面有

元素的每个

• 元素。

3

[attribute^=value]

a[src^=“https”]

选择其 src 属性值以 “https” 开头的每个元素。

3

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有元素。

3

[attribute*=value]

a[src*=“abc”]

选择其 src 属性中包含 “abc” 子串的每个元素。

3

:first-of-type

p:first-of-type

选择属于其父元素的首个

元素的每个

元素。

3

:last-of-type

p:last-of-type

选择属于其父元素的最后

元素的每个

元素。

3

:only-of-type

p:only-of-type

选择属于其父元素唯一的

元素的每个

元素。

3

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

3

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个

元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上，从最后一个子元素开始计数。

3

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个

元素的每个

元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，但是从最后一个子元素开始计数。

3

:last-child

p:last-child

选择属于其父元素最后一个子元素每个

元素。

3

:root

:root

选择文档的根元素。

3

:empty

p:empty

选择没有子元素的每个

元素(包括文本节点)。

3

:target

#news:target

选择当前活动的#news 元素。

3

:enabled

input:enabled

选择每个启用的 元素。

3

:disabled

input:disabled

选择每个禁用的 元素

3

:checked

input:checked

选择每个被选中的元素。

3

:not(selector)

:not§

选择非

元素的每个元素。

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)sCSS 框模型概述

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 代码放入函数中，就可以在事件发生时调用该函数。

实例：

function myFunction()

{

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

我的 Web 页面

一个段落

尝试一下

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);

}

};