仅仅是自己对着W3CSchool整理的一些HTML基础知识点,敲一遍加深下印象也方便以后复习。
HTML块
可以使用<dvi>和<span>将HTML元素组合起来
HTML块元素
大多数HTML元素被定义为块级元素(block level element)或内联元素(inner element)。
块级元素在浏览器显示时,通常会以新行来开始和结束。
如:<h1>,<p>,<ul>,<table>
HTML内联元素
内联元素通常在显示时不会以新行开始。
如:<b>,<td>,<a>,<img>
HTML<div>元素
<div>元素是可以用来组合其他HTML元素的块级元素,它没有特定的含义,由于是块级元素,浏览器会在其前后显示折行。
如果同CSS一起使用,<div>元素可以用来对大的内容块设置样式属性。其另一常用的用途就是文档布局,它取代了使用表格定义布局的老式方法。
HTML<span>元素
<span>元素是内联元素,可用作文本的容器,其也没有特定的含义。
当与CSS一同使用时,<span>元素可用作于部分文本设置样式属性。
HTML表单和输入
表单
表单使用<form></form>定义,它是一个包含表单元素的区域,表单元素允许用户在表单中(如:文本域、下拉列表、单选框、复选框等)输入信息的元素。
输入
文本域(Text field)
<form>
<input type="text" name="firstname">
<input type="text" name="lastname">
</form>
单选按钮
<form>
<input type="radio" name="sex" value="male"/>Male
<input type="radio" name="sex" value="female"/>Female
</form>
复选框
<form>
<input type="checkbox" name="bike"/>
I have a bike
<input type="checkbox" nam="car"/>
I have a car
</form>
表单的动作属性(Aciton)和确认按钮
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user"/>
<input type="submit" name="Submit"/>
</form>
简单的下拉列表
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option vaule="saab" selected="selected">Saab</option>(设置预选值)
</select>
创建按钮
<form>
<input type="button" value="Hello World!">
</form>
Fieldset around data
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text"/>
体重:<input type="text"/>
</fieldset>
</form>
表单标签
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义一个控制的标签 |
<fieldset> | 定义域 |
<legend> | 定义域的标题 |
<select> | 定义一个选择列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个按钮 |
HTML框架
通过使用框架可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他框架。
使用框架的坏处:
*开发人员必须同时跟踪更多的HTML文档
*很难打印整张页面
框架结构标签/即框架集(<frameset>)
*定义如何将窗口分割为框架,一系列行和列
*rows/columns的值规定了每行或每列占据屏幕的面积
框架标签(Frame)
Frame标签定义了放置在每个框架中的HTML文档。
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
HTML内联框架(Iframe)
用于在网页内显示网页
<iframe src="URL"></iframe>
高度和宽度
<iframe src="URL" width="200" height="200"></iframe>
删除边框
<iframe src="URL" frameborder="0"></iframe>
使用iframe作为链接的目标
<iframe src="URL" name="iframe_a"></iframe>
<p><a href="URL" target="iframe_a">Click Me</a></p>
注意事项:
*假如一个框架有可见边框,用户可以拖动边框来改变它的大小,为了避免这种情况的发生,可以在<frame>标签中加入:noresize="noresize"
*不能将<body></body>和<frameset></frameset>标签同时使用
更多实例
-
如何使用 <noframes> 标签
- 本例演示:如何使用 <noframes> 标签。 混合框架结构
- 本例演示如何制作含有三份文档的框架结构,同时将他们混合置于行和列之中。 含有 noresize="noresize" 属性的框架结构
- 本例演示 noresize 属性。在本例中,框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。 导航框架
- 本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。 内联框架
- 本例演示如何创建内联框架(HTML 页中的框架)。 跳转至框架内的一个指定的节
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。 使用框架导航跳转至指定的节
- 本例演示两个框架。左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
-
HTML背景
背景(backgrounds)
<body>拥有两个配置背景的标签,背景可以是颜色或者图像。
背景颜色(Bgcolor)
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
属性值可以是十六进制数、RGB值或颜色名
背景(Background)
<body background="a.gif">(相对地址)
<body background="www.baidu.com/a.gif">(绝对地址)
注意事项:
*如果图像尺寸小于浏览器窗口,那么图像将会在整个浏览器窗口进行复制。
*背景图片一般不应超过10k(影响加载时间)
<body>标签中的bgcolor,background和text属性在HTML4和XHTML中已经被废弃。应该使用CSS来定义HTML元素的布局和显示属性。
HTML颜色
颜色值
颜色由一个十六进制符号来定义,这个符号由红、绿、蓝的值做成,
每种颜色的最小值是0(#00),最大值是255(#FF)
颜色名:
HTML4.0仅支持16中颜色名,分别为aqua,black,blue,funchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,yellow
如果需要使用其他颜色,需要使用对应的十六进制颜色值
http://www.w3school.com.cn/html/html_colornames.asp
Web安全色
在以前,大多数计算机仅支持256种颜色,一系列216种Web安全色作为Web标准被建议使用。不过现在这么做的意义已经不大了!