HTML学习笔记2
(taixiansheng笔记,转载请注明出处,蟹蟹)
6. 图形标记
6.1 <img>
标签
定义和用法
img 元素可定义一副图像。
<img>
标签属性:
- src属性: 指定图片路径
- alt属性: 当图片无法加载时显示的提示信息.
- title属性: 鼠标悬浮时显示提示信息
- heigth属性: 图片的高(单位是像素) (如果宽和高只指定一个,图片会按比例缩放)
- width属性:图片的宽.
- border属性: 边框(单位是像素)
- usemap属性: 将图片分区,每个区点了之后连接到不同的页面
举例:
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" title="上海鲜花港 - 郁金香" border="100" />
7. 链接标记
7.1 <a>
标签
定义和用法
<a>
标签可定义锚。锚 (anchor) 有两种用法:
- 通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
- 格式为:href = “协议名+地址”
- href = “http://www.baidu.com”(网址链接)
- href = mailto : xx@mail.com (邮件链接)
- href = thunder : quoi3294fqewiurqsdf (迅雷下载链接)
- 格式为:href = “协议名+地址”
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
- 做一个锚标记,使用a标签的name属性或id属性指定锚点名称.
<a name="top" >这是顶部</a>
<a id="middle" >这是中部</a>
跳转到锚标记,使用href属性指定要跳转到的锚点.
<a href="#top" >回到顶部</a>
<a href="#middle" >回到顶部</a>
在所有浏览器中,链接的默认外观是:- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
- 做一个锚标记,使用a标签的name属性或id属性指定锚点名称.
常用属性:
- href属性: 跳转的资源名 或 锚点名称
- name属性: 定义锚点时,指定锚点名称
- target属性: 针对资源跳转时使用
- target属性不指定时,则在当前页面打开.
- _blank : 在空白页打开.
- _parent : 在父框架集中打开被链接文档。
- _self : 默认。在相同的框架中打开被链接文档。
- _top : 在整个窗口中打开被链接文档。
- framename : 在指定的框架中打开被链接文档。
举例:
<html>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
8. 表格标记
8.1 <table>
标签
定义和用法
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
常用属性:
- cellspacing: 外边距 (单元格和其他单元格(边框)之间的距离)
- cellpadding: 内边距 (内容和单元格框线之间的距离)
举例:
<table border="1" cellpadding="20" cellspacing="50">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
8.2 <tr>
标签
定义和用法
<tr>
标签定义 HTML 表格中的行。
tr 元素包含一个或多个 th 或 td 元素。
(taixiansheng笔记,转载请注明出处,蟹蟹)
8.3 <th>
定义和用法
定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
常用属性:
- colspan属性 : 横着占多少列
- rowspan属性 : 竖着占多少行
- align属性 : 对齐方式
8.4 <td>
定义和用法
<td>
标签定义 HTML 表格中的标准单元格,所包裹的文本一般显示为正常字体且左对齐。
常用属性:
- colspan属性 : 横着占多少列
- rowspan属性 : 竖着占多少行
- align属性 : 对齐方式
9. 表单标记
9.1 <form>
标签
定义和用法
<form>
标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
常用属性:
- action(必需):规定当提交表单时,向何处发送表单数据。
- method:规定如何发送表单数据,可选值为get(明文显示)或post(暗文)。
9.2 <textarea>
标签
定义和用法
<textarea>
标签定义多行的文本输入控件。
常用属性:
- cols(必需):规定文本区内的可见宽度。
- rows (必需):规定文本区内的可见行数。
- disabled:规定禁用该文本区。
- name:规定文本区的名称。
- readonly:规定文本区为只读。
举例:
<html>
<body>
<textarea rows="2" cols="20">
taixiansheng的HTML学习笔记
</textarea>
</body>
</html>
9.3 <input>
标签
定义和用法
<input>
标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用属性:
- type:规定input元素类型
- button:按钮(与js结合)
- checkbox:多选框
- file:文件上传
- hidden:隐藏域
- image:图片按钮,很少用,可用css替换
- password:密码框
- radio:单选框
- reset:重置按钮
- submit:提交按钮
- text:文本输入框
- name:定义input元素名称, 提交时为键值对的键
- value:定义input元素的值,提交时为键值对的值,对于按钮类型的,为按钮上显示的文字
- readonly:规定输入字段为只读,只有text、password、textarea具有这个属性
- disabled:禁用该元素,该元素不参与提交
- checked:默认为选中,只有radio、checkbox具有该属性
- maxlength:规定最大长度,只有text、password具有该属性
- size:规定输入框的显示长度,只有text、password具有该属性
举例:
<html>
<body>
<form action="#" method="get" >
<table border="1" >
<tr>
<td colspan="3" align="center" ><b>用户注册</b></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="name" value="123" maxlength="5" size="50" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>性别:</td>
<td>女<input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" checked="checked" /></td>
</tr>
<tr>
<td>愛好:</td>
<td>抽烟<input type="checkbox" name="habit" value="smoke" checked="checked" />喝酒<input type="checkbox" name="habit" value="drink" />烫头<input type="checkbox" name="habit" value="tangtou" /></td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="edu" size="1" >
<option value="00" >---请选择学历---</option>
<option value="01" >高中</option>
<option value="02" >大专</option>
<option value="03" selected="selected" >本科</option>
<option value="04" >硕士</option>
</select>
</td>
</tr>
<tr>
<td>上传照片:</td>
<td><input type="file" name="photo" /></td>
</tr>
<tr>
<td>个人描述:</td>
<td><textarea name="desc" cols="50" rows="10" ></textarea></td>
</tr>
<tr>
<td>隐藏域:</td>
<td><input type="hidden" name="secret" value="haha" /></td>
</tr>
<tr>
<td>其他:</td>
<td><input type="image" /></td>
</tr>
<tr>
<td colspan="2" align="center" ><input type="submit" value="提交" /><input type="reset" /></td>
</tr>
</table>
</form>
</body>
</html>
(taixiansheng笔记,转载请注明出处,蟹蟹)
9.4 <select>
标签
定义和用法
select 元素可创建单选或多选菜单。
常用属性:
- disabled:禁用该下拉列表
- multiple:规定可选择多个选项
- name:规定下拉列表的名称
- size:规定下拉列表中可见选项的数目
举例:
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
9.5 <opnion>
标签
定义和用法
option 元素定义下拉列表中的一个选项(一个条目)。
浏览器将 <option>
标签中的内容作为 <select>
标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
常用属性:
- disabled:禁用该选项
- label:定义当使用
<optgroup>
时所使用的标注 - selected:规定默认选项
- value:定义送往服务器的选项值(键值对的值)
举例:
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
9.6 <optgroup>
标签
定义和用法
<option>
标签定义选项组。
optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。
常用属性:
- label: 用于描述选项组
- disabled: 禁用该选项组
举例:
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
10. 框架标记
10.1 <frameset>
标签
定义和用法
frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。
<frameset>
标签与<body>
标签互斥,在文档中不可同时存在。
常用属性:
- cols: 定义框架列的数目和尺寸
- rows: 定义框架行的数目和尺寸
举例:
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
10.2 <frame>
标签
定义和用法
<frame>
标签定义 frameset 中的一个特定的窗口(框架)。
frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。
常用属性:
- frameborder:规定是否显示框架周围的边框
- src:规定在框架中显示文档的URL
- noresize:规定无法调整框架的大小
- name:规定框架的名称
- scrolling: 规定是否在框架中显示滚动条
举例:
<html>
<frameset rows="50%,50%">
<frame src="frame_a.html">
<frameset cols="25%,75%">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</frameset>
</html>
(taixiansheng笔记,转载请注明出处,蟹蟹)
10.3 <iframe>
标签
定义和用法
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
常用属性:
- src:规定在iframe中显示的文档的URL
- width:定义iframe的宽度
- height:定义iframe的高度
- marginheight:定义显示文档的顶部与iframe顶部的边距
- marginwidth:定义显示文档的左侧与iframe左侧的边距
- frameborder:规定是否显示框架周围的边框
11. 样式标记
样式标记主要结合CSS来使用,<style>
标签在学习笔记1中已介绍,下面介绍<span>
标签和<div>
标签。
11.1 <span>
标签
定义和用法
<span>
标签被用来组合文档中的行内元素。
span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
举例:
<p><span>some text.</span>some other text.</p>
注意
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
可以对同一个 <span>
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
11.2 <div>
标签
定义和用法
<div>
可定义文档中的分区或节(division/section)。
<div>
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>
,那么该标签的作用会变得更加有效。
举例:
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
注意
<div>
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div>
固有的唯一格式表现。可以通过 <div>
的 class 或 id 应用额外的样式。
不必为每一个 <div>
都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div>
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
(taixiansheng笔记,转载请注明出处,蟹蟹)