HTML学习笔记_002_如何学习HTML

最新推荐文章于 2024-11-12 11:19:19 发布

weixin_34179762

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量163

点赞数

文章标签： javascript 操作系统 php ViewUI

.htm 还是 .html 文件后缀？

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。我们在实例中使用 .htm。这只是长久以来形成的习惯而已，因为过去的很多软件只允许三个字母的文件后缀。

不过对于新的软件，使用 .html 完全没有问题。

在远古时代（DOS时代），后缀只支持短短的三个字符，所以曾经用的是htm，随着时代的发展，这个限制也随之消失，这样，用html和htm都是可以的了，现在的软件也支持了。

学习HTML的最佳方法就是看别人写的代码，我们可以学习不同的网站的人们写出的代码是怎么样的。

一、打开某个网站

http://www.baidu.com

二、点击鼠标右键，选择查看页面源代码

这时候就会出现该页面的代码了

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <title>百度一下，你就知道 </title>
    <style>html{overflow-y:auto}body{font:12px arial;text-align:center;background:#fff}body,p,form,ul,li{margin:0;padding:0;list-style:none}body,form,#fm{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:active{color:#f60}#u{color:#999;padding:4px 10px 5px 0;text-align:right}#u a{margin:0 5px}#u .reg{margin:0}#u .last{margin-right:0}#u .un{color:#00c;text-decoration:underline;padding-right:11px;margin-right:5px;background:url(http://www.baidu.com/img/bg-1.0.1.gif) no-repeat right -195px;cursor:pointer}#u ul{width:100%;background:#fff;border:1px solid #9b9b9b}#u li{height:25px}#u li a{width:100%;height:25px;line-height:25px;display:block;text-align:left;text-decoration:none;text-indent:6px;margin:0;filter:none\9}#u li a:hover{background:#ebebeb}#u li.nl{border-top:1px solid #ebebeb}#userMenu{width:64px;position:absolute;right:7px;_right:2px;top:15px;top:14px\9;*top:15px;padding-top:4px;display:none;*background:#fff}#user{position:relative;display:inline-block}#m{width:680px;margin:0 auto;}#nv a,#nv b,.btn,#lk{font-size:14px}#fm{padding-left:90px;text-align:left}input{border:0;padding:0}#nv{height:19px;font-size:16px;margin:0 0 4px;text-align:left;text-indent:117px;}.s_ipt_wr{width:418px;height:30px;display:inline-block;margin-right:5px;background:url(http://s1.bdstatic.com/r/www/cache/aoyun/img/i-1.0.1.png) no-repeat -304px 0;border:1px solid #b6b6b6;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top}.s_ipt{width:405px;height:22px;font:16px/22px arial;margin:5px 0 0 7px;background:#fff;outline:none;-webkit-appearance:none}.s_btn{width:95px;height:32px;padding-top:2px\9;font-size:14px;background:#ddd url(http://s1.bdstatic.com/r/www/cache/aoyun/img/i-1.0.1.png);cursor:pointer}.s_btn_h{background-position:-100px 0}.s_btn_wr{width:97px;height:34px;display:inline-block;background:url(http://s1.bdstatic.com/r/www/cache/aoyun/img/i-1.0.1.png) no-repeat -202px 0;*position:relative;z-index:0;vertical-align:top}#lg img{vertical-align:top;margin-bottom:3px}#lk{margin:33px 0}#lk span{font:14px "宋体"}#lm{height:60px}#lh{margin:16px 0 5px;word-spacing:3px}.tools{position:absolute;top:-4px;*top:10px;right:-13px;}#mHolder{width:62px;position:relative;z-index:296;display:none}#mCon{height:18px;line-height:18px;position:absolute;cursor:pointer;padding:0 18px 0 0;background:url(http://s1.bdstatic.com/r/www/img/bg-1.0.0.gif) no-repeat right -134px;background-position:right -136px\9}#mCon span{color:#00c;cursor:default;display:block}#mCon .hw{text-decoration:underline;cursor:pointer}#mMenu a{width:100%;height:100%;display:block;line-height:22px;text-indent:6px;text-decoration:none;filter:none\9}#mMenu,#user ul{box-shadow:1px 1px 2px #ccc;-moz-box-shadow:1px 1px 2px #ccc;-webkit-box-shadow:1px 1px 2px #ccc;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color="#cccccc")\9;}#mMenu{width:56px;border:1px solid #9b9b9b;list-style:none;position:absolute;right:7px;top:28px;display:none;background:#fff}#mMenu a:hover{background:#ebebeb}#mMenu .ln{height:1px;background:#ebebeb;overflow:hidden;font-size:1px;line-height:1px;margin-top:-1px}#cp,#cp a{color:#77c}#seth{display:none;behavior:url(#default#homepage)}#setf{display:none;}#sekj{margin-left:14px;}</style>
    <script type="text/javascript">        function h(obj) { obj.style.behavior = 'url(#default#homepage)'; var a = obj.setHomePage('http://www.baidu.com/'); }</script>
</head>
<body>
    <div id="u">
        <span id="user"><strong class="un">tk657309822</strong><div id="userMenu">
            <ul>
                <li><a href="http://passport.baidu.com" name="tj_user">个人资料</a></li><li><a href="http://www.baidu.com/home/page/show/setting"
                    name="tj_msg">首页设置</a></li><li><a href="http://www.baidu.com/gaoji/preferences.html"
                        name="tj_setting">搜索设置</a></li><li class="nl"><a href="http://passport.baidu.com/?logout&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F"
                            name="tj_logout">退出</a></li></ul>
        </div>
        </span>|<a href="/home/show/home" name="tj_supper" class="last">新版首页</a></div>
    <div id="m">
        <p id="lg">
            <img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" usemap="#mp"><map
                name="mp"><area shape="rect" coords="40,25,230,95" href="http://hi.baidu.com/baidu/"
                    target="_blank" title="点此进入 百度的空间"></map></p>
        <p id="nv">
            <a href="http://news.baidu.com">新 闻</a> <b>网 页</b> <a href="http://tieba.baidu.com">
                贴 吧</a> <a href="http://zhidao.baidu.com">知 道</a> <a href="http://mp3.baidu.com">
                    MP3</a> <a href="http://image.baidu.com">图 片</a> <a href="http://video.baidu.com">
                        视 频</a> <a href="http://map.baidu.com">地 图</a></p>
        <div id="fm">
            <form name="f" action="/s">
            <span class="s_ipt_wr">
                <input type="text" name="wd" id="kw" maxlength="100" class="s_ipt"></span><input
                    type="hidden" name="rsv_bp" value="0"><input type="hidden" name="rsv_spt" value="3"><span
                        class="s_btn_wr"><input type="submit" value="百度一下" id="su" class="s_btn" οnmοusedοwn="this.className='s_btn s_btn_h'"
                            οnmοuseοut="this.className='s_btn'"></span></form>
            <span class="tools"><span id="mHolder">
                <div id="mCon">
                    <span>输入法</span></div>
            </span></span>
            <ul id="mMenu">
                <li><a href="#" name="ime_hw">手写</a></li><li><a href="#" name="ime_py">拼音</a></li><li
                    class="ln"></li>
                <li><a href="#" name="ime_cl">关闭</a></li></ul>
        </div>
        <p id="lk">
            <a href="http://baike.baidu.com">百科</a> <a href="http://wenku.baidu.com">文库</a>
            <a href="http://www.hao123.com">hao123</a><span> | <a href="/more/">更多>></a></span></p>
        <p id="lm">
        </p>
        <p>
            <a id="seth" οnclick="h(this)" href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com"
                οnmοusedοwn="return ns_c({'fm':'behs','tab':'homepage','pos':0})">把百度设为主页</a><a id="setf"
                    href="http://www.baidu.com/cache/sethelp/index.html" οnmοusedοwn="return ns_c({'fm':'behs','tab':'favorites','pos':0})"
                    target="_blank">把百度设为主页</a><span id="sekj"><a href="http://www.baidu.com/search/baidukuijie_mp.html"
                        target="_blank" οnmοusedοwn="return ns_c({'fm':'behs','tab':'kuaijie','pos':1})">把百度添加到桌面</a></span></p>
        <p id="lh">
            <a href="http://e.baidu.com/?refer=888">加入百度推广</a> | <a href="http://top.baidu.com">
                搜索风云榜</a> | <a href="http://home.baidu.com">关于百度</a> | <a href="http://ir.baidu.com">
                    About Baidu</a></p>
        <p id="cp">
            ©2012 Baidu <a href="/duty/">使用百度前必读</a> <a href="http://www.miibeian.gov.cn"
                target="_blank">京ICP证030173号</a>
            <img src="http://www.baidu.com/cache/global/img/gs.gif"></p>
    </div>
</body>
<script>    var bds = { se: {}, comm: { ishome: 1, sid: "1288_1328_1264_1186_1281_1303_1285_1320_1295_1332", user: "tk657309822", username: "tk657309822", sugHost: "http://suggestion.baidu.com/su", loginAction: []} }</script>
<script type="text/javascript" src="http://s1.bdstatic.com/r/www/cache/global/js/home-1.2.js"></script>
<script>    var bdUser = "tk657309822"; var w = window, d = document, n = navigator, k = d.f.wd, a = d.getElementById("nv").getElementsByTagName("a"), isIE = n.userAgent.indexOf("MSIE") != -1 && !window.opera; for (var i = 0; i < a.length; i++) { a[i].onclick = function () { if (k.value.length > 0) { var o = this, h = o.href, q = encodeURIComponent(k.value); if (h.indexOf("q=") != -1) { o.href = h.replace(/q=[^&\x24]*/, "q=" + q) } else { this.href += "?q=" + q } } } }; (function () { if (/q=([^&]+)/.test(location.search)) { k.value = decodeURIComponent(RegExp["\x241"]) } })(); if (n.cookieEnabled && !/sug?=0/.test(d.cookie)) { bds.se.sug(); }; function addEV(o, e, f) { if (w.attachEvent) { o.attachEvent("on" + e, f); } else if (w.addEventListener) { o.addEventListener(e, f, false); } } function G(id) { return d.getElementById(id); } function ns_c(q) { var p = encodeURIComponent(window.document.location.href), sQ = '', sV = '', mu = '', img = window["BD_PS_C" + (new Date()).getTime()] = new Image(); for (v in q) { sV = q[v]; sQ += v + "=" + sV + "&"; } mu = "&mu=" + p; img.src = "http://nsclick.baidu.com/v.gif?pid=201&pj=www&rsv_sid=1288_1328_1264_1186_1281_1303_1285_1320_1295_1332&" + sQ + "path=" + p + "&t=" + new Date().getTime(); return true; } if (/\bbdime=[12]/.test(d.cookie)) { document.write('<script src=http://s1.bdstatic.com/r/www/cache/ime/js/openime-1.0.0.js><\/script>'); } (function () { var u = G("u").getElementsByTagName("a"), nv = G("nv").getElementsByTagName("a"), lk = G("lk").getElementsByTagName("a"), un = ""; var tj_nv = ["news", "tieba", "zhidao", "mp3", "img", "video", "map"]; var tj_lk = ["baike", "wenku", "hao123", "more"]; un = bds.comm.user == "" ? "" : bds.comm.user; function _addTJ(obj) { addEV(obj, "mousedown", function (e) { var e = e || window.event; var target = e.target || e.srcElement; ns_c({ 'fm': 'behs', 'tab': target.name || 'tj_user', 'un': encodeURIComponent(un) }); }); } for (var i = 0; i < u.length; i++) { _addTJ(u[i]); } for (var i = 0; i < nv.length; i++) { nv[i].name = 'tj_' + tj_nv[i]; _addTJ(nv[i]); } for (var i = 0; i < lk.length; i++) { lk[i].name = 'tj_' + tj_lk[i]; _addTJ(lk[i]); } })(); addEV(w, "load", function () { k.focus() }); w.onunload = function () { };</script>
<script type="text/javascript" src="http://s1.bdstatic.com/r/www/cache/global/js/tangram-1.3.4c1.0.js"></script>
<script type="text/javascript" src="http://s1.bdstatic.com/r/www/cache/user/js/u-1.3.1.js"></script>
<script type="text/javascript" src="http://s1.bdstatic.com/r/www/cache/aoyun/js/aoyun-1.1.js"></script>
</html>
<!--e75fa6eef066b24c-->

处理常规的HTML，还包含了很多的其他东西，它们联合在一起，为我们提供更好的视图和功能。