1.安装HTML编辑器-WebStorm
（1）常用的前端开发工具：Dreamwaver，Sublime，WebStorm
（2）可以直接百度搜索WebStorm，因为是收费软件，如果是为了学习，我们可以下载破解版，如果你已经工作，有一定收入，我希望你能支持正版，而且官网下载的免费使用三十天，官网地址：http://www.jetbrains.com/webstorm/
（3）安装WebStorm后，打开软件，在激活页面选择“License server”，在下方输入“http://idea.iteblog.com/key.php”即可破解
（4）可以下载汉化包，将汉化包放入安装目录的lib文件夹中
（5）新建html文件：ctrl+alt+insert，然后选择“HTML File”
2.H标签、P标签和Hr标签
（1）H标签
-作用：用于给文本添加标题，不是用来修改文本样式的
-格式：<h1>...</h1>
-H标签一共有6种，<h1>...<h6>，如图所示：
图2-1 H标签
-在企业开发中，一个页面只能有一个<h1>标签
-属性align：<h1 align="...">...</h1>，align可以为left（居左）、center（居中）、right（居右）（不推荐使用）
（2）P标签
-作用：告诉浏览器哪些文字是段落，会单独占据一行
-格式：<p>...</p>
-具体呈现，如图所示：
图2-2 P标签
（3）Hr标签
-作用：在浏览器上显示一条分割线
-格式：<hr/>，如图所示：
图2-3 Hr标签
3.注释
（1）格式：<!--这里是注释-->
（2）作用：方便阅读代码
（3）WebStorm中的快捷键：ctrl+/ 快捷加入注释
4.img标签
（1）作用：告诉浏览器要显示一张图片
（2）格式：<img src="图片路径">
（3）img标签不会独占一行
（4）属性：
-width 图片宽度，只要指定了宽度，系统会自动根据宽度计算高度
-height 图片高度，只要指定了高度，系统会自动根据宽度计算宽度
-title 当鼠标悬停在图片上时，显示的文本
-alt 是alternate的缩写，用于告诉浏览器，当需要的图片找不到时显示的内容
5.br标签
（1）作用：换行
（2）格式：<br>
（3）多个br标签可以多个使用，用多少个就换多少行，但是由于HTML的作用（给文本添加语义），所以在企业开发中很少使用br标签
6.路径
（1）相对路径：在“.html”文件所在的文件夹开始查找
（2）绝对路径：每次都从指定的盘符查找（不建议使用）
7.a标签
（1）作用：用于控制页面之间的跳转
（2）格式：<a href="指定要跳转的页面">展现给用户的内容</a>，如图所示：
图2-4 a标签
（3）不仅可以用文本点击跳转，还可以用图片等，注意的是，网页链接需要加上“http://”或者“https://”
（4）使用相对路径可以跳转本地页面
（5）a标签中有一个target属性，用于控制如何跳转，值可以为“_self（在当前选项卡中跳转）”和“_blank（新建选项卡跳转）”
（6）title属性：跟img标签中的title属性一样，当鼠标悬停在图片上时，显示的文本
8.base标签
（1）作用：统一制定所有超链接（a标签）新建选项卡打开
（2）格式：在<head>...</head>中添加 <base target="_blank">
（4）如果需要单独的某个超链接在当前窗口打开，只需要在其中单独制定即可
9.假链接
（1）作用：点击之后不会跳转的超链接，在开发过程中，其他页面没写出来时，用假链接代替
（2）格式：
-# 点击后自动回到网页顶部（常用的是各大网站中的“回到顶部”按钮）
-javascript: 点击后不会自动回到顶部
10.锚点
（1）作用：跳转到当前页面的指定位置，常用于目录制作
（2）通过a标签跳转，且给目标位置绑定id属性
（3）格式：
<a href="#center">...</a>
<h2 id="center">..</h2>
网友评论