目录
一、网页的概述
1.网页名词解释
2.web 标准
3.浏览器
二、HTML5
1.HTML5的优势
2.HTML5全新的结构
三、标签
1.标签的属性
2.标签关系
3.文本标签
文本格式化标签
文本语义标签
文本控制标签
4.图像标签
常见的图片格式：
图像标签的属性
相对路径和绝对路径
四、HTML基本结构
1.第一个HTML网页
2.骨架标签的解析
一、网页的概述
网页 ：网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。
静态网页：
用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。 静态网页更新不方便，但是访问速度快。
动态网页：
显示的内容则会随着用户操作和时间的不同而变化。 动态网页可以和服务器数据库进行实时的数据交换。
1.网页名词解释
| 名词 | 名词释义 |
|---|---|
| Internet网络 | 就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。 |
| WWW | WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。 |
| URL | URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。 |
| DNS | DNS （英文Domain Name System的缩写）是域名解析系统。 |
| HTTP和HTTPS | HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。通信的规则。 |
| Web | Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。 |
| W3C组织 | W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织 |
2.web 标准
什么是web标准？
不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、XHTML、CSS、Javascript等等。
| 结构标准 | （对网页元素进行整理和分类，主要包括HTML、XML和XHTML。）相当于房子的框架 |
| 表现标准 | （设置网页元素的版式、颜色，大小等外观，主要指CSS）相当于房子的装修 |
| 行为标准 | （网页模型的定义及交互的编写，主要包括DOM和ECMAScript）相当于房子内部设备 |
3.浏览器
常用浏览器：IE、火狐和谷歌是目前互联网上的三大浏览器，
浏览器硬核：浏览器内核是浏览器最核心的部分，负责对网页语法的解释并渲染网页（也就是显示网页效果），是渲染引擎（标准叫法）的通俗叫法。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
二、HTML5
1.HTML5的优势
HTML5作为HTML的最新版本，是HTML的传递和延续。经历HTML4.0、XHTML再到HTML5从某种意义上讲，这是HTML超文本标签语言的更新与规范过程。因此，HTML5并没有给用户带来多大的冲击，大部分标签在HTML5版本中依然适用。
1.兼容
HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。
HTML5定义了一些可以省略结束标签的元素。 HTML5中又恢复了对大写标签的支持。 HTML5制定了一个通用的标准。
2.合理
HTML5中增加和删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。
3.易用
作为当下流行的标签语言，HTML5严格遵循 “简单至上”的原则。
简化的字符集声明。
简化的DOCTYPE。
以浏览器原生能力（浏览器自身特性功能）替代复杂的JavaScript代码。
2.HTML5全新的结构
| <!DOCTYPE>标签 | <html>标签 | <head>标签 | <body>标签 |
| 位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。 | DOCTYPE> 标签之后，也称为根标签，用于告知浏览器其自身是一个 HTML 文档。 | 定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签。 | 定义HTML文档所要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。 |
三、标签
概念：
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的<html>、<head>、<body>都是HTML标签。所谓标签就是放在“< >”符号中表示某个功能的编码命令，也称为HTML标签或HTML元素,统一称作HTML标签。
双标签是指由开始和结束两个标签符组成的标签。（例如：<h3> </ h3>）
单标签是指用一个标签符号即可完整地描述某个功能的标签。(例如：< /br>)
1.标签的属性
格式：<标记名 属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>
<h1 align="center" >标题文本<h1>
键值对
“键值对”可以理解为对“属性”设置“属性值”。键值对有多种表现形式，例如color="red" 、width:200px;等，其中color和width即为“键值对”中的“键”（英文key），red和200px为“键值对”中的“值”（英文value）。“键值对”广泛地应用于编程中，HTML属性的定义形式“属性="属性值"”只是“键值对”中的一种。
2.标签关系
包含关系
<head>
<title>
</title>
</head>并列关系
<p></p>
<h></h>3.文本标签
文本格式化标签
| 标题标签 | <h1>……<h6> | <h1>到<h6>重要性依次递减 |
| 段落标签 | <p> | 默认自动换行 |
| 水平线标签 | <hr /> | 将段落与段落分隔开 |
| 换行标签 | <br /> | 和word中Enter键作用相同 |
文本语义标签
| time标签 | time标签用于定义时间或日期，可以代表24小时中的某一时间。time标签不会在浏览器中呈现特殊效果，但是该元素能够以机器可读的方式对日期和时间进行编码，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。 |
| mark标签 | mark标签的主要功能是在文本中高亮显示某些字符，该元素的用法与em标签和strong标签有相似之处，但是使用mark标签在突出显示样式时更随意灵活。 |
| cite标签 | cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。 |
文本控制标签
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
|
| 空格符 | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
4.图像标签
格式：<img src="图像URL" />
常见的图片格式：
GIF
GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。
PNG
PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。
IE6是可以支持PNG-8，但在处理PNG-24的透明时会显示灰色。
JPG
JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。
小图片考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。
图像标签的属性
相对路径和绝对路径
| 相对路径 | 相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。 |
| 绝对路径 | 绝对路径一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。 |
- 图像文件和html文件位于同一文件夹：
只需输入图像文件的名称即可，如<img src=“logo.gif” />。
- 图像文件位于html文件的下一级文件夹：
输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
- 图像文件位于html文件的上一级文件夹：
在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
四、HTML基本结构
1.第一个HTML网页
<html>
<head>
<title>网页标题</title>
</head>
<body>我的第一个网页</body>
</html>2.骨架标签的解析
| 标签名 | 定义 | 解释 |
|---|---|---|
| <html> </html> | HTML标签 | 跟标签，包括页面中所有内容 |
| <head> </head> | 头部标签 | 包含所有头部元素 |
| <title> </title> | 标题标签 | 里面写网页标题 |
| <body> </body> | 主体标签 | 包含网页全部内容，写网页骨架 |