HTML学习笔记

标签: html 学习 笔记 | 发表时间:2013-05-01 15:25 | 作者:yew1eb
出处:http://blog.csdn.net

维基百科中HTML定义:

超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接


参考手册:

w3schools  点击打开链接 {语法大全,超赞!}


HTML的基本结构:

[html]  view plain copy
  1. <!DOCTYPE html>   <!-- HTML5-->  
  2. <html>  
  3.   <head>  
  4.     <title>我的第一个页面</title>  
  5.     <meta charset='utf-8'>      <!-- 文本编码格式-->    
  6.     <meta name='description' content=''>  
  7.     <meta name='keywords' content=''>  
  8.     <meta name='author' content=''>  
  9.     <meta name='robots' content='all'>  
  10.     <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->  
  11.     <link href='/favicon.png' rel='shortcut icon' type='image/png'>  
  12.   </head>  
  13.   <body>  
  14.           大家好。这是我的个人主页。  
  15.   </body>  
  16. </html>  



HTML5中新增的英文单词在页面中右侧不使用边字符号时,<wbr>wordsbreaks</wbr>

段落标记  <p>段落</p>
标题<h1></h2>一直到<h6></h6>
换行<br>或者<br />  line breaks


文字格式(不推荐用以下标记,推荐使用CSS):
<b>加粗</b>
<i>斜体</i>
<tt>等宽的西文字体(打字机字体)</tt>
<small>缩小字体</small>
<s>字体正中间一横线,表删除</s>
<del>字体正中间一横线</del> <ins>加入的新的内容</ins>
<mark>文本高亮HTML5中新增加的</mark>

a<sup>2</sup>+2ab+b<sup>2</sup>


<em>E mphasize强调</em>

<strong>Strong着重</strong>

<dfn>Definition定义</dfn>

<code>Code代码</code>

<samp>Sample例子代码</samp>

<kbd>Keyboard</kbd>

<var>variable变量</var>

<cite>引用</cite>

<blockquote>大块的引用</blockquote>

<address>
海淀区<br />
北京<br />
中国<br/>
</address>



<q>内容不多的引用</q>

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


<bdo dir="rtl">我是中国人<bdi>北京住。</bdi></bdo>
rtl right to left 字体顺序

2<3
2小于3
2&lt3;   字符实体
less than

3>2
3&gt2;    字符实体
great than

&nbsp;  none breakable space 不可打断的空格



属性:
<hr width="50%" align="left" size=1>
<abbr title="中华人民共和国">PRC</abbr>
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.  
  5.   
  6. 鼠标光标放到PRC上就有会看到效果啦。  
  7. </body>  
  8. </html>  


列表:ul ol dl dt dd:

[html]  view plain copy
  1. <!DOCTYPE html>   <!-- HTML5-->  
  2. <html>  
  3.   <head>  
  4.     <title>我的第一个页面</title>  
  5.     <meta charset='utf-8'>      <!-- 文本编码格式-->    
  6.     <meta name='description' content=''>  
  7.     <meta name='keywords' content=''>  
  8.     <meta name='author' content=''>  
  9.     <meta name='robots' content='all'>  
  10.   </head>  
  11.   <body>  
  12.     <ul>  
  13.       <li>无序咖啡</li>  
  14.       <li>无序牛奶</li>   
  15.     </ul>  
  16.       
  17.   <hr>  
  18.     
  19.     <ol>  
  20.       <li>有序咖啡</li>  
  21.       <li>有序牛奶</li>  
  22.     </ol>  
  23.       
  24.   <hr>  
  25.     
  26.   <dl>  
  27.     <dt>Coffee</dt>  
  28.     <dd>- black hot drink</dd>  
  29.     <dt>Milk</dt>  
  30.     <dd>- white cold drink</dd>  
  31.   </dl>  
  32.     
  33.   </body>  
  34. </html>  
效果:




HTML img图片 tag  iframe tag:

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. <img src="w3schools.jpg" alt="w3schools" width="104" height="142">  
  5. <iframe src="http://news.163.com"></iframe>  
  6. </body>  
  7. </html>  
alt 属性:当浏览器未加载完图片时会显示出文字描述信息。


a 标记  href属性  id属性 target属性:

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.     <p id="here">这是段落标记</p>  
  5.     <hr>  
  6.     <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>  
  7.     <hr>  
  8.     <a href="#here">id 属性:目的地,目标锚</a>  
  9. </body>  
  10. </html>  



HTML table tag表格:

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.     <table border="1">  
  5.         <caption>表格的头部</caption>  
  6.         <tr>  <!--table row-->  
  7.             <th>OS</th>  <!--table head-->  
  8.             <th>Chinese</th>  
  9.             <th>French</th>  
  10.         </tr>  
  11.   
  12.         <tr>  
  13.             <td>iOS5</td>  
  14.             <td>yes</td>  
  15.             <td>yes</td>  
  16.         </tr>  
  17.   
  18.         <tr>  
  19.             <td colspan="3">Windows</td> <!--column span列延展跨度-->  
  20.         </tr>  
  21.     </table>  
  22. </body>  
  23. </html>  




网页结构和呈现的彻底分离,也即HTML和XHTML来组织内容,用CSS来做样式和呈现。


Web原理: 浏览器,Web服务器。浏览器请求资源,服务器做出响应。


用包围文本的成对标记告诉浏览器网页的结构。


HTML和CSS是用来创建网页的语言


Web服务器存储并提供由HTML和CSS创建的网页。浏览器接收网页并基于HTML和CSS显示其中的内容。


HTML(HyperText Markup Language)是超文本标记语言的缩写,用来结构化网页。


CSS是(Cascading Style Sheet)级联样式表的缩写,用来控制HTML的外观。


使用HTML来 标记(tag)内容,用标记提供结构。我们称匹配标记和它们之间的内容为 元素


一个元素由以下三部分组成:一个开始标记、内容和一个结束标记。有些元素是例外(如<img>)

     元素=开始标记 + 内容 + 结束标记
    有些元素是例外的,如<img>无结束标记


开始标记可以拥有 属性。如,type 和align等等。


网页通常应该有一个<html>元素,并伴随有一个<head>元素和一个<body>元素。


网页的信息来源于<head>元素。


写进<body>元素的内容,就是浏览器中所能看见的东西。


浏览器忽略大多数的空白(制表符、回车、空格),但是可以用它们让你的HTML更具有可读性。


通过在<style>元素中输入CSS规则,给HTML网页添加CSS。<style>元素通常嵌在<head>元素中。

        

[css]  view plain copy
  1. <head>  
  2.   <title>Starbuzz Coffee</title>  
  3.   <style type="text/css">  
  4.     body {  
  5.       background-color: #d2b48c;  
  6.       margin-left: 20%;  
  7.       margin-right: 20%;  
  8.       border: 1px dotted gray;  
  9.       padding: 10px 10px 10px 10px;  
  10.       font-family: sans-serif;  
  11.     }  
  12.   </style>  
  13. </head>  

在HTML中用CSS指定每个元素的样式特性。

-------------------------------------------------------------------------------------------------------------------------------------------------

超文本标记 <a></a>

当你需要从一个网页链接到另一个网页时,使用<a>元素。

推荐这种方式:不要漏掉双引号哦: 

[html]  view plain copy
  1. <a href="top10.html">Great Movies </a>  

属性用来指定元素的附加信息。

<a>元素的 href 属性说明了链接的目的地。也即,href 属性告诉浏览器链接的目的地。

[html]  view plain copy
  1. <a href="about/myself.html">关于我</a>  


<a>元素中的内容是链接的标签。标签显示在网页上。默认情况下,它会加下划线来说明可以单击的。

链接的标签可以是文字或图像。

当你点击标签时,浏览器装载 href 中指定的网页。

可以链接相同文件夹下的文件,也可以是不同文件夹下的的。

相对路径的理解:

[html]  view plain copy
  1. <a href="../lounge.html"> Back to the Lounge </a>  


使用".."来链接父目录中的文件。

“..”代表父目录。

用“/”符号分隔路径的各个部分。

当图片路径有误时,你会在网页上看到损坏的图像。

网站中的文件名或者文件夹名中不能出现空格。

最好在构建的早期组织好你的网站,这样当你的网站升级时,就不用更改一堆路径了。

---------------------------------------------------------------------------------------------------

<q>元素,精练简短的引用。<q>元素是内联(inline)元素。内联元素总是在网页中随着文字流出现在“行内”。<q>,<a><em>都是内联元素。

<blockquote>元素,大块的引用。<blockquote>是块(block)元素。块元素前后都有换行符。<h1><h2>....<h6>,<blockquote>都是块元素。

顺口溜:块元素特立独行;内联元素随波逐流。

<br>为换行。

没有HTML内容的元素称之为空元素,如<br>, <img>

HTML列表:

有序列表:

无序列表:

自定义列表:<dl>  <dt> <dd>

字符实体:&lt;

   the <html> element rocks.

   the &lt;html&gt; element rocks.

在输入内容之前先计划好网页的结构。先画草图,再绘制略图,最后写HTML。

用大的块元素来创建你的网页,然后用内联元素修饰。

记住,无论什么时候,使用元素来告诉浏览器你的内容的含义。

通常使用最能匹配内容含义的元素。例如,当你需要列表时绝对不用段落表示。

<p>, <blockquote>, <ol>, <ul>, <li>都是块元素。它们独立显示,文本前后有空行。

<q>, <em>, <a>是内联元素。内联元素的内容和其他内容一起跟随文字流中。

当你需要一个换行时,请使用<br>空元素。

<br>是个“空元素”。

空元素没有内容。

一个空元素仅由一个标记组成。(也即,没有结束标记)

嵌套元素的的正确匹配。

结合使用两个元素创建HTML列表:使用<ol> 和 <li> 创建有序列表;且 <ul> 和 <li> 创建无序列表。

当浏览器显示一个有序列表时,它会给列表标上序号,无需你再费力了。

可以在<li>中嵌入 <ol>或者 <ul>来建立嵌套列表。

在HTML中使用实体来显示特殊字符。


作者:yew1eb 发表于2013-5-1 15:25:55 原文链接
阅读:25 评论:0 查看评论

相关 [html 学习 笔记] 推荐:

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

HTML 5移动web开发指南中sencha touch笔记

- - ITeye博客
《HTML 5移动web开发指南》,是UC公司著名前端开发师唐俊开(网名:三桥). 的新书,介绍了jquery mobile,sencha touch,phonegap的开发,内容很丰富,. 最后还有一个小的实例,推荐阅读,给分85分,下面是其中sencha touch的. 一些本人新学到的知识点小结.

shell 学习笔记

- tiger - 游戏人生
将脚本目录加到 PATH 中. 在 dash 中如何进行字符串替换. 将 rst 格式文档转换为 blog 可用的 html 代码. shell 脚本虽然不是非常复杂的程序, 但对于首次接触的我来讲, 多少还是有些忌惮. 不过, 接触任何新事物都需要勇敢面对, 逐步树立信心. 我是冲着把脚本写好去的, 所以, 我的目标是能够写出友好, 健壮, 优美的脚本..

OAuth学习笔记

- 宋大妈 - FeedzShare
来自: 标点符 - FeedzShare  . 发布时间:2011年08月29日,  已有 2 人推荐. OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.

Vim学习笔记

- 临池学书 - C++博客-首页原创精华区
最近在学习Vimtutor中的相关内容,Vim的使用博大精深,很多命令一旦不使用就会忘记,下面把其中的没有使用到的相关命令做一个简单的总结,供以后复习使用. 至于常见的保存,插入等等命令,则不予记录,在以后的使用中加深练习即可. To change until the end of a word, type  ce (ce + 修正的单词).

OAuth学习笔记

- jiaosq - 标点符
OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据. 每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频).

jQuery学习笔记

- - ITeye博客
什么是jQuery,它能为我们做什么. jQuery是一个javascript类库或称之为javascript框架. 无需刷新页面从服务器获取信息. 简化常见的javascript任务. 为什么会如此流行或说得到大量用户群的支持:. 多重操作集于一行(避免使用临时变量或不必要的重复代码). jQuery利用了CSS选择符的能力,在DOM中快捷而轻松地获取元素或元素集合.

JdbcTemplate学习笔记

- - SQL - 编程语言 - ITeye博客
1、使用JdbcTemplate的execute()方法执行SQL语句. 2、如果是UPDATE或INSERT,用update()方法.    JdbcTemplate将我们使用的JDBC的流程封装起来,包括了异常的捕捉、SQL的执行、查询结果的转换等等. spring大量使用Template Method模式来封装固定流程的动作,XXXTemplate等类别都是基于这种方式的实现.

Disruptor 学习笔记

- - 开源软件 - ITeye博客
Disruptor 是一个高性能异步处理框架,也可以认为是一个消息框架,它实现了观察者模式. Disruptor 比传统的基于锁的消息框架的优势在于:它是无锁的、CPU友好;它不会清除缓存中的数据,只会覆盖,降低了垃圾回收机制启动的频率. Disruptor 为什么快. 通过内存屏障和原子性的CAS操作替换锁.

Activiti学习笔记

- - 企业架构 - ITeye博客
第一个Activiti的HelloWorld. 获取核心ProcessEngine对象 2. 根据需求,获取对应的服务实例 3. 使用服务方法,做事情 * * @author Administrator * */ public class HelloWorld {. // 加载核心API ProcessEngine.