如鹏网HTML代码学习记录

浏览数：23 / 时间：2015年06月09日

HTML常用标签--字体

字体标签 <font>

例：<font color="red">HTML字体标签</font>,常见属性size color，还有其它属性，比如：face

标题标签 <H1></H1>...<H6></H6>

特殊字符

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

<	<	"	"		空格
>	>	®	?	™	?
&	&	©	?

无序列表

<ul> <!-- 符号标签（○●■）-->

<li>游戏</li> <li>部门</li>

</ul>

注：ul中 type 属性有三个值 [ circle|disc|square ]，用于规定列表的项目符号，但不赞成使用。

有序列表

<ol> <!-- 数字标签（a A 1 i I）-->

<li>游戏</li> 

<li>部门</li>

</ol>

注：ol中 type 属性同样不赞成使用。

如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS

定义列表（definition list）

<dl>
      <dt>游戏</dt> 
        <dd>穿越火线</dd>
        <dd>英雄联盟</dd> 
      <dt>部门</dt> 
        <dd>研发部门</dd>
        <dd>销售部门</dd> 
    </dl>

图像标签 <img>

例

<img src="1.jpg"

border="3px" 

title="鼠标移动上提示文字" 

alt="图片说明文字" 

width="500px" 

height="200px"/>

src：图像URL地址；border用来设置图像的边框；alt:用来为图像定义一串预备的可替换的文本,不能超过1024字符。

表格标签 <table>

用于格式化数据。
例：

<table border width cellpadding cellspacing>
          <caption>标题</caption>
          <thead>
             <th>姓名</th>  <!--对表格的第一行或者第一列进行 -->
             <th>年龄</th>  <!--格式化，就是粗体居中显示 -->
          </thead>
          <tbody>
            <tr>  <!--行标签 -->
              <td>张三</td><td>20</td>  <!--单元格标签 -->
            </tr>
            <tr><td>李四</td><td>25</td></tr>
          </tbody>
        </table>

<table>常用属性
    border：框线粗细 0代表无
    width：宽度接收整数值、百分数
    cellpadding：单元格内容与边框的距离
    cellspacing：单元格与相邻单元格之间的距离
<td>常用属性
    colspan：合并同行单元格
    rowspan：合并同列单元格

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文）
THEAD TBODY TFOOT
TBODY 可以控制表格分行下载，从而提高下载速度（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间）。

超链接标签 <a>

用法一：超链接 <a href="">

<a href="http://www.163.com" target="_blank">网易</a>

href：要打开资源的路径，可以是URL，也可以是本地文件。
    target：指定在哪个窗口或者帧中打开。有四个值：
_blank：在一个新开的空白窗口中打开链接
_parent：在父级窗口中打开
_self：在自身页面中打开链接（默认）
_top：在整个浏览器的最顶端(前端)开始打开链接
用法二：定位标记 <a name="">
    链接到同一文档中的特定位置叫做定位标记（锚链接）。一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
    注：定位标记要和超链接结合使用才有效。
    示例：

<a name= "标记" >标记位置</a>
        <p>…….<!--很多空行以制造网页过长的效果 -->
        <a href= "#标记">返回标记位置</a>

注释：使用定位标记时一定在href值的开始加入#标记名

HTML常用标签--框架

<html>
<frameset rows="20%,*">   <!-- 框架标记，用以划分框窗 -->


  <frame src="top.html">   <!-- 框窗标记，设定一个框窗 --> 
  <frameset cols="25%,75%">
    <frame src="left.html">
    <frame src="right.html">
  </frameset>
</frameset>

</html>

所有框架标记　要放在一个总起的 html 档，这个档案只记录了该框架如何划分，不会显示任何资料，所以不必放入 <BODY> 标记。

<frameset>常用属性
    COLS="20%,*"：垂直切割画面(如分左右两个画面)，接受整数值、百分数，* 则代表占用余下空间。数值的个数代表分成的视窗数目且以逗号分隔。
    ROWS="120,*"：就是横向切割，将画面上下分开，数值设定同上。
    frameborder="0"：设定框架的边框，其值只有 0 和 1 ，0 表示不要边框，1 表示要显示边框。
    border="0"：设定框架的边框厚度，以 pixels 为单位。
    bordercolor="#999"：设定框架的边框颜色。
    framespacing="5" ：表示框架与框架间的保留空白的距离。

<frame>常用属性
    src="top.html"：设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。
    name="top"：设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。
    scrolling="auto"：设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示，AUTO是视情况显示。
    noresize：设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。

<NOFRAMES>
    当使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的提示内容，而不是一片空白。  如下：
    <frameset rows="80,*">
      <noframes> 
       <body> 
        很抱歉，您使用的浏览器不支持框架功能，请转用新的浏览器。 
      </body> 
      </noframes>
      <frame name="top" src="a.html">
      <frame name="bottom" src="b.html">
    </frameset>

HTML语法--表单

<INPUT>标签：接受用户输入信息
    <input type="text" value="" />
    type标签指定输入标签的类型，共有10个值：文本框text、密码框
    password、单选框radio、复选框checkbox、隐藏字段hidden、提
    交按钮submit、重置按钮reset、按钮button、文件上传file、图像
    image.
<SELECT>标签：定义一个选择列表
    <select name="city">
        <option value="1">北京</option>
        <option value="2">郑州</option>
    </select>
    注：<option>：定义下拉列表中的选项，属性 selected 没有属性值
    加在其中一个子项上，该子项就变成默认被选中项。

<TEXTAREA>标签：多行文本框
    <textarea rows="3" rols="20"> </textarea>
    cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
<label>标签：
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。for的属性值指向绑定表单元素的 id 值。

块元素

大多数 HTML 元素被定义为块级元素或内联元素。
-块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
-内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

DIV> <SPAN>
    DIV
    HTML DIV 是块级元素，它是可用于组合其他HTML元素的容器。DIV元素没有特定的含义。与CSS一起使用，可用于对大的内容快设置样式属性。
    <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
SPAN
    HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义，当与 CSS 一同使用时，可用于为部分文本设置样式属性。
HTML语法--头标签

title：指定浏览器标题栏显示的内容
base：标签为页面上的所有链接规定默认地址或默认目标
    href属性：规定页面中所有相对链接的基准 URL
    target属性：指定打开超链接的方式
meta：可提供有关页面的元信息
    content属性：定义与 http-equiv 或 name 属性相关的元信息
    http-equiv属性：把 content 属性关联到 HTTP 头部
    name属性：把 content 属性关联到一个名称
link：
    rel属性：目标文档与当前文档的关系
    type属性：文档类型