HTML标记语言

1.HTML的语法

• 什么是HTML标记语言

表示网页信息的符号标记语言

特点

1. 可以设置文本的格式，比如标题、字号、文本颜色、段落等等

2. 可以创建列表

3. 可以插入图像和媒体

4. 可以建立表格

5. 超链接，可以使用鼠标点击超链接来实现页面之间的跳转

   • HTML的标记和他的属性

标记

1. HTML文档的保存格式

.html

.htm

.xhtml

1. 标记和被标记的内容构建出HTML文档

格式

<标记>

内容

2.html的基本结构

• 内容

解释

HTML文档的文档标记，也称为HTML开始标记

功能

这对标记分别位于网页的最前端和最后端

在最前端表示网页的开始

在最后端表示网页的结束

• 内容

解释

HTML文件头标记，也称为HTML头信息开始标记

功能

用来包含文件的基本信息，比如网页的标题、关键字，在内可以放、、等等标记

注意

在标记内的内容不会在浏览器中显示

• 内容

解释

HTML文件标题标记

功能

网页的“主题”，显示在浏览器的窗口的左上边

注意

网页的标题不能太长，要短小精悍，能具体反应页面的内容，标记中不能包含其他标记

• 内容

解释

HTML文档的主体标记

功能

…是网页的主体部分，在此标记之间可以包含如

、

 

、
、

---

等等标记，正是由这些内容组成了我们所看见的网页

body标记的常见属性

1. bgcolor

设置背景颜色

1. text

设置文本颜色

1. link

设置连接颜色

1. vlink

已经访问了的链接颜色

5. alink正在被点击的链接颜色 < body alink = “ red ” > * < meta >内容 解释页面的元信息（meta-information）功能提供有关页面的元信息- 信息），比如针对搜索引擎和更新频度的描述和关键词。必须的属性内容值：some_text定义与http-equiv或名称属性相关的元信息常见的属性 常用的名称属性 1。作者 2.关键词 3.描述 其他把内容属性关联到一个名称。

(1.author, 2.keywords, 3.description, 6.others)

比如描绘出网页的关键词：

注意meta标记必须放在head元素里面

3.文档设置标记

• 格式标记

强制换行标记

让后面的文字、图片、表格等等，显示在下一行

换段落标记

换段落，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落就要用

,

段落中也可以包含

段落！

居中对齐标记

让段落或者是文字相对于父标记居中显示

预格式化标记

保留预先编排好的格式

列表项目标记

每一个列表使用一个

• 标记

无序列表标记

声明这个列表没有序号 有序列表标记 可以显示特定的一些顺序
• 格式
• 有序列表的type属性值

1

阿拉伯数字1.2.3等等，默认type属性值

A

大小字母A、B、C等等

a

小写字母a、b、c等等

Ⅰ

大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等

ⅰ

小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

• value

指定一个新的序列数字起始值

• 列表可以进行嵌套

定义型列表

使用场合

对列表条目进行简短的说明

格式

软件说明：

简单介绍软件的功能及基本应用

软件界面

用于选择软件的外观

1. ---

水平分割线标记

段落之间的分割线

分区显示标记，也称之为层标记

常用来编排一大段的HTML段落，也可以用于格式化表，和

很相似

层可以多层嵌套使用

• 文本标记

  1. hn

标记标题教育学习语言文字6个级别中，n的范围为1〜6，不同级别对应显示大小不同的标题，H1最大，H6最小2。字体字体设置标记设置字体的格式*三个常用属性1。size（字体大小）< font size = “ 14px ” > 2.颜色（颜色）< font color = “ red ” > 3. face（字体）< font face = “微软雅黑” > 4. b 粗字体标记5 。我斜字体标记6。子文字下标字体标记7。燮文字上标字体标记

1. tt

打印机字体标记

1. cite

引用方式的字体，通常是斜体

1. em

表示强调，通常显示为斜体字

1. strong

表示强调，通常显示为粗体字

1. small

小型字体标记

1. big

大型字体标记

1. u

下划线字体标记

 alt="属性值">

• 标记的属性

  1. src属性

作用

指定我们要加载的图片的路径和图片的名称以及图片格式

1. width属性

作用

指定图片的宽度，单位px、em、cm、mm

1. height属性

作用

指定图片的高度，单位px、em、cm、mm

1. border属性

作用

指定图标的边框宽度，单位px、em、cm、mm

1. alt属性

作用1

当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字

作用2

如果图像没有下载或者加载失败，会用文字来代替图像显示

作用3

搜索引擎可以通过这个属性的文字来抓取图片

• 注意

  1. 为单标记，不需要使用闭合

  2. 在加载图像文件的时候，文件的路径或者文件名文件格式错误，将无法加载图片

5.超链接的使用

• 基本语法

链接文字或者图片

属性

1. href属性

链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等等

1. target属性

   • 作用

定义超链接的打开方式

• 属性值

  1. _blank

在一个新的窗口中打开链接

1. _seif(默认值)

在当前窗口中打开链接

1. _parent

6.表格

• 表格的基本结构

  1. 标记

• 基本格式

7.HTML框架

1.什么是框架？

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

2.划分框架标记

1.语法格式

….

2.属性

1.cols

使用“像素数”和%分割左右窗口，“*”表示剩余部分

如果使用“”，“”表示框架平均分成2个

如果使用“”，“”，“*”表示框架平均分成3个

2.rows

使用“像素数”和%分割上下窗口，“*”表示剩余部分

3.frameborder

指定是否显示边框，0不显示，1显示

4.border

设置边框的大小，默认值5像素

3.子窗口标记

标记是一个单标记，该标记必须放在中使用，在中设置了几个窗口，就必须对应使用几个框架，而且还必须使用src属性指定一个网页

属性

1.src

8.表单设计

1.表单标记

… 定义表单的开始位置和结束位置，表单提交时的内容就是表单中的内容 基本格式 …

常用属性

1.name

表单名称

2.method

传送数据的方式，分为post和get两种方式

1.get方式

get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性

2.post方式

post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制

3.action

表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其属性为”no“

4.enctype

设置表单的资料的编码方式

5.target

和超链接的属于类似，用来指定目标窗口

2.文本域和密码

标记

标记没有结束标记

基本语法

属性介绍

1.type属性

type属性有两个值

1.text

当type=”text”时，表示一个文本输入域

2.password

当type=”password”时，表示一个密码输入域

2.name属性

定义控件的名称

3.value属性

初始化值，打开浏览器时，文本框中的内容

4.size属性

设置控件的长度5.maxlength属性输入框中最大允许输入的字符数3.提交，重置，普通按钮1.提交按钮当< input type = “ submit ” >时，为提交按钮2.重置按钮当< input type = “ reset ” >时，为重置按钮3.普通按钮当< input type = “ button ” >时，为普通按钮4，单选框和复选框1.单选按钮当< input type = “ radio ” >时，为单选按钮2。复选框当

时，为复选框

3.注意

单选框和复选框都可以使用”cheked“属性来设置默认选中项

5、隐藏域

当时，为隐藏表单域

6、多行文本域

用法，使用标记可以实现一个，能够输入多行文本的区域

语法格式

… …

rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

7、菜单下拉列表域

标记

1.语法格式

选项1

选项2

选项3

… … …

2.属性

1.multiple属性

multiple属性不用赋值，其作用是，表示用可以多选的下来列表，如果没有这个属性就只能单选

2.size属性

设置列表的高度

3.name属性

定义这个列表的名称

3.option标记

标记用来指定列表中的一个选项，需要放在之间

值

1.value

给选项赋值，指定传送到服务器上面的值

2.selected

指定默认的选项