html排版一篇文章

  使用html文档排版一篇文章和Word的思路基本一致，先写内容，再添加样式，设置字体、位置、颜色...，实现内容样式分离。

编辑文档过程

编辑内容

结果查看文档：1.编辑一篇文章.html

• 文章的一级标题也就是文章题目使用h1标签
• 二级目录使用h2标签
• 三级目录使用h3标签
• 段落内容使用p标签

   首先遵循上面的规则编辑内容，如果仅仅考虑视觉效果你也可以使用div代替h和p标签，它们都是块元素，网页默认布局是一样的额，使用h和p标签是为了更好的语义化， 不论人编写阅读HTML文档，还是对于搜索引擎SEO优化都更有好处，一般也已html文档页面只有一个h1标签，用来创建文章题目，h2~h6可以自由添加。

简单布局

结果查看文档：2.编辑一篇文章.html

• 中文段落开头空格使用符号  
• 用article标签包含所有的元素
• article元素的宽度不约束，文章内容就是随着网页的宽度自适应变化，如果定宽度就添加width宽度属性，通过margin控制居中
• 大标题也可以通过margin: auto居中
• 通过font-size: 20px控制二级标题字体大小

   article标签是HTML5新增的元素，用article标签包裹所有标签是为了能够整体约束宽度、位置等样式属性，但从布局来看使用div就可以，过去也是这么做，既然有更语义化的article标签 自然使用article标签，单看英文单词字面意思都知道article标签是什么意思，通常article标签里面的内容就是指一篇文章。不过随着时间的发展，搜索引擎越来越智能化，越来越像人，把内容是最重要的 ，实际编程的过程中也不用去纠结div或者html，关键在于文章内容。做Web应用的交互界面，对SEO没什么需求，使用div和article区别也不大。

文章细节编辑

结果查看文档：3.编辑一篇文章.html

• 使用span标签选中域代码相关的文字片段，蓝色显示，加粗显示

  通常文章中某些文字需要特殊的颜色、字体或粗细显示可以通过span标签包裹选中，然后给span添加属性

• 使用strong标签包裹关键词

  strong标签包裹的关键词是粗体显示，从视觉上来说strong实现的粗体和style属性字体粗此设置font-weight: bold;没区别，但从搜索引擎的角度来看不一样，strong标签 强调的词可以理解为文章的关键词。在过去没CSS的时候，html直接提供一个b标签用来加粗内容，b和strong标签从视觉上是一样的，只是b标签没什么语义，现在来说，凡是没有语义的样式 能用样式style属性实现，都不要用b这类标签实现，样式和内容分离是必要的，关于内容网页结构主要学习HTML，网站的布局外观主要学习CSS。

• 使用下标标签sub标签把T1显示效果更改为T₁

  HTML提供了非常多的标签，虽然很多不常用，有下标标签sub，也有上标标签sup，平时不用记忆，用到的时候搜索一下。