HTML学习笔记_002_如何学习HTML

.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"><mapname="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><inputtype="hidden" name="rsv_bp" value="0"><input type="hidden" name="rsv_spt" value="3"><spanclass="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><liclass="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，还包含了很多的其他东西，它们联合在一起，为我们提供更好的视图和功能。

HTML学习笔记_002_如何学习HTML相关推荐

深度学习入门之PyTorch学习笔记：深度学习介绍
深度学习入门之PyTorch学习笔记:深度学习介绍绪论 1 深度学习介绍 1.1 人工智能 1.2 数据挖掘.机器学习.深度学习 1.2.1 数据挖掘 1.2.2 机器学习 1.2.3 深度学习第 ...
学习笔记：CentOS7学习之二十二：结构化命令case和for、while循环
目录学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...
学习笔记：CentOS7学习之十六：LVM管理和ssm存储管理器使用
目录学习笔记:CentOS7学习之十六:LVM管理和ssm存储管理器使用 16.1 LVM的工作原理 16.1.1 LVM常用术语 16.1.2 LVM优点 16.2 创建LVM的基本步骤 16.2 ...
学习笔记：强化学习与最优控制（Chapter 2）
Approximation in Value Space 学习笔记:强化学习与最优控制(Chapter 2) Approximation in Value Space 1. 综述 2. 基于Value ...
【长篇博文】Docker学习笔记与深度学习环境的搭建和部署（二）
长篇博文记录学习流程不容易,请关注.转发.点赞.评论,谢谢! 上一篇文章:Docker学习笔记与深度学习环境的搭建和部署(一) 文章末尾附加nvidia455.23.cuda11.1.cudnn8.0 ...
学习笔记-零基础学习人工智能（0）
学习笔记-零基础学习人工智能(0) 背景规划背景作为物理专业的大龄青年,由于兴趣爱好想学习下人工智能.主要感兴趣的方向是对抗样本生成.自己也做了一些了解,但是发现千头万绪,不懂的东西太多.为了梳 ...
开源鸿蒙南向嵌入学习笔记——NAPI框架学习（一）
开源鸿蒙南向嵌入学习笔记--NAPI框架学习(一) 前言--系列介绍本系列文章主要是记录笔者在鸿蒙南向的学习与工作中的知识点笔记记录,其中不止会针对鸿蒙中的学习问题进行思考与记录,也会对涉及到的一些 ...
motan学习笔记五 opentracing学习入门
motan学习笔记一微博轻量级RPC框架Motan motan学习笔记二 motan架构分析 motan学习笔记三 motan Demo 分析 motan学习笔记四 motan Demo 之 ...
Unity学习笔记：个人学习项目《疯狂天才埃德加》纠错文档
Unity学习笔记:个人学习项目<疯狂天才埃德加>纠错文档本文档是完成学校Unity课程作业时建立的纠错文档.用于记录自己开发过程中遇到的各种问题,以便下次遇到相同的问题时及时找到解决方 ...

HTML学习笔记_002_如何学习HTML

.htm 还是 .html 文件后缀？

HTML学习笔记_002_如何学习HTML相关推荐

最新文章

热门文章