一、HTML概述

• htyper text markup language  即超文本标记语言。
  
• 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
  
• 标记语言: 标记（标签）构成的语言。
  

1、网页的组成

一个网页一般由两部分组成即：

• HTML（Hypertext Markup Language）
  
• 和CSS（Cascade Style Sheets）
  

HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
2、HTML文档的基本格式

1.         HTML5的基本格式

复制代码

（1）.标记

位于文档最前面，用于向浏览器说明当前文档使用的HTML标准。
（2）.标记

也称为根标记，用于告知浏览器其自身是一个HTML文档，标记标志着HTML文档的开始，标记着HTML文档的结束。
（3）.标记

用于定义HTML文档的头部信息，称为头部标记。主要用来封装其他位于文档头部的标记。
①.：设置页面标题标记
用于定义HTML页面的标题，即给网页取一个名字。

1. 个人简介网

复制代码

②.：定义页面元信息标记
用于定义页面的元信息,可重复出现在头部标记中，是一个单标记。
常见的几种设置，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
#1.   
定义编码格式为utf-8

#2.
可以为搜索引擎提供信息。

• name="keywords":设置网页关键字，如个人简介网页关键字的设置。
  

1. [/code]
2. [list]
3. [*]name="description":设置网页描述，如个人简介网页描述信息的设置。
4. [/list]
5. [code]

复制代码

• name="author":设置网页作者。
  

1. [/code]
2. #3.
3. 设置服务器发送给浏览器的http头部信息，为刘安琪显示页面提供相关的参数。
4. [list]
5. [*]设置字符集。
6. [/list][code]

复制代码

• 设置页面自动刷新与跳转。
  

1. [/code]③.：引用外部文件标记
2. 常用属性：
3. [table][tr][td]属性名[/td][td]  常用属性值[/td][td]　　　　　　　　　　　　　　　　描述[/td][/tr][tr][td] href[/td][td]   　 URL[/td][td]指定引用外部文档的地址[/td][/tr][tr][td]  rel[/td][td]　stylesheet[/td][td]指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表[/td][/tr][tr][td=1,2] type[/td][td]　 text/css[/td][td]引用外部文档的类型为CSS样式表[/td][/tr][tr][td]text/javascript[/td][td]引用外部文档的类型为JavaScript脚本[/td][/tr][/table]
9. 例如：使用标记引用外部CSS样式表：
11. [code]

复制代码

④.:内嵌样式标记
用于为HTML文档定义样式信息，在HTML中使用style标记时，常常定义其属性为type,相应属性值为text/css。
例如：

1.                         style标记的使用                    h2{color:blue;}          p{color:yellow;}                           [size=5]我的个人简介[/size]
3.     我是一名来自河南洛阳的男孩，今年20岁！
4.    

复制代码

（4）.标记


用于定义HTML文档索要显示的内容,也称为主体标记。标记中的信息才是最终要显示在网页上的。
body里面分为两类标签：块级标签和内联标签。

　　块级标签：[table]<ol><ul>
　　内联标签：<img>
块级标签元素的特点
　　① 总是在新行上开始；
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素
内联标签元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下
　　① 设置宽度width 无效。
　　② 设置高度height 无效，可以通过line-height来设置。
　　③ 设置margin 只有左右margin有效，上下无效。
　　④ 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
#1.基本标记：
①.标题标记：~
通常用来设置标题,从~重要性递减。
基本语法格式为：

1. 标题文本

复制代码

align为可选属性，用于指定标题的对齐方式。
属性值有：
　　left:设置标题文字左对齐(默认值)
　　center:设置标题文字居中对齐
　　right:设置标题文字右对齐
注：一个页面中只能使用一个标记，通常用于LOGO部分。
代码示例：

1.         标题标记的使用     [size=6]一级标题 居中对齐[/size]
3.      [size=5]二级标题[/size]
5.      [size=4]三级标题[/size]
7.      [size=3]四级标题[/size]
9.      [size=2]五级标题[/size]
11.      [size=1]六级标题[/size]

复制代码

②.段落标记：
用于定义一个独立的段落，每个段落独占一行，并且段落之间回有一定的间隙。
语法格式为：

1. 段落文本

复制代码

代码示例：

1.         段落标记的用法     [align=center]这是我的个人简介[/align]
2.      我叫刘瑛奇，是一个大二学生，学的是计算机专业，是一个开朗热爱学习的男孩。
3.      [align=right]刘瑛奇  2019.12.1[/align]

复制代码

③.功能标记
　　<b> <strong>: 加粗标签.
　　<strike>: 为文字加上一条中线.
　　<i> <em>: 文字变成斜体.
　　和: 上角标 和 下角表.
　　
:换行.
　　:水平线
代码示例：

1.         功能标记的使用    [b]使用p标记前加粗文字[/b]   
2.     [b]使用strong标记加粗文字[/b]        原价：<strike>299 </strike> 现价：9.9
3.     [i]这是一段斜体字[/i]
4.      2n 2的n次方
5.     h2o 水的分子表达式
7. 　    < 小于号
8.     > 大于号
9.     &copy;
10.     &reg;

复制代码

#2.图像标记：
目前网页上常用的图像格式主要有GIF、JPG和PNG三种，具体区别如下。
●GIF格式
特点：
　　支持动画，是一种无损的图像格式。
　　支持透明，只能处理256中颜色。
　　常用于LOGO、小图标及其它色彩相对单一的图像。
●PNG格式
特点：
　　体积更小，支持alpha透明。
　　不支持动画。
●JPG格式
特点：
　　可以保存超过256种颜色的图像。
　　是一种有损压缩的图像格式。
　　常用于较大的图片的保存。
1、图像标记

<img />

　　src: 要显示图片的路径.
　　alt: 图片没有加载成功时的提示.
　　title: 鼠标悬浮时的提示信息.
　　width: 图片的宽
　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
　　vspace：图像顶部和底部的空白(垂直边距)
　　border:图像边框的宽度
　　hspace:图像左侧和右侧的空白(水平边距)
　　align:设置对齐方式
　　　　left:将图像对齐到左边
　　　　right:将图像对齐到右边
　　　　top:将图像的顶端和文本的第一行文本对齐，其他文字居图像下方
　　　　middle:将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
　　　　bottom:将图像的底部和文本的第一行文字对齐，其他文字居图像下方

1.         图像标记的使用    [img]http://192.168.1.133:88/iotbbs/my.gif[/img]    [img=100,100]http://192.168.1.133:88/iotbbs/my.gif[/img]    [img]http://192.168.1.133:88/iotbbs/my.gif[/img]

复制代码

注意：
(1)、HTML不赞成图像标记使用border、vspace、hspace及align属性。
(2)、网页制作中、装饰性的图像都不要直接插入

<img/>

标记，而是通过CSS设置背景图像来实现。
相对路径和绝对路径
①.绝对路径
就是网页上的文件或目录咋硬盘上的真正路径。如："D:\HTML5+CSS3\images\logo.gif"。
注：网页中不推荐使用绝对路径。
②.相对路径
就是相对于当前文件的路径。
分为三种：
●图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可，如"

"
●图像文件位于html文件的下一级文件夹:输入文件夹名和文件名，之间用"/"间隔，如

●图像文件位于html文件的上一级文件夹:在文件名之前加入"./",如果是上两级使用"../../"以此类推。如

#3.超链接标签(锚标签):
　　href:要连接的资源路径 格式如下: href="http://www.baidu.com"
　　target:用于指定链接页面的打开方式。
　　　　_self:默认值，在原窗口中打开。
　　　　_blank:在新窗口中打开。
　　name: 定义一个页面的书签.
　　用于跳转 href : #书签名称.

1.         超链接标记的使用    [url=http://www.itcast.cn/]传智播客[/url]    target="_self"原窗口中打开
2.     [url=http://www.baidu.com/]百度[/url]    taget="_blank"新窗口打开

复制代码

锚点链接：
通过创建锚点链接，用户能够快速定位到目标的内容。
创建步骤：
　　①.使用"链接文本"创建链接文本。
　　②.使用相应的id名称注跳转目标的位置。

1.         锚点链接的使用    课程介绍：    <ul>        [url=http://192.168.1.133:88/iotbbs/#one]平面广告设计[/url]
2.         [url=http://192.168.1.133:88/iotbbs/#two]网页设计与制作[/url]
3.         [url=http://192.168.1.133:88/iotbbs/#three]Flash互动广告动画设计[/url]
4.         [url=http://192.168.1.133:88/iotbbs/#four]用户界面设计[/url]
5.     <ul>    [size=4]平面广告设计[/size]
7.     课程涵盖Photoshop图像处理、I1lustrator图形设计、平面广告创意设计、字体设计与标志设计。
8.    
19.     [size=4]网页世界与制作[/size]
21.     课程涵盖DIV+CSS实现Web标准布局、Dreamweaver快速网站建设、网页版式构图与设计技巧、网页配色理论与技巧。
22.    
33.     [size=4]Flash互动广告动画设计[/size]
35.     课程涵盖Flash动画基础。Flash高级动画、Flash互动广告设计、Flash商业网站设计。
36.    
47.     [size=4]用户界面设计[/size]
49.     课程涵盖JavaScript编程基础、JavaScript网页特效制作、JQuery编程基础、JQuery网页特效制作。

复制代码

免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！

一、HTML概述

• htyper text markup language  即超文本标记语言。
  
• 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
  
• 标记语言: 标记（标签）构成的语言。
  

1、网页的组成

一个网页一般由两部分组成即：

• HTML（Hypertext Markup Language）
  
• 和CSS（Cascade Style Sheets）
  

HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
2、HTML文档的基本格式

1.         HTML5的基本格式

复制代码

（1）.标记

位于文档最前面，用于向浏览器说明当前文档使用的HTML标准。
（2）.标记

也称为根标记，用于告知浏览器其自身是一个HTML文档，标记标志着HTML文档的开始，标记着HTML文档的结束。
（3）.标记

用于定义HTML文档的头部信息，称为头部标记。主要用来封装其他位于文档头部的标记。
①.：设置页面标题标记
用于定义HTML页面的标题，即给网页取一个名字。

1. 个人简介网

复制代码

②.：定义页面元信息标记
用于定义页面的元信息,可重复出现在头部标记中，是一个单标记。
常见的几种设置，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
#1.   
定义编码格式为utf-8

#2.
可以为搜索引擎提供信息。

• name="keywords":设置网页关键字，如个人简介网页关键字的设置。
  

1. [/code]
2. [list]
3. [*]name="description":设置网页描述，如个人简介网页描述信息的设置。
4. [/list]
5. [code]

复制代码

• name="author":设置网页作者。
  

1. [/code]
2. #3.
3. 设置服务器发送给浏览器的http头部信息，为刘安琪显示页面提供相关的参数。
4. [list]
5. [*]设置字符集。
6. [/list][code]

复制代码

• 设置页面自动刷新与跳转。
  

1. [/code]③.：引用外部文件标记
2. 常用属性：
3. [table][tr][td]属性名[/td][td]  常用属性值[/td][td]　　　　　　　　　　　　　　　　描述[/td][/tr][tr][td] href[/td][td]   　 URL[/td][td]指定引用外部文档的地址[/td][/tr][tr][td]  rel[/td][td]　stylesheet[/td][td]指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表[/td][/tr][tr][td=1,2] type[/td][td]　 text/css[/td][td]引用外部文档的类型为CSS样式表[/td][/tr][tr][td]text/javascript[/td][td]引用外部文档的类型为JavaScript脚本[/td][/tr][/table]
9. 例如：使用标记引用外部CSS样式表：
11. [code]

复制代码

④.:内嵌样式标记
用于为HTML文档定义样式信息，在HTML中使用style标记时，常常定义其属性为type,相应属性值为text/css。
例如：

1.                         style标记的使用                    h2{color:blue;}          p{color:yellow;}                           [size=5]我的个人简介[/size]
3.     我是一名来自河南洛阳的男孩，今年20岁！
4.    

复制代码

（4）.标记


用于定义HTML文档索要显示的内容,也称为主体标记。标记中的信息才是最终要显示在网页上的。
body里面分为两类标签：块级标签和内联标签。

　　块级标签：[table]<ol><ul>
　　内联标签：<img>
块级标签元素的特点
　　① 总是在新行上开始；
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素
内联标签元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下
　　① 设置宽度width 无效。
　　② 设置高度height 无效，可以通过line-height来设置。
　　③ 设置margin 只有左右margin有效，上下无效。
　　④ 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
#1.基本标记：
①.标题标记：~
通常用来设置标题,从~重要性递减。
基本语法格式为：

1. 标题文本

复制代码

align为可选属性，用于指定标题的对齐方式。
属性值有：
　　left:设置标题文字左对齐(默认值)
　　center:设置标题文字居中对齐
　　right:设置标题文字右对齐
注：一个页面中只能使用一个标记，通常用于LOGO部分。
代码示例：

1.         标题标记的使用     [size=6]一级标题 居中对齐[/size]
3.      [size=5]二级标题[/size]
5.      [size=4]三级标题[/size]
7.      [size=3]四级标题[/size]
9.      [size=2]五级标题[/size]
11.      [size=1]六级标题[/size]

复制代码

②.段落标记：
用于定义一个独立的段落，每个段落独占一行，并且段落之间回有一定的间隙。
语法格式为：

1. 段落文本

复制代码

代码示例：

1.         段落标记的用法     [align=center]这是我的个人简介[/align]
2.      我叫刘瑛奇，是一个大二学生，学的是计算机专业，是一个开朗热爱学习的男孩。
3.      [align=right]刘瑛奇  2019.12.1[/align]

复制代码

③.功能标记
　　<b> <strong>: 加粗标签.
　　<strike>: 为文字加上一条中线.
　　<i> <em>: 文字变成斜体.
　　和: 上角标 和 下角表.
　　
:换行.
　　:水平线
代码示例：

1.         功能标记的使用    [b]使用p标记前加粗文字[/b]   
2.     [b]使用strong标记加粗文字[/b]        原价：<strike>299 </strike> 现价：9.9
3.     [i]这是一段斜体字[/i]
4.      2n 2的n次方
5.     h2o 水的分子表达式
7. 　    < 小于号
8.     > 大于号
9.     &copy;
10.     &reg;

复制代码

#2.图像标记：
目前网页上常用的图像格式主要有GIF、JPG和PNG三种，具体区别如下。
●GIF格式
特点：
　　支持动画，是一种无损的图像格式。
　　支持透明，只能处理256中颜色。
　　常用于LOGO、小图标及其它色彩相对单一的图像。
●PNG格式
特点：
　　体积更小，支持alpha透明。
　　不支持动画。
●JPG格式
特点：
　　可以保存超过256种颜色的图像。
　　是一种有损压缩的图像格式。
　　常用于较大的图片的保存。
1、图像标记

<img />

　　src: 要显示图片的路径.
　　alt: 图片没有加载成功时的提示.
　　title: 鼠标悬浮时的提示信息.
　　width: 图片的宽
　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
　　vspace：图像顶部和底部的空白(垂直边距)
　　border:图像边框的宽度
　　hspace:图像左侧和右侧的空白(水平边距)
　　align:设置对齐方式
　　　　left:将图像对齐到左边
　　　　right:将图像对齐到右边
　　　　top:将图像的顶端和文本的第一行文本对齐，其他文字居图像下方
　　　　middle:将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
　　　　bottom:将图像的底部和文本的第一行文字对齐，其他文字居图像下方

1.         图像标记的使用    [img]http://192.168.1.133:88/iotbbs/my.gif[/img]    [img=100,100]http://192.168.1.133:88/iotbbs/my.gif[/img]    [img]http://192.168.1.133:88/iotbbs/my.gif[/img]

复制代码

注意：
(1)、HTML不赞成图像标记使用border、vspace、hspace及align属性。
(2)、网页制作中、装饰性的图像都不要直接插入

<img/>

标记，而是通过CSS设置背景图像来实现。
相对路径和绝对路径
①.绝对路径
就是网页上的文件或目录咋硬盘上的真正路径。如："D:\HTML5+CSS3\images\logo.gif"。
注：网页中不推荐使用绝对路径。
②.相对路径
就是相对于当前文件的路径。
分为三种：
●图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可，如"

"
●图像文件位于html文件的下一级文件夹:输入文件夹名和文件名，之间用"/"间隔，如

●图像文件位于html文件的上一级文件夹:在文件名之前加入"./",如果是上两级使用"../../"以此类推。如

#3.超链接标签(锚标签):
　　href:要连接的资源路径 格式如下: href="http://www.baidu.com"
　　target:用于指定链接页面的打开方式。
　　　　_self:默认值，在原窗口中打开。
　　　　_blank:在新窗口中打开。
　　name: 定义一个页面的书签.
　　用于跳转 href : #书签名称.

1.         超链接标记的使用    [url=http://www.itcast.cn/]传智播客[/url]    target="_self"原窗口中打开
2.     [url=http://www.baidu.com/]百度[/url]    taget="_blank"新窗口打开

复制代码

锚点链接：
通过创建锚点链接，用户能够快速定位到目标的内容。
创建步骤：
　　①.使用"链接文本"创建链接文本。
　　②.使用相应的id名称注跳转目标的位置。

1.         锚点链接的使用    课程介绍：    <ul>        [url=http://192.168.1.133:88/iotbbs/#one]平面广告设计[/url]
2.         [url=http://192.168.1.133:88/iotbbs/#two]网页设计与制作[/url]
3.         [url=http://192.168.1.133:88/iotbbs/#three]Flash互动广告动画设计[/url]
4.         [url=http://192.168.1.133:88/iotbbs/#four]用户界面设计[/url]
5.     <ul>    [size=4]平面广告设计[/size]
7.     课程涵盖Photoshop图像处理、I1lustrator图形设计、平面广告创意设计、字体设计与标志设计。
8.    
19.     [size=4]网页世界与制作[/size]
21.     课程涵盖DIV+CSS实现Web标准布局、Dreamweaver快速网站建设、网页版式构图与设计技巧、网页配色理论与技巧。
22.    
33.     [size=4]Flash互动广告动画设计[/size]
35.     课程涵盖Flash动画基础。Flash高级动画、Flash互动广告设计、Flash商业网站设计。
36.    
47.     [size=4]用户界面设计[/size]
49.     课程涵盖JavaScript编程基础、JavaScript网页特效制作、JQuery编程基础、JQuery网页特效制作。

复制代码

免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！