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.