注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

HTML5简介  

2013-02-21 14:14:25|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1.超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。

2.软件准备:浏览器 和 编辑器。win下编辑器可以使用dreamweaver、notepad、notepad++、pspad等。
HTML5简介 - 我是——斑竹 - 闪电行创意设计
 
3.html框架:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>

</html>


1)<meta charset=utf-8> 这个是使用utf8编码方式,它试图包含世界上绝大多数的语言。也是浏览器支持率最高的编码方式。
而使用gb2312这个国标,则可能正常显示的仅仅是支持国标的浏览器。
2)网页的标题放到<title> ... </title>标签内,正文放到<body> ... </body>标签内部。




4.基本标记
html的标记符号仅仅是告诉浏览器这地方有一个什么是什么,而这个长成什么则需要css(样式表)来定义。

(1)段落
1)<p> ... </p>,告诉浏览器这中间的是一个段落。段落之间有一个空行。
2)<br>,断行符号,这之后的部分另起一行。段落之间没有空行。这是仅有的几个没有结束的html符号,有时候也写作<br />.但是html5并没有关于它的特殊规定。
3)<h1> ... </h1>,这个标题标签,一共六级。数字越大,字号越小。
--<h1>等是单独成行的标签,它后面不需要加<br>换行。
5)<wbr>...</wbr>,这个是html5新增加的标签,英文专用,指定一个长单词,如果需要,浏览器可以把它分开。
<wbr>delibrate</wbr>

<wbr>和<br>一样是自闭合标记,并不需要加一个</wbr>。

<wbr> (Word BReak) 表示:“如果需要,浏览器将在此换行“。浏览器窗口或者父级元素的宽度足够宽时,不换行;而当宽度不够时,主动在此标记处进行换行。
一般作用于一个长单词的内部。
例如:
<p>如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。</p>
具体效果可在点这里调整浏览器宽度观察。


6)<hgroup>
...中间是若干<h1>等标签。
</hgroup>


(2)字体样式
1)<b>...</b>,加粗。
2)<i>...</i>,斜体。
3) <tt>...</tt>,打字机字体,等宽的西方文字。
4)<small>...</small>,字号小一点。html5把big标签去掉了。这些都可以使用css样式表实现。

5)<del>...</del>,删除的文字。
6) <ins>...</ins>,插入的文字。下划线u标签被html5删除。
7)<s>...</s>,过时的东西。这是结构。在有些浏览器中表示成下划线。

数学中需要的:
8)<sup>...</sup>,上标。
9)<sub>...</sub>,下标。
如果更复杂的语句,则过去使用图片,现在使用:______?

10)<mark>...</mark>,标记。一般显示为黄色背景



(3)短语格式
是一种格式,更多的是强调一种内容。不会引起断行,不同于h标签。
具体显示成什么,决定于css以及默认css。

1)<em>...</em>,强调。
2)<strong>...</strong>,着重。
3)<dfn>...</dfn>,definition定义。
4)<code>...</code>,code代码。
5)<samp>...</samp>,sample例子代码。
6) <kbd>...</kbd>,kbd键盘,用户输入。
7)<var>...</var>,variable变量。
8)<cite>...</cite>,cite引用。


(4)特殊格式
1)<address>...</address>,显示地址的,可供浏览器或搜索引擎检索。
2)<blockquote>...</blockquote>,使中间的文字缩进,而且这个缩进还可以嵌套。这是大的缩进。
在html5中,还有一个小引用:<q>...</q>,小引用。
3)<pre>...</pre>,预置格式,可以输入源代码。

<pre>
int main() {
  printf("Hello\n");
   return 0;
}
</pre>




5.属性
以前属性的值都需要加引号,如<hr width=“50%”>,现在html5中无所谓了,不加引号也支持。

每一个html标记中都有很多可用的、有趣的格式。
(1)<hr>,水平线。...华丽的分割线...和br类似,没有结束标记。
<hr width=50%>,则宽度变为现有宽度的50%。如果写成width=50,则宽度为50像素。
<hr width=50% align=left>,靠左边放置。
<hr width=50% align=left size=1>,线的宽度为1像素。

2)title属性:鼠标放上时的浮动注释,所有标签都支持。
<abbr title="中华人民共和国" >PRC</abbr>,鼠标放上时的浮动注释。
<p title="中华人民共和国" >PRC</p>,鼠标放上时的浮动注释。

3)<bdo dir=rtl>我是第一个例子。</bdo>
direction方向,rtl right to left。

可以加入bdi,使颠倒的文字再回复过来。
<bdo dir=rtl>我是<bdi>第一个</bdi>例子。</bdo>

4)特殊符号:
有可能使用到可能被认为是标记的符号:
如  a<2  ,这个2在有些浏览器中可能没有,这算是浏览器bug。
但是从规范来说,浏览器使用
a &lt; 2,小于号 less than;
a &gt; 2,大于号 great than;

&本身:&amp;
none breakable space,不可打断的空格:&nbsp;&nbsp;

如果姓氏为 吕,那么这个汉字的拼音怎么打?
L&uuml;
L&Uuml;





6.列表
1.ul-unordered list与ordered list标签
<ol start=2>
  <li>红茶</li>
  <li>咖啡</li>
 <li>牛奶</li>
</ol>
这个表示起始数字

下面是嵌套结构:
<ol start=2>
  <li>红茶</li>
  <li>咖啡</li>
    <ul start=2>
       <li>加糖</li>
      <li>不加糖</li>
    </ul>
 <li>牛奶</li>
</ol>


2.dl与dt标签
<dl>
  <dt>方糖</dt>
  <dd>方块的糖果,甜的</dd>
</dl>





7.图片:jpg/png/gif格式为主
图片是当做一个字符处理的。与前后的字符是连在一起的。
(1)图片标签img
<img src="a.jpg" />,src属性指定图片路径和文件名。
<img src="a.jpg" width=50% />,width属性指明图片宽度。对应的调节高度的属性是height
<img src="a2.jpg" width=200 alt="html5入门" />,如果图片载入很慢,或者载入失败,则显示出alt指定的文字,而大小是根据width和height的值预先设定的。

<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width=200 alt="html5入门" />,使用互联网图片。


(2)另一个使用其他地方资源的标签iframe:
<iframe src="http://www.baidu.com/" height=400> </iframe>
结果是:在当前网页中开一个小窗口,把其他网站的内容给实时显示出来了。







8.链接
超文本,就是html中的hyper text。
(1)a标签href属性:指定超链接
href可以是绝对网页地址(http://www.baidu.com/)、相对网页地址(pay.html)、本网页中的某个位置。
1)<a href="http://news.163.com/">文字或图片</a>
2)<a href="pay.html">文字或图片</a>

3)如在某一个位置写成
<p id="here">一会点击后回到这里</p>

则在另一个地方可以写上
<a href="#here">点击前往本页面的here位置</a>

4)也可以组合使用
<a href="pay.html#here">点击前往pay.html页面中的here位置</a>




(2)a标签target属性:点击查看更多>>
target 属性规定在何处打开被链接文档。只能在 href 属性存在时使用。

语法 :<a target="value">

属性值

描述
_blank在新窗口中打开被链接文档。
_self在被点击时的同一框架中打开被链接文档(默认)。
_parent在父框架中打开被链接文档。
_top在窗口主体中打开被链接文档。




(3)一个一度很流行的用法:map标签
用来做中国地图,点击浙江,一个链接;点击北京,另一个链接。

<p>

<img src="a.jpg" width=100 height=100 usemap="#map" />

<map name="map">
<area shap="rect" coords="0,0,50,50" href="http://news.163.com" alt="news" />
<area shap="circle" coords="75,75,25" href="http://www.163.com" alt="home" />
</map>

</p>







9.表格
整个表格也是一个字符,所以也会显示成语上下文相关。

<table>
 <tr>
      <td>OS</td>
      <td>YES</td>
      <td>YES</td>
   </tr>

 <tr>
      <td>WM8</td>
      <td>YES</td>
      <td>YES</td>
   </tr>
</table>
这个很丑,是表格的基本框架,两行三列。

(1)tr:table row表格的一行。
(2)表头部分:th,table head


下面加上边框:
<table border=1>
   <caption>最新Xphone参数表格</caption>
 <tr>
      <th>OS</th>
      <th>Chinese</th>
      <th>English</th>
   </tr>
 <tr>
      <td>iOS5</td>
      <td>YES</td>
      <td>YES</td>
   </tr>
 <tr>
      <td>Windows</td>
      <td>YES</td>
   </tr>
</table>
最后一行没有格子线,它竟然连格子都没有画出来。如果想画出来,需要写出<td>..</td>.

      <td colspan="3">Windows</td>   宽度跨越了3.
      <td rowspan="3">Windows</td>   宽度跨越了3.



而当表格很大的时候,使用thead、tbody、tfoot标签能确保表头与脚注固定,仅仅主体移动。
<table border=1>
   <caption>最新Xphone参数表格</caption>
   <thead>
 <tr>
      <th>OS</th>
      <th>Chinese</th>
      <th>English</th>
   </tr>
  </thead>


<tbody>
 <tr>
      <td>iOS5</td>
      <td>YES</td>
      <td>YES</td>
   </tr>
 <tr>
      <td>Windows</td>
      <td>YES</td>
   </tr>
</tbody>

<tfoot>
</tfoot>

</table>





参考资料:
[1]来自:网易公开课 html5入门
  评论这张
 
阅读(352)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018