HTML+CSS+JS
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);}
};
HTML+CSS+JS相关推荐
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...
- html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
- css/js压缩工具
css/js压缩工具 http://ajaxmin.codeplex.com/
- html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
- web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包
Html css js image txt web项目中 放在 Webapp 在springboot项目中 静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...
- asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- html css js 实战案例_使用html+css+js实现弹球游戏
php中文网最新课程 每日17点准时技术干货分享 使用html+css+js实现弹球游戏 代码如下,复制即可使用: <head> <style type="text/css ...
最新文章
- 技巧：两部解决U盘安装windows 7
- Android开发举步维艰，上弘法寺七七四十九天取得“真经”！
- 在开课吧学python的经历-做客李晨nic淘宝直播 胡海泉胡彦斌带货开课吧Python
- C++ Primer 5th笔记（chap 18 大型程序工具）命名空间
- Redis 分布式集群搭建2022版本+密码（linux环境）
- MySQL JSON 类型数据操作
- [c++] gdiplus绘制透明异型窗口
- mysql ocp 题库部分解析
- 拼接大屏数据展示_八步教会你如何制作数据可视化大屏
- 24个希腊字母（符号） 附字母表
- 构造常数函数解决抽象函数导数小题
- c语言怎样计算天数,C语言怎样计算天数？
- 一天看10000张黄图，鉴黄师的苦！！！
- Apache域名跳转----配置rewrite模块
- 使用关键字搜索公众号文章，
- 不错的U3D第一人称射击类游戏教程
- r语言做绘制精美pcoa图_科学网—R语言 PCA PCoA ggplot2 - 靳泽星的博文
- 一加9 Pro和小米11 Pro哪个好？做了超多功课最终选择了它
- 最新iOS高薪面试必备要点总结
- 嵌入式是什么 ？为什么要学好嵌入式呢？