html教程

来源:推荐阅读时间：2018-06-22 18:00:05 阅读：

【www.zhuodaoren.com--推荐阅读】

篇一:[html教程]HTML教程：深入了解html

HTML网权威发布HTML教程：深入了解html，更多HTML教程相关信息请访问HTML网。

有这么一段HTML，请挑毛病：
    <P>  哥写的不是HTML，是寂寞。<br><br>  我说：<br>不要迷恋哥，哥只是一个传说
这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。＝＝＝＝＝＝＝＝＝＝＝＝＝＝解答部分 ================
出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。
这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题，考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。
言归正传。这道题的考点：
考点1：html和 xhtml的区别这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。
这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。
考点2：考样式分离用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3：合理使用标签br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。
上面全答对，你就能拿到100分。
对原题改进的结果：html 4.01:
    <p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说
xhtml 1.0:
    <p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>
加分：合理的用语义化标签在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。
<p>哥写的不是HTML，是寂寞。<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>
我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。
<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

篇二:[html教程]HTML教程：HTML的七种用法

HTML网权威发布HTML教程：HTML的七种用法，更多HTML教程相关信息请访问HTML网。

当今的WEB领域，新概念、新技术不断涌现 --WEB2.0、AJAX、HTML5.0... ...
但在几乎被我们忽略的HTML和XHTML里，还有许多并不为人所知的，但却非常有用的一些TAG
以下就是其中的七种用法：

一、元素分组：<fieldset>、<legend>

示例：

1 <fieldset>   2 <legend>健康信息：</legend>   3 <form>   4 <label>身高：<input type="text" /></label>   5 <label>体重：<input type="text" /></label>   6 </form>   7 </fieldset>

效果：

二、元素标注：<label>

示例：

1 <form>   2   <label for="male">Male</label>   3   <input type="radio" name="sex" id="male" />   4   <br />   5   <label for="female">Female</label>   6   <input type="radio" name="sex" id="female" />   7 </form>

效果：

三、所有链接规定默认地址或默认目标：<base>

示例：

1 <html>    2 <head>    3 <base href="http://www.w3school.com.cn/i/" mce_href="http://www.w3school.com.cn/i/" />    4 <base target="_blank" />    5 </head>    6    7 <body>    8 <img src="eg_smile.gif" mce_src="eg_smile.gif" /><br />    9 <p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>   10 <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>   11   12 <br /><br />   13 <p><a href="http://www.w3school.com.cn" mce_href="http://www.w3school.com.cn">W3School</a></p>   14 <p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>   15   16 </body>   17 </html>

四、上标与下标：<sup>、<sub>

示例：

1 <p>   2 This text contains <sub>subscript</sub>   3 </p>   4   5 <p>   6 This text contains <sup>superscript</sup>   7 </p>

效果：

五、分层列表：<dl>、<dt>、<dd>

示例：

1 <dl>   2   <dt>咖啡</dt>   3   <dd>黑色的热饮料</dd>   4   <dt>Milk</dt>   5   <dd>白色的冷饮料</dd>   6 </dl>

效果：

六、选项组：<optgroup>

示例：

1 <select>    2   <optgroup label="Swedish Cars">    3     <option value="volvo">Volvo</option>    4     <option value="saab">Saab</option>    5   </optgroup>    6   <optgroup label="German Cars">    7     <option value="mercedes">Mercedes</option>    8     <option value="audi">Audi</option>    9   </optgroup>   10 </select>

效果：

七、图像映射：<map>

示例：

1 <html>    2 <body>    3    4 <p>请点击图像上的星球，把它们放大。</p>    5    6 <img    7 src="/i/eg_planets.jpg"    8 border="0" usemap="#planetmap"    9 alt="Planets" />   10   11 <map name="planetmap" id="planetmap">   12   13 <area   14 shape="circle"   15 coords="180,139,14"   16 href ="/example/html/venus.html"   17 target ="_blank"   18 alt="Venus" />   19   20 <area   21 shape="circle"   22 coords="129,161,10"   23 href ="/example/html/mercur.html"   24 target ="_blank"   25 alt="Mercury" />   26   27 <area   28 shape="rect"   29 coords="0,0,110,260"   30 href ="/example/html/sun.html"   31 target ="_blank"   32 alt="Sun" />   33   34 </map>   35   36 <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>   37   38 </body>   39 </html>

效果：

篇三:[html教程]HTML教程：网页常用代码

HTML网权威发布HTML教程：网页常用代码，更多HTML教程相关信息请访问HTML网。

1、数字时钟   说明数字化的时钟   代码 <span id="liveclock" style"=width: 109px; height: 15px"></span><SCRIPT language=javascript>function www_helpor_net(){var Digital=new Date()var hours=Digital.getHours()var minutes=Digital.getMinutes()var seconds=Digital.getSeconds()
if(minutes<=9)minutes="0"+minutesif(seconds<=9)seconds="0"+secondsmyclock="现在时刻：<font size="5" face="Arial black">"+hours+":"+minutes+":"+seconds+"</font>"if(document.layers){document.layers.liveclock.document.write(myclock)document.layers.liveclock.document.close()}else if(document.all)liveclock.innerHTML=myclocksetTimeout("www_helpor_net()",1000)}www_helpor_net();//--></SCRIPT>
2、六种风格时间   说明：六种风格时间显示,一定有你喜欢的！   效果：风格一: 星期二,6月1日,2004年   风格二: 7:56:28上午   风格三: 星期二,6月1日,2004年 7:56:28上午   风格四: 6/1/04   风格五: 7:56:28   风格六: Tue Jun 1 07:56:28 UTC+0800 2004   代码： <SCRIPT language="javascript"></SCRIPT>
3、显示停留的时间   说明：显示他人在页面停留的时间，而且可以作出提醒    代码：您在本站逗留了<input type="text" name="helpor_net" size="15" style="border: 0 "><SCRIPT language="javascript">
</SCRIPT>

4、有影子的数字时钟   说明：这个时钟是有影子的，而且还在不停地走着呢    代码：<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:"Arial black";color:#cccccc;font-size:20px;top:50px;left:173px"></div><div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:"Arial black";color:#000000;font-size:20px;top:48px;left:170px"></div><div id="mainbody" style="position:absolute; visibility:visible"></div><script language=javaScript></script>

5、全中文日期显示   说明：年月日都是用全中文显示   代码： <script language="JavaScript"></script>

6、打字效果   说明: 文字在状态栏上从左往右一个一个地显示，就象你打出的字一样    代码: <script language="JavaScript">var msg = "欢迎光临，请多提意见。谢谢! " ;var interval = 120var spacelen = 120;var space10=" ";var seq=0;function Helpor_net() {len = msg.length;window.status = msg.substring(0, seq+1);seq++;if ( seq >= len ) {seq = 0;window.status = "";window.setTimeout("Helpor_net();", interval );}elsewindow.setTimeout("Helpor_net();", interval );}Helpor_net();</script>

7、文字从左往右移动   说明: 文字在状态栏上从右往左显示，而且是循环的    代码: <script></script>

8、图像自动变化   说明: 把一张图片变形扭曲成各种不同的长宽，非常好玩    代码: <img src="http://code.helpor.net/picture/swimming.gif" name="u" border="1" alt="很好玩的"><script language="JavaScript">
var b = 1;var c = true;
function www_helpor_net(){if(document.all);
if(c == true) {b++;}if(b==100) {b--;c = false}
if(b==10) {b++;c = true;}
if(c == false) {b--;}u.width=150 + b;u.height=125 - b;setTimeout("www_helpor_net()",50);}www_helpor_net();</script>

9、漫天飞雪   说明: 漫天飞雪   代码： <SCRIPT LANGUAGE="JavaScript1.2"></script>

10、图片渐渐显隐   说明: 图片渐渐显隐   代码: <img src="http://code.helpor.net/picture/swimming.gif" name="u" border="1" style="filter:alpha(opacity=0)"><script language="JavaScript">
var b = 1;var c = true;
function helpor_net(){if(document.all);
if(c == true) {b++;}if(b==100) {b--;c = false}
if(b==10) {b++;c = true;}
if(c == false) {b--;}u.filters.alpha.opacity=0 + b;setTimeout("helpor_net()",50);}helpor_net();</script>

11、图片渐渐显示   说明: 图片渐渐显示   代码: <img src="http://code.helpor.net/picture/swimming.gif" border="1" id="helpor_net" style="visibility:hidden; FILTER:revealTrans(Duration=4.0, Transition=23);"><SCRIPT FOR="window" EVENT="onLoad" LANGUAGE="vbscript">helpor_net.filters.item(0).apply()helpor_net.filters.item(0).transition = 12helpor_net.Style.visibility = ""helpor_net.filters(0).play(2.0)</SCRIPT>

12、自由移动的图片    说明: 自由移动的图片   效果: 看到了吗？   代码: <div id="helpor_net" style="position:absolute; visibility:visible; left:0px; top:0px; z-index:-1"><img src="http://code.helpor.net/picture/swimming.gif" border="0"></div><SCRIPT LANGUAGE="JavaScript"></script>
再把<body>改为： <body OnLoad="www_helpor_net()" OnResize="www_helpor_net()">

13、随鼠标触动而变化   说明: 鼠标接触或者离开图片时，图片大小会相应变化    代码: <span id="s1" style = "width : 150"><a href="http://www.helpor.net" target="_blank" onmouseover="www_helpor_net.style.width="200";" onmouseout="www_helpor_net.style.width= "150";"><Img src="http://code.helpor.net/picture/swimming.gif" id="www_helpor_net"></a></span>

14、javascript的容错脚本   说明: javascript的容错脚本，有了它，你的页面就不会出现错误提示了。    代码: <SCRIPT LANGUAGE="JavaScript"></SCRIPT>

本文来源：http://www.zhuodaoren.com/tuijian761072/

推荐访问:html菜鸟教程

上一篇：华为校招42所高校名单 下一篇：东莞限购政策最新2017

扩展阅读文章

热门阅读文章

推荐阅读推荐文章