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.文档设置标记

• 格式标记

  1. 
     

强制换行标记

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

换段落标记

换段落，由于多个空格和回车在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

  指定默认的选项