HTML(Hyper Text Markup Language),是网页超文本标记语言,不是编程语言,而是一款描述性的标记语言,用于描述超文本中内容的显示方式。
HTML基本标记
一个完整的HTML文档必须包括3个部分:一个由元素定义的文档版本信息,一个由
定义各项声明的文档头部和一个由定义的文档主体部分。作为各种声明信息的包含元素出现在文档顶端,并且要先于出现。而用来显示文档主体内容。认识HTML标记
标记:它放在HTML的开头,表示网页文档的开始。
标记:出现在文档的起始部分,标明文档的头部信息,一般包括标题和主题信息,其结束标记指明文档标题部分的结束。标记:用来指明文档的主体区域,网页所要显示的内容都放在这个区域。保存:用记事本编辑语言之后,保存的扩展名为.html或.htm
一般用Dreamweaver编写HTML文件
在网页中单击鼠标右键——查看源文件,即可查看代码。
正文
1、HTML头部标记head
语法:
……说明:
元素的作用范围是整篇文档。元素中可以有元信息定义、文档样式表定义和脚本等信息,定义在HTML语言头部的内容往往不会直接显示在网页上。2、标题标记title
语法:
说明:即页面标题
3、元信息标记meta
3.1设置页面关键字
语法:
说明:在搜索引擎中,检索信息是通过输入关键字来实现的。该语法中,name
为属性名称,这里是keywords.也就是设置网页的关键字属性,而在content中则定义具体的关键字。
3.2设置页面说明
语法:
说明:在content中定义具体的描述语言,页面说明也是为了便于搜索引擎的查找,它用来详细说明网页的内容,页面说明在网页中不显示出来。
3.3定义编辑工具
语法:
举例:
3.4设置作者信息
语法:
3.5设置网页文字及语言
语法:
说明:http-equiv用于传送HTTP通信协议的标头,而在content中才是具体的属性值。Charset用于设置网页的内码语系,也就是字符集的类型,国内常用的是GB码,charset往往设置为gb2312即简体中文。英文是ISO-8859-1字符集。
3.6设置网页的定时跳转
语法: 举例:
20秒后自动跳转
默认时跳转时间以秒为单位,refresh表示网页的刷新。
4、网页主体标记body
4.1网页背景色bgcolor
语法:
举例:
4.2网页背景图片background
语法:
举例:
图片的地址可以是绝对的,也可以是相对的,默认的为平铺。
4.3文字颜色text
语法:
在没有对文字的颜色进行单独定义时,这一属性可以对页面中所有的文字起作用。
4.4链接文字属性link、alink、vlink
语法:
举例:
Alink是正在访问的文字颜色,vlink访问后的链接文字的颜色
4.5边距margin
语法:
说明:默认情况下以像素为单位,一般设置为0值,这样页面看上去不会有太多空白。
5、页面注释标记
语法:
说明:插入描述性文本,用来解释该代码或提示其他信息。注释不会显示在浏览器的页面中。
文字与段落标记
1、标题字
1.1标题字标记h
语法:
……(此处在编写过程中不能省略)
说明:该语法中有六个级别的标题,headline6字号最小。
1.2标题字对齐属性align
语法:
举例:
2、文本基本标记
标记用来控制字体、字号、颜色等属性。
2.1字体属性face
语法:……
举例:
雫
说明:P为段落标记
2.2字号属性size
语法:……
举例:
雫
说明:字号1-7的整数,代表字体大小的绝对字号。-4-+4的整数,字体相对于3号放大和缩小的字号。
2.3颜色属性color
语法:……
举例:
雫
3、文本格式化标记3.1粗体标记b、strong
语法:加粗的文字 (strong的用法同b)
3.2斜体标记i、em、cite(用法同上,略)
3.3上标标记sup
举例:a2+b2=(a+b)2-2ab
翻译:即a^2+b^2=(a+b)^2-2ab
3.4下标标记sub(如,用于化学方程式,用法同上,略)
3.5大号字体标记big、小号字体标记small、下划线标记u(略)
4、段落标记
4.1段落标记p
语法:
段落文字
说明:可以没有结束标记
活用:邪恶使一个人变聪明
4.2换行标记br
举例:连续的多个
标记能实现多个换行。
我们将血流成河铸成的地狱,
命名为了世界。
4.3不换行标记nobr
语法:< nobr>不换行文本
5、水平线
5.1插入水平线hr
语法:
说明:单独一行
5.2水平线宽度width(像素值) 高度size(像素值) 水平线去掉阴影noshade 水平线颜色color 水平线排列align
举例:
6、其他标记
6.1插入空格
语法:
说明:一个 代表一个半角空格,可多次连续使用此符号。
6.2插入特殊符号
1、图像格式
2.2 图像的源文件src(见照片)
2.3图像的提示文字(见照片)
2.4图像的宽度和高度(见照片)
2.5、2.6图像的边框图像的垂直边距(见照片)
2.7图像的水平间距(见照片)
2.8图像的排列(见照片)
3、图像的超链接(见照片)
超链接1
超链接2
超链接3
超链接4
使用列表
1、认识列表标记
HTML列表共有3种类型:无序列表,项目符号由几个符号构成。有序列表,项目符号由字母或数字进行排序。定义列表,它作用产生条件和描述的双重列表,可以对列表进行更为灵活的定义。
2、有序列表
有序列表在列表中将每个元素按数字或字母顺序标号创建一个有序列表时,以打开和关闭
2.1有序列表ol
语法:
……
说明:
2.2有序列表的序号类型type
语法:
……
2.3有序列表的起始数值start
语法
……
说明:该语法中,起始数值用1、2、3、4、5……数字表示,但是同样可以对字母和罗马数字起作用。
举例:
3、无序列表
3.1无序列表标记
3.2无序列表的类型type
注:不能将数字列表作为一个无序列表的一部分或附属列表,却能够使用嵌套列表项产生于数字列表项的下一层。
……
3.3目录列表标记
说明:用法同上,目录列表一般用来创建多列的目录列表,它在浏览器中的显示效果与无序列表相同,因为它的功能也可以通过无序列表来实现。
3.4定义列表标记
定义列表由两部分组成:定义条件和定义描述。定义列表的英文全称definition list,
语法:
……
举例:
显示效果:
CSS
CSS就是……,中文翻译为“层叠样式表”,
3.5菜单列表标记