如鹏网HTML代码学习记录

HTML常用标签--字体

 字体标签 <font>

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

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

 特殊字符

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

&lt;

<

&quot;

"

&nbsp;

空格

&gt;

>

&reg;

?

&trade;

?

&amp;

&

&copy;

?

   

无序列表

<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属性:文档类型

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。