复习：HTML要注意的点

HTML版本：

目前普及是 HTML 4.01 

未来的趋势：HTML 5

严格的HTML：XHTML  （以XML应用的方式定义的 HTML）

 

万维网联盟（W3C）在 HTML 4 中推荐标签使用小写，而XHTML规定必须使用小写

 

换行标签 <br />

在一般的浏览器能够解析<br> 但在XHTML中必须对标签进行结束书写，即<br />。

在将来的HTML5中，必须写为 <br /> 。写为<br />是更长远的保障！

 

属性

1.属性是在开始标签中规定的。

2.在标签中存在属性，以 属性/值 成对出现。比如：name（属性） = "value"（值）。

3.属性的值需要括在引号内。单双引号都可以使用，但双引号较常用。

   如果属性本身有双引号，则必须使用单引号。如：name='Bill "HelloWorld" Gates'.

 

标题 heading

1.<h1>定义最大的标题，<h6>定义最小的标题。注意：浏览器会自动地在标题的前后添加空行。

2.确保heading标签（<h1>..<h6>）只用作标题，不要当做是加粗或大号字的用途。

   注意：因为搜索引擎会使用标题对网站结构和内容进行编制索引。

 

水平线 <hr />

创建水平线使用。但非唯一办法。

 

段落 <p>

1.注意：浏览器会自动地在段落的前后添加空行。

2.所有连续的空格和空行都会被算作一个空格

 

<pre>标签

1.在标签<pre>中，保留了空格与空行。

2.可在标签中嵌套其他标签。

3.一般<pre>标签用在显示源代码，但在输入 < 号时需要写为 &lt;  > 号写为&gt;  " 引号写为 &quot; 。

 

格式化标签

1.<address>使用地址标签写地址，地址显示是斜体的。里面可嵌套其他标签。

2.<em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 格式化标签一般不使用，改为用样式表实现。

 

样式

1.关联外部样式表

   例子：<link rel="stylesheet" type="text/css" href="这里输入地址">

2.内部样式表

   例子：<style type="text/css">
                body {background-color: red}
                p {margin-left: 20px}
              </style>

3.内敛样式表

   例子：<p style="color: red; margin-left: 20px">
               This is a paragraph
              </p>

 

链接

标签<a>可以链接到网站、邮件或跳转到页面不同位置。

1.<a href="地址">链接显示名字</a>

2.<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

   其中%20替换单词之间的空格，浏览器就可以正确地显示文本了

3.跳转到本页的不同位置。例子中点击链接将跳至Chapter 4的位置。

   例子：<p>
              <a href="#C4">查看 Chapter 4。</a>
              </p>
              <h2><a name="C4">Chapter 4</a></h2>

4.跳转到其他页面的相应位置。

   例子：<a name="tips">基本的注意事项 - 有用的提示</a>
              <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
   意思：跳转到http该网站下，到达tips的锚点

 

图像

<img>标签可以引入图像。

注意：<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

 

 表格

 1.<table>标签用来建立表格，里面嵌套的是<tr>（行）,<th>（表头）,<td>（列）。

    例子：<table border="1-100 边框粗度">
               <tr>   //行
               <td>100</td>   //列
               <td>200</td>

               </tr>
               <tr>
               <td>300</td>
               <td>400</td>
               </tr>
               </table>

2.表头可以有水平与垂直两种形式，可以自己设置。表头的文字是粗体，居中的。

   例子：水平的：一个 <tr>标签嵌套多个<th>标签     垂直的：即多个<tr>标签嵌套<th>标签

              <tr>                                                              <tr> 
              <th>姓名</th>   //表头 居中 粗体                <th>姓名</th>
              <th>电话</th>                                              </tr>
              <th>电话</th>                                              ....
              </tr>

 

列表

1.列表有两个标签<ul>（无序列表）,<ol>（有序列表）,<dl>（自定义列表），其中前两种嵌套的都是<li>标签。

   例子：<ul type="disc（实心原点）circle（空心原点）square（方块）">   //ul 无序
              <li>苹果</li>   //一项
              <li>香蕉</li>
              <li>柠檬</li>
              <li>桔子</li>
              </ul>

   例子：<ol type="A"（其他序号："a";"I";"i"）>      //有序 type 为类型
             <li>苹果</li>
             <li>香蕉</li>
             <li>柠檬</li>
             <li>桔子</li>
             </ol>

    例子：<dl>   //自定义
               <dt>计算机</dt>   //表头
               <dd>用来计算的仪器</dd>   //表项
               <dt>显示器</dt>
               <dd>以视觉方式显示信息的装置</dd>
               </dl>

 

块级与内联元素，布局

1.块级元素在浏览器显示时，通常会以新行来开始（和结束）。

   例子：test<h2>一个定义列表：</h2>

   注意：文字test与标签<h2>是不在同一行的，标签<h2>会在新的一行显示。

2.内联元素在显示时通常不会以新行开始。

3.<div> 元素是块级元素，是用于组合其他 HTML 元素的容器。另一常用用途为文档布局。

   与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

4.<span> 元素是内联元素，可用作文本的容器。

   与 CSS 一同使用，<span> 元素可用于为部分文本设置样式属性。

5.CSS 最大的好处：如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。

    由于创建高级的布局非常耗时，使用模板是一个快速的选项。

 

表单<form>

1.表单<form>元素允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

2.单选按钮（Radio Buttons） 添加多个同名（即name="sex"）的单选按钮即可实现

   例子：<input type="radio" name="sex" value="male" />

3.复选框（Checkboxes）        同样地，添加多个同名（即name="bike"）的单选按钮即可实现

   例子：<input type="checkbox" name="bike" />

4.确认按钮  type="submit"

   例子：<input type="submit" value="Submit" />

5.下拉列表  <option>标签增加选项

   例子：<select name="cars">
              <option value="fiat" selected="selected">Fiat</option>

              </select>

6.<fieldset>标签可在数据周围绘制一个带标题的框

   例子：<fieldset>
              <legend>健康信息</legend>   //表格的标题
                 身高：<input type="text" />   //每一项内容

                 <br />                                   //可在里面嵌套换行
                 体重：<input type="text" />
              </fieldset>

7.表单的动作属性  action

   例子：<form name="input" action="html_form_action.asp" method="get">

              <input type="submit" value="Submit" />     //这个为提交按钮  将表单提交给下一个页面或另一个文件

 

框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

1.<frameset>定义如何将窗口分割为框架，可水平（rows）或垂直（cols）分割。

   例子：<frameset cols="25%,75%">

                 <frame  src="*.html">       //放置每个框架对应的页面

                 <frame  src="*.html">

                       </frameset>

   注意：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！即同一html文件不同时出现两者。

2.iframe 用于在网页内显示网页。name可以用在网页链接到该iframe中，<a target="iframe" ../>。

   例子：<iframe src="/i/eg_landscape.jpg"  name="iframe" ></iframe>
              <iframe src="URL" frameborder="0"（移除边框） width="200" height="200"></iframe>

 

背景

1.<body background="*.gif">
   背景图像不可增加页面的加载时间，图像文件不应超过10k。 
2.注意：<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性
   在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。
   W3C 在他们的推荐标准中已删除这些属性。

3. HTML 元素的显示属性与布局应该使用层叠样式表（CSS）。

 

颜色

1.颜色由一个十六进制符号来定义
2.仅有16 种颜色名被 W3C 的 HTML4.0 标准所支持。
   它们是：aqua, black, blue, fuchsia, gray, green, lime,
   maroon, navy, olive, purple, red, silver, teal, white, yellow。

 

头部元素<head>

1.重定向,即跳转页面。嵌套在<head>标签中。
   例子：<meta http-equiv="Refresh" content="5;url=http://..." />

2.<base> 标签为页面上的所有链接规定默认地址（url）或默认目标（target）。只有两个属性href与target。

   例子：<base target="_blank" />

3.<link> 标签定义文档与外部资源之间的关系，常用于链接CSS。
   例子：<link rel="stylesheet" type="text/css" href="mystyle.css" />

 

URL统一资源定位器

1.url的格式：scheme://host.domain:port/path/filename
                     scheme - 定义因特网服务的类型。最常见的类型是 http 
                     host - 定义域主机（http 的默认主机是 www） 
                     domain - 定义因特网域名，比如 w3school.com.cn 
                     :port - 定义主机上的端口号（http 的默认端口号是 80） 
                     path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 
                     filename - 定义文档/资源的名称

2.URL 只使用ASCII 字符集来通过因特网进行发送。

3.由于URL常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

   URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

   URL 不能包含空格。URL 编码通常使用 + 来替换空格。

 

插件

1.插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。

2.可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

3.<embed> 标签定义外部（非 HTML）内容的容器，是 HTML5 标签。

   例子：<object height="100" width="100" data="song.mp3"></object>

              <embed height="100" width="100" src="song.mp3" />

 

<!DOCTYPE >

1.在一个HTML页面的顶部都有一个<!DOCTYPE >的标签。大小写不敏感。

   告知浏览器文档使用哪种 HTML 或 XHTML 规范。

   可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

2.HTML4.01的为：

   Strict DTD

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

   Transitional DTD

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   XHTML也与HTML类似。

   HTML5的为：<!DOCTYPE HTML>

其中：PUBLIC : 公共标识符；"-//W3C//DTD HTML 4.01//EN"，让浏览器寻找匹配此公共标识符的DTD。

           否则，使用公共标识符后面的 URL 作为寻找 DTD 的位置。

3.注意：

   因为HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。

   而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。

 

以上内容都是从w3cschool当中学习，并引用里面的内容。

是比较容易遗漏的点。以此来提醒自己。