前言：作为一个java工程师，前端对于我来说很弱，要想成为全栈工程师，那么前端必然也需要会，所以这里看了一本秘籍为《HTML+CSS+网页开发技术精解》，做一个笔记，和总结。如果涉及侵权，请通知本人，本人在三个工作日删除。
学习图：
一、html篇
1、html基础（略）若有不懂请自己补充html的概念
2、页面基本元素
这些元素是构成页面的基础，它们各有自己相应的作用，掌握这些页面的基本元素是定义 HTML 页面的关键，这些设置决定了页面的文档类型和现实效果，同时也直接影响页面中各种元素能否正常显示。
本节要点：
- 页面头部元素<head>
- 页面标题元素<title>
- 元信息元素<meta>
- 页面主体元素<body>
学习图：
2.1 页面头部元素 <head>
2.2 页面标题元素 <title>
页面头部元素和页面标题元素是头部信息的主要组成。详细介绍（略）
2.3 元信息元素 <meta>
meta 元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。
在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容。
在一个HTML页面中可以有多个 meta 元素。meta 元素的属性有 name 和 http-equiv，其中 name 属性主要用于描述网页，以便于搜索引擎查找、分类。
2.3.1 元信息元素名称属性 name、content
name 属性提供了由<meta>标签定义的名称/值对中的名称，HTML 标准没有指定任何预先定义的<meta>名称，通常情况下，可以自由使用对自己和源文档的阅读者来说都有意义的名称。
content 属性提供了名称/值对中的值，该值可以是任何有效的字符串（如果值中包含空格，就要用引号括起来）。Content 属性始终要和 name 或 http-equiv 属性一起使用。
content 属性提供了名称/值对中的值，该值可以是任何有效的字符串（如果值中包含空格，就要用引号括起来）。Content 属性始终要和 name 或 http-equiv 属性一起使用。
基本语法：
在该语法中，name 为属性名称，设置为 generator，也就是设置编辑工具，在 content 中定义具体的编辑工具名称。
案例代码：
<meta name="generator" content="编辑软件的名称">在该语法中，name 为属性名称，设置为 generator，也就是设置编辑工具，在 content 中定义具体的编辑工具名称。
案例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="FrontPage">
<title>元信息元素名称属性</title>
</head>
<body>
</body>
</html>在代码中，加粗部分的标记定义编辑工具为 FrontPage
2.3.2 元信息元素的附加属性 http-equiv
http-equiv 类似于 http 的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。content-type 设定页面使用的字符集，用以说明网页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示页面内容。
基本语法
基本语法
<meta http-equiv="content-type" content="text/html; charset=字符集类型" />语法介绍：
在该语法中，http-equiv 用于传送 HTTP 通信协议的标头，而在 content 中才是具体的属性值。charset 用于设置网页的内码语系，也就是字符集的类型，国内常用的是 GB 码，charset 往往设置为 GB2312，即简体中文也可设置为UTF-8
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>在代码中，加粗部分的标记是告诉浏览器等设备，文件为 html 文件，且使用了日语编码。
作用：设置使用字符集编码
2.3.3 设置页面关键字
在搜索引擎中，检索信息都是通过输入关键字来实现的。关键字是整个网站登录过程中最基本也是最重要的一步，是进行网页优化的基础。关键字在浏览时是看不到的，它可以供搜索
引擎使用。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。
基本语法：
<meta name="keywords" content="输入具体的关键字">在该语法中，name 为属性名称，这里是 keywords，也就是设置网页的关键字属性，而在content 中则定义具体的关键字。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content=" 插入关键字">
<title>插入关键字</title>
</head>
<body>
</body>
</html>在代码中，加粗部分标记为插入关键字。
2.3.4定义页面的跳转
使用<meta>标记可以使网页在经过一定时间后自动刷新，这可以通过将 http-equiv 属性值设置为 refresh 来实现。content 属性值可以设置为更新时间
基本语法：
<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址">语法介绍：
refresh 出现在 http-equiv 属性中，使用 content 属性表示刷新或跳转的开始时间与跳转的网址。默认情况下，跳转时间以秒为单位。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="5;url=index1.html">
<title>定义页面的跳转</title>
</head>
<body>
5 秒后自动跳转
</body>
</html>
提示：使用 http-equiv 属性中的 refresh 不仅能够实现页面之间的跳转，还可以完成页面自身的自动刷新。
将url改成自己的名字即可
2.3.5 定义页面的作者信息（就将content设置成作者名字即可）<meta name="author" content=" 老马">
2.3.6 定义页面的版权信息（就将content设置成版权即可）<meta name="copyright" content=" 老马工作室">
此外在head中还经常定义JavaScript的内容。后期在讲解。
2.4 页面主体元素 <body>
网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。
2.4.1 主体元素的背景属性 bgcolor
背景颜色的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于背景图片来说，它在显示速度上有绝对的优势。在网页文件中，一般通过<body>标签的 bgcolor 属性来指定页面的颜色背景。
语法：
<body bgcolor="背景颜色">
该语法中的 body 就是页面的主体标记，bgcolor 的值可以是一个已命名的颜色，也可以是一个十六进制的颜色值。在 HTML 4.01 中，不赞成使用 body 元素的 bgcolor 属性。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主体元素的背景属性</title>
</head>
<body bgcolor="#C21647" >
</body>
</html>2.4.2 主体元素的背景图片属性 background
使用恰当的图片作为背景，能够使页面看上去更加生动美观。使用 background 属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。
语法：<body background="图片的地址">（图片的地址可以是相对地址，也可以是绝对地址。）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面背景图片</title>
</head>
<body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg">
</body>
</html>2.4.3 主体元素的文本属性 text
text 属性可以设置 HTML 文档的文本颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。
语法：<body text="文字的颜色">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面背景图片</title>
</head>
<body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg" text="#ff0cc0">
<p>人生亦生活，生活亦人生，生活中的爱情，爱情中的生活，二者相互共存 ，彼此易同化，让人难以捉摸，我们总
有一种感觉，生活中缺少了什么，只为了一个残忍而偏激的解释，就说少了一份真感情，而感情又是个抽象的东西 ，比如
说 ，一个男孩对一个女孩说 “我爱你 ”，然后他们在一起，就童话而言，这是个美丽的结局，但不幸的是，生活并不是童
话。</p>
</body>
</html>2.4.4 未访问过的链接属性 link
超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字颜色则变为暗红色。可以通过 link 参数修改链接文字的颜色。
语法：<body link="颜色"> 这一属性的设置与前面几个设置颜色的参数类似
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>页面背景图片</title>
</head>
<body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg" text="#ff0cc0" link="#FF6600">
<a href="#"> 链接的文字</a>
</body>
</html>2.4.5 激活的链接属性 alink
使用 alink 可以设置正在访问的文字颜色。也就是鼠标点下但是还不要松开时的颜色，松开后会变成未点击的颜色。<body link="#FF6600"alink="#31693A">2.4.6 已访问过的链接属性 vlink
使用 vlink 可以设置已访问过的超链接颜色。（不好用，未点击时就变成了已经访问过的颜色）2.4.7 IE 浏览器中的左边界属性 leftmargin
在 HTML 页面中，可以定义页面的左边距，即内容和浏览器左侧边框之间的距离，设定合适的左边距可以防止网页外观过于拥挤。
基本语法：<body leftmargin=左边距的值> （在默认情况下，边距的值以像素为单位。）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>IE 浏览器中的左边界属性</title>
</head>
<body leftmargin="50">
设置页面的左边距为 50 像素
</body>
</html>2.4.8 IE 浏览器中的上边界属性 topmargin
在 HTML 页面中，可以定义页面的左边距，即内容和浏览器上侧边框之间的距离，设定合适的上边距可以防止网页外观过于拥挤。
基本语法：
<body topmargin=上边距的值>(一般以像素为单位）
<body topmargin=上边距的值>(一般以像素为单位）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>IE 浏览器中的左边界属性</title>
</head>
<body leftmargin="50" topmargin="50" >
设置页面的上边距为 50 像素 <br/>
设置页面的左边距为 50 像素
</body>
</html>2.4.9 主体元素的背景图片滚动属性 bgproperties
在默认情况下，如果页面的内容较长，当拖动浏览器滚动条的时候，背景会随着文字内容的滚动而滚动，所谓背景图像固定，是指不论浏览器的滚动条如何拖动，背景都永远固定在相同的位置，并不会随着文字滚动而滚动。
基本语法：
<body background="图像的地址" bgproperties=fixed>
语法介绍：
Internet Explorer 和 Netscape Navigator6 都支持 <body>标签的 bgproperties 属性扩展。但它只有与 background 属性扩展一起使用时才有效bgproperties 属性只有一个值 fixed。它把背景图像冻结在浏览窗口，这样就不会随着其他窗口的内容而滚动了。
<body background="图像的地址" bgproperties=fixed>
语法介绍：
Internet Explorer 和 Netscape Navigator6 都支持 <body>标签的 bgproperties 属性扩展。但它只有与 background 属性扩展一起使用时才有效bgproperties 属性只有一个值 fixed。它把背景图像冻结在浏览窗口，这样就不会随着其他窗口的内容而滚动了。
测试一下不好用。但是至少也是一种方法
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主体元素的背景图片滚动属性</title>
</head>
<body background="images/company_ditu.jpg"bgproperties=fixed>
<p> </p>
<p> 每个梦想都值得灌溉</p>
<p> 眼泪变成雨水就能落下来</p>
<p> 每个孩子都应该被宠爱</p>
<p> 他们是我们的未来</p>
<p> 这是最好的未来</p>
<p> 我们用爱铸造完美现在</p>
<p> 千万溪流汇聚成大海 </p>
<p> 每朵浪花一样澎湃</p>
<p> 这是最好的未来</p>
<p> 不分你我彼此相亲相爱</p>
<p> 千山万水证明这关怀</p>
<p> 幸福永远与爱同在</p>
</body>
</html>2.5 创建样式元素 <style>
<style> 标签用于为 HTML 文档定义样式信息。在 style 中，可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。
基本语法：
<style type="text/css">
</style>
<style type="text/css">
</style>
语法介绍：
style 元素只能在 HTML 文档的 head 内使用。Microsoft Internet Explorer 4.0 及以后版本允许多个样式块。此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。
style 元素只能在 HTML 文档的 head 内使用。Microsoft Internet Explorer 4.0 及以后版本允许多个样式块。此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>
</html>2.6 脚本元素 <script>
<script>标签用于定义客户端脚本，如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 的常见应用是图像操作、表单验证以及动态内容更新。
基本语法：
<script type="text/javascript">
……
</script>
<script type="text/javascript">
……
</script>
语法介绍：
案例代码：
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello kete!</h1>")
</script>
</body>
</html>这段代码使用 script 定义了一段 JavaScript 代码，使用 document.write 输出标题文字“Hellokete!”
也可以用alert（“输出alert”）来演示弹框。
总结
其它相关内容见下一章节
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
