html文档基本结构(制作网页基础知识)

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1772
收藏 0 赞 0 分享

HTML运行原理:

1.本地运行:html文件用浏览器打开

2.远程访问运行:本地浏览器访问远程服务器(tomcal)

网页的文件名最好不要有中文,因为将来网页文件都是保存到服务器上的建议都使用英文保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 文件后缀。

二、HTML文档基本结构

1、文档的骨架:所有的网页文件,通常由下面四对标记来构成文档的骨架


复制代码
代码如下:

<html>
<head>
<title> 网页标题 </title
</head></p> <p><body>
这里放置的是要在网页中显示的内容
</body>
</html>

<html>....</html>:标识网页的开始与结束,所有的html元素都要放在这对标记中
<head>....</head>:标识网页文件的头部信息,如标题,搜索引擎关键字等.里面的内容最先加载
<title>....</title>:标识网页文件的标题
<body>....</body>:标识网页文件的主体部分,即页面可见的内容

2、meta标签

meta标记用于定义文件信息,对网页进行说明,便于搜索引擎查找,要放置在<head>  <head/>之间

设置关键字:(比较短,用于搜索引擎)
<meta name="keywords" content="value"/> value表示要设置的关键字,多个关键字之间用,分隔开
设置描述:(用于对关键字进行扩展,或对网页的内容进行概述性的描述)
<meta name="description" content="value"/> value表示要设置的描述,多个描述之间用,分隔开
设置作者:
<mate name="author" content="作者名" />作者名一般都是公司名称
设置网页的编码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置页面定时跳转:
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" /> (content="2;url=http://www.baidu.com" 2表示该网页过多少秒跳转到url指定的目的地)

描述网页的版本:
<meta name="revised" content="html4.01">
可设置其他网页信息:
<meta name="others" content="这个我第一个网站,网站的主要内容有动漫,音乐,文章,博客等等,欢迎大家光临!">

描述网页是通过那种软件产生:
<meta name="generator" content="记事本">


复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="网页设计,学网页" />
<meta name="description" content="如何学习网页设计,学习网页设计的方法,HTML中文手册" />
<meta name="author" content="脚本之家" />
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" />
<meta name="revised" content="html4.01">
<title>HTML文档基本结构_meta标签</title>
</head>
<body>
meta标记用于定义文件信息,对网页进行说明,便于搜索引擎查找,
</body>
</html>

 

3、head区

复制代码
代码如下:

<head>
<title> 网页标题 </title>文件标题声明
 <mate> 一些文档的信息,如对该文档关键词,描述,字符集设置等等。
<base> 超链接网址基准参考点
javascript和VBScript程序
stylesheet 可用来设置排版来的声明
<link> 可引用外部文件,如CSS排版样本
</head>

三、HTML标记的语法

html最基本的语法就是<标记符>内容</标记符>,标记符通常都是成对使用的一个开头标记和一个结束标记,还有一种单标记没有结束标记,如<hr/>

HTML标记类型:单标记和双标记
双标记:
有属性:<标记名称 属性="属性值">...</标记名称> 如:<font size="3">.....</font>
无属性:<标记名称>...</标记名称> 如:<title>.....</title>

单标记:
有属性:<标记名称 属性="属性值"> 如:<hr width="200"/>(默认是居中的)
无属性:<标记名称> 如:<br />


复制代码
代码如下:

<!-- 有属性:<标记名称 属性="属性值">...</标记名称> 如:<font size="3">.....</font>-->
<font size="4" color="#33FF00">2、体育老师说:谁敢穿裙子上我的课,就罚她倒立!</font> </p> <p><!--无属性:<标记名称>...</标记名称> 如:<title>.....</title>--></p> <p><!-- 有属性:<标记名称 属性="属性值"> 如:<hr width="200"/>(默认是居中的)-->
<hr width="200"/></p> <p><!--无属性:<标记名称> 如:
表示换行但不换段--></p> <p>3、住在我心里,你交房租了吗?
4、你让我下不了台,我让你连上台的机会都没有

更多精彩内容其他人还在看

Table相关整理及Javascript操作table,tr,td

很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。本文将给出解决方案,感兴趣的朋友可以了解下,或许本文对你有所帮助
收藏 0 赞 0 分享

td 内容自动换行 table表格td设置宽度后文字太多自动换行

table表格td设置宽度后文字太多导致自动换行,这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的,可以参考下本文,可能会有意外的收获
收藏 0 赞 0 分享

html4和html5区别之如何在一个input上添加焦点实现代码

如何在一个input上添加焦点,有很多的实现方法,本文分别用html4和html5做了下演示,感兴趣的朋友可以参考下,或许本文对你有所帮助
收藏 0 赞 0 分享

纯css为select添加样式(无脚本)实现

改变select默认的样式,一般情路情况下通过ul,li来模拟来实现;Jquery插件也是这样,接下来介绍一种不写脚本,只用单纯的css来实现。在IE系列下,选中某个选项的时候会有背景色块,IE7-IE10都有此bug,感兴趣的朋友可以参考下啊
收藏 0 赞 0 分享

iframe的src赋值问题(服务器端)

frame的src赋值的问题,本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID,再加上runat=server,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

iframe的src设置为about:blank之后细节探讨

不设置为about:blank,内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空,本文将详细探讨一下iframe的src设置为about:blank之后细节,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

无法定义IE6字体:13px大小无效,IE6自动显示更大的字体的解决方法

前些天调整网页一个模块的时候将页面字体的大小设置为13px大小了,由于当时用的是Chrome浏览器以及IE8,并没有发现原来font-size:13px在IE6下居然不听使唤总是自动显示为一个更大的大小,变现上又及其难看
收藏 0 赞 0 分享

为何html中嵌入mp4格式视频播放不了

只是在页面中加载了一个播放器的样子,各个按钮都不管用,不知道是哪个地方出了问题,很是郁闷,于是搜集整理下,拿出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

如何把select下拉框的值传到id中实现代码

把select下拉框的值传到id中,是网友们比较在意的问题,本人搜索整理下,晒出来和大家分享
收藏 0 赞 0 分享

怎么把select下拉菜单里的文字设置成左右滚动效果

希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢
收藏 0 赞 0 分享
查看更多