Html标记语言.docx
《Html标记语言.docx》由会员分享，可在线阅读，更多相关《Html标记语言.docx（16页珍藏版）》请在冰豆网上搜索。
Html标记语言
一、HTML基础
Html的英文全称是HyperTextMarkupLanguage，它是网页超文本标记语言，也是全球广域网上描述网页内容和外观的标准。
它本身不会在浏览器中显示，而是经过浏览器的解释和编译，才能正确的反应HTML标记语言的内容。
（记住HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用HTML标记来完成的。
）
Html最基本的语法是：
<标记符>内容，标记符通常都是成对使用的。
有一个开头标记和一个结束标记。
结束标记只是在开头标记的前面加一个斜杠“/”，当浏览器收到HTML文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。
二、HTML结构
1、标签：
是最基础的一对标记，所有的Html元素都要放在这对标签中。
Html标记不区分大小写。
2、
标记：
存放头部信息元素，例如网页的关键字，网页的标题，网页的作者等信息。
3、
标记：
指明文档的主体区域，网页上所要显示的内容都存在这个标记内。
比如，表格、图片、列表、文字段落等。
三、编写方法
1、利用记事本来编写
2、利用开发工具来编写。
例如Dreamweaver，可以快速方便的开发HTML，但不利于初学者学习。
四、标签。
1、设置网页标题。
标记：
网页的标题。
网页的标题一般是显示在IE浏览器左上方的标题栏位置，不是作为网页内容显示在网页中的，所以把这部分内容定义在网页的头部里。
标题一般是用来说明页面的用途，它显示在浏览器的标题栏中。
2、
网页的主体部分，也就是要在浏览器中显示的所有信息，都要放在body标签内部。
而通过body标签很多属性可以设置网页的背景、文字属性和链接样式。
bgcolor：
body标签使用bgcolor属性来定义整个网页的背景颜色，属性值是十六进制的颜色值。
background属性：
设置网页背景图。
text属性：
设置文字的颜色。
link：
超链接颜色。
vlink：
已访问超链接颜色。
alink：
正在访问的超链接颜色。
绝对路径就是指对某一个地点的详细描述信息。
（我们制作完成网页之后，都是要放在Ｗeb服务器上才能被互联网的用户访问的，一般我们都是购买的Web空间，根本不知道网页会被放在服务器的哪个磁盘分区上，所以用绝对路径会很容易出错）
相对路径就是一个物体相对于另外一个物体来说，所存在的位置。
３、设置文字格式的标签
文字是网页中最基本的信息载体，文字通过不同的排版方式、不同的设计风格排列在网页上，给我们提供了丰富的信息。
在网页中添加文字并不困难，主要的问题是如何编排这些文字，以及控制这些文字的显示方式，让文字看上去编排有序、整齐美观。
（１）标题字标签：
６个级别
……..
H是英文headline的简称，意思是大字标题。
align属性：
设置标题位置的属性。
left/center/right
（２）font标签：
设置文字的字体、字号和文字颜色。
①face属性：
设置不同的字体。
设置的字体效果必须在浏览器中安装相应的字体后才可以正确的浏览，否则有些特殊的字体会被浏览器中普通的字体所代替。
因此，在网页中尽量减少使用过多的特殊字体，以免用户在浏览时无法看到正确的效果。
face属性直接接受字体样式名称作为属性值，比如“宋体”、“黑体”等。
②size属性：
设置普通文字的字号。
size属性有２种，从１到７的整数，代表字体大小的绝对字号，从－6到+6的整数，则是字体相对于３号字体大小的放大和缩小字号。
③color属性：
文字属性。
（３）段落标记：
（４）粗体标签：
（５）斜体标签：
（６）上标标签：
可以成对出现在一段文字的任何地方，并且允许嵌套使用，因此如果在sup标签里再使用sup标签，则里面的sup标签会变成上标的上标。
（7）下标标签：
（8）big标签
Big标记用来增大文本中字号的大小，它所包含的文字都会在原来的字号上增加一级。
如果有多个big标签作用于同一个文本，那么字号会被逐级放大。
（9）small标签
和big标签正好相反，被small标记所包含的文字，会比普通的文字小一级。
４、常用的段落标记
（１）
标记
一个
标签表示起始一个段落，这个标签没有结束标签，每一个新的段落标记开始的同时，也意味着一个段落的结束。
align属性。
（２）
换行标记
作用是不另起一段的情况下将当前文本强制换行。
（３）标记
在网页中如果某一行的文本过长，浏览器会自动对这段文字进行换行处理，此时，可以使用标记来禁止自动换行。
（４）
标签
水平线标签。
1width属性：
设置水平线的宽度。
2size属性：
设置水平线的高度。
3color属性：
设置水平线的颜色。
4align属性：
设置水平线的对齐方式。
5noshade属性：
去掉水平线的阴影。
５、插入特殊符号
一般情况下，特殊符号的代码由前缀“&”、字母名称和后缀“；”组成，使用方法与空格符号类似，想在哪插入特殊符号，就在哪个位置输入特殊符号的代码就可以了。
空格
6、图像
网页中使用的图像格式：
GIF格式，JPEG格式和PNG格式。
目前GIF和JPEG格式的支持情况最好，大多数浏览器都可以查看他们，虽然PNG格式的图像灵活性大、文件体积小，可是有很多浏览器不支持PNG图像的显示，所以建议在制作网页的时候应尽量使用GIF和JPEG格式。
（1）GIF图像：
最多可以使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，比如，网页的导航条、按钮、图标或者其他具有统一色彩和色调的图像。
GIF格式的图像最大的优点就是可以制作动态图像，可以将很多张静态文件作为动画帧串联起来转换成一个动画的GIF。
GIF另外一个优点就是可以将图像以交错的方式在网页中呈现出来。
所谓交错显示，就是当图像还没有下载完成时，浏览器先以马赛克的形式将图像慢慢的实现，让浏览者可以大概的想象出下载图像的雏形。
（2）JPEG图像：
JPEG格式是一种图像的压缩格式。
这种文件格式适合用于摄影、照片，或者有连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。
JPEG格式还是一种压缩的非常紧凑的格式，在正常的损失下肉眼分辨不出JPEG和GIF图像效果的区别，而JPEG文件只有GIF文件的1/4大小。
JPEG对于图标之类的，含有大色块的图像不是很适用，不支持透明图和动态图，但是JPEG的图像颜色多，图像逼真。
如果图像需要全彩模式下才能够表现效果的话，JPEG格式就是最佳的选择了。
（3）PNG图像：
PNG图像格式是一种非破坏性的网页图像格式，它提供了将图像以最小的方式压缩却又不造成图像失真的技术，它不仅具备了GIF图像格式的大部分优点，而且还支持48bit的颜色，更快的交错显示。
PNG还支持透明图。
图像标签:
![]()
![]()
只有开始标签，没有结束标签。
格式：
图像的地址可以用相对路径，还可以用网址作为图片的绝对路径。
1alt：
图像的提示文字属性。
作用：
Ⅰ：
当浏览网页时，如果图像下载完成，也就是成功的显示图片时，将鼠标指针放到该图像上时，鼠标指针旁边会出现提示文字，用于说明或者描述图像。
Ⅱ：
如果图像没有被下载，也就是没有成功显示图片时，在图片的位置上就会显示提示文字。
2设置图像的宽度：
width
设置图像的高度：
height
提示：
指定的高宽属性值和图像的实际高宽值差距越大，图片的显示效果就越差，所以，建议在设置网页的时候，需要多大的图片就设计多大的图片，最好不要用图片的高度和宽度属性值去调整它，以免影响图片的显示效果。
3设置图像的边框：
border
默认情况下，图片是没有边框的，通过图像标签border属性可以为图像添加边框线。
可以设置边框的宽度，但是边框的颜色是不可以设置的。
默认情况下，图像边框的颜色是黑色！
border的属性值也是像素，值越大，边框越宽。
4图像的垂直边距：
vspace
垂直边距就是指图片上方和下方距离文字或者其他元素的距离。
单位是像素。
5图像的水平边距：
hspace
水平边距就是指图片水平方向上距离文字或者其他元素的距离。
⑥align：
图像和文字之间的对齐。
bottom：
表示图片的底部和当前行的文字底部对齐。
top：
表示图片的顶端和当前行的文字顶端对齐。
middle：
表示图片水平中线和当前行的文字中线对齐。
left：
表示图片左对齐，文字在图片右侧排列。
right：
表示图片右对齐，文字在图片左侧排列。
⑦图像超链接
格式：
7、列表
（1）无序列表
这种列表排列没有顺序，只是以符号作为分项标识。
分项符号有三种：
①实心圆点（默认）
②空心圆环
③实心正方形
格式：
…….（2）有序列表
有序列表在列表中将每个列表项按数字或者字母的顺序序号排列，一般用于需要按照一定顺序排列的内容。
有序列表的项目序号有5种类型：
①数字
②小写字母
③大写字母
④小写罗马数字
⑤大写罗马数字
格式：
- …….
1）type属性：
2）start属性：
有序列表还有一个属性叫起始数值属性，利用这个属性，可以设置序号的起始值。
（3）定义列表
它有两部分组成：
定义条件和定义描述。
这种列表一般用来在网页上显示需要解释的名词。
格式：
- 名词
- 名词解释
（4）菜单列表
菜单列表主要用于设计单列的菜单列表，这种列表在浏览器中显示的效果和无序列表是相同的，他的功能也可以通过无序列表来实现。
（5）目录列表
- ….
8、表格
表格的基本构成有三个标签：
table表格标签、tr行标签、td单元格标签。
（1）格式：
表格标题文字… | …. | | …. | …. |
| …. | …. |
①border属性：
表格边框。
②width属性：
设置表格的宽度。
③height属性：
设置表格的高度
④align属性：
设置表格的对齐方式。
有3个值：
left、center、right。
⑤bordercolor：
设置表格边框的颜色。
⑥cellspacing：
设置单元格的边距
⑦cellpadding：
设置表格内容与边框间距。
（值不要设置过大，以免表格走形。
）
⑧bgcolor：
设置背景颜色。
⑨background属性：
设置背景图片。
（2）caption：
设置表格标题
（3）
： 表头（第一行文字重点显示）。 （4）表格的行属性： | 设置了文字与单元格的间距后，再设置行内容的对齐方式就不准确了。
●align：
水平对齐方式，left/center/right。
●valign：
垂直对齐方式，top/middle/bottom。
●height：
设置高度
●bordercolor：
行边框颜色。
●bgcolor：
设置背景颜色
●background属性：
设置背景图片。
（行的背景颜色和背景图属性只作用于当前行）
（5）单元格的属性：
●水平跨度属性： colspan ●垂直跨度属性： rowspan（从统计单元格开始往下跨的行数。 如果下面没有行，这个属性值是没有作用的） ●align： 水平对齐方式，left/center/right。 ●valign： 垂直对齐方式，top/middle/bottom。 （6）设置单元格背景色 ●bgcolor： 设置背景颜色 ●bordercolor： 单元格的边框颜色。 ●bordercolorlight： 设置亮边框。 ●bordercolordark： 设置暗边框。 9、链接 （1）外部超链接： ……链接到其他网站 （2）内部链接链接到自己建立的文件 （3）锚点链接 ●………… ●连接到其它页面的锚点 …… （4）下载文件链接 10、滚动标记 格式：
属性： （1）direction属性： （2）behavior属性 （3）scrollamount属性 scrolldelay属性 （4）loop属性 （5）width属性 height属性 11、插入多媒体文件 （1）…… （2） 12、框架
展开阅读全文
相关搜索
|