HTML基础

       HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是 由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。                                                                                                                                                   超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超 级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也 就是超越了普通文本文件）。 HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而 主体则包含所要说明的具体内容。需要说明的是， HTML不是编程语言，而是一种描述性的语言，用于描 述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这 些描述都是用 HTML 标签来描述的。下图为HTML的发展过程：

HTML的变迁过程主要是如下图：

一、HTML语法

语法结构：HTML标签

<标签 属性=“值”>内容</标签>

语法格式：HTML标签，如下图

注释：标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。标签可以有属性（align），属性必须有值(center )。 开始标签与结束标签中包含的内容称之为区域。标签不区分大小写，p和P是相同的。

二、HTML网页分类

一般分为2类，静态网页HTML和动态交互式网页

静态网页HTML是指在不修改网页源文件的情况下，网页无论在何时何地被浏览，都将显示相同的内容，网页的内容不会发生变化。静态网页文件的扩展名包括 html,htm 等。

动态交互式网页是指用户可以提供给网站信息，网站根据用户提交的信息响应用户的要求。如网上注册、论坛、调查等等。在这门课的最后部分我们会体验交互式网页，在第二学期将深入学习。交互式网页文件的扩展名包括 aspx，jsp，php，asp 等。

三、HTML常用的标签

html : 标签都是成对出现的 （单标签和双标签）

strong和b标签是加粗字体

em 和 i  标签是字体倾斜

br 标签------用来换行

hr标签------水平分割线，可以设置width和size

p标签：段落标签    两个相邻的p标签之间会空一行

align 属性 位置 left(默认值) right center

font标签 ------- 设置字体   

font-size标签------设置字体大小

color属性 ---- 设置颜色，颜色的表示法：第一种：英文单词，eg:red,blue ；第二种：#rrggbb 三原色 red green blue

sub标签 ------ 下标标签                    sup ------- 上标标签                       pre ------ 用来原样输出内容  span ------ 修饰文本的标签 ---- 标准的行内标签

hn ------- 标题标签 指的是h1,h2,h3,h4,h5,h6 ----------- n的取值只能是1-6 字体会越来越小 有加粗的 效果

div ------- 标准的块级标签------ 盒子布局 行内标签：不能自动换行，除非这一行内容铺满整个页面才会换行

span 块级标签：自动换行，独占一行 div hn p hr

form标签 一般会和input标签连用

action属性 ------ 跳转的路径 路径： 绝对路径：从盘符开始到文件为止的一个路径

相对路径：源文件相对于目标文件的相对路径

 method属性：用来明确表单提交的方式 get post ,默认值是get

name属性：表单的名称

get请求：不是特别安全，会把用户信息暴露在地址栏

四、表单元素标签

表单元素----- 文本框、密码框、按钮、下拉列表框

一般是由input textarea select 标签构成，都需要使用在form标签里面

1.input标签

语法格式：<input  type="表单类型" name="表单类型" value=“表单的值”>

type 的取值： text ----- 文本框           password ---- 密码框        submit ----- 提交按钮                                             radio ------ 单选按钮    checkbox ----- 多选按钮    reset ----- 重置按钮                                               button ----- 普通按钮    image ----- 图像按钮         file ------ 文件                                                         hidden ---- 隐藏域        email ---- 邮箱域               color ----- 颜色域                                                   date ----- 日期              time ----- 时间                    datetime-local ----- 日期+时间                               range ------ 进度条 

常见的属性： readonly ------ 只读 字段只可以读不能修改

checked ---- 默认选择        disabled ----- 表示禁用 不可以点击      2.autofocus ----- 默认光标的位置 required ----- 不能空白提交

2.select标签

下拉列表框 ------ 一般和option标签连用

属性：selected ------ 默认被选中的选项

multiple------- 以列表的形式展示

3.textarea标签

用来显示文本域

cols --------- 多少列，用于表示文本域的宽度

rows -------- 多少行，用于表示文本域的高度

五、常见的属性

a标签 ----- 超链接

vlink ----- 访问过的超文本链接的颜色

alink ---- 激活超文本链接的颜色

link ------ 超文本链接的颜色

text ---- 文本的颜色

bgcolor ----- 背景颜色

background ----- 背景图片

颜色表示法

 1、英文单词

2、#rrggbb

3、rgba() ----- a指的是透明度 字体跑马灯（弹幕） direction------表示滚动的方向，值可以是left，right，up，down，默认为left behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚 动） loop-----表示循环的次数，值是正整数，默认为无限循环 scrollamount-----表示运动速度，值是正整数，默认为6 scrolldelay----表示停顿时间，值是正整数，默认为0，单位似乎是毫秒 align-----表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色 height、width------表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认 width=100% height为标签内元素的高度 hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。 οnmοuseοver=this.stop() οnmοuseοut=this.start()------表示当鼠标移上区域的时候滚动停止，当 鼠标移开的时候又继续滚动。

a标签

表示的超文本链接标签 ------ 用来进行页面的跳转

href 属性放的是要跳转的路径

target属性：

锚点：使页面的展示到达某一个指定的地点

#+id名称进行链接

img标签

图片常见的格式：GIF JPG PNG BMP等

src ----- 图片的路径 （绝对路径和相对路径）

alt ----- 代替图片文本的内容（图片的路径错误或者因为浏览器的原因打不开这个图，用一个词或者一段话代替描述这个图片）

width ----- 宽度

height ---- 高度 单位都是px %

border ------ 边框 默认值是0

align ---- 位置 （图片和文字的位置）

取值：top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认对齐） right ----- 右对齐 left ------ 左对齐

title ----- 图片的标题 ------ 用来显示描述图片的文字

位图

usemap 属性

map标签 一般会和area标签进行连用

area标签 属性： shape ------- 鼠标点击的形状   coords ----- 表述鼠标点击形状的大小    href ----- 表示要跳转的路径

多媒体标签

audio ------ 音频

video ---- -- 视频

controls属性 ----- 表示的是播放器的组件

autoplay属性 ---- 表示的自动播放

loop属性 ------ 表示的是循环播放

表格布局

table标签 包含了thead tbody tfoot tr td标签

表格的边框

border -----设置表格边框

表格的宽度和高度

width ----- 宽度  height ----高度

表格的背景

bgcolor----背景颜色 background----背景图片

表格的位置（对齐）

align ---- 表示表格的位置 left center right

表格的间距和边距

cellpadding ---- 表示的是表格边距（表示单元格内元素距离单元格边框的距离）

cellspacing------ 表示的是表格的间距（表示的是单元格和单元格之间的距离）

列表标签

1.有序列表 ---- ol

type 属性 ----- 表示设置序号的种类 ，默认值是数值1

start属性 ------ 序号开始的位置

reversed属性----- 反序（降序）

2.无序列表 ----- ul

type属性 ----- 无序列表的样式 disc（默认值 实心圆）circle(空心圆) square(实心方块)

3.数 据 列 表 ------- dl

HTML5之后一个dl里面可以包含多个dt

多窗口框架

一个页面可以显示多个窗口 -------- framset 标签 --------- 不能和body标签连用

HTML5之后不支持这个标签，使用的是iframe标签

cols ------- 定义页面列方向的尺寸或者数目

rows ----- 行