开始学习W3school

Macdown 支持html格式!!! 完全可以用macdown来学习和编写html，棒！<<<

<!DOCTYPE>

HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型

Html 基本结构

< html>

< body>

< h1>My First Heading< /h1>

< p>My first paragraph.</p>

< div> </div>
< span> </span>

< /body>
< /html>

Html基本语句

< /h1>This is a heading </h1>

< p>This is a paragraph </h1>

< a href=”http://www.w3school.com.cn“ ==style=”text-decoration:none”==> This is a link</a>

< img src=”w3school.jpg” width=”104” height=”142” /> 图片

< hr />分隔

< !–>This is a commment<–>

< br />换行

Html中文本格式化标签

<b> 定义粗体文本。

<big>定义大号字。

<em>定义着重文字。

</i>定义斜体字。

<small>定义小号字。

<strong>定义加重语气。

_{<sub>定义下标字。}

^{<sup>定义上标字。}

<ins>定义插入字。

~~<del>定义删除字~~

引用、引用和术语定义

<abbr> 定义缩写。

<acronym >定义首字母缩写。

<address> 定义地址。

<bdo dir=”rtl”> 定义文字方向。(或’’ltr’’)

<blockquote> 定义长的引用。

<q> 定义短的引用语。

<cite> 定义引用、引证。

<dfn>定义一个定义项目

Html中插入图像

背景图像

  <body background="/i/eg_background.jpg">

排列图像

  <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

  <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

  <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

图像浮动
```
   align ="right" or "left"
```
图像尺寸
```
  width="50" height="50"
```

图片显示替换文本

  alt="向左转" (若如果无法显示图像，将显示 "alt" 属性中的文本)

制作图像链接

  <a href="/example/html/lastpage.html">
  <img border="0" src="/i/eg_buttonnext.gif" />
  </a>

绘制map：area 元素永远嵌套在 map 元素内部

  <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

  <map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

Html中的表格

    <table border="1" bgcolor="red"> [表的开始，border=0的时候无边框][添加背景颜色]
    <caption>我的标题</caption> [标题]

    <tr>                   [行的开始]
    <th>Heading</th>   [表头]
    <th colspan="2">Another Heading</th> [横跨两列的表头]
    <th rowspan="2">电话</th> [横跨两行的表头]
    </tr>

    <tr>
    <td bgcolor="red">row 1, cell 1</td>  [元素的开始][添加单元格颜色]
    <td>row 1, cell 2</td>
    </tr>

    <tr>
    <td>&nbsp;</td>     [占位符]
    <td>row 2, cell 2</td>
    </tr>
    </table>

  <p>Table with frame="box":</p>
  frame="above"
  frame="below"
  frame="hsides"
  frame="vsides"

Html中的列表

有序

无序

缩进

Html中的框架

水平 or 垂直
```
  <frameset cols="25%,50%,25%"> 
```

    <frameset rows="25%,50%,25%">

    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
    </frameset>

混合框架
导航框架
内联框架 iframe
使用框架导航跳转至指定的节

Learning of Html