HTML自学第一篇
教程来自W3CSchool
因为笔者有过开发经验 本篇只是个人对HTML自学的笔记，可能不适合用于给他人理解和学习
什么是 HTML
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML 属性
HTML 标签对大小写不敏感 (X)HTML 版本中强制使用小写。
属性和属性值对大小写不敏感 (X)HTML 要求使用小写属性。
完整的 HTML 参考手册 HTML 标准属性参考手册
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1>H1</h1> -----》对应效果
H1
<h2>H2</h2> -----》对应效果
H2
<h3>H3</h3> -----》对应效果
H3
tips:浏览器会自动地在标题的前后添加空行。
tips:默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
如：<hr/>
HTML 注释
普通注释
<!-- This is a comment -->
块注释
<!-- 此刻不显示图片： <img border="0" src="/i/tulip_ballade.jpg" alt="Tulip"> -->
条件注释
<!--[if IE 8]> .... some HTML here .... <![endif]-->
HTML 段落
段落通过<p>标签定义 ::注意段落后有个换行，如果想在 p 标签中主动换行，可以在标签中添加 <br/>
如：<p>This is<br />a para<br />graph with line breaks</p>
注意 <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
<br> & <br/> 插入一个空行
HTML 样式
style可以修改修饰元素的样式
设置背景颜色：<h3 style="background-color:red">修改背景颜色为红色<h3>-----》结果：
修改背景颜色为红色
~设置字体：
<h3 style="font-family:verdana">设置字体</h3> -----》结果：
设置字体
~设置背景颜色：<p style="color: red; font-size: 20px;">设置颜色和文字大小</p>-----》结果：
设置颜色和文字大小
~设置文字居中 <h3 style = "text-align:center">文字居中</h3>-----》结果：
文字居中
HTML 文本格式化
~HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
<strong>粗壮的字体</strong>
粗壮的字体
<big>大字体</big>
大字体
<em> 这是一个强调字体</em>
这是一个强调字体
<i>斜体用i来标识吗？和我知道的好像不太一样</i>
斜体用i来标识吗？和我知道的好像不太一样
<small>小字体<small>
小字体
<sup>这是一个上标<sup> 表示2的3次方
23
<sub>这是一个下标<sub>
出现下标：这是一个下标
改变文字方向
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
Here is some Hebrew text
还有其他标签如下，不一一试验：
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
HTML CSS
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表 也是在 head标签里
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>内联样式表 标签内 通过 style=“background-color:red”定义
<pstyle="color: red; margin-left: 20px"> This is a paragraph </p>
HTML 链接
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
如<a href="http://www.w3school.com.cn/">W3School</a>
在网页中显示为 W3School
target 属性
使用 Target 属性，你可以定义被链接的信息如何显示 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 则会以新窗口打开链接
name 属性
name 规定 锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。
<a name="label">锚</a> ---》
您可以使用 id 属性来替代 name 属性，命名锚同样有效。
<h5 id="id_label">id_锚</h5> -----》
id_锚
现在创建链接，跳转到 以上两个锚上
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a> ------》
