`

html基础与框架

    博客分类:
  • html
阅读更多

一、基础部分
1.文档结构:html部分【html】,文档头部分【head】,正文部分【body】
2.超链接:
  远程:<a>http://www.baidu.com</a>
  本地:
      同文件夹下:<a href="2.html" >test</a>
      不同文件夹下:<a href="c:/2.html" >test</a>
      上级文件夹:<a href="../2.html" >百度</a>
      下级文件夹:<a href="my/2.html" >百度</a>

====================target属性=========================
    
target属性指定所链接的页面在浏览器窗口中的打开方式,它的参数值主要有:_blank、_parent、_self、_top,这些参数值代表的含义如下:

◎_blank,在新浏览器窗口中打开链接文件。

◎_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。

◎_self,在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定。
但是我不太理解
◎_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架 。

==============框架,窗体,父框架=======================
框架,就是一个浏览页面非为几个部分,就相当于几个浏览器同时显示一样,各个部分各不相干。
窗体,就是浏览器的窗口,这个应该很好理解吧
父框架:就是比你所点击的超链接所在的框架的级别高,如果target的值为_parent,那么如果只有一个框架,那么就是相当于在整个浏览器界面打开一个新网页,如果框架嵌套的,那么就在级别比较高的框架中打开

3.表格元素

   表格的基本语法【带边框,不带边框】
   跨多行、多列的表元:colspan,rowspan
   表格尺寸设置:
       边框尺寸设置: <table border=#>
       表格尺寸设置: <table border width=# height=#>
       表元间隙设置:<table border cellspacing=#>
       表元内部空白设置:<table border cellpadding=#>
       表格内文字的对齐/布局:<td align=#>
       表格在页面中的对齐/布局(Floating Table):<table align=left>
       表格的色彩:<table bgcolor="#660033">
       表格边框的色彩:<table bordercolor=#>


4.HTML表单标记

表单的基本语法
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST


表单中提供给用户的输入形式
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

文字输入和密码输入:
<input type=* value=**> size,maxlength
        复选框(Checkbox) 和 单选框(RadioButton) :
              <input type=checkbox checked>
              <input type=radio value=** checked>

隐藏表单的元素:
<input type=hidden value=*>
        列表框(Selectable Menu) :
           <select name=* size=**>
<option value=My_Favorite selected>Orange</select>
</select>

<select size=** multiple>注意,是用 Ctrl 键配合鼠标实现多选。

文本区域:
<textarea name=* rows=** cols=**> ... <textarea>
wrap:
off:不自动换行;
hard:自动硬回车换行,换行标记一同被传送到服务器中去;
soft:自动软回车换行,换行标记不会传送到服务器中去

5.HTML其它标记
   链入图象的基本语法
<img src=#> #=图象的 URL
<img alt=#> #=在浏览器尚未完全读入图象时,在图象位置显示的文字

==================div和span=============

SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。

========================================
一个div是占一个块的,它的默认display属性是block,表示一个块。如:
<div>aaa</div>bbb
显示出来,是两行
而span,它的display默认属性是inline,可以连在一起的。如:
<span>aaa</span>bbb,显示出来是一行。

div一般用于排版,而span一般用于局部文字的样式。

div是块标记,span是行内标记。span的效果就是什么也不做。但可以给span加样式来使得同一行里面的内容有不同的显示如字体,颜色,大小,背景。


======动态效果=================
<marquee> 跑马灯 </marquee>
<direction=#> #=left, right
对齐方式(Align) <align=#> #=top, middle, bottom

二、框架
1.多窗口页面(Frames)

基本语法
<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

各窗口的尺寸设置:
纵向排列多个窗口:<frameset cols=#>
横向排列多个窗口:<frameset rows=#>
纵横排列多个窗口:COLS & ROWS
不允许各窗口改变大小:<frame noresize>

各窗口间相互操作(Frame Target)
<frame name=#>
<a href=url target=#>
<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口

Frame 的外观(Appearance)
窗口边框的设置 <frame frameborder=#> #=yes, no / 1, 0
各窗口间空白区域的设置 <frameset framespacing=#> #=空白区域的大小
边框色彩 <frameset bordercolor=#>
卷滚条设置 <frame scrolling=#> #=yes, no, auto#=缺省值是 auto。


浮动窗口(Floating Frame)

<iframe src=# name=##> ... </iframe>


分享到:
评论

相关推荐

    HTML知识框架,基础的HTML知识

    HTML的基础知识框架,xmind格式,只包含了基础的HTML的知识框架,可以帮助建立HTML的知识网络

    HTML语言框架基础

    老师自己编辑的HTML语言框架基础,适合php基础学习

    HTML框架实例

    web基础中的HTML框架的使用实例(frameset)

    Web前端基础:HTML5浮动框架.pptx

    “index.html”&gt; 在和&lt;/iframe&gt; 之间放置的文本,在浏览器不支持iframe时将会显示。 iframe 元素会创建包含另外一个文档的内联框架。src属性值指向要包含的页面地址 &lt;iframe&gt; 标签创建包含另一个文档的行内框架。 1...

    HTML基本标签+表格基础+表单和框架

    HTML基本标签+表格基础+表单和框架,基础知识点,初学者了解,后期将逐步加载CSS样式表与JS的使用基础知识点,大家共同使用

    springboot基础空白框架模板

    可以运行的springboot基础框架,已经集成了Swagger2,目前已经写好一个controller的demo(可以访问数据库); 路径: localhost:9002/swagger-ui.html localhost:9002/test/hh

    HTML5响应式商城后台管理框架模板_HTML5响应式商城后台管理框架模板_

    HTML5响应式商城后台管理框架模板,模板采用常规化的上、左、右分布,左边魏功能栏,模板中包括基础信息及统计报表等插件

    spring3 mvc mybatis bootstrap HTML5 框架2.1

    1.支持APP手机应用(android和ios)接口调用 ...4.框架搭建完善,在此基础上做过很多项目,身经百战,支持大并发,程序运行稳定。 5.基础功能已经完善,此为框架平台,需要程序员二次开发做具体的项目

    Web前端基础:Bootstrap框架.pptx

    前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。 熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后,学习Web框架可以加快Web开发速度,节约时间...

    js_html_css_jQuery_bootstrapPDF文档基础到框架

    js_html_css_jQuery_bootstrapPDF文档基础到框架 包含了html css js jquery booststrap 从简到难,讲解详细,初学者可以看懂,满足很多想学习前端的人群

    html基础教程 表格与表单 图像和声音 框架 CSS.ppt

    都很基础,高手绕道,如果不打算做前台界面,学过这些html基础应该就够用了。

    html简单知识点总结,常用标签总结,简洁界面 ,框架的基础例子

    该网页包含了常用的html基本标签,包括了一些标签的小例子演示,都集成在一个html页面中,方便初学者学习和温习,基础中的基础,框架的基础例子

    零基础学HTML CSS源代码

    DIV与SPAN实例手把手--布局.html 演示DIV与SPAN实例手把手--布局。 第14章(源代码\第14章) 示例描述:本章演示DIV与CSS结合用法。 内联定义样式.html 内联定义样式.html 链入内部CSS样式.html 链入...

    Echarts可视化中html基础结构框架

    Echarts中html结构

    关于静态页面HTML的框架

    描述了HTML静态页面下的基础框架,对于学习使用HTML的同学有很大帮助。(自己总结的笔记,不喜勿喷,谢谢)

    html基础教程

    资源名称:html基础教程内容简介:HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...

    基于MUI手机APP开发基础框架

    基于MUI手机APP开发基础框架源代码,打开HBuilder导入项目即可使用,可以通过安卓夜神模拟器进行运行调试,其他具体问题参考mui官方文档。这个只是基础手机APP开发模板,作为学习和交流,二次开发请自调整!压缩包内...

    html基础框架,无需翻书

    概括好的HTML标签语言,无需翻书,让您更快的了解Html语言,轻松掌握

    HTML5 中的新标签。 基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式

    基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式/节 元信息 编程 HTML5 中添加的属性。 属性 描述 = HTML5 中新的事件属性。 Window 事件属性 Form 事件 Keyboard 事件 Mouse 事件 Media 事件

    Liferay的AUI框架

    Liferay中的AUI框架,官方叫做Alloy,是一个UI超框架,能为浏览器的三方面,结构,风格和表现建立网络应用提供连续的简单的API。 它融合了三种设计语言:HTML, CSS 和 JAVA。 准确来说AUI是Liferay在YUI的基础上...

Global site tag (gtag.js) - Google Analytics