网页根据W3C标准判定由三部分构成 :
1. 结构(HTML) : 描述网页结构(骨架)
2. 表现(CSS) : 控制页面中元素的样式(外在显示，例如颜色，大小，皮肤等)
负责页面的样式，美化页面
3. 行为(JavaScript) : 响应用户操作(例如动图，一些用户要进行的操作)
负责页面的行为
制作歌词网络页面
代码如图:
效果如图:
效果图
HTML
HTML是超文本标记语言
使用标签的的形式来标识网页中的不同组成部分。
超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
一个最基本的HTML页面：
标签
1. 标记指的就是标签,使用标记标签来描述网页
2. 结构
<标签名>标签内容< / 标签名>
<标签名 / >
3. 常用标签
(1)<html>: 告诉浏览器这个文档中包含的信息是用HTML编写的
所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个
有两个子标签head和body
(2)<head> : 表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
head标签作为html标签的子元素的出现，一个网页中只能有一个head。
(3)<title> : 表示网页的标题，一般会在网页的标题栏上显示。
title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。
title标签紧贴着head标签编写
(4)<body> : 设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
作为html的子标签使用
(5)< h1~h6> : 网页中的标题标签(相当于markdown中的等级标题)越往后重要性越低。
重要性仅次于页面的title，一般只到h3
一个页面中只会使用一个h1标签
(6)< p > : 表示网页中的一个段落
段落会在页面中自成一行
(7)<br / > : 换行标签
(8)<hr / > : 打印一条水平线
(9)<img / > : 图片标签，用来向页面中引入一张外部的图片
属性：src 指向一个外部的图片的路径。
alt 图片描述
(10)<a> : 超链接标签，通过a标签，可以快速跳转到其他页面。
a元素属于文本元素，它含有一些私有属性（局部属性），还有一些通用属性（全局属性），其中href属性和target属性较为常用。
href属性
href属性是必须属性，指向一个链接地址， 如果没有href属性，那么a元素就将变成空元素。
当href的属性值是以 http:// 开头的URL，表示这是一个外部网站。
target属性
target属性是可选属性，它用于告诉浏览器希望将所连接的资源显示在哪里，设置打开目标页面的位置，可选值：
（1）_blank属性 —— 在新窗口或标签页中打开文档
（2）_parent属性 —— 在父窗框组（frameset）中打开文档
（3）_self属性 —— 在当前窗口打开文档（默认）
（4）_top属性 —— 在顶层窗口打开文档
(11)<center> : 内容居中
(12)锚点，让超链接到指定位置去
在HTML页面中适当位置定义如下的锚点：
<a name="content">这里是CONTENT部分</a>
1. 一种是利用超链接标签制作锚点链接，主要用于页面内的锚点访问
<a href="#top">点击我链接到TOP</a>
2. 一种是直接在网页地址后面加锚点标记，主要用于不同页面间的锚点访问
假如本页面的地址是http://文件路径/index.html，要访问foot锚点只要访问如下链接即可
http://文件路径/index.html#foot
元素
一个完整的标签称为元素。
可以将元素和标签认为是一个同义词
< h1 >一级标题< / h1> ， h1就称为元素
<p>我是一个<em>段落< / em>< / p> ，p也是一个元素，em是p的子元素，p是em的父元素。
<body>
< p >< em >内容< / em>< / p>
</ body>
body也是一个元素，
body是p和em的祖先元素。
p和em是body的后代元素。
DIV和SPAN的区别
DIV 块元素，span是行内元素
Span的宽度依照包围着对象的宽度而定，所以不能用宽度属性width设置span标记内对象的宽度，但可以设置span的margin（外补丁）值，span中的对象位置与父对象的距离
Div 块元素 100% 会换行
Span 行内元素 文本实际长度
通过定义CSS的display属性值可以互相转化:Eg:#div{display:inherit;} #span{display:block;}
何时用span
在同一行中，想对其中文字或图片设置样式，而又不要该行文本换行的条件下，使用span标记
属性
可以为HTML标签设置属性。
通过属性为HTML元素提供附加信息。
属性需要设置在开始标签或自结束标签中。
属性总是以名称/值对的形式出现，比如：name=“value”
有些属性可以是任意值，有些则必须是指定值
<h1 title="我是一个标题">标题< / h1>
<img src="" alt="" / >
常见属性
id 属性作为标签的唯一标识
class 属性用来标签分组 ，拥有相同class属性的标签认为是一组，可以出现相同的class属性，可以为一个元素指定多个class。
title 属性指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
注释
不会在网页中显示， 帮助开发人员理解网页的代码。
注释不能嵌套！
格式: <!--注释内容-->
实体(转义字符)
语法: &实体名;
字符实体
doctype
为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。
html5文档声明 : <！DOCTYPE html>
* 避免怪异模式的最好方式就是在页面中编写正确的doctype
乱码
解决办法 ： 保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。
<meta charset="utf-8" / >
<meta>标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
meta用法：
设置页面的字符集：<meta charset="utf-8">
设置网页描述：<meta name="description" content="">
设置网页关键字: <meta name="keywords" content="">
请求的重定向：<meta http-equve="refresh" content="5;url=地址">(5指5秒后)
网友评论