web学习第四天:9-28

(一) 标签整理

1 !–…--
  • 用途:注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
  • 实例代码<!--这是一段注释。注释不会在浏览器中显示。-->
  • 属性及属性的意义
属性名属性的意义属性值
---
2 !DOCTYPE
  • 用途<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 标签之前。<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
  • 实例代码<!DOCTYPE html>
  • 属性及属性的意义
属性名属性的意义属性值
---
3 a
  • 用途<a> 标签定义超链接,用于从一张页面链接到另一张页面。
  • 实例代码<a href="http://www.w3school.com.cn">W3School</a>
  • 属性的意义和属性值
属性名属性的意义属性值
coords规定链接的位置x1,x2,x3,x4
download规定被下载的超链接目标文件名
href超链接目标的 URL地址
namea的名称;创建标签名称
shape链接的形状,与coords一起使用default;rect;circle;poly
target规定在何处打开链接文档_blank;_self;_parent;_top;framename
4 b
  • 用途<b> 加粗文本
  • 实例代码<p>这是普通文本 - <b>这是粗体文本</b></p>
  • 属性的意义和属性值
属性名属性的意义属性值
---
5 blockquote
  • 用途<blockquote><blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
  • 实例代码<blockquote>
    Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
    </blockquote>
  • 属性的意义和属性值
属性名属性的意义属性值
---
6 body
  • 用途<body> 定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
  • 实例代码<body> 文档的内容... ... </body>
  • 属性的意义和属性值
属性名属性的意义属性值
alink链接被点击时的颜色color_name;hex_number;rgb_number
background定义背景图片图片
bgcolor定义背景颜色color_name;hex_number;rgb_number
link链接未被点击时的颜色color_name;hex_number;rgb_number
text文本的颜色color_name;hex_number;rgb_number
vlink已被访问链接的颜色color_name;hex_number;rgb_number
7 button
  • 用途<button> 定义一个按钮。请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”,而其他浏览器中(包括 W3C 规范)的默认值是 “submit”。
  • 实例代码<button type="button">Click Me!</button>
  • 属性的意义和属性值
属性名属性的意义属性值
autofocus自动获取焦点autofocus
disabled禁用disabled
form定义按钮属于某个表单按钮所属表单的 id
name按钮的名字文本
type按钮的类型button(IE默认值);submit(其他默认);reset(重置)
text文本的颜色color_name;hex_number;rgb_number
value按钮内容文本(IE提交value,其他浏览器提交button之间的数据)
8 caption
  • 用途<caption> 元素定义表格标题。<caption>标签必须紧随 <table>标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
  • 实例代码
<table border="1">
<caption>Monthly savings</caption>
<tr>
  <th>Month</th>
  <th>Savings</th>
</tr>
<tr>
  <td>January</td>
  <td>$100</td>
</tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;top;bottom
9 code
  • 用途<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
  • 实例代码:-
  • 属性的意义和属性值
属性名属性的意义属性值
---
10 datalist
  • 用途<datalist> 标签定义选项列表。请与<input> 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。
  • 实例代码
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>
  • 属性的意义和属性值
属性名属性的意义属性值
---
11 dd
  • 用途<dd> 在定义列表中定义条目的定义部分。
  • 实例代码
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
  • 属性的意义和属性值
属性名属性的意义属性值
---
12 del
  • 用途<del> 定义文档中已被删除的文本。请与 <ins> 标签配合使用,来描述文档中的更新和修正。大多数浏览器会改写为删除文本和下划线文本。
  • 实例代码
a dozen is <del>20</del> 12 pieces
  • 属性的意义和属性值
属性名属性的意义属性值
---
13 div
  • 用途<div> 可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是固有的唯一格式表现。
    可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
  • 实例代码
<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;top;bottom
14 dl
  • 用途<dl> 标签定义了定义列表(definition list)。
    <dl> 标签用于结合 <dt>(定义列表中的项目)和 <dd>(描述列表中的项目)。
  • 实例代码
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
  • 属性的意义和属性值
属性名属性的意义属性值
---
15 dt
  • 用途<dt> 标签定义了定义列表中的项目(即术语部分)。
  • 实例代码
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
  • 属性的意义和属性值
属性名属性的意义属性值
---
16 em
  • 用途<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示
  • 实例代码
   <em>你好</em>
  • 属性的意义和属性值
属性名属性的意义属性值
---
17 figure
  • 用途<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
  • 实例代码
<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
  • 属性的意义和属性值
属性名属性的意义属性值
---
18 footer
  • 用途<footer> 标签定义文档或节的页脚。其应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个
    元素。
  • 实例代码
<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
  • 属性的意义和属性值
属性名属性的意义属性值
---
19 form
  • 用途<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
    表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
    表单用于向服务器传输数据。
  • 实例代码
<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>
  • 属性的意义和属性值
属性名属性的意义属性值
action规定提交表单时向何处发送表单数据地址
name表单的名字文本
target规定在何处打开 action 的地址_blank;_self;_parent;_top;framename
20 frame
  • 用途<frame> 标签定义 frameset 中的一个特定的窗口(框架)。
    frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。
  • 实例代码
<html>
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
</html>
  • 属性的意义和属性值
属性名属性的意义属性值
frameborder规定是否显示框架周围的边框0;1
marginheight定义框架的上方和下方的边距数值
marginwidth定义框架的左侧和右侧的边距数值
name框架的名称文本
src规定在框架中显示的文档的 URL地址
21 frameset
  • 用途<frameset> 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 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>
  • 属性的意义和属性值
属性名属性的意义属性值
cols定义框架集中列的数目和尺寸百分比;数字
rows定义框架集中行的数目和尺寸百分比;数字
22 h1 to h6
  • 用途<h1>to<h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
  • 实例代码
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;top;bottom
23 head
  • 用途<head> 签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
    下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>
    应该把 <head>标签放在文档的开始处,紧跟在<html> 后面,并处于<body> 标签或 <frameset> 标签之前。
定义文档的标题,它是 head 部分中唯一必需的元素。 - **实例代码**:
<html>
<head>
  <title>文档的标题</title>
</head>
<body>
  文档的内容... ...
</body>
</html>
  • 属性的意义和属性值
属性名属性的意义属性值
profile一个由空格分隔的 URL 列表,这些 URL 包含着有关页面的元数据信息。地址
24 header
  • 用途<header> 标签定义文档的页眉(介绍信息)。
  • 实例代码
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
  • 属性的意义和属性值
属性名属性的意义属性值
---
25 hr
  • 用途<hr> 标签在 HTML 页面中创建一条水平线。
  • 实例代码
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
  • 属性的意义和属性值
属性名属性的意义属性值
---
26 html
  • 用途<html> 此元素可告知浏览器其自身是一个 HTML 文档。
  • 实例代码
<html>
<head>
  这里是文档的头部 ... ...
  ...
</head>
<body>
  这里是文档的主体 ... ...
  ...
</body>
</html>
  • 属性的意义和属性值
属性名属性的意义属性值
manifest定义一个 URL,在这个 URL 上描述了文档的缓存信息。地址
xmlns定义 XML namespace 属性。地址
27 i
  • 用途<i> 标签显示斜体文本效果。
    <i>标签和基于内容的样式标签 <em>类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。
  • 实例代码
<i>斜体字</i>
  • 属性的意义和属性值
属性名属性的意义属性值
---
28 iframe
  • 用途<iframe> 标素会创建包含另外一个文档的内联框架(即行内框架)。
  • 实例代码
<html>
<body>
<iframe src ="/index.html" width="400px" height="300px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;top;bottom
frameborder规定是否显示框架周围的边框0;1
height定义iframe 的高度数值
marginheight定义框架的上方和下方的边距数字
marginwidth定义框架的左侧和右侧的边距数字
name框架的名称文本
src规定在框架中显示的文档的 URL地址
width定义iframe 的宽度数值
29 img
  • 用途<img> 元素向网页中嵌入一幅图像。
    请注意,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。
    <img> 标签有两个必需的属性:src 属性 和 alt 属性。
  • 实例代码
<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />
  • 属性的意义和属性值
属性名属性的意义属性值
alt规定图像的替代文本文本
src规定显示图像的 URL地址
align对齐方式left;right;top;bottom
border规定边框厚度数值
height定义iframe 的高度数值
width定义iframe 的宽度数值
30 input
  • 用途<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
  • 实例代码
<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>
  • 属性的意义和属性值
属性名属性的意义属性值
alt规定图像的替代文本文本
autocomplete规定是否使用输入字段的自动完成功能(邮件除外)on;off
autofocus规定输入字段在页面加载时是否获得焦点。(不适用于 type=“hidden”)autofocus
checkedr规定此 input 元素首次加载时应当被选中checked
disabled当 input 元素加载时禁用此元素disabled
form规定输入字段所属的一个或多个表单formname
height定义input字段的高度数值
name定义 input 元素的名称文本
placeholder规定帮助用户填写输入字段的提示文本
type规定 input 元素的类型button;checkbox;file;hidden;image;password;radio;reset;submit;text
value规定 input 元素的值文本
size定义输入字段的宽度数值
width定义input字段的宽度数值
31 kbd
  • 用途<kbd> 键盘文本
  • 实例代码
键入 <kbd>quit</kbd> 来退出程序,或者键入 <kbd>menu</kbd> 来返回主菜单
  • 属性的意义和属性值
属性名属性的意义属性值
---
32 label
  • 用途<label> input 元素定义标注。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
    <label> 标签的 for 属性应当与相关元素的 id 属性相同。
  • 实例代码
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>键入 <kbd>quit</kbd> 来退出程序,或者键入 <kbd>menu</kbd> 来返回主菜单
  • 属性的意义和属性值
属性名属性的意义属性值
for规定 label 绑定到哪个表单元素id
form规定 label 字段所属的一个或多个表单formid
33 legend
  • 用途<legend> 元素为 fieldset 元素定义标题(caption)。
  • 实例代码
<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;top;bottom
34 li
  • 用途<li> 标签定义列表项目
  • 实例代码
<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
  • 属性的意义和属性值
属性名属性的意义属性值
---
35 meta
  • 用途<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
    <meta> 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
  • 实例代码
<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
  • 属性的意义和属性值
属性名属性的意义属性值
content定义与 http-equiv 或 name 属性相关的元信息文本
36 nav
  • 用途<nav> 标签定义导航链接的部分。
  • 实例代码
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
  • 属性的意义和属性值
属性名属性的意义属性值
---
37 noframes
  • 用途<noframes> 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
  • 实例代码
<frameset cols = "25%, 25%,*">
  <noframes>
  <body>Your browser does not handle frames!</body>
  </noframes>
  <frame src ="venus.htm" />
  <frame src   ="sun.htm" />
  <frame src ="mercur.htm"   />
</frameset>
  • 属性的意义和属性值
属性名属性的意义属性值
---
38 noscript
  • 用途<noscript> 元素用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别
<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>
  • 属性的意义和属性值
属性名属性的意义属性值
---
39 ol
  • 用途<ol> 标签定义有序列表。
  • 实例代码
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  • 属性的意义和属性值
属性名属性的意义属性值
reversed规定列表顺序为降序-
start规定有序列表的起始值数值
type规定在列表中使用的标记类型1;a等
40 optgroup
  • 用途<optgroup> 标签定义选项组。
    optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。
  • 实例代码
<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>
  • 属性的意义和属性值
属性名属性的意义属性值
label为选项组规定描述。文本
disabled规定禁用该选项组disabled
41 option
  • 用途<optgroup> 元素定义下拉列表中的一个选项(一个条目)。
    浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素显示。
    option 元素位于 select 元素内部。
  • 实例代码
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  • 属性的意义和属性值
属性名属性的意义属性值
disabledl规定此选项应在首次加载时被禁用disabled
label定义当使用 optgroup>时所使用的标注文本
selected规定选项(在首次显示在列表中时)表现为选中状态selected
value定义送往服务器的选项值text
42 p
  • 用途<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定

  • 实例代码
<p>This is some text in a very short paragraph</p>
  • 属性的意义和属性值
属性名属性的意义属性值
alignl规对齐方式left;right;top;bottom
42 q
  • 用途<q> 标签定义短的引用。
    浏览器经常在引用的内容周围添加引号
  • 实例代码
<q>Here is a short quotation here is a short quotation</q>
  • 属性的意义和属性值
属性名属性的意义属性值
citel定义引用的出处或来源(citation)citation
43 script
  • 用途<script> 标签用于定义客户端脚本,比如 JavaScript。
    script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。
    JavaScript 的常见应用时图像操作、表单验证以及动态内容更新
  • 实例代码
<script type="text/javascript">
document.write("Hello World!")
</script>
  • 属性的意义和属性值
属性名属性的意义属性值
typel指示脚本的 MIME 类型MIME-type
src规定外部脚本文件的 URL地址
44 select
  • 用途<select> select 元素可创建单选或多选菜单。
    <select&>元素中的<option> 标签用于定义列表中的可用选项
  • 实例代码
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  • 属性的意义和属性值
属性名属性的意义属性值
autofocusl规定在页面加载后文本区域自动获得焦点autofocus
disabled规定禁用该下拉列表disabled
forml规定文本区域所属的一个或多个表单form_id
multiple规定可选择多个选项multiple
namel规定下拉列表的名称name
required规定文本区域是必填的required
size规定下拉列表中可见选项的数目number
45 small
  • 用途<small> 标签呈现小号字体效果。
    <small>标签和它所对应的<big>标签一样,但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号,那么<small> 标签将不起任何作用。
    <big>标签类似,<small> 标签也可以嵌套,从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号,直到达到下限的一号字。
  • 实例代码
<select>
缩小文本
</select>
  • 属性的意义和属性值
属性名属性的意义属性值
---
46 span
  • 用途<span> 标签被用来组合文档中的行内元素。

  • 实例代码

<p><span>some text.</span>some other text.</p>
  • 属性的意义和属性值
属性名属性的意义属性值
---
47 strong
  • 用途<strong> 用于强调文本,但它强调的程度更强一些。

  • 实例代码

<strong>强调文本<strong>
  • 属性的意义和属性值
属性名属性的意义属性值
---
48 style
  • 用途<style> 标签用于为 HTML 文档定义样式信息。
    在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
    type 属性是必需的,定义 style 元素的内容。唯一可能的值是 “text/css”。
    style 元素位于 head 部分中。

  • 实例代码

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
  • 属性的意义和属性值
属性名属性的意义属性值
type规定样式表的 MIME 类型text/css
49 sup
  • 用途<sup> 标签可定义上标文本。
    包含在 <sup> 标签和其结束标签 </sup>中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

  • 实例代码

这段文本包含 <sup>上标</sup>
  • 属性的意义和属性值
属性名属性的意义属性值
---
50 table
  • 用途<table> 标签定义 HTML 表格。
    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
    tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

  • 实例代码

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;top;bottom
bgcolor表格的背景颜色颜色
border边框的厚度数值
cellpaddingr规定单元边沿与其内容之间的空白数值
cellspacing规定单元格之间的空白数值
summary规定表格的摘要文本
width规定表格的宽度数值
51 tbody
  • 用途<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

  • 实例代码

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
52 td
  • 用途<td> 标签定义 HTML 表格中的标准单元格。td 元素中的文本一般显示为正常字体且左对齐。

  • 实例代码

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
bgcolor规定单元格的背景颜色颜色
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
colspan规定单元格可横跨的列数数值
height规定单元格的高度数值
rowspan规定单元格可横跨的横数数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
width规定单元格的宽度数值
53 textarea
  • 用途<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
    在文本输入区内的文本行间,用 “%OD%OA” (回车/换行)进行分隔

  • 实例代码

<textarea rows="3" cols="20">
在w3school,你可以找到你所需要的所有的网站建设教程。
</textarea>
  • 属性的意义和属性值
属性名属性的意义属性值
autofocus规定在页面加载后文本区域自动获得焦点autofocus
cols规定文本区内的可见宽度数值
disabled规定禁用该文本区disabled
form规定文本区域所属的一个或多个表单form_id
maxlength规定文本区域的最大字符数数值
name规定文本区的名称文本
required规定文本区域是必填的required
rows规定文本区内的可见行数数值
wrap规定当在表单中提交时,文本区域中的文本如何换行hard;soft
54 tfoot
  • 用途<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。

  • 实例代码

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
55 th
  • 用途<th> 定义表格内的表头单元格,th元素内部的文本通常会呈现为居中的粗体文本

  • 实例代码

<table border="1">
  <tr>
    <th>Company</th>
    <th>Address</th>
  </tr>

  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
bgcolor规定单元格的背景颜色颜色
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
colspan规定单元格可横跨的列数数值
height规定单元格的高度数值
rowspan规定单元格可横跨的横数数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
width规定单元格的宽度数值
56 thead
  • 用途<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容

  • 实例代码

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
55 th
  • 用途<th> 定义表格内的表头单元格,th元素内部的文本通常会呈现为居中的粗体文本

  • 实例代码

<table border="1">
  <tr>
    <th>Company</th>
    <th>Address</th>
  </tr>

  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
bgcolor规定单元格的背景颜色颜色
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
colspan规定单元格可横跨的列数数值
height规定单元格的高度数值
rowspan规定单元格可横跨的横数数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
width规定单元格的宽度数值
57 time
  • 用途<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的

  • 实例代码

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
  • 属性的意义和属性值
属性名属性的意义属性值
datetime规定日期 / 时间。否则,由元素的内容给定日期 / 时间datetime
pubdate指示 pubdate
57 title
  • 用途<title> 元素可定义文档的标题

  • 实例代码

<html>
 
  <head>
    <title>XHTML Tag Reference</title>
  </head>

  <body>
    The content of the document......
  </body>

</html>
  • 属性的意义和属性值
属性名属性的意义属性值
dir规定元素中内容的文本方向rtl;ltr
58 tr
  • 用途<tr> 标签定义 HTML 表格中的行

  • 实例代码

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
align对齐方式left;right;center;justify;char
bgcolor规定表格行的背景颜色颜色
char规定根据哪个字符来进行文本对齐character
charoff规定第一个对齐字符的偏移量数值
valign规定 tbody 元素中内容的垂直对齐方式top;middle;bottom;baseline
59 ul
  • 用途<ul> 标签定义无序列表

  • 实例代码

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
  • 属性的意义和属性值
属性名属性的意义属性值
---
60 video
  • 用途<ul> 标签定义视频

  • 实例代码

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
  • 属性的意义和属性值
属性名属性的意义属性值
autoplay如果出现该属性,则视频在就绪后马上播放autoplay
controls如果出现该属性,则向用户显示控件,比如播放按钮controls
height设置视频播放器的高度数值
loop如果出现该属性,则当媒介文件完成播放后再次开始播放loop
muted规定视频的音频输出应该被静音muted
poster规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像地址
preload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性preload
src视频的url地址
width设置视频播放器的宽度数值

(二) 视频和音频代码

<!DOCTYPE HTML>
<html>
 <head></head>
 <body>
 	<h1>音乐</h1>
	<embed src="http://m.kuwo.cn/?t=weixin&mid=MUSIC_22800002" width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></embed>

 	<h1>视频</h1>
  	<embed src="http://player.youku.com/player.php/sid/XNjcwNTM0ODIw/v.swf" allowfullscreen="true" quality="high" width="480" height="400" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash"  />
 </body>
</html>

(三) 今日学习总结

程序员加班熬夜是常识

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值