[HTML入门]使用内联样式写CSS

什么是HTML?

HTML代表超文本标记语言，对于许多初学者来说可能是一个令人困惑的术语。HTML是一种基础技术，常与CSS，JavaScript一起被众多网站用于设计网页，网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化页面。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML与CSS和JavaScript有何关系？

HTML，CSS和JavaScript是用于创建大多数网页的三种主要语言。每种语言都有着不同的功能，不同的规则，但是它们都可以共同为网页提供内容，设计和功能。

HTML是任何网站的基础。HTML代码包含网站的基本结构和内容，其中包括所有文本，链接，表格，图像链接和其它此类元素。

CSS（层叠样式表）用于定义页面的设计，包括每个元素的大小及外观等内容。使用CSS可以设置诸如所使用字体的样式，页面的背景颜色以及字体大小的内容。

JavaScript是一种更复杂的语言，用于在页面上创建交互式元素。当鼠标点击网站上图像并且图像变形或更改时，这就是JavaScript在编辑原始HTML代码。当点击购物网站上的产品并且购物车自动更新时，这也是JavaScript。

CSS和JavaScript可以为网站添加设计和功能，但是如果没有HTML，就是没有网站的内容数据。实际上，即使CSS和JavaScript代码损坏，大多数站点仍将显示HTML数据。

HTML页面如下所示：

现在是禁用CSS和JavaScript的样子：

看起来虽然不漂亮，但是所重要的内容如仍然存在。

HTML代码是什么样的？

基本上，HTML代码看起来就想常规文本。HTML代码最可识别的功能是使用尖括号。这些尖括号将标记代码括起来，该标记代码会告诉浏览器如何显示文档数据。

这是一段简单的HTML代码示例：

<!DOCTYPE html><html><head><title>页面头部</title></head><body><h1>这是个标题。</h1><p>这是个段落。</p></body></html>

如果将这段代码保存到文件名为“test.html”的文件中，然后在浏览器中打开它，应该显示如下页面：

使用内联样式。

内联样式是将样式直接应用于HTML标记的一种最简单，最基本的将样式应用于HTML中的方法。

以下是一种内联样式：

<!DOCTYPE html><html><head><title>页面头部</title></head><body><h1 style="color:red;">这是个标题。</h1></body></html>

结果是：

总结

由于使用内联样式会增加代码维护和阅读的难度。并且只能定义直观的样式状态。要谨慎使用此方法！使用内联样式时需要添加style属性。但是，仅仅只是用于预览与测试的话，就非常有用。