HTML5技术

HTML的基本语法 - 燕林夕(4)

字号+ 作者:H5之家 来源:H5之家 2017-12-06 17:05 我要评论( )

href 指定链接地址 title 为链接添加提示文字 name 为链接命名 target 指定链接的目标窗口 设置的目标窗口(使用target 属性来控制打开的目标窗口) a href=”链接目标 ”target=”目标窗口的打开方式” 创建图像的

   href       指定链接地址             title           为链接添加提示文字

   name      为链接命名              target          指定链接的目标窗口 

   设置的目标窗口(使用target 属性来控制打开的目标窗口)

    <a href=”链接目标 ”target=”目标窗口的打开方式”>

  创建图像的超链接

设置图像超链接——a

<a href=”链接目标 ”>链接的图像</a>

设置图像热区链接(形状:矩形-rect 椭圆形-circle 多边形-poly)

  <img usemap=”#热区名称 ”>

  <map name=”热区名称 ”>

  <area shape=”热点形状 ”coords=”区域坐标 ”href=”#链接目标 ”alt=”替换文字 ”>

   …………………………………………………………………

  </map>

 创建锚点链接

  创建锚点:<a name=”锚点的名称 ”></a>

  链接到页面不同位置的锚点链接:<a href=”#锚点的名称 ”>……</a>

 插入表单——form

   处理动作——action(用于指定表单数据提交到哪个地址进行处理)

     <form action=”表单的处理程序 ”>

       …………………………………

     </form>

 表单名称——name

   <form name=”表单名称 ”>

………………………………….

</form>

 传送方法——method

   <form method=”传送方法 ”>

……………………………..

</form>

 编码方式——enctype

   <form enctype=”编码方式 ”>

     ……………………………………

   </form>

  enctype的取值                                取值含义

  application/x-www-form-ulencoded           默认的编码形式

  multipart/form-data                         MIME编码,上传文件的表单必须选择项

  目标显示方式——target

   <form target=”目标窗口的打开方式 ”>

     ……………………………………

   </form>

 

创建强大的表格

  创建并设置表格属性

表格的基本标记——table、tr、td

<table>

   <tr>

   <td>单元格内的文字</td>

   <td>单元格内的文字</td>

   </tr>

   <tr>

   <td>单元格内的文字</td>

   <td>单元格内的文字</td>

   </tr>

   </table>

 表格宽度和高度——width、height

   <table width=”表格的宽度 ”height=”表格的高度 ”>

 表格的标题——caption

   <caption>表格的标题</caption>

 表格的表头——th

    <table>

    <tr>

    <th>…….</th>

    </tr>

    </table>

 表格对齐方式——aline(left-左对齐 center-居中 right-右对齐)

    <table aline=”对齐方式”>

 表格的边框宽度——border

    <table border=”边框宽度 ”>

 表格边框颜色——bordercolor

    <table border=”边框宽度 ”bordercolor=”边框颜色”>

 单元格间距——cellspacing

    <table cellspacing=”间距值 ”>

 单元格边距——cellpadding

     <table cellpadding=”文字与边框距离值 ”>

 表格的背景颜色——bgcolor

     <table bgcolor=”背景颜色 ”>

 表格的背景图像——background

     <table background=”背景图像地址 ”>

设计表头样式——thead

  <thead>

   …………………………

  </thead>

设计表主体样式——tbody

  <tbody bgcolor=”背景颜色 ”align=”对齐方式 ”>

  …………………………………………………….

  </tbody>

设计表尾样式——tfoot

  <tfoot bgcolor=”背景颜色 ”align=”对齐方式 ”valign=”垂直对齐方式 ”>

  …………………………………………………..

  </tfoot>

 

创建框架结构网页

  水平分割窗口——rows

     <frameset rows=”高度1,高度2,….,*”>

     <frame src=”url ”>

<frame src=”url ”>

……………………..

</frameset>

   垂直分割窗口——cols

      <frameset cols=”高度1,高度2,….,*”>

      <frame src=”url ”>

<frame src=”url ”>

……………………..

</frameset>

嵌套分割窗口

       <frameset rows=”30%,*”>

       </frame>

   <frameset cols=”20%,*”>

     <frame>

    <frame>

       </frame>

       </frame>

设置边框——frameborder

   <frameset frameborder=”是否显示 ”>

框架的边框宽度——framespacing

   <frameset framespacing=”边框宽度 ”>

框架的边框颜色——bordercolor

   <frameset bordercolor=”边框颜色 ”>

框架页面源文件——src

  <frame src=”html文件的位置 ”>

框架名称——name

  <frame src=”html文件的位置 ”name=”子窗口名称 ”>

调整框架窗口的尺寸——noresize

  <frame src=”页面源文件地址 ”noresize >

框架边框与页面内容的水平边距——marginwidth

   <frame src=”页面源文件地址 ”marginwidth=”value ”>

 

框架边框与页面内容的垂直边距——marginheight

   <frame src=”页面源文件地址 ”marginheight=”value ”>

设置框架滚动条显示——scrolling

   <frame scrolling=”yes 或no或auto ”>

不支持框架标记——noframes

   <noframes>

   </noframes>

浮动框架的页面源文件——src

   <iframe src=”url ”></iframe>

浮动框架的宽度和高度——width和 height

   <iframe src=”浮动框架的源文件 ”width=”浮动框架的宽 ”height=”浮动框架的高 ”>

   </iframe>

浮动框架的对齐方式——align

   <iframe src=”浮动框架的源文件 ”align=”对齐方式 ”></iframe>

设置浮动框架是否显示滚动条——scrolling

   <iframe src=”浮动框架的源文件 ”scrolling=”是否显示滚动条 ”></iframe>

属性                           说明

auto             默认值,整个框架在浏览器页面中左对齐

yes              总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置也会预留出

no               在任何情况下都不显示滚动条

浮动框架的边框——frameborder

    <iframe src=”浮动框架的源文件 ”frameborder=”是否显示框架边框 ”></iframe>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 极简的JS函数 - zxh91989

    HTML5 极简的JS函数 - zxh91989

    2017-12-07 12:10

  • html5知识点:简析正则表达式 - 千千小助

    html5知识点:简析正则表达式 - 千千小助

    2017-12-02 08:02

  • html5知识点:CSS3新增选择器 - 千千小助

    html5知识点:CSS3新增选择器 - 千千小助

    2017-11-30 09:00

  • HTML页面跳转及参数传递 - 爱晒太阳的风

    HTML页面跳转及参数传递 - 爱晒太阳的风

    2017-11-30 08:03

网友点评