使用HTML语言和CSS开发商业站点
第一章 HTML基础
WEB页面呈现信息已成为各种信息共享和发布的主要形式
超文本标记语言（Hyper Text Markup Lanuage,HTML）或超文本标签语言，是创建WEB页面的基础
一.HTML5文件的基本结构和W3C标准
1.HTML简介及发展史
（1）HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）。
（2）使用浏览器打开任意一个页面，按下F12键，就会看到一段程序，里面显示的就是这个网页的源文件。
2.HTML5的优势
（1）世界知名浏览器厂商HTML5的支持
（2）市场的需求
（3）跨平台
3.W3C标准
（1）使用W3C标准的原因
发明HTML的初衷是实现信息资料的网络传播和共享，希望HTML文档具有平台无关性，即同一HTML文档在不同浏览器上看到同样的页面内容
和效果。在此背景下，万维网联盟（World Wide Web Consortium ,w3c）诞生了，由w3c组织制定和维护的WEB开发标准，也称为w3c标准，是web
技术领域最权威和具有影响力的国际中立性技术标准机构。
（2）w3c标准的介绍
w3c标准不是一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构（Structure),表现（Presentation)和行为（Behavior）。
各级标题，正文，图片，列表等构成网页的“结构”。
字体，颜色，间距等构成网页的“表现”。
用户通过单击让页面中某个元素移动，消失等动画交互构成网页的“行为”。
“结构”，“表现”，“行为”分别对应HTML，CSS.JavaScript.三者相分离，这样给页面开发带来很多优点。
w3c标准包括结构化标准语言（HTML，XML),表现标准语言（CSS），行为标准（DOM,ECMAScript）。
4.HTML5文件的基本结构
最基本的语法就是<标记>内容</标记>
标记也称标签或元素
整个HTML包括头部（head）和主体（body）两部分，头部包括网页标题（title）等基本信息，主体包括网页的内容信息。
5.网页的基本信息
（1）DOCTYPE声明
位于HTML文档的第一行，<!DOCTYPE html>
(2)<title>标签（描述网页标题）
<title>搜狐--中国最大的门户网站</title>
(3)<meta>标签（描述网页摘要信息）
包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。并不显示，其目的是方便浏览器解析或利用搜索
引擎搜索。采用“名称/值”的方式
<1>文档内容类型，字符编码信息
<meta charset="UTF-8"/>
属性：charset 表示字符集编码
gb2312:简体中文
ISO-885901：纯英文
big5:繁体
UTF-8:国际性通用的字符编码，用于包含中英文的页面，比g2312好
<2>搜索关键字和内容描述信息
<meta name="keywords" content="......"/>
<meta name="description" content="......"/>
keywords表示搜索关键字，description表示网站内容的具体描述。
二.网页的基本标签
1.标题标签
HTML共提供了六级标题<h1>-<h6>,所有标题字体加粗，<h1>字号最大，<h6>字号最小
2.段落标签和换行标签
<p>标签表示一个段落
<br/>表示强制换行显示，无结束标签
3.水平线标签
<hr/>无结束标签
4.字体样式标签
<strong>标签让字体变粗
<em>标签让文字倾斜
5.注释和特殊符号
语法<!--注释内容-->
HTML中常用的特殊符号及其对应的字符实体
空格 &nbsq;大于号（>）>小于号（<）<引号（"）"版权符号 （）©
三.图像标签
1.常见的图像格式
（1）JPG格式
联合图像专家组（Joint PhotoGraphic Experts Group）格式的英文缩写
（2）GIF格式
图像交换格式（GraphicsInterchange Format）的英文缩写
（3）BMP格式
位图（Bitmap）的英文缩写
(4) PNG格式
流式网络图形格式（Portable Network Graphic Format,PNG）名称来源于非官方的"PNG'S NOT GIF"读成"ping".
2.图像的基本标签
语法：<img src ="图片地址" alt="图像的替代文字" title="鼠标悬停时提示文字" width="图片宽度" height="图片高度"/>
四.超链接标签
1.超链接的基本用法
语法<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
网页中，当单击某个链接时，将指向万维网上的文档
万维网使用统一资源定位器（Uniform Resource Location,URl）的方式来定义一个链接地址
绝对路径：指向本站点外的文件
相对路径：指向本站点内的文件
"../"表示当前目录的上级目录，"../../"表示当前目录的上上级目录
2.超链接的应用场合
页面间链接
锚链接
（1）在页面的乙位置设置标记
语法：<a name="market">目标位置乙</a>
(2)设置甲位置链接路径href属性值为"#标记名"
语法：<a href="#market">当前位置甲</a>
功能性链接
mailto:电子邮件地址
3.行内元素和块元素
p,h1等元素不管自身内容多少，都独占一行，称为"块元素"
strong a 元素等宽度由自己内容决定其他元素排在它后面，称为"行内元素"。
第一章 HTML基础
WEB页面呈现信息已成为各种信息共享和发布的主要形式
超文本标记语言（Hyper Text Markup Lanuage,HTML）或超文本标签语言，是创建WEB页面的基础
一.HTML5文件的基本结构和W3C标准
1.HTML简介及发展史
（1）HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）。
（2）使用浏览器打开任意一个页面，按下F12键，就会看到一段程序，里面显示的就是这个网页的源文件。
2.HTML5的优势
（1）世界知名浏览器厂商HTML5的支持
（2）市场的需求
（3）跨平台
3.W3C标准
（1）使用W3C标准的原因
发明HTML的初衷是实现信息资料的网络传播和共享，希望HTML文档具有平台无关性，即同一HTML文档在不同浏览器上看到同样的页面内容
和效果。在此背景下，万维网联盟（World Wide Web Consortium ,w3c）诞生了，由w3c组织制定和维护的WEB开发标准，也称为w3c标准，是web
技术领域最权威和具有影响力的国际中立性技术标准机构。
（2）w3c标准的介绍
w3c标准不是一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构（Structure),表现（Presentation)和行为（Behavior）。
各级标题，正文，图片，列表等构成网页的“结构”。
字体，颜色，间距等构成网页的“表现”。
用户通过单击让页面中某个元素移动，消失等动画交互构成网页的“行为”。
“结构”，“表现”，“行为”分别对应HTML，CSS.JavaScript.三者相分离，这样给页面开发带来很多优点。
w3c标准包括结构化标准语言（HTML，XML),表现标准语言（CSS），行为标准（DOM,ECMAScript）。
4.HTML5文件的基本结构
最基本的语法就是<标记>内容</标记>
标记也称标签或元素
整个HTML包括头部（head）和主体（body）两部分，头部包括网页标题（title）等基本信息，主体包括网页的内容信息。
5.网页的基本信息
（1）DOCTYPE声明
位于HTML文档的第一行，<!DOCTYPE html>
(2)<title>标签（描述网页标题）
<title>搜狐--中国最大的门户网站</title>
(3)<meta>标签（描述网页摘要信息）
包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。并不显示，其目的是方便浏览器解析或利用搜索
引擎搜索。采用“名称/值”的方式
<1>文档内容类型，字符编码信息
<meta charset="UTF-8"/>
属性：charset 表示字符集编码
gb2312:简体中文
ISO-885901：纯英文
big5:繁体
UTF-8:国际性通用的字符编码，用于包含中英文的页面，比g2312好
<2>搜索关键字和内容描述信息
<meta name="keywords" content="......"/>
<meta name="description" content="......"/>
keywords表示搜索关键字，description表示网站内容的具体描述。
二.网页的基本标签
1.标题标签
HTML共提供了六级标题<h1>-<h6>,所有标题字体加粗，<h1>字号最大，<h6>字号最小
2.段落标签和换行标签
<p>标签表示一个段落
<br/>表示强制换行显示，无结束标签
3.水平线标签
<hr/>无结束标签
4.字体样式标签
<strong>标签让字体变粗
<em>标签让文字倾斜
5.注释和特殊符号
语法<!--注释内容-->
HTML中常用的特殊符号及其对应的字符实体
空格 &nbsq;大于号（>）>小于号（<）<引号（"）"版权符号 （）©
三.图像标签
1.常见的图像格式
（1）JPG格式
联合图像专家组（Joint PhotoGraphic Experts Group）格式的英文缩写
（2）GIF格式
图像交换格式（GraphicsInterchange Format）的英文缩写
（3）BMP格式
位图（Bitmap）的英文缩写
(4) PNG格式
流式网络图形格式（Portable Network Graphic Format,PNG）名称来源于非官方的"PNG'S NOT GIF"读成"ping".
2.图像的基本标签
语法：<img src ="图片地址" alt="图像的替代文字" title="鼠标悬停时提示文字" width="图片宽度" height="图片高度"/>
四.超链接标签
1.超链接的基本用法
语法<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
网页中，当单击某个链接时，将指向万维网上的文档
万维网使用统一资源定位器（Uniform Resource Location,URl）的方式来定义一个链接地址
绝对路径：指向本站点外的文件
相对路径：指向本站点内的文件
"../"表示当前目录的上级目录，"../../"表示当前目录的上上级目录
2.超链接的应用场合
页面间链接
锚链接
（1）在页面的乙位置设置标记
语法：<a name="market">目标位置乙</a>
(2)设置甲位置链接路径href属性值为"#标记名"
语法：<a href="#market">当前位置甲</a>
功能性链接
mailto:电子邮件地址
3.行内元素和块元素
p,h1等元素不管自身内容多少，都独占一行，称为"块元素"
strong a 元素等宽度由自己内容决定其他元素排在它后面，称为"行内元素"。
扫一扫
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
