WEB01_HTML

一.HTML介绍

1.什么是HTML
HTML的英文全称是Hyper Text Markup Language，即超文本标记语言，它是Internet上用于编写 页的主要标记语言。
超文本：比普通文本功能更加强大 ，页面内可以包含图片、链接等非文字内容。
标记语言：使用标签的方法将需要的内容包括起来，使用一组标签对内容进行描述的一门语言，它不是编程语言。
2.HTML能干什么
HTML用于编写 页。平时上 通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问 页时，可以通过“右键/查看源代码”看到具体的html代码。
页内容包含：HTML代码、CSS代码、JavaScript代码等内容。
●HTML代码：用于展示需要显示的数据
●CSS代码：使显示的数据更好看
●JavaScript代码：使整个页面显示的数据具有动画效果
页根据内容是否改变分为：静态页面、动态页面
●静态页面：编写之后在浏览器不再改变的 页。HTML就是用于编写静态页面的
●动态页面：会根据不同的情况展示不同的内容。
3.HTML语言特点
●HTML文件不需要编译，直接使用浏览器阅读即可
●HTML文件的扩展名是*.html或*.htm
●HTML结构都是由标签组成

1. 标签名预先定义好的，我们只需要了解其功能即可
2. 标签名不区分大小写
3. 通常情况下标签由开始标签和结束标签组成。例如：
4. 如果没有结束标签，建议以/结尾。例如：

●HTML结构包括两部分：头head和体body

二.HTML基本结构

1.语法和规范

1. 所有的 html 文件后缀名都是以.html 或者.htm 结尾的，建议使用.html 结尾。
2. 整个 html 文件分别由头部分和体部分组成
3. Html 标签都是由开始标签和结束标签组成。
4. Html 标签忽略大小写的，建议大家使用小写。

2.基本结构
一个完整的HTML文件由各种元素与标记组成，包括标题、段落、表格、文本和超链接等。下面是一个HTML文件的基本结构。

3.编写HTML页面
编写HTML页面有两者常用的方法：一种是利用操作系统自带的记事本编写；另一种是利用可视化 页制作软件（如DreamWeaver）编写，或者使用集成开发环境（IDE）Eclipse、HBuilder等编写。
4.常用HTML标记格式
简单划分为以下四种格式：

1. ：单一型，无设置值。例如：
2. ：单一型，有设置值。例如：
3. …标记名称>：对称型：无设置值。例如：
4. …标记名称>：对称型，有设置值。例如：

4.HTML 相关标签的学习
1）标题标签
标题标签使用,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示 特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。
h1一级标题代表重中之重，一般运用于 站标题或者头条新闻上。
h2二级标题主要出现在页面的主体内容的文章标题和栏目标题上。
h3三级标题一般出现在页面的边侧栏上。
页面层级关系不能太深，所有h4、h5和h6一般出现较少。
2）段落标签
在HTML中，使用p标记实现一个新段落，语法格式如下：

p标记中有一个属性align能够设置段落中文字的对齐方式

参数值：right，left(默认)，center
换行：
3）滚动标签
在HTML中，可以使用marquee标记让文字滚动，该标记有滚动方向、（direction）、滚动方式（behavior）、滚动次数（loop）、滚动速度（scrollamount）、滚动延迟（scrolldelay）、背景颜色（bgcolor）、宽度和高度等常用属性。语法格式如下：

其中，direction的值有up、down、left（默认）、right
behavior的值有scroll（循环滚动）、slide（只滚动一次）、alternate（来回交替滚动）
loop值为整数
scrollamount值为文字每次移动长度，以像素为单位
scrolldelay的单位为毫秒
4）字体标签
字体标签使用 必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)

5）水平线标签
水平线标签：

6）列表标签
（1）有序列表标记ol。有序列表中的项目采用数字或英文字母开头，通常个项目直接是由先后顺序的 。格式如下：
有序列表：

例如：

属性：type 有 5 个取值 start 起始位置，reverse：倒序
（2）无序列表标记ul。ul用于设置无序列表，在每个列表项目文字之前，以项目符 作为每条列表项的前缀，各个列表没有级别之分。格式如下：

例如：

无序列表的项目符 默认情况下是●，而通过type属性可以改变无序列表的项目符 ，避免项目符 的单调。type 有 3 个取值 disc实心圆、square方块、circle空心圆。
6）格式化标签
斜体：
粗体：

7）图像与多媒体标签
HTML图像是通过img标记插入的。img标记有多个属性，其中src是必需的，它指定要插入图像文件的位置与名称，语法格式如下：

src:
绝对路径：带有盘符的
相对路径：

1. 如果是同级，直接写文件名称或者./文件名称
2. 如果是上一级：…/文件名称(如果是多层，那么多写几个…/)
3. 如果是下一级：写目录名称/文件名称

width:设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息。

在 页中可以使用bgsound标记给 页添加背景音乐，格式如下：

在 页中可以使用embed标记将多媒体文件（如flash动画、mp3音乐、ASF视频等）添加到 页中，格式如下：

8）超链接标签
超链接的作用是建立一个位置到另一个位置的链接。利用超链接不仅可以进行 页间的访问，还可以使 页链接到其他相关的媒体文件上。
超链接标记a是一个非常重要的标记，它可以成对的出现在文档的任何位置，格式如下：

其中链接内容可以是文字内容，也可以是一张图片。
target属性值可以为_self、_blank、_top以及_parent，_self是默认值。
_blank表示目标页面会在一个新的空白窗口中打开；
_top表示目标页面会在顶层框架中打开；
_parent表示目标页面会在当前框架的上一层打开。

9）表格标签
一个表格由行、列和单元格构成，可以有多行，每行可以有多个单元格。创建表格要以标记开始，以标记结束，格式如下：

Table 属性：
边框：border
宽度：width
高度：height
背景颜色：bgcolor
边框与边框的空白：cellspacing
边框与内容的空白：cellpadding
居中显示：align
在一个表格中包含几组标记，就表示该表格有几行，在一行中有几组标记，就表示该行有几个单元格。
在制作表格时，可能需要某个单元格占据多列或多行：
colspan 单元格可跨列的列数
rowspan 单元格可跨行的行数
格式如下：

10）框架集结构标签
框架标签：标签，是多个窗口页面整合在一起的一个集合，每一个页面都是单独文档，需使用子标签来确定页面的位置。通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个可以嵌套使用。
●和不能共存
●cols:进行左右切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以 使用表示)
●rows: 进行上下切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可 以使用表示)
●一旦划 分区 域之后 ，我 们需 要对 具体的 区域 进行 内容 的填充 ，此 时需 要使 用 标签
框架子标签用于设置框架集中的一个页面
src:指定该区域显示的文件(路径)
name:它通常会结合超链接的 target 属性使用，来定义最终的显示位置
noresize：框架分割先不能移动
target：确定需要显示的页面在何处显示