HTML学习笔记2

来源：互联网发布：上海网络教研编辑：程序博客网时间：2024/05/23 01:48

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 (迅雷下载链接)
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
1. 做一个锚标记,使用a标签的name属性或id属性指定锚点名称.
  <a name="top" >这是顶部</a>
  <a id="middle" >这是中部</a>
2. 跳转到锚标记,使用href属性指定要跳转到的锚点.
  <a href="#top" >回到顶部</a>
  <a href="#middle" >回到顶部</a>
  在所有浏览器中，链接的默认外观是：
  - 未被访问的链接带有下划线而且是蓝色的
  - 已被访问的链接带有下划线而且是紫色的
  - 活动链接带有下划线而且是红色的

常用属性：

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 表格。

简单的 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笔记，转载请注明出处，蟹蟹)

0 0

HTML学习笔记2

HTML学习笔记2

6. 图形标记

6.1 <img>标签

7. 链接标记

7.1 <a>标签

8. 表格标记

8.1 <table>标签

8.2 <tr>标签

8.3 <th>

8.4 <td>

9. 表单标记

9.1 <form>标签

9.2 <textarea>标签

9.3 <input>标签

9.4 <select>标签

9.5 <opnion>标签

9.6 <optgroup>标签

10. 框架标记

10.1 <frameset>标签

10.2 <frame>标签

10.3 <iframe>标签

11. 样式标记

11.1 <span>标签

11.2 <div>标签

6.1 `<img>`标签

7.1 `<a>`标签

8.1 `<table>`标签

8.2 `<tr>`标签

8.3 `<th>`

8.4 `<td>`

9.1 `<form>`标签

9.2 `<textarea>`标签

9.3 `<input>`标签

9.4 `<select>`标签

9.5 `<opnion>`标签

9.6 `<optgroup>`标签

10.1 `<frameset>`标签

10.2 `<frame>`标签

10.3 `<iframe>`标签

11.1 `<span>`标签

11.2 `<div>`标签