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	`contenteditable="true"表示段落可以编辑`
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