从零开始HTML（一 2016/10/17）

就是准备跟着霹雳猿教程过一遍HTML啦，边看边记录更便于理解记忆吧~

1、属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。

<table border="1"> 拥有关于表格边框的附加信息。

完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：

HTML参考手册：http://www.w3school.com.cn/tags/index.asp

2.标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

<hr /> 标签在 HTML 页面中创建水平线。可用于分割元素

3.段落

段落是通过 <p> 标签定义的。

① 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它。

② 如果希望在不产生一个新段落的情况下进行换行（新行），使用 <br /> 标签

4.样式

style 属性用于改变 HTML 元素的样式。

style 属性的作用是提供了一种改变所有 HTML 元素的样式的通用方法。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

background-color 属性为元素定义了背景颜色，如：<body style="

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。

text-align 属性规定了元素中文本的水平对齐方式：<h1 style="text-align:center">This is a heading</h1>,可将center改为left,rght实现不同的效果。

5.引用

① HTML <q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

② 用于长引用的 HTML <blockquote>，HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

<p>以下内容引用自 WWF 的网站：</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

五十年来，WWF 一直致力于保护自然界的未来。

世界领先的环保组织，WWF 工作于 100 个国家，

并得到美国一百二十万会员及全球近五百万会员的支持。

</blockquote>

③ 用于缩略词的 HTML <abbr> HTML <abbr> 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

6.CSS样式引入方式

有以下三种方式来插入样式表：

① 外部：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

② 内部：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

③ 内联：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

先写这些，后面待续。。。。

参考网页：

霹雳猿教程_霹雳猿教程-HTML教程-HTML 教程

霹雳猿教程_霹雳猿教程-HTML教程-HTML 简介

霹雳猿教程_霹雳猿教程-HTML教程-HTML 基础

霹雳猿教程_霹雳猿教程-HTML教程-HTML 元素

霹雳猿教程_霹雳猿教程-HTML教程-HTML 属性

霹雳猿教程_霹雳猿教程-HTML教程-HTML 标题