HTML入门基础教程相关知识

HTML入门基础教程

 

html是什么什么是html通俗解答:
htmlhypertext markup language的缩写,即超文本标记语言。html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面。html文件是带有格式标识符和超文本链接的内嵌代码的ascii 文本文件——html结构了解

html文本是由 html命令组成的描述性文本,html 命令可以说明文字、 图形、动画、声音、表格、链接等。 html网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。

  html是制作网页的基础,我们在网络营销中讲的静态网页,就是以html为基础制作的网页,早期的网页都是直接用html代码编写的,不过现在有很多智能化的网页制作软件(常用的如frontpage,dream weaver等)通常不需要人工去写代码,而是由这些软件自动生成的。尽管不需要自己写代买,但了解html代码仍然非常重要,了解认识html是什么?是学习网络营销与电子商务的重要技术基础知识。

    自己动手建一个非常简单的网页,首先设置电脑显示扩展名方法,打开我的电脑,然后现在栏目工具-》文件夹选项-》查看-》高级设置中找到《隐藏已知文件类 型的扩展名》将其不勾选,然后点击运用 确认设置完成。实现建立一个新的文本文件,在桌面新建一个txt文档(记住,如果你在使用比较复杂的文字处理器,就应该用“纯文本”或“普通文本”来保 存)在文档里些一些文字,然后将此文件命名为“xxxx.html”。(随便你起一个什么名字,扩展名也可是HTM)。然后你可以用浏览器将它打开,你会看见最简单的自己做的页面。

 

可能想学习网页制作的同学才开始,不知道怎么做从什么地方入手,多么希望有人指点。

这里DIVCSS5是你学习网页制作的好地方,从这里你可以学习认识html,到DIV+CSS技术的掌握,通过DIV CSS你可以完成你第一个网页,甚至制作一个实用网站。万事开头难就这样来的,希望你能好好学习,刻苦学习,耐心的学习任何技术或知识,会有好的结果。

转入正题,DIVCSS5通过通俗的说法给大家介绍下html及html作用,与div css关系。
相信大家过以下文章:
 

目录

1.     引入阅读

2.     html通俗定义

3.     html结构

4.     实例

5.     小总结

引入阅读  TOP
什么是HTML :http://www.divcss5.com/html/h5.html
HTML页面结构:http://www.divcss5.com/html/h2.html
以上是基础问题建议先看了以上2篇文章再看以下内容。

html通俗定义  TOP
通俗的讲html是网页,一个文本文件,可以使用记事本打开,打开后里面有html自己的标签(这些标签各有各的功能),并有一定规律存在。

首先html使用浏览器打开,就能呈现你们的内容,而这些内容需要你放入特定的标签里。
html结构  TOP
先看一下最基本html结构:

 



无标题文档




 

html实例  TOP
以上代码可以直接拷贝,然后新建一个记事本,将代码拷贝入内,并以“.html”扩展名命名(如:index.html)(扩展名显示),保存这样就新建一个完整html网页,当然你使用浏览器打开,什么内容也没有。

假如你想显示“divcss5-测试内容”,那你只需在中间打上字即可,完整代码如下:

 



无标题文档


divcss5-测试内容


 

这样使用浏览器浏览一下
 

效果:


这样内容就显示了,这也是最基础的演示-自己不妨试试制作自己第一个网页。

总结:  TOP
如果我们要想浏览器显示什么样的文章文字内容,我们只需要将文字文章放入“”之间即可。

也许你就会想了,那我看见很多网页,都有图片,各式各样的文字,排版也各式各样的又怎么实现的呢?
这里那就告诉你,这个就是需要你真真切切一步一个脚印的自己学习的,这里就会涉及到了CSS话题的引入。

我们要想显示自己设计的不同样式漂亮的网页,那就需要CSS来实现了。通过CSS设置网页中对应区域的高、宽、背景、边框、文字大小、文字颜色等来实现。

如果你对CSS 网页制作仍然感兴趣,那就从DIVCSS5开始吧,如果上面的文章一遍看不懂,那就多看几遍,多实践即可。希望您能早日学习成功,同时DIVCSS5也开通了系统的CSS培训(包括了从html到CSS的系统学习),不妨试试。

相关知识
1、html结构
2、html源代码
3、什么是html
4、html shtml区别
5、html标签元素
6、html编码
7、head标签
8、网页标题
9、utf-8
10、 GB2312

 

很多时候学网页制作开发的时候第一看到的印象深刻的就是html或htm后缀结尾的网页,我们把这类网页归结为静态网页,伪静态除外。

那html或htm与其它如php、asp、aspx、jsp等后缀结尾的网页有什么区别呢?
首先,html页面是静态的从头到尾没有程序的执行是纯的html语言,是不经过服务器处理就直接送出给浏览器呈现给浏览者。
而其他后缀的结尾的网页相对来说就是动态网页页面,动态页面是经过服务器对各自的程序翻译处理、数据库操作等处理然后才由浏览器把服务器处理完的数据程序给用户,而网页内容数据可以随后台数据改变而改变。

那html基本语言机构是怎么样的呢?
先看一下的html结构


放置文章标题
//这里是网页编码现在是gb2312




这里就是正文内容

完整HTML包括html DOCTYPE声明、标题、head、网页编码声明等内容
最初使用完整的html源代码

 



标题部分-www.divcss5.com




内容

最新完整HTML结构-HTML源代码(推荐):

 



网页标题-www.divcss5.com




网页正文内容-WWW.DIVCSS5.COM  -DIVCSS5提供


 


无论是html还是其它后缀的动态页面其html语言结构都是这样的,只是在命名网页文件时以不同的后缀结尾。
1、无论是动态还是静态页面都是以“”开始,然后在网页最后以“”结尾。
2、“”后接着是“”页头,其在中的内容是在浏览器中内容无法显示的,这里是给服务器、浏览器、链接外部JS、链接CSS样式等区域,而里面“”中放置的是网页标题,可在浏览器最左上看见如图:
 


TITLE显示位置图


3、接着“ ”这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
4、接着就是正文“ ”也就是常说的body区 ,这里放置的内容就可以通过浏览器呈现给用户,其内容可以是table表格布局格式内容,也可以DIV布局的内容,也可以直接是文字。这里也是最主要区 域,网页的内容呈现区。
5、最后是以“ ”结尾,也就是网页闭合。

以上是一个完整的最简单的html语言基本结构,通过以上可以再增加更多的样式和内容充实网页。
注意:网页一般的根据xhtml标准都要求每个标签闭合,如:以 开始,以闭合;如果没有闭合如就没有 就要来完成闭合。

以上就是通俗来讲的最简单的html语言结构,如果需要看更多更丰富的html语言结构,可打开一个网站的网页,然后点击浏览器的“查看”--然后点击“查看源代码”即可看见该网页的html语言结构,这样可以根据此源代码来分析此网页的HTML语言结构与内容。  

 

代码(源文件)是指网页的html代码现在这里可以加上CSS代码

网页源代码怎么看或源文件怎么看:
第一种:打开一个网页后点击鼠标的 右键就会有"查看源文件",操作 鼠标右键--->查看源文件 即可弹出一个记事本,而记事本内容就是此网页的html代码。可能会碰到一些网页鼠标右键无反应或提出提示框,那是因为做网页的加入了JS代码来禁止用户查看源文件代码或复制网页内容,但是这种方法也没用,只有你稍微懂得以下第二种方法即可查看此网页的源代码源文件。


源文件、源代码样式图

第二种:通过浏览器状态栏或工具栏中的点击 “查看”然后就用一项“查看源代码”,点击查看源代码即可查看此网页的源代码源文件。
在微软IE下截图:
 


在微软IE下 查看--->源文件 即可查看此网页代码在傲游浏览器下截图:


 


查看别人网页的源代码可以为我们制作网页时候有帮助,以后将介绍查看源代码更多方法及怎么运用到别人的源代码文件。

 

DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效,也就是说如果没有这个DOCTYPE声明将会导致CSS失效-css无效,特别是没有声明或声明不正确将在标准浏览器下更是不能正常显示。

DOCTYPE声明
开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看很多使用XHTML标准开发的网站,第一行就是:

打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,会发现同样的代码

而另一些符合标准的站点的代码则如下:

那么这些代码有什么含义?一定要放置吗?
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择:
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:

* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
,完整代码如下:

* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:

我们选择什么样的DOCTYPE
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。
打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。
补充
DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。
 


 

一般可以用简单方法可以选择标准的DOCTYPE声明,通过Adobe Dreamweaver软件来新建“CTRL+N”将弹出

 

然后点击左下角的“首选参数”来配置,以上即是DIV+CSS网站总结关于DOCTYPE声明及DOCTYPE声明的作用介绍。

推荐DOCTYPE声明(常用DOCTYPE声明):

DIVCSS5推荐使用最新简便DOCTYPE声明方法:

 



其它内容....
....

浏览过此页用户还浏览以下内容:
UTF-8 GBK UTF8 GB2312之间的区别和关系
 

 

html网页中head之script标签
什么是script标签?
script
标签通常放置在一个网页的头部标签head标签内的用于链接外部JS文件外部资源标签,
 


script使用实例演示

链接外部JS时候script 标签的内容结构解释
src的值为外部资源地址,这里是js文件的地址,相当于link标签href链接外部css文件一样CSS引用
type规定被链接文档的 MIME 类,这里是值为text/javascript

div+css通过对head标签内script“
(在a.js中有一句alert(2))


 

对JS脚本与CSS样式的加载

1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
      2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
      3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
      4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
      5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
      6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

 


以下为引用内容:

姓名:


 

则执行顺序是1,2,3,姓名:,如果要在 "姓名:,"上面写

 


以下为引用内容:


 

返回的是null,但在下面写可以,尽管alert(3)先于它执行

注意:只要是方法都是加载完后执行,若写οnlοad="a()",此方法是以上的1,2,3....全部执行完后才执行

在HTML中嵌入Javasript

1、直接在Javascript代码放在标记对之间

2、由


 

4、同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。

 


以下为引用内容:


 

5、document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档。

 


以下为引用内容:


 

test.js的内容是:

var tmpStr = 1;
      alert(tmpStr);

在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3

在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义

原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,并且 执行到document.write(’document.write("我是" + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。

解决这个问题,可以利用HTML解析是解析完一个HTML标签,再执行下一个的原理,把代码拆分来实现:

 


以下为引用内容:



 

这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3。

改变Javascript的执行顺序

1、利用onload


以下为引用内容:


输出值顺序是 2、1。

需要注意的是,如果存在多个winodws.onload的话,只有最有一个生效,解决这个办法是:

 

以下为引用内容:
window.onload = function(){f();f1();f2();.....}

 

利用2级DOM事件类型

 

以下为引用内容:
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...

 

2、IE中可以利用deferdefer作用是把代码加载下来,并不立即执行,等文档装载完毕之后再执行,有点类似onload,但是没有onload那样的局限性,可以重复使用,但是只在IE中有效,所以上面的例子可以修改成为

 

以下为引用内容:

 

这样IE就不报错了,输出值的顺序变成:1、3、2、我是1

3、利用Ajax。

因为xmlhttpRequest能判断外部文档加载的状态,所以能够改变代码的加载顺序

 

如何控制页面内容的加载顺序

目前网站之间相互调用的情况越来越多,比如 需要调用某个第三方提供的一些接口(天气预报),或者是第三方提供的广告......

但是出于各种原因(网络故障、服务器故障、软件故障......)常常会发生第三方的相应页面不能访问的情况,而直接导致自己网站不能正常访问,或者访问速度比较慢。

比如:某个网站为头、内容、底 结构,在网站的头部放置了第三方提供的广告,但是出于某种原因,第三方的服务不能正常访问了,直接导致的情况就是,整个网站 头部广告 以下的部分均不能正常访问(或者要过很久以后才能打开,昨天的台湾大地震,导致了 Google Adsense 不能正常访问,直接导致了我的个人网站http://www.oldtool.net 不能正常打开。)。

了解决如上的问题,查阅了很多文章后,找到如下的解决方案:页面的延时加载(Page Delay Load)。

在IE中,几乎每个对象(div iframe td ...)均有一个属性 readyState(http://msdn2.microsoft.com/en-us/library/ms534358.aspx) ,此属性反应对象在当前页面的载入状态,当该对象完全载入以后,则当前对象的 readyState=="complete" ,借助该属性,可以控制待当前页面最期待的内容载入完成以后,再载入有可能出错的页面(或者是优先级不高的页面)。

详细代码如下:

问题页面代码



精巧软件 www.oldtool.net


这里是页面的最顶端内容。

如下的 div1 div2 div3 div4 可以放置任何第三方的内容,比如广告。

说明:此处的 宽、高,不一定需要提前设置,可以将此 Container 的宽、高根据内部的内容自适应。

说明:div3中的内容不能正常访问,直接导致其下最重要的内容不能正常打开,或者要过很久以后才可以正常打开。






这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。

这里是页面的最底端



修复页面代码



精巧软件 www.oldtool.net



这里是页面的最顶端内容。

如下的 div1 div2 div3 div4 全部延时加载。 当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏,而不能正常访问。

这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。

这里是页面的最底端


本文转载于:http://www.verydemo.com/demo_c101_i77501.html

转载于:https://www.cnblogs.com/liuyq/p/3990407.html

你可能感兴趣的:(HTML入门基础教程相关知识)