HTML笔记1

第一节

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<head>
<title>标题</title>
</head>
<body>
第一个页面
</body>
</html>

例子解释：

<head>与</head> 描述标题

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

HTML 标签

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

<html>

<body>

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

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

</body>
</html>
从h1到h6字体逐渐变小

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<hr/>创建水平线

HTML 注释

注释：浏览器会自动地在标题的前后添加空行。

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

<html>
<body>

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

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

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<html>

<body>

<h1>春晓</h1>

<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

注释：浏览器会自动地在段落的前后添加空行。

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.baidu.com">百度</a>
超链接，可以直接链接到百度

HTML 图像是通过 <img> 标签进行定义的。

<img src="../vsimg/花草.jpg" height="100"/>
插入图片，width宽度，height高度，可以调节图片的大小。调节时可以只调节其中一项，另一项会自动调节，如果两项都调节的话，如果比例不对，可能导致图片内容变形

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

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

比如上面的超链接 <a href="http://www.baidu.com">百度</a> 在开始标签<a>中就已经规定好了

HTML 元素语法、属性推荐使用小写

HTML 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

例如： name='Bill "HelloWorld" Gates'

属性参考http://www.w3school.com.cn/tags/index.asp