配置环境

网页编写常用的编辑器

记事本: 无提示功能，不推荐。
editplus/nodepad++: 小巧方便，语法高亮，适合普通编写。
Dreamwaver: 功能强大，启动较慢，适合非专业设计。
Sublime: 轻量小巧方便，自带功能不太全，插件功能强大，需自行安装各种功能插件。
WebStorm: 重量级, 自带功能全面，收费软件，启动较慢，适合专业前端人员。
因为我们现在只是练习html的写法，推荐大家使用小巧方便的editplus/nodepad++或Sublime。其中sublime需要安装各种插件，也不太适合新手用。如果是老手，就没所谓了，都只是工具而已。

editplus的下载与安装

1. 百度Editplus[中文版]

   
   image.png

2. 选择合适的下载网站：

   
   image.png
   image.png
   

   3.运行下载的文件后，在软件目录双击EditPlusPortable.exe即可

   
   image.png

常用浏览器：现代浏览器（如谷歌浏览器、火狐浏览器）和IE浏览器

image.png

有兴趣的同学可以百度“常用浏览器”和“常用浏览器内核”进行了解。

设计网页最好使用谷歌浏览器：第一，他的速度很快，第二，他的调试工具很方便，第三他对网页标准的支持很好。当然还有其它的优点，比如说插件比较多等等。

常用的文本标签

段落标签p与换行标签br

• 段落标签p

<p>p是段落标签</p>
<p>段落标签正常情况是一个双标签，有开始和结束标签</p>
<p>在实际使用中，段落标签如果写成单标签，绝大多数的浏览器都能正常识别，但是不推荐。</p>

注意：<p>我是中国人。<p>我热爱自己的祖国.这种写法，将<p>用做单标签，大部分浏览器是认识的，会形成两个段落，但是不推荐。

• 换行标签br

我是第一行。
<br />
我是第二行。

• 段落标签与换行标签的区别：
  • 从文章结构上讲，段落标签形成的是段落，换行标签只是将一行文字变成两行，这两行文字仍然在一个段落中。
  • 从形式上讲，段落的间距比行间距要大。
  • 从输入的角度上讲，段落是按回车键，行是按shift键加回车。
• 输入如下代码，保存后测试效果。

  <p>段落标签与换行标签的区别：</p>
  <p>从文章结构上讲，段落标签形成的是段落，换行标签只是将一行文字变成两行，这两行文字仍然在一个段落中。</p>
  <p>从形式上讲，段落的间距比行间距要大。</p>
  <p>从输入的角度上讲，段落是按回车键，行是按shift键加回车。</p>
  <br />
  从文章结构上讲，段落标签形成的是段落，换行标签只是将一行文字变成两行，这两行文字仍然在一个段落中。
  <br />
  从形式上讲，段落的间距比行间距要大。
  <br />
  从输入的角度上讲，段落是按回车键，行是按shift键加回车。

效果应该如下图

image.png

标题字标签h1-h6

标题字标签用于标记文档中的标题，从形式上讲，标题是默认加粗显示，并独占一行，标题字标签按级别，可分为六级，h1最大，h2其次，h6最小。

在编辑器中输入如下代码并保存：

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

效果应该如下：

image.png

注意，标签是标签会对网页中的文本起到化结构的作用，同时， 搜索引擎也会使用标题为您的网页的结构和内容编制索引，其中h1具有更重要的意义，所以，通常只能设置一个，否则可能会被搜索引擎惩罚。那么实际应用当中，h1经常用来设置页面的logo或品牌。

• 思考：本页哪些可能是一级标题，哪些可能是二级标题，哪些可能是三级标题？

常见文本格式化（表现）标签

标签	描述
<strong></strong>	强调语义，加粗文字
<em></em>	强调语义，倾斜文字
<del></del>	删除语义，贯穿文字
<ins></ins>	新插入语义，下划线文字
<b></b>	加粗文字,因为纯表现，没有语义，已经被HTML5标准废弃
<i></i>	倾斜文字, 因为纯表现，没有语义，已经被HTML5标准废弃
<u></u>	下划线文字, 因为纯表现，没有语义，已经被HTML5标准废弃
<s></s>	贯穿文字,因为纯表现，没有语义，已经被HTML5标准废弃
<big></big>	加大文字
<small></small>	减小文字
<mark></mark>	标记文字

其它不常用标签

标签可以分为表现标签和语义标签两类，表现标签是可以修改文本外形的标签，语义标签是有意义的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

• 表现标签：例如_上标，^下标，和<pre>预格式化文本容器</pre>等等，可以改变文本外形的标签，如果纯粹是为了表现的而没有语义，那么慢慢的不被推荐使用了。
• 语义标签：例如
  • <blockquote>引用文本块</blockquote>
  • <code>代码</code>
  • <time>时间</time>
  • <samp>程序输出</samp>
  • <abbr title="PRC">People's Republic of China缩略语</abbr>

练习

• 观察下列文字，思考有哪些标签，并试着完成。

  
  image.png

• 代码参考：

<h1>《赋得古原草送别》<small>又名草</small></h1>
<p>（唐）白居易<sup>注1</sup></p>
<p>离离原上<b>草</b>，一岁一枯荣，</p>
<p>野火烧不尽，春风吹又生。</p>
<p>远芳侵古道，晴翠接荒城，</p>
<p>又送王孙去，萋萋满别情。</p>

小结

• 标签的分类：
  • 单双标签
  • 语义和表现标签
  • 结构和文本标签