欢迎来到it培训的黄埔军校——智游教育!

html的基础知识-永利国际

于2017-04-06 18:00:30 发表在html5知识库

html的基础知识

html 文档
什么是 html 文档
html 文档是普通文本 ( ascii) 文件, 它可以用任意编缉器(如unix 中的emacs 或 vi, macintosh 中的bbedit, windows中的notepad)生成. 你也可以使用字处理软件, 不过要记住存文件时要存成“带回车的纯文本”。

html 编辑器
现在有一些 wysiwyg 编辑器 (如., 可用在多种平台的 hotmetal, 或者可用在 macintosh 机的 adobe pagemill ). 在你学了一些 html 标记的基本知识之后,你可能希望使用它们. 你会发现掌握足够的 html 编码知识对于判断一个 wysiwyg 编辑器是否适用是很有益处的

把文件存放到服务器上
如果你在学校或者单位可以访问 web 服务器, 和你的 web 管理员webmaster (维护服务器的人) 联系,看看如何把你的文件存放到 web 上. 否则,如果在学校或单位不能访问, 可以看看你的社区是否有 免费网络freenet, 一种提供免费 internet 访问服务的基于社区的网络. 如果也没有免费网络, 你可以当地的 internet 服务提供者联系,他们可以把你的文档存放到服务器上,不过要收取费用. (你可以在当地的报纸上找到广告with your chamber of commerce for the names of companies.)

标记说明
一个元素 element 是一个文档结构的基本组成部分. 元素的例子有头 heads, 表格tables, 段落 paragraphs, 列表 lists 等. 你可以这样理解: 你用 html 标记为浏览器标出文件的各个元素 . 元素中可以包含普通文本,其他元素,或二者都有.

html 文档中使用tags表示各种元素. html 标记由一个左尖括号 (<), 一个标记名, 和一个右尖括号 (>) 组成. 标记通常成对出现 (如,

) 以指出标记作用的范围. 结束标记和起始标记相似,只是在括号中的标记名中以斜杠 (/) 领头. html 标记在下文中列出.

有些元素可能含有一个属性 attribute, 它是包含在起始标记中的附加信息说明. 例如, 通过在图象文件的 html 代码中包含适当的属性,你可以指明一幅图象的位置 (顶端, 中间, 或底部) . 具有可选属性的标记 如下.

注意: html 不区分大小写. 等价于 <title> 或 <title>. 有几个例外的情况列在下文中的转义序列中.</span></span><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; font-size: 12pt;"><o:p></o:p></span></p> <p class="p" style="margin: 0pt 0pt 22.5pt; text-indent: 0pt; padding: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"> <span style="font-size:14px;"><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><font face="微软雅黑">并非所有的</font> world wide web 浏览器都支持所有的标记. 如果一个浏览器不支持某个标记, 它通常只是忽略之.</span></span><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; font-size: 12pt;"><o:p></o:p></span></p> <p class="p" style="margin: 0pt 0pt 22.5pt; text-indent: 0pt; padding: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"> <span style="font-size:14px;"><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><font face="微软雅黑">最小的</font> html 文档</span><br /> <span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><font face="微软雅黑">每个</font> html 文档应该包含一些标准 html 标记. 每个文档都包含头 head 和正文 body text 两部分. 头中含有标题 title, 正文中含有实际构成段落,列表和其他元素的文本. 浏览器需要具体的信息是因为它们都是根据 html 和 sgml 说明编程的.</span></span><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; font-size: 12pt;"><o:p></o:p></span></p> <p class="p" style="margin: 0pt 0pt 22.5pt; text-indent: 0pt; padding: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"> <span style="font-size:14px;"><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><font face="微软雅黑">下面的源文档举例说明必须的元素</font>:</span></span><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; font-size: 12pt;"><o:p></o:p></span></p> <p class="p" style="margin: 0pt 0pt 22.5pt; text-indent: 0pt; padding: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"> <span style="font-size:14px;"><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><html></span><br /> <span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><head></span><br /> <span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><title>a simple html example



welcome to the world of html. 
this is the first paragraph. while short it is 
still a paragraph!


and this is the second paragraph.



必须的元素有 , , , 和 <body> 标记 (和它们相应的结束标记). 由于在每个文件中你都要包括这些标记, 你可以创建一个含有这些标记的模板文件. ( 有些浏览器会自动正确地规格化你的 html 文件,哪怕你没有包含这些标记. 但是有些浏览器不会这样! 因此你要确保包含这些标记.)</span></span><span style="font-family: 微软雅黑; color: rgb(51, 51, 51); letter-spacing: 0pt; font-size: 12pt;"><o:p></o:p></span></p> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="clearfix"></div> </div>  <footer> <div class="footer_wrap"> <div class="con_link"> <div class="contact_us"> <p class="title">联系永利国际</p> <p>中国-郑州经济技术开发区经北三路河南通信产业园六层</p> <p>e-mail:zy@zhiyou100.com</p> <p>电话:4006-371-555   0371-88888598</p> </div> <div class="fri_link"> <p class="title">永利网址的友情链接</p> <ul> <li><a target="_blank" href="http://www.fengchao.net/" rel="nofollow">郑州爱峰科技</a></li> <li><a target="_blank" href="http://www.zhiyouzhenlong.com/index.html" rel="nofollow">智游臻龙</a></li> <li><a target="_blank" href="http://www.weixivc.com/" rel="nofollow">微玺投资</a></li> <li><a target="_blank" href="http://bbs.zhiyou100.com/portal.php" rel="nofollow">智游论坛</a></li> <li><a target="_blank" href="http://www.ijiami.cn/" rel="nofollow">爱加密</a></li> </ul> </div> </div> </div> <div class="record">智游教育 © <a target="_blank" href="http://www.miitbeian.gov.cn">豫icp备17000832号-1</a>  河南智游臻龙教育科技有限公司 此网站均为永利国际的介绍,并非广告</div> </footer> <div class="s_float" id="hhservice"> <ul> <li class="service_01"><a onclick="hz6d_is_exist('setisinvited();window.open(#liyc#http://www11.53kf.com/webcompany.php?arg=10138919&style=1&kflist=off&kf=995746472@qq.com,zhiyou100@qq.com&zdkf_type=1&language=zh-cn&charset=gbk&referer={hz6d_referer}&keyword=http%3a%2f%2f192.168.8.95%3a8000%2f&tfrom=1&tpl=crystal_blue&uid=4d05873ff78c2120f313f60bfc719b78#liyc#,#liyc#_blank#liyc#,#liyc#height=470,width=702,top=200,left=200,status=yes,toolbar=no,menubar=no,resizable=yes,scrollbars=no,location=no,titlebar=no#liyc#)');"><span></span></a></li> <li class="service_02"><a onclick="hz6d_is_exist('setisinvited();window.open(#liyc#http://www11.53kf.com/webcompany.php?arg=10138919&style=1&kflist=off&kf=995746472@qq.com,zhiyou100@qq.com&zdkf_type=1&language=zh-cn&charset=gbk&referer={hz6d_referer}&keyword=http%3a%2f%2f192.168.8.95%3a8000%2f&tfrom=1&tpl=crystal_blue&uid=4d05873ff78c2120f313f60bfc719b78#liyc#,#liyc#_blank#liyc#,#liyc#height=470,width=702,top=200,left=200,status=yes,toolbar=no,menubar=no,resizable=yes,scrollbars=no,location=no,titlebar=no#liyc#)');"><span></span></a></li> <li class="tel_link"><a><span></span><div class="tel_num">4006-371-555</div></a></li> <li class="qr_code"><a><span></span><div class="code_img"><img src="http://zhiyou100.com/img/qr_code.jpg" alt="" /></div></a></li> <li class="back_top" id="back_top"><a href="#"></a></li> </ul> </div> <style type="text/css"> /*页脚*/ footer{ width: 100%; height: 270px; margin-top: -17px; } footer .footer_wrap{ width: 100%; height: 210px; background-color: #eeeeee; } footer .con_link{ width: 1140px; height: 210px; margin: 0 auto; overflow: hidden; zoom: 1; } footer .con_link .contact_us, footer .con_link .fri_link{ padding-top: 50px; width: 50%; height: 210px; float: left; box-sizing: border-box; } footer .con_link p{ font-size: 12px; color: #565555; line-height: 30px; margin: 0; padding: 0; } footer .con_link .title{ font-size: 14px; font-weight: 600; color: #565555; line-height: 30px; } footer .con_link .fri_link ul{ margin:0; padding: 0; overflow: hidden; zoom: 1; } footer .con_link .fri_link ul li{ list-style: none; display: inline-block; width: auto; margin-right: 20px; font-size: 12px; color: #565555; float: left; } footer .con_link .fri_link ul li a{ font-size: 12px; color: #565555; text-decoration: none; } footer .record{ text-align: center; font-size: 12px; color: #565555; background-color: #e0e0e0; width: 100%; height: 60px; line-height: 60px; } footer .record a{ font-size: 12px; color: #565555; } /*sf*/ .s_float{ width: 52px; height: 208px; box-sizing: border-box; /*border: 1px solid #e9e9e9;*/ position:absolute; z-index:999; top:220px; margin-right: 20px; box-shadow: 1px 1px 15px -8px #535353,-1px -1px 15px -8px #535353; background-color: #ffffff; } .s_float ul{ margin: 0; padding: 0; } .s_float ul li{ list-style: none; width: 52px; height: 52px; background: url(/uploads/image/img/service.png); transition: all 0.5s; position: relative; cursor: pointer; } .s_float ul li span{ transition: all 0.5s; } .s_float ul li.service_01{ background-position: 0 0; } .s_float ul li.service_02{ background-position: 0 -52px; } .s_float ul li.qq_link{ background-position: 0 -104px; } .s_float ul li.tel_link{ background-position: 0 -156px; } .s_float ul li.tel_link .tel_num{ position: absolute; top: 0; right: 52px; width: 0px; height: 52px; overflow: hidden; border-right: none; text-align: center; line-height: 52px; font-size: 13px; color: #424242; background-color: #ffffff; box-shadow: 1px 1px 15px -8px #535353,-1px -1px 15px -8px #535353; transition: all 0.5s; } .s_float ul li.tel_link:hover .tel_num{ width: 140px; border: 1px solid #e9e9e9; } .s_float ul li.qr_code{ position: relative; background-position: 0 -208px; } .s_float ul li.qr_code .code_img{ position: absolute; bottom: 0px; right: 52px; text-align: center; padding-top: 5px; box-sizing: border-box; width: 0px; height: 0px; background-color: #ffffff; box-shadow: 1px 1px 15px -8px #535353,-1px -1px 15px -8px #535353; transition: all 0.5s; overflow: hidden; } .s_float ul li.qr_code:hover .code_img{ width: 140px; height: 146px; border: 1px solid #e9e9e9; } .s_float ul li.back_top{ background-position: 0 -260px; display: none; } .s_float ul li:hover{ background-position-x: -52px; background-color: #2344b4; } .s_float ul li:hover span{ border-bottom: 1px solid #2344b4; } .s_float ul li a{ display: inline-block; width: 52px; height: 52px; } .s_float ul li a span{ display: inline-block; width: 32px; height: 100%; margin: 0 10px; border-bottom: 1px solid #e9e9e9; } </style> <script type="text/javascript"> (function(e) { e.fn.fix = function(t) { var n = { "float": "right", durationtime: 100 }, t = e.extend(n, t); this.each(function() { var n = e(this), a = n.offset().top; n.css(t.float, 0), e(window).bind("scroll", function() { var r = a e(window).scrolltop() "px"; n.animate({ top: r }, { duration: t.durationtime, queue: !1 }) }) }) } })(jquery) $(function(){$("#hhservice").fix()}); $(window).scroll(function() { var totop = document.body.scrolltop || document.documentelement.scrolltop; if (totop > 600) { $("#hhservice").height(260) .find('.back_top').css('display','block') } else { $("#hhservice").height(208) .find('.back_top').css('display','none') } }); // back top $('#back_top').click(function(){ $('html,body').animate({ scrolltop: 0 }, 1000); }) </script> <script type="text/javascript"> string.prototype.trim = function() { var m = this.match(/^\s*(\s (\s \s )*)\s*$/); return (m == null) ? "" : m[1]; } string.prototype.ismobile = function() { return (/^(?:1\d|15[89])-?\d{6}(\d{3}|\*{3})$/.test(this.trim())); } string.prototype.istel = function() { //"兼容格式: 国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)" //return (/^(([0\ ]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/.test(this.trim())); return (/^(([0\ ]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/.test(this.trim())); } function chkform() { with(document.form1) { if (ftel.value.ismobile() || ftel.value.istel()) { ftel.value = ftel.value.trim(); alert("您的电话/手机号码是:" ftel.value); return true; } else { alert("请输入正确的手机号码或电话号码\n\n例如:13816752888或0755-3614072"); ftel.focus(); return false; } } } </script> <script src="http://www.zhiyou100.com/090/71dede/js/fix_form.js"></script> <script src="http://www.zhiyou100.com/090/71dede/js/bootstrap.min.js" type="text/javascript"></script> <script src="http://www.zhiyou100.com/090/71dede/js/stickup.min.js" type="text/javascript"></script> <script src="http://www.zhiyou100.com/090/71dede/js/71dede_script.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8" async src="http://lxbjs.baidu.com/lxb.js?sid=10386923"></script> </body> <script> (function() { var _53code = document.createelement("script"); _53code.src = "//tb.53kf.com/code/code/10138919/1"; var s = document.getelementsbytagname("script")[0]; s.parentnode.insertbefore(_53code, s); })(); </script> </html>