html超文本标记语言基础一
1，基本格式
<!DOCTYPE html> //声明为 HTML5 文档
<html>
<head>
<meta charset="utf-8"> //编码方式，否则会乱码，charset="gbk"也是可以的
<title>大晴测试</title> //元素描述了文档的标题，将会显示在浏览器的标签头上
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
html页面包含元素和属性：类似于<body>这样的是元素，元素里的是属性，比如：<body bgcolor="yellow">
HTML全局属性表：
参考：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
| 属性 | 描述 |
|---|---|
| accesskey | 带有指定快捷键的超链接。 |
| class | 规定元素的一个或多个类名（引用样式表中的类）。 |
| contenteditable |
|
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| dir | 规定元素中内容的文本方向。 |
| draggable | 规定元素是否可拖动。 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
| hidden | 规定元素仍未或不再相关。 |
| id | 规定元素的唯一 id。 |
| lang | 规定元素内容的语言。 |
| spellcheck | 规定是否对元素进行拼写和语法检查。 |
| style | 规定元素的行内 CSS 样式。 |
| tabindex | 规定元素的 tab 键次序。 |
| title | 规定有关元素的额外信息。 |
| translate | 规定是否应该翻译元素内容。 |
2，html标题
<h1>~<h6>对应的是不同等级的标题
align="center" align属性表示排版方式，适用于标题或者段落：<h1 align="center">This is heading 1</h1>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。<p></p>表明段落
<hr/>表示加一条水平线，它不算是属性，在段落之间：
注释：<!--内容。-->
3，html段落
段落是通过 <p> 标签定义的，用<br />在段落<p>里折行，
4，html样式
在style标签里一个一个地设定，叫做内联样式，比如，
<body style="background-color:yellow"> //背景颜色
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> //style属性中，分别对应的是字体系列、颜色和字体尺寸
<h1 style="text-align:center">This is a heading</h1> //对应字体对其方式
但是html同样支持预设样式，
<html> <head> <style type="text/css"> //这是预设样式的代码，是内部样式表 h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> //其下所有的h1和p元素都会使用提前定义好了的默认样式 <p>A paragraph.</p> </body> </html>
外部样式表也是支持的：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> //这个样式表目前不知道是什么原理，估计是css的 </head>
样式相关的元素：
| 标签 | 描述 |
|---|---|
| <style> | 定义样式定义。 |
| <link> | 定义资源引用。 |
| <div> | 定义文档中的节或区域（块级）。 |
| <span> | 定义文档中的行内的小块或区域。 |
5，文本格式化
文本格式化标签：
<b>内容</b>，表示bold，加粗；除此以外，还有<strong>,<big>,<em>,<i>,<small>等
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
计算机输出标签：
预格式：<pre>内容</pre>，它会保留内容中的空格和换行，
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
引用，引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。
<abbr title="World Health Organization">WHO</abbr> |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。cite 元素定义著作的标题。浏览器通常会以斜体显示 cite 元素 |
| <dfn> | 定义一个定义项目，<dfn> 标签可标记那些对特殊术语或短语的定义。显示器通常用斜体显示，常写为：<dfn title="World Health Organization">WHO</dfn> |
6 引用
HTML <q> 元素定义短的引用。
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p> //浏览器往往会显示：WWF 的目标是 ”构建人与自然和谐相处的世界。“
HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。
<blockquote cite="http://www.worldwildlife.org/who/index.html"> //有一个cite属性 五十年来，WWF 一直致力于保护自然界的未来。 世界领先的环保组织，WWF 工作于 100 个国家， 并得到美国一百二十万会员及全球近五百万会员的支持。 </blockquote>
7，链接
创建超链接：
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。
</p>
图像文件：和普通文本一样，可以放在段落中，也可以架上超链接。
<body> <img src="/i/eg_w3school.gif" width="300" height="120" border="4" /> //src是文件来源，witdth宽，height高，border是边框像素 </body>
创建一个电子邮件的链接：
<p> 这是邮件链接： <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> </p> //注意，%20在电子邮件中表示空格
在“hehe”上创建超链接：
<body> <a href="/dir_test">hehe</a> //点击hehe的话，href中的网址会在当前网址的基础上打开 </body>
如果想在新的窗口打开超链接，那就把target设置成"_blank"：<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
如果想链接到本页面的不同位置：
<p> <a href="#C4">查看 Chapter 4。</a> //#加C4 </p>
...
<h2><a name="C4">Chapter 4</a></h2> //下文中必须同样用<a name=“” >定义了C4
如果想跳出本页面，跳到另一个页面，就设定target="_top" ：<a href="/daqing_test.php" target="_top">请点击这里！</a>
<a name="label">锚（显示在页面上的文本）</a>
8，图像
<p><img src="/i/eg_w3school.gif" width="300" height="120" border="4" /> </p> //src是文件来源，witdth宽，height高，border是边框像素，替换文本属性：alt="Big Boat"也可以加上，替换文本属性是当图加载不出来的时候替代图的文本。另外，有一个图片对齐属性已经即将弃用：align="bottom"
拓展：
<body background="/i/eg_background.jpg">添加背景图
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> //h5中即将弃用
<p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。</p> //css属性，重点看style=“float：left”
<a href="http://www.runoob.com/html/html-tutorial.html"> <img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> //图像上架超链接，进阶是图像的不同部位有超链接，用map实现。
9，表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。比如：
<table border="1"> //边框是1 <tr> //这一行下面有两个单元格 <td>row 1, cell 1</td> //单元格1，table data <td>row 1, cell 2</td> //区别于表格头，th，table head </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
形成：
拓展：
没有边框的表格：
不设置<table>的border属性就可以了
具有合并单元格作用的表格：
<table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> //意思是，这个telephone单元格相当于合并了两个单元格 </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
10 列表
无序列表使用 <ul> 标签，unordered list
<ul> <li>Coffee</li> <li>Milk</li> </ul>
有序列表<ol>标签，ordered list
<ol> <li>Coffee</li> <li>Milk</li> </ol>
学到了css和区块：http://www.runoob.com/html/html-css.html
