<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>将此文件保存为“mypage.htm”。启动浏览器。在文件菜单中选择“打开”（或者“打开页面”），这时将出现一个对话框。选择“浏览”（或者“选择文件”），定位到你刚才创建的HTML文件——“mypage.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说：“C:\MyDocuments\mypage.htm”。单击“确定”，浏览器将显示此页面。
--------------------------------------------------------------------------------例子解释HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。在<b>和</b>标签之间的文本会以加粗字体显示。
---常见问题问：我编写完了HTML文件，但是不能在浏览器中看见结果，为什么？
答：请确认你保存了文件，并且使用了正确的文件名和扩展名，例如：“c:\mypage.htm”，并且确认你用浏览器打开时使用同样的文件名。问：我编辑了HTML文件，但是修改结果并没有在浏览器中显示，为什么？
答：浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。
-----------------------------------------------------------------------------
HTML基本标签：(2):HTML中最重要的标签是定义标题元素，段落和换行的标签。
标题元素标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML自动在一个标题元素前后各添加一个空行。
(3):段落段落是用<p>标签定义的。
<p>This is another paragraph</p>HTML自动在一个段落前后各添加一个空行。
--------------------------------------------------------------------------------换行当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。
<p>This <br>is a para<br>graph with line breaks</p><br>标签是一个空标签，它没有结束标记。
基本注意点——有用的技巧当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。我们使用了水平线（<hr>标签）来分隔我们教程的章节。
更多示例：a:多个段落：
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
(这个例子说明了段落的一些默认行为。)b:换行：
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>
(这个例子说明了在HTML文档中换行的使用。)
c:诗歌的问题： <html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>
(这个例子说明了HTML显示格式的一些问题。)d:标题元素： <html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>
</body>
</html>
(这个例子说明了在HTML中显示标题元素的标签。)e:居中的标题元素：<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>
</body>
</html>
(这个例子显示了一个居中的标题元素。)f:水平线：<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
(这个例子说明了如何插入水平线。)
g:隐藏的注释：<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
(这个例子说明了在HTML文档中如何插入隐藏的注释。)h:背景色：<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
(这个例子说明了如何给页面设置背景色。)
html可以自学，但是目前前端并不是只会Html就可以的，只会HTML是找不到工作的。
要学html，css，js，最好会目前比较流行的前端框架，比如vue，或者react...另外做前端你需要有做项目的一个整体思维，这些如果自学的话，短时间是不能融会惯通的。最好找个老师或者培训机构入个门，深入的内容自己再琢磨，这样效率会更高些。
一、Chrome*浏览器chrome模拟手机总共有四种方法，原理都一样，通过伪装User-Agent，将浏览器模拟成Android设备。以下标星的为推荐方法。
1.新建Chrome快捷方式
右击桌面上的Chrome浏览器图标，在d出的右键菜单中选择“复制”，复制一个图标副本到桌面。右击该副本，选择“属性”，打开相应的对话框，在“目标”文本框的字符后面添加以下语句：“–user-agent=”Android””。注意user前面是两个“-”，并且“chrome.exe”与“–user”之间有一个空格。确定之后，打开这个新建的Chrome快捷方式，输入3g.qq.com就可以浏览到像手机里打开一样的页面了。
这时可以新建一个用户，就不影响原来用户访问的时候也是访问的手机版。
2.一次性模拟iPhone和安卓手机
开始–运行中输入以下命令，启动浏览器：
模拟谷歌Android：
chrome.exe --user-agent="Mozilla/5.0 (LinuxUAndroid 2.2en-usNexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
模拟苹果iPhone：
chrome.exe --user-agent="Mozilla/5.0 (iPadUCPU OS 3_2_2 like Mac OS Xen-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"
这种方法仅供特殊情况下使用，因为重启Chrome将不能恢复正常User-Agent，所以是一次性。
更多的user-agent请自行搜索。
3.安装插件
插件可以很方便切换各种user-agent，很方便，但是可能会稍微影像性能。
User-Agent Selector地址：https://chrome.google.com/webstore/detail/user-agent-selector/fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related
4：自带模拟器*
打开chrome开发者工具，按F12（r32版本），然后找到右上角的齿轮按钮，打开设置面板，选择Overrides，勾上Show ‘Emulation’ view in console drawer（在控制台视图中显示“仿真”）。
然后关闭设置面板，选择Elements面板（非Console就可以），找到右上角打开控制台面板，选择控制台面板里的Emulation面板，右边有很多选项，选择一个点击Emulate就可以了，Reset按钮能恢复到默认状态。
二、Firefox*浏览器
1.修改user-agent
和chrome一样安装插件修改user-agent的方法，搜索wmlbrowser、XHTML Mobile Profile以及User Agent Switcher三个插件
2.火狐响应式设计+修改user-agent*
最近的火狐自己添加响应式设计功能和3D试图都很棒，打开火狐自己的控制台（非firebug），找到右上角的响应式设计按钮。
打开后即切换到响应式设计界面。
3.Firefox OS 模拟器
安装的方法可百度搜索。可用里面的浏览器打开网站即可，但这种方法打开的是电脑网站，而不是手机网站，也就是user-agent不是手机的，故对响应式界面起作用，对判断user-agent的网站不起作用，访问qq，baidu等返回的都是电脑界面。
三、Opera*浏览1.修改user-agent
和chrome和firefox类似，可自行安装插件，自opera12之后，opera改用webkit内核，故可安装chrome的插件，也可自行在opera的商店中搜索插件，下载适合自己的版本。
四、模拟器*
1.官方模拟器*
做安卓开发的肯定都知道安卓模拟器，这是谷歌官方的提供的开发环境，能模拟安卓环境，还可切换各个版本，可下载配置好的环境，然后打开eclipes，直接打开AVDM，穿件一个AVD，然后start。
要等一大会时间，会打开模拟器，和安卓环境一样，打开里面的浏览器测试即可。
2.bluestacks
这也是一款模拟器，可自行搜索
五、在线测试
在线只能测试界面的视觉效果，不能调试，但也是很不错的。
1.Mobile Emulator*
非常不错，速度也很快，界面很简洁，支持多种平台。
2.opera mini simulator
需要java环境支持，单一平台，opera出品，速度很快。
3.webpage mobile。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）