云课堂HTML5入门学习笔记

一、标记元素

<b>加粗</b>

<i>倾斜</i>

<u>下划线</u>

<small>缩小</small>

<del>删除</del>

<ins>增加</ins>

<s>标签定义加删除线的文本</s>

^上标

_下标

<em>强调</em>

<strong>着重</strong>

<dfn>定义definition</dfn>

<code>代码</code>

<samp>例子代码</samp>

<kbd>用户输入</kbd>

<var>变量variable</var>

<cite>引用</cite>

<address>地址</address>

<blockquote>缩进</blockquote>

<q>小引用</q>

<pre>格式化

Int main()

{

printf(“Helloworld!”);

return 0;

}

</pre>

二、元素属性

<hr width=50 align=left size=1>水平线/分割线

<p title=”第一节”>

<h1 title=”第一章”>

<abbr title=”中华人民共和国”>PRC</abbr>

<bdo dir=rtl>逆向</bdo>

direction方向   right turn left

<bdi>正向</bdi>

三、字符实体

< &lt;

> &gt;

& &amp;

Yu &uuml;

空格  &nbsp;

四、列表

<ul>

    <li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

 

</ul>

 

 

<ol start=1>

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

 

<ul>

<dl>

<dt>内容</dt>

<dd>解释</dd>

</dl>

</ul>

五、插入图片

<img src=”logo.jpg”  alt=”logo”  width=50 height=100/>

<img src=”http://wgyxy.bm.gzucm.edu.cn/image/news/newsslides?img_id=556215&t=1422866082206”  alt=”logo” width=50 height=100/>

六、插入网页内容

<iframe src=” http://study.163.com/”>网易</iframe>

七、插入链接

<a herf=” http://study.163.com/”>网易云课堂</a>

扩展：

1、链接到同一目录下的一个网页

<a herf=”index.html”>首页</a>

2、链接到本网页某处

<a herf=”#here”>第五章</a>

<p title=”here”>第五章内容

3、链接到同一目录下的某个网页中的特定位置

<a herf=”index.html#here”>第五章</a>

<p title=”here”>第五章内容

PS:建立锚点

<a herf=”index.html#here”>第五章</a>

<a name=”第五章”></a>

<p>第五章</p>

4、在新网页中打开

<a herf=” http://study.163.com/”   target=_blank>网易云课堂</a>

5、图像热区域

<img src=”logo.jpg” width=100height=100 usemap=”#map”/>

<map  name=”map”>

<area shape=”rect”  cords=”0,0,50,50”  herf=”http://news.163.com” alt=”news”/> //热区域位于图片左上角1/4处，为一长宽均为50的矩形

<area shape=”circle”    cords=”75,75,25”herf=”http://www.163.com”  alt=”home”/>

//热区域位于图片右下角中间处，为一半径为25的圆形

</map>

八、表格

<table border=”1”>

<caption>表头</capition>

<thead>

<tr>

<th>表头1</th>

<th>表头2</th>

<th>表头3</th>

</tr>

</thead>

<tbody>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

<td>第一行第三列</td>

</tr>

<tr>

<td>第二行第一列</td>//无内容显示表格

<td></td>

<td></td>

</tr>

<tr>

<td>第三行第一列</td>//无内容不显示表格

</tr>

<tr>

<td colspan="3">水平合并单元格</td>  //垂直合并单元格rolspan

</tr>

</tbody>

<tfoot>

</tfoot>

</table>