vs2013能编译单个html或者js代码，成网页并预览吗

栏目：资讯发布：2023-11-07浏览：3收藏

vs2013能编译单个html或者js代码，成网页并预览吗,第1张

VS可以预览网页，但操作相比DW稍微繁琐点。

首先你要指定网页文件打开的默认浏览器，然后点击调试，少顷系统托盘会出现一个图标（此时已启动IIS环境），这时你用浏览器访问127001或者在图标上点右键选择“127001”即可打开浏览器预览网页。

1、DOCTYPE的声明

如果我们想做好一件事情，首先要知道我们有哪些权利去做，就如网页中“DOCTYPE”的声明，我们没有必要去讨论是否使用HTML401或者XHTML10或者说现在的HTML5都提供了严格版本或者过渡版本，这些都能很好的支持我们写的代码：

由于我们现在的布局不需要table布局也能做出很好的布局，那么我们就可以考虑不使用过渡型而使用严格型的“DOCTYPE”，为了向后兼容，对此，马海祥建议使用HTML5的声明模式：

<!DOCTYPE HTML>

2、字符集和编码字符

在每个页面的开始中，我们都在<head>中设置了字符集，我们这里都是使用“UTF-8”。

而且我们在平时写页面中时，时常会碰到"&"这样的符号，马海祥认为我们不应该直接在页面这样写“&”，如下图所示：

我们应该在代码中使用字符编码来实现，比如说“&”我们在代码中应该使用“&”来代替它。

3、正确的代码缩进

在页面编辑中，代码的缩进有没有正确，他不会影响你网站的任何功能，但要是你没有一个规范的缩进原则，让读你代码的人是非常的生气，所以说正确的代码缩进可以增强你的代码可读性。

标准程序的缩进应该是一个制表符（或几个空格），我们来一起来看下面展示的这张图，你看后就知道以后自己的代码要怎么样书写了：

不用说，大家都喜欢下面的那种代码吧。这只是一个人的习惯问题，不过马海祥建议从开始就要做好，利人利已。

4、CSS样式和Javascript脚本

页面中写入CSS样式有很多种方法，有些直接将样式放入页面的“<head>”中，这将是一个很不好的习惯，因为这样不仅会搞乱我们的标记，而且这些样式只适合这一个HTML页面。

所以，我们需要将CSS单独提出，保存在外部，这样后面的页面也可以链接到这些样式，如果你页面需要修改，我们也只需要修改样式文件就可以。正如下图所示：

上面我们所说的只是样式，其实javascript脚本也和CSS样式是同一样的道理。

所以，马海祥建议大家在制作web页面中，尽量将你的CSS样式和javascript脚本单独放在一个文件中，然后通过链接的方式引用这些文件，这样做的最大好处是，方便你的样式和脚本的管理与修改。

1、在电脑桌面创建一个空白文本文件：

2、编辑输入需要的html代码，如：

3、单击文本编辑器的保存按钮，保存编辑好的html代码：

4、回到桌面，找到编辑好的html代码文本文件，修改文件后缀名为html并确定：

5、双击该html文件，就可以在浏览器中执行了，效果如下：

　一、基本框架

　　如同人一样，网页也包括了“头部”和“身体”，

　　＜head＞标记内包含着诸如网页标题、语言编码、网页描述等基本信息，而平时我们真正见到的网页内容均放在＜body＞标记内。现在先介绍一下＜head＞里的基本信息。

　　网页标题(标记格式为＜title＞＜/title＞)

　　创建网页标题文字：＜title＞标题＜/title＞ //此处书写的文字会显示在IE的标题栏上。

　　网页文档信息(标记格式为＜meta＞)

　　描述网页内容类型：＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞ //该页面为TXT文本或HTML格式，语言编码方式为GB2312(即简体中文)。

　　描述网页的关键字信息：＜meta name="keywords" content="这里是关键字"＞

　　对网页的详细描述：＜meta name="description" content="这里是对该网页的介绍"＞

　　刷新网页：＜meta http-equiv="refresh" content="5;URL=xxxhtm"＞ //5秒种后刷新，并链接到xxxhtm。

　　二、组成要素

　　无论网页如何千变万化，构成一个网页内容的最基本要素大体只有五种，即文字、、表格、超链接和表单控件，所以下面将围绕着这五个要素逐一列举介绍。

　　文字(标记格式为＜font＞＜/font＞)

　　指定文字字体：＜font face="宋体"＞宋体文字＜/font＞

　　指定文字大小：＜font size="3"＞3号文字＜/font＞

　　指定文字颜色：＜font color="#FF0000"＞红色文字＜/font＞ //网页颜色采用16位编码，因此#FF0000表现为红色。大家可以查阅相关资料了解其他颜色的编码。

　　(标记格式为＜img＞)

　　＜img src="images/picjpg" width="400" height="300" border="2" align="center"＞// src指定为路径地址，width为宽度，height为高度，border为边框大小，align为横向位置。

　　表格(标记格式为＜table＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞)

　　＜table width="400" height="300" border="1" align="center" cellpadding="2" cellspacing="2" bgcolor="#FF0000"＞＜tr＞＜td＞此处添加文字或等＜/td＞＜/tr＞＜/table＞// width、height、border、align与以上的例子作用一样，cellpadding为边框与单元格的间距，cellspacing为单元格之间的间距，bgcolor为表格背景色。

　　以上所介绍的元素都是只存在当前页中，而网页超链接的出现大大改变了人们的浏览习惯，可根据自己喜好，点击到相关链接查看网页信息。

　　超链接(标记格式为＜a＞＜/a＞)

　　＜a href="xxxhtm" title="提示文字"＞链接文字或＜/a＞ //href为被点击后的链接页，title为鼠标悬停在链接文字或上后出现的提示文字。

　　表单控件(标记符号为＜input＞、＜textarea＞＜/textarea＞、＜select＞＜/select＞)

　　表单控件实现了人与网页的交互，像大家常去的论坛、购物站点等都有它的“身影”。

　　文本框：＜input type="text" value="这是文本框"＞ //value为该控件的值，以下每个表单控件均可设定，不设默认为空

　　密码框：＜input type="password"＞

　　单选框：＜input type="radio"＞

　　复选框：＜input type="check"＞

　　提交按钮：＜input type="submit"＞

　　重置按钮：＜input type="reset"＞

　　隐藏区域：＜input type="hidden"＞

　　文本域：＜textarea rows="6" cols="30"＞＜/textarea＞ //rows为行数，cols为宽度

　　列表框：＜select＞＜option＞项目1＜option＞项目2＜option＞项目3＜/select＞

　　编后：学习HTML的目的不是为了要用它来编写网页，因为利用很多软件的编辑功能就可以省掉一些编程的麻烦。最重要的是本文介绍了页面里最基本的元素，了解这些知识后可以分析网页的结构，学习高手们所使用的特殊效果。当然HTML代码的内容远不止这些，想要在网页设计方面发展的朋友学好它是非常必要的。

在浏览器里，有几个办法可以查看HTML网页源代码：

1、右键点击浏览器的空白处，选择查看源代码；

2、查看网页HTML源代码的快捷键为：Ctrl键+U键；

3、点击浏览器菜单栏的查看-->>选择查看网页源代码。

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先，使用chrome浏览器进入到相关网页，例如：zhidaobaiducom。

2、在网页空白处鼠标右键，点击“查看网页源代码”按钮。

3、浏览器运行indexhtml页面，此时会打开当前网页的源代码供查看。

良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候，我总是首先告诉他们：良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。

让我们来看一些写得并不友好的HTML标记，并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。

注： Chris Cyier在这里使用了两个文档来进行本文的代码说明： bad code 和 good code 。大家学习的时候请参考着这两个文件。

1 严格的 DOCTYPE

我们要做到这一点，只需要按正确的步骤来做即可。没必要去讨论是否使用HTML 401或 XHTML 10，两者都对我们书写正确的代码提出了严格的要求。

但无论如何我们的代码不应该使用任何Tables表格来进行布局，所以也就没必要使用Transitional DOCTYPE

注：所谓的DTD就是文档类型声明，简单来说，就是对特定文档所定义的一些规则，这些规则包括一系列的元素和实体的声明。XHTML文档类型有三种： STRICT（严格类型）， TRANSITIONAL（过渡类型）和 FRAMESET（框架类型）。目前，我们使用最多的是TRANSITIONAL，比如本站目前也是使用 XHTML 10 TRANSITIONAL。如果你的HTML代码书写的还算良好，那把现有的TRANSITIONAL 转为STRICT还是比较方便的。反之，也不用太急着转，个人觉得，STRICT更严谨，但用TRANSITIONAL也并没有太大影响。

2 Character set & encoding characters

在我们的《head》部份，第一件事情就是声明字符集。我们使用了UTF-8，但是把它放到了《title》后面。让我们把字符集声明移动到最上面，因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。

除了字符集声明的位置外，《title》中出现的奇怪字符也是需要注意的问题，比如最常用的”&“字符，我们应该使用字符实体”&“来替换它。

3 适当的缩进

在书写代码的时候，缩进并不会影响网页的外观，但使用适当的缩进能使代码更具可读性，标准的缩进方法是当你开始一个新的元素时缩进一个Tab位（或几个空格）。另外，记得，关闭元素的标签与开始标签对齐。

注：一些朋友会嫌书写代码的时候缩进比较麻烦，如果仅仅是你一个人阅读这份代码，那可能没什么问题，你自己觉得OK就好。但如果是协作或你的作品是公开发布分享的，那书写漂亮的可读化性更高的代码就很有必要了。

4 使用外部CSS 和 JavaScript

我们有一些CSS代码已经延伸到我们的《head》部分。这是一个严重的犯规，因为它它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们，并使用相同的代码。Javascript也是同样的道理。

注：当然，这个问题或许也并不是那么严重。比如作为WordPress主题来说，写在《head》里面的代码也就作用于所有WordPress页面。但把CSS写在《head》里面仍然是个非常不好的习惯。