zoukankan      html  css  js  c++  java
  • html总结

    主体结构标签

    <html></html>双标签

    <head></head> 

    里面包含的标签 <title></title>

                    <meta></meta>

                    <link/>

       

    <body></body>

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

    文本样式标签

    <b></b>   加粗

    <i></i>   斜体

    <u></u>   下划线

    <sub></sub>   下标

    <sup></sup>   上标

    <font></font>  字符的字体face,大小等

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

    排版标签

    <p></p> 段落

    <br />  换行

    <hr />  水平线

    <div></div>

    <span></span>

    <pre></pre>  预排版标签

    <h1></h1>    标题效果标签

    .......

    <h6></h6>

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

    列表标签

    <ul></ul>  无序列表   <ul type=" "></ul>

    <ol></ol>  有序列表   <ol type=" "></ol>

    <dl></dl>  定义列表

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

    常用快捷键的使用:

    ctrl + a 全选

    ctrl + c 复制

    ctrl + v 粘贴

    ctrl + x 剪切

    ctrl + s 保存

    ctrl + z 撤销

    ctrl + y 回退

    ctrl + j 复制当前行

    ctrl + f 查找

    ctrl + h    替换

    F5 刷新

    ctrl + f5 强制刷新

    alt + tab 界面切换

    win + d 回到桌面

    tab 整体后退  在editplus中相当于4个空格

    shift + tab 整体前移

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

    字符实体

    空格 &nbsp;

    >  &gt;

    <  &lt;

    & &amp;

    ¥&yen;

    版权 &copy;

    注册 &reg;

    X  &times;

    ÷ &divide

    字体修饰

    <b></b>对字体进行加粗设置 

    <i></i>设置文本内容为斜体  

    <u></u>加下划线          

    <sub></sub> 下标         

    <sup></sup>  上标

    <font></font>:

    <pre></pre>预排版标记

    iw

     滚动的文字,也称“走马灯”

    <marquee direction="up" behavior="scroll" width="200" height="200"></marquee>

    <marquee></marquee>

    1、语法格式

    <marquee 属性=“属性值”>内容</marquee>

    2、常用属性

    width:控制走马灯的宽度

    height:控制走马灯的高度

    direction:控制运动的方向:

    取值:

    left向左运动

    right向右运动

    up向上运动

    down向下运动

    behavior

    取值:

    scroll(滚动,默认)

    alternate(弹动)

    slide(一次)

    scrollamount:控制步长(每次移动的距离),单位:毫米,步长越大,每次移动的距离越多

    scrolldelay:控制滚动一次需要的时间。单位:毫秒,时间越小,运动的越快。

    loop 设置文本滚动循环的次数。-1无限循环

    scrollAmount 设置文本每次移动的距离,数值越小,滚动越慢,默认6px

    scrollDelay 决定文本两次移动之间的间隔时间,单位为微秒,时间越小,文本移动频率越高。

    ***********

    hspace 水平页边距

    Vspace 垂直页边距

    head头 meta等

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

    meta标签,http-equiv属性

    content-type

    功能:设定当前页面使用的字符集和语言;

    用法:<meta http-equiv="content-type" content="text/html; charset=gb2312">

    content-language(显示语言的设定)

    功能:显示语言的设定

    用法:<meta http-equiv="Content-Language" content="zh-cn" />

    refresh(刷新)

    功能:自动刷新,并指向新的页面

    用法:<meta http-equiv=“refresh” content=“2;url=http://itcast.cn” />

    Keywords(网页关键字)

    功能:用来告诉搜索引擎你网页的关键字是什么。

    用法:<meta name=“keywords” content=“关键字,关键字,关键字”>

    description(网站内容描述)

    功能:用来告诉搜索引擎你的网站主要内容。

    用法:<meta name=“description” content=“网页内容描述信息">

    描述设计规则:

    网页描述为自然语言而不是罗列关键词(与keywords设计正好相反)

    尽可能准确地描述网页的核心内容,通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息

    网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(100字以内)

    robots(机器人向导)

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引

    content的参数有all,none,index,noindex,follow,nofollow。默认是all。

    Index代表文件将被检索 follow代表页面上的链接可以被查询

    举例:<meta name="robots" content="none">

    author(作者)

    说明:标注网页的作者

    用法:<meta name=“author” content=“传智播客”>

    Copyright(版权信息)

    功能:说明网站版权信息

    用法:<meta name=“copyright" content="信息参数">

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

    <thead> <tbody><tfoot> 方便程序员记,但是没什么作用的

    <caption></caption>表格标题

    <th>表格头  类似<h1>的作用

    Width:设置表格宽度

    Height:设置表格的高度

    Border:表格边线的粗细

    Bordercolor:设置表格边框线的颜色

    Align:设置表格的对齐方式:left左对齐 right右对齐 center居中对齐

    bgColor:设置表格的背景色

    background:URL  设置表格的背景图片

    Cellpadding:内填充。设置文字和边框线的距离

    cellspacing::外填充。

    <tr>里套<table>

    Align:水平对齐方式:Left向左  ,right向右 ,center居中

    Valign:垂直对齐方式 top向上 bottom 向下middle居中<

    <colspan> 跨列合并

    <rowspan> 跨行合并

    <table>

       <caption>学生登记表</caption>

       <thead>

        <tr>

           <th>

           </th>

        </tr>

       <thead>

       <tbody>

         <tr>

           <td>

           </td>

        </tr>

       </tbody>

       

       <tfoot>

         <tr>

           <td>

           </td>

        </tr>

       </tfoot>

    </table>

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

    <a>

    按使用对象的不同分为:

      文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等。

    按URL的不同

    绝对URL链接:

    网站的完整路径 http://www.sina.com.cn

    相对URL链接:本站点的不同页面上去

    书签:链接到不同网页的不同部分。

    属性 值 含义

    href URL 链接的目标URL。

    name name名 为当前锚定位设置一个名称,以便它能够被其他链接所定位。

    target

    _blank在新窗口中打开目标网页

    _self在当前窗口中打开目标网页

    _top整个浏览器窗口

    _parent多框架结构中父窗口

    定义href指向的页面打开位置

    链接远程目标:通过URL地址链接到远程目标。

    链接本地页面:可以通过相对路径或者绝对路径链接本地页面。相对路径:指相对于当前页面位置的路径./:表示当前页面所在的目录../:表示当前页面所在的上一级目录

    绝对路径:

    绝对路径指当前站点中确切的路径,一般以”/”开始

    例如:<a href=“/admin/index.php”>后台首页</a>

    锚点链接同一页面不同位置

    当网页很长时,可以使用锚点在页面中定义一些点,通过超链接可以直接跳转到锚点。定义锚点:1,<a name=“top”>文档顶部</a>

    链接到锚点:<a href=“#top”>返回顶部</a>

      2,<a name=“top”>文档顶部</a>

    链接到锚点:<a href=“文件名#top”>返回顶部</a>

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

    img     src

    vspace

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

    map图像映射

    <img src=“1.jpg” usemap=“#Map” /><map id=“Map” name=“Map”>

           

        <area shape=“热点形状” coords=“坐标” href=“链接” alt=“替代文字” />

    </map>

    ==============

      内联元素(行内元素)内联元素(inline element)

    * a - 锚点

    * abbr - 缩写

    * acronym - 首字

    * b - 粗体(不推荐)

    * bdo - bidi override

    * big - 大字体

    * br - 换行

    * cite - 引用

    * code - 计算机代码(在引用源码的时候需要)

    * dfn - 定义字段

    * em - 强调

    * font - 字体设定(不推荐)

    * i - 斜体

    * img - 图片

    * input - 输入框

    * kbd - 定义键盘文本

    * label - 表格标签

    * q - 短引用

    * s - 中划线(不推荐)

    * samp - 定义范例计算机代码

    * select - 项目选择

    * small - 小字体文本

    * span - 常用内联容器,定义文本内区块

    * strike - 中划线

    * strong - 粗体强调

    * sub - 下标

    * sup - 上标

    * textarea - 多行文本输入框

    * tt - 电传文本

    * u - 下划线

    * var - 定义变量

    块元素(block element)

    * address - 地址

    * blockquote - 块引用

    * center - 举中对齐块

    * dir - 目录列表

    * div - 常用块级容易,也是css layout的主要标签

    * dl - 定义列表

    * fieldset - form控制组

    * form - 交互表单

    * h1 - 大标题

    * h2 - 副标题

    * h3 - 3级标题

    * h4 - 4级标题

    * h5 - 5级标题

    * h6 - 6级标题

    * hr - 水平分隔线

    * isindex - input prompt

    * menu - 菜单列表

    * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

    * noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)

    * ol - 排序表单

    * p - 段落

    * pre - 格式化文本

    * table - 表格

    * ul - 非排序列表

    可变元素

    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    * applet - java applet

    * button - 按钮

    * del - 删除文本

    * iframe - inline frame

    * ins - 插入的文本

    * map - 图片区块(map)

    * object - object对象

    * script - 客户端脚本

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

    框架的制作步骤

    声明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    <frameset>和<body>不能共存

    1设计框架的结构 划分窗口

    <frameset rows="80,*,80" frameborder="no" border="0" framespacing="0">

      <frame src="file:///E|/yuefu/UntitledFrame-2" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />

    scrolling="No" 不能滚动   noresize="noresize" 不能拉框 

      <frame src="file:///E|/yuefu/Untitled-1" name="mainFrame" id="mainFrame" />

      <frame src="file:///E|/yuefu/UntitledFrame-3" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />

    </frameset>

    <noframes><body>如果框架没作用,则告诉客户没作用的提示

    </body>

    </noframes></html>

    2创建每一个窗口的页面

    target

    <a href="url"  targe="位置的name名">

    定义href指向的页面打开位置

    3,分别给每个窗口写html

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

    a:link      初次

    a:visited   放在上面

    a:hover     点下激活

    a:active    访问过

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

    <a href="#"  target="blank">

    空链接1.<a href="#"/>

    2.<a href="javascript:void(0)">空链接</a>

    target

    _blank在新窗口中打开目标网页

    _self在当前窗口中打开目标网页

    _top整个浏览器窗口

    _parent多框架结构中父窗口

    定义href指向的页面打开位置

    ---------------html5-------------------------------------

    <label><input type="email" /></label> 

    email  邮箱

    url    地址

    number  数字

    range  音量调节

    color  颜色

    date  日期

    month  月份

    week 星期

  • 相关阅读:
    jQuery UI (7)Autocomplete 自动补全插件
    jQuery UI (6)Accodion 可折叠面板插件
    jQuery UI (5)Sortable 排序插件
    jQuery UI (4)Jquery UI Selectable 选择插件
    jQuery UI (3)Resiable 调整大小插件
    jQuery UI (2)Droppable 放置插件
    jQuery UI (1)Draggable 拖动插件
    C#(99):Lambda表达式
    C#(99):四种Timer的区别和用法
    C#(99):Reporting Service编程----访问Web服务
  • 原文地址:https://www.cnblogs.com/wujunbin/p/7445764.html
Copyright © 2011-2022 走看看