整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
)通过创建WebSite程序,创建网页
通过VS菜单栏的"文件"->"新建"->"新建网站"->"ASP.NET空网站"
创建web空网站
在右侧的"解决方案"窗口的空网站上右击选择"添加"->"html"起个名字
创建网页
2)通过创建WebApplication程序创建网页
通过VS菜单栏的"文件"->"新建"->"项目"->"新建项目"->"ASP.NET空Web应用程序"
创建空web程序
创建好空web程序之后,添加网页方式如上一个图"创建网页"所示基本差不多不再截图
3)在指定浏览器中查看编辑好的网页
3.1为WebApplication程序设置指定浏览器
设置浏览器
如上图所示,点击此图标即可在浏览器中查看编辑后的效果;通过此图标的右侧小三角形查看电脑上都有上面浏览器,,前面打对勾地表示当前打开的浏览器,如果设置其他的默认浏览器,选择"使用以下工具浏览"选项,在弹出的对话框中添加,移除设置默认浏览器(默不默认个人感觉差别不大),自己手动试试不再赘述
浏览器选项中的"Page Inspector"是VS自带的使用IE内核的小浏览器
3.2为WebSite程序指定浏览器
3.2.1第一种方式:WebApplication程序设置方式差不多自己测试;
3.2.2第二种方式:在右侧WebSite上右击选择"浏览方式",在此窗口中设置默认等操作
两种程序第一次点击浏览图标查看网页时都会打开一个VS自带小型的服务器(IIS)
使用VS创建网页便于下面的JavaScript(简称js)语言的讲解
、新建项目
1、新建===web项目===输入项目名称====完成
二、新建html文件
在新建项目中新建html模板
输入文件名称：
三、认识基本格式
联想出基本格式：
四、编辑html文件
运行html，选择浏览器
五、html常用的快捷键
（1）ctrl+n+w web项目创建
（2）ctrl+n+h html文档创建
（3）ctrl+s 保存html页面（页面上如果未保存会显示*号）
（4）ctrl+r html运行
（5）ctrl+z 撤回
（6）！+tab键 联想基本格式
（7）ctrl+/ 注释和取消注释
（8）ctrl+鼠标滚轮， 字体方大和缩小
六、认识标签
（1）H标签（标题标签）
（2）p标签 （段落标签）
（3）img 标签（图片标签）
两种：第一种widows上传图片，第二种：网上图片链接
第一种
img中显示图片
img中引入图片
第二种：网上图片的链接：
（4） 标签（空格）
（5）em 标签表示斜体
（6）i 标签表示斜体
（7）br 表示换行
（8）b 标签表示加粗
（9） strong 标签表示加粗
（10）s 标签（删除线）
（11）u 标签 （下划线）
（12）font 颜色
（13）sub下标
（14）sup上标
<div>元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。
在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。
那时，大街小巷上有好多网吧。
那时，马云刚刚辞去工作准备创业。
那时，发送邮件的操作都会出现在计算机课程中。
那时，对页面还没有现在的跨平台要求。
那时，flashplayer大行其道。
那时，dreamwaver、flash、fireworks被称为网页三剑客！
那时，制作网页可以不用懂的html的写法！
第一次接触网页制作是在大学的专业课上，使用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何使用flash制作酷炫的交互动画上了。
那时，对html还没有深刻的认识，但是却对<table></table>这个标签有着极深的印象。
因为当时的dreamwaver通过非代码方式生成的页面都是使用<table>表格元素进行布局的！
也就是说，在移动智能设备诞生之前，在用户对页面还没有可以适应不同屏幕比例的要求前，<table>这个本来用来做表格的元素同时兼职了<div>的页面布局工作，而且把兼职干成了主业，让<div>这个专业的块元素闲置了好久。
直到智能手机，平板电脑产生后，由于对页面的跨平台显示的要求的出现（这类适应多平台的页面布局叫做响应式布局），<table>表格制作的页面在响应式布局大行其道的今天，用它布局的页面开始出现代码冗余，维护困难等诸多问题。手机端的浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。
从此，页面制作的世道变了，从不需要编程就能制作页面的三剑客，变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式，过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。
dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的方式。
这个故事在开始学习<div>和css布局之前我都会讲给学生（一群文科生）听，我只是想告诉大家，学习任何计算机技术，我们可以从简单易学的方式入手，但要有透过这种方式向下挖掘核心知识的决心和勇气！对于自己从事的工作我们不能满足于会做，还要尽量透析它的原理，这样才能在技术换代中不会被轻易淘汰。
在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技术概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。
从此我开始学习数学。因为老师的一句话：从2000年到现在（2014）虽然各种软件层出不穷，但是计算机图形学的核心算法却几乎没什么改变。
向下挖掘虽然很难，但是有必要！与各位共勉！
下面开始今天的内容。
首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把<body></body>中间的内容清空。
如图：
下面，我们在<body></body>中间添加<div></div>标签。示例代码如下：
<body><div></div></body>我们看看效果：
啦啦啦，什么都没有！
为了让大家可以看出来不同，我们为<div>添加边框属性！
我们使用style属性为<div>添加边框，style属性里的代码就是以后在CSS中使用的代码！实际上我们已经开始接触CSS的一些内容了。具体写法的讲解大家可以看这个教程，这里不再赘述。
示例代码如下：（通过style = "border-style: solid;"可以为很多元素添加边框，就不需要大家记忆或查询不同元素的不同写法，是不是很方便！）
<div style = "border-style: solid;">效果如图：
因为里面没有内容，所以<div>的宽度是0，因此显示的就是一条直线。下面我们向<div>中添加内容。
为了看起来花哨些，加张图片吧！
示例图片
示例代码如下：
<div style = "border-style: solid;"><img src = "img/示例图片/image4.jpg"/ style = "width:50%；"></div>大家请按照<img>中的scr自行建立文件夹和命名吧！如果您看不懂请参照《HTML元素中的属性2（路径详解）——零基础自学网页制作》
效果如下：
其中，我们也是使用了style的方式为<img>设置的宽度，这个设置方法在<div>中一样使用！
代码示例：大家注意写法，不同的属性都添加到style的双引号中即可，同时使用；隔开！
<div style = "border-style: solid; width:50%;">
<img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
</div>效果如图：
整个边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。
为了方便观看，我们去掉div的width设置。同时在<div>中继续添加<div>标签。为了方便显示，我们在新的<div>中添加一段文字！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
<div>
<p>学习网页制作非常有趣！</p>
</div>
</div>效果如下：
如果为了美观，我们让文字到图片右边的空间中怎么做呢？
示例代码如下：
<div style = "float:right;"><p>学习网页制作非常有趣！</p></div>
我们通过为新的<div>标签中的style属性添加float（浮动）属性，同时设置为right（右）。
页面效果如图：
大家思考一下如何让图片与文字都靠在左边呢？
是不是为图片style添加float:left;同时把新<div>的float改为left？
我们试试看！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
</div>页面效果：
效果完全不对，图片和文字跑到外边来了。
这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改<img>属性也不是修改<div>属性，而是增加一组空的<div></div>标签！给这个新的空的<div>的style设置为"clear:both"即可修正。
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>页面效果如下：
值得注意的是，如果您不使用<div>的话直接使用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会出现上面的情况。
代码如下：
<body>
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">学习网页制作非常有趣！</p>
</body>页面显示效果如下：
大家观察一下，文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况，而且文字也变小的问题在以后的讲解中我们再深入探讨！
现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细说明。
疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
