您的位置：首页 > Web前端 > HTML

HTML基础学习笔记（下）

2014-11-09 01:06 639 查看


仅仅是自己对着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标准被建议使用。不过现在这么做的意义已经不大了！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航