HTML学习笔记1
概览与综述
基本形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档title</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
解释:
- DOCTYPE 声明了文档类型
- 位于标签
<head> </head>描述了文档附加信息 - 位于标签
<body> </body>为可视化网页内容 - 位于标签
<h1> </h1>作为一个标题使用 - 位于标签
<p> </p>作为一个段落显示
中文编码
常用的方法为设置编码方式为utf-8以显示中文，但注意在编辑Html文件的时候，需要把编码格式保存为UTF-8(默认会保存ANSI)，才可以正常显示。
<meta charset="utf-8">
第二个方法可以指定编码格式为gb2312以支持汉字，但通用性较差。
常用的4个标签
- 标题
<h1>This is a heading</h1>
<h2>This is a heading</h2>
- 段落
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 链接
<a href="http://www.w3school.com.cn">This is a link</a>
- 图像
<img_ src="w3school.jpg" width="104" height="142" />
元素
HTML 元素通常有两种方式：
- 写入一个<>内:此类元素无法包含内容和其他元素。
<标签 [属性...] />
<img_ src="w3school.jpg" width="104" height="142" />
- 以开始标签和结束标签限定，可以包含内容和其他元素。
<标签 [属性...]>[内容...]</标签>
<p>This is a paragraph.</p>
其中，属性或内容可以为空。例如换行：
<br />
属性
属性通常为某属性=“值”的形式，可以使用单引号或双引号。但要注意在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如name='Bill "HelloWorld" Gates'
元素和属性可以有重名的时候，例如
title作为元素是页面名称，作为属性是注释信息；style作为元素指定该页面所有元素的样式，作为属性指定个别元素的样式。
简单的层次与布局
标题
标题（Heading）是通过<h1> - <h6>等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1>This is a heading</h1>
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
<!-- This is a comment -->
段落
段落是通过 <p> 标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
文本格式化
常用文本格式化
<b>加粗字体</b>
<strong>强调字体（视觉效果同加粗）</strong>
<i>斜体</i>
<em>强调字体（视觉效果同斜体）</em>
<big>比周围大一号字体(已淘汰)</big>
<small>比周围小一号字体</small>
<sub>下标</sub>
<sup>上标</sup>
<del>删除线</del>
<ins>下划线</ins>
预保留格式文本
与保留格式文本可以忠实地表现缩进，空格，换行等格式上的内容。
<pre>
for i = 1 to 10
print i
next i
</pre>
“计算机输出”标签
该部分用于指定字体样式来表现不同的计算机代码或输出。
<code>Computer code 代码</code>
<kbd>Keyboard input 键盘输入</kbd>
<tt>Teletype text 打字机字体</tt>
<samp>Sample text 代码样本</samp>
<var>Computer variable 变量</var>
注意，<code>不会保留多余的空格和空行,必要时配合预保留格式文本使用。
其它内置格式
- 定义地址。指定文字的字体表示地址(通常为斜体)：
<address>
Written by TOM.
</address>
- 定义书写方向。以下可以改变文字的书写方向为从右向左(需浏览器支持)：
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
- 定义引用。引用分为长引用和短引用。使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现，仅添加双引号。
<blockquote>
这是长的引用。
</blockquote>
<q>
这是短的引用。
</q>
- 定义缩写（需浏览器支持）
<!-- 缩写 -->
<abbr title="etcetera">etc.</abbr>
<!-- 首字母缩写 -->
<acronym title="World Wide Web">WWW</acronym>
<!--- dfn -->
<dfn title="World Health Organization">WHO</dfn>
这样，当指针移至元素上面时，会显示出title的内容。
- 定义著作标题
<cite>The Scream</cite>
样式
CSS简述
我们使用style来完成对CSS的设定。常见的用法如下：
- 内联样式：设置特定的元素样式
这种方法通过设置某些元素的style属性来完成。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
- 内部样式表：设置整个页面文件的样式
可以在 head 部分通过 <style> 标签定义内部样式表，可以指定不同类别的元素使用的样式。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.外部样式表:引用一个固定的样式表
通过引用可以统一多个页面的样式,链接的主体是一个css文件。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
常用的内联样式
HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
style 属性淘汰了“旧的” bgcolor 属性。
HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸（多个描述之间用分号隔开）：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body>
</html>
style 属性淘汰了旧的 <font> 标签。
HTML 样式实例 - 文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
style 属性淘汰了旧的 "align" 属性。
头部
头部指的是<head>包围的部分，往往不会直接显示在网页内容里，但包含了网页的重要信息。
title
<title>标签定义了不同文档的标题,在 HTML/XHTML 文档中是必须的。功能包括：
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<title>文档标题</title>
base
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.runoob.com/images/" target="_blank">
link
<link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
style
在<style> 元素中你需要指定样式来渲染HTML文档:
<style> type="text/css"
body {background-color:yellow}
p {color:blue}
</style>
meta
meta标签描述了一些基本的元数据。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
- 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> - 为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS"> - 定义网页作者:
<meta name="author" content="Hege Refsnes"> - 每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
一个网页可以出现多个meta标签。
script
script标签用于加载脚本文件，如： JavaScript。具体详见稍后章节。
