html基础教程_第1页
html基础教程_第2页
html基础教程_第3页
html基础教程_第4页
html基础教程_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、什么是 HTML？HTML 是用来描述网页的一种语言。· HTML 指的是超文本标记语言· HTML 不是一种编程语言，而是一种标记语言· 标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。· 标记语言是一套标记标签· HTML 使用标记标签来描述网页HTML 标记标签HTML 标记标签通常被称为 HTML 标签。· <hr />单标签· <b>文字会变粗</b>双标签· 标签对中的第一个标签是开始标签，第二个标签是结束标签

2、83; HTML 标签是由尖括号包围的关键词，比如 <html>.</html>· HTML 标签通常是成对出现的，比如 <b> 和 </b>· 开始和结束标签也被称为开放标签和闭合标签HTML 文档 = 网页· HTML 文档描述网页· HTML 文档包含 HTML 标签和纯文本· HTML 文档也被称为网页Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：<html><body><h

3、1>My First Heading</h1><p>My first paragraph.</p></body></html>例子解释· <html> 与 </html> 之间的文本描述网页· <body> 与 </body> 之间的文本是可见的页面内容· <h1> 与 </h1> 之间的文本被显示为标题HTML文件后缀？HTML文件分为两种格式：.htm .htmlHTML 属性HTML 标签可以拥有属性。属性提供了有关 HT

4、ML 元素的更多的信息。属性总是以名称/值对等的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。标签描述<html></html>定义 HTML 文档。<head></head>定义HTML头部内容<title></title>设置文档标题和其它在网页中不显示的信息<body></body>定义文档的主体。<h1></h1>to<h6></h6>定义 HTML 标题<hr />定义水

5、平线。<p></p>定义段落。<br />插入单个折行（换行）。<b></b>定义粗体文本。<em></em>定义着重文字。<center></center>定义居中的内容。<font></font>属性: align: 定义文本的对齐方式left,center,right bgcolor: 定义背景颜色 color: 定义文本颜色 size: 定义文本大小 title: 定义文本提示信息 face: 定义文本字体定义 HTML 字体。<u></

6、u>定义下划线文本<big></big>定义大号字。<i></i>定义斜体字。<small></small>定义小号字。<strong></strong>定义加重语气。<del></del>定义删除字。<img />属性:src: 图片地址width: 宽(100)height: 高(100)border: 边框(1)title: 提示标题alt: 加载失败提示图像<ol><li></li><li></l

7、i><li></li></ol>有序列表<ul><li></li></ul>无序列表<dl><dt></dt><dd></dd></dl>自定义列表HTML <!- -> 标签定义注释标签用来在源文档中插入注释。注释会被浏览器忽略。实例HTML 注释：<!-这是一段注释。注释不会在浏览器中显示。-><p>这是一段普通的段落。</p>HTML <a> 标签定义和用法<a&

8、gt; 标签可定义锚。 <a> 元素最重要的属性是 href 属性，它指定链接的目标。默认浏览器样式：未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 实例指向 Spwy.Net 的超链接：<a href="">Spwy.Net</a><a href="#title">锚链</a><a name=”title”></a>可选的属性属性值描述hrefURL链接的目标 URL。namename规定锚的名称。target

9、_blank _parent _self _top 在何处打开目标 URL。 HTML <link> 标签定义和用法<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。实例链接一个外部样式表：<link rel="stylesheet" type="text/css" href="theme.css" />可选的属性属性值描述charsetcharset定义被链接文档的字符编码方式。hrefURL定义被链接文档的位置。relalternate appe

10、ndix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection 定义当前文档与被链接文档之间的关系。 HTML <table> 标签定义和用法<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。实例一个简单的 HTML 表格，包含两行两列：<table borde

11、r="1"> <tr> <th>头一</th> <th>头二</th> </tr> <tr> <td>内容一</td> <td>内容二</td> </tr></table>可选的属性属性值描述alignleft center right 不赞成使用。使用样式代替。规定表格相对周围元素的对齐方式。bgcolorrgb(x,x,x) #xxxxxx colorname 不赞成使用。使用样式代替。规定表格的背景颜色。bo

12、rderpixels规定表格边框的宽度。cellpaddingpixels % 规定单元边沿与其内容之间的空白。cellspacingpixels % 规定单元格之间的空白。width% pixels 规定表格的宽度。backgroundurl背景图片HTML <tr> 标签定义和用法<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。HTML <td> 标签定义和用法<td> 标签定义 HTML 表格中的标准单元格。HTML 表格有两类单元格：· 表头单元 - 包含头部信息（由 th 元素创建）

13、· 标准单元 - 包含数据（由 td 元素创建）可选的属性属性值描述alignleft right center justify char 规定单元格内容的水平对齐方式。bgcolorrgb(x,x,x) #xxxxxx colorname 不赞成使用。使用样式取而代之。规定单元格的背景颜色。colspannumber规定单元格可横跨的列数。heightpixels % 不赞成使用。使用样式取而代之。规定表格单元格的高度。rowspannumber规定单元格可横跨的行数。valigntop middle bottom baseline 不赞成使用。使用样式取而代之。规定单元格内容的垂

14、直排列方式。widthpixels % 不赞成使用。使用样式取而代之。规定表格单元格的宽度。backgroundurl背景图片HTML <th> 标签定义和用法定义表格内的表头单元格。HTML 表单中有两种类型的单元格：· 表头单元格 - 包含表头信息（由 th 元素创建） · 标准单元格 - 包含数据（由 td 元素创建） 属性与td一致。HTML <iframe> 标签定义和用法iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可选的属性属性值描述alignleft right top middle bottom 不赞成使用。使用

15、样式代替。规定如何根据周围的元素来对齐此框架。frameborder1 0 规定是否显示框架周围的边框。heightpixels % 规定 iframe 的高度。nameframe_name规定 iframe 的名称。scrollingyes no auto 规定是否在 iframe 中显示滚动条。srcURL规定在 iframe 中显示的文档的 URL。widthpixels % 定义 iframe 的宽度。HTML <form> 标签定义和用法<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮

16、等等。表单还可以包含textarea、和 label 元素。表单用于向服务器传输数据。例子<form action="login.php" method="get"> <p>用户名: <input type="text" name="username" /></p> <p>密 码: <input type="password" name="pwd" /></p> <input type=

17、"submit" value="登录" /></form>必需的属性属性值描述actionURL规定当提交表单时，向何处发送表单数据。可选的属性属性值描述methodget post 规定如何发送表单数据。namename规定表单的名称。target_blank _parent _self _top 规定在何处打开 action URL。HTML <input> 标签定义和用法<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控

18、件、单选按钮、按钮等等。实例一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：<form action="login.php" method="get"> 用户名: <input type="text" name="username" /> 密 码: <input type="password" name="pwd" /> <input type="submit" value="登录"

19、; /></form>可选的属性属性值描述alttext定义图像输入的替代文本。checkedchecked规定此 input 元素首次加载时应当被选中。radiocheckboxdisableddisabled当 input 元素加载时禁用此元素。maxlengthnumber规定输入字段中的字符的最大长度。namefield_name定义 input 元素的名称。readonlyreadonly规定输入字段为只读。sizenumber_of_char定义输入字段的宽度。srcURL定义以提交按钮形式显示的图像的 URL。typetext （普通文本）password （密

20、码框）checkbox （复选框）radio （单选框）file （文件浏览）hidden （隐藏域）image （图片提交按钮）button（普通按钮）reset （重置按钮）submit （提交按钮）规定 input 元素的类型。valuevalue规定 input 元素的值。HTML <textarea> 标签定义和用法<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width

21、属性。实例<textarea rows="3" cols="20">内容</textarea>必需的属性属性值描述colsnumber规定文本区内的可见宽度。rowsnumber规定文本区内的可见行数。可选的属性属性值描述disableddisabled规定禁用该文本区。namename规定文本区的名称。readonlyreadonly规定文本区为只读。HTML <button> 标签定义和用法<button> 标签定义一个按钮。在 button 元素内部，您可以放置内容，比如文本或图像。实例以下代码标记了

22、一个按钮：<button type="button">点击我</button>可选的属性属性值描述disableddisabled规定禁用此按钮。namename规定按钮的名称。typebutton reset submit 规定按钮的类型。valuetext规定按钮的初始值。HTML <select> 标签定义和用法select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。实例

23、创建带有 4 个选项的选择列表：<select> <option value="php">PHP</option> <option value="cpp">C+</option> <option value="java">JAVA</option> <option value="C-sharp">C#</option></select>可选的属性属性值描述disableddisabled规定禁用该

24、下拉列表。multiplemultiple规定可选择多个选项。namename规定下拉列表的名称。sizenumber规定下拉列表中可见选项的数目。 HTML <optgroup> 标签定义和用法<optgroup> 标签定义选项组。optgroup 元素用于组合选项。当使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。实例通过 <optgroup> 标签把相关的选项组合在一起：<select> <optgroup label="B/S"> <option value="php"

25、;>PHP</option> <option value="asp">ASP</option> </optgroup> <optgroup label="C/S"> <option value="cpp">C+</option> <option value="java">java</option> </optgroup></select>必需的属性属性值描述labeltext为选

26、项组规定描述。可选的属性属性值描述disableddisabled规定禁用该选项组。HTML <option> 标签定义和用法option 元素定义下拉列表中的一个选项（一个条目）。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。实例创建带有 4 个选项的选择列表：<select> <option value="php">PHP</option> <option value="asp&

27、quot;>ASP</option> <option value="cpp">c+</option> <option value="csharp">C#</option></select>可选的属性属性值描述disableddisabled规定此选项应在首次加载时被禁用。selectedselected规定选项（在首次显示在列表中时）表现为选中状态。valuetext定义送往服务器的选项值。HTML <label> 标签定义和用法<label> 标签为

28、input 元素定义标注（标记）。<label> 标签的 for 属性应当与相关元素的 id 属性相同。实例带有两个输入字段和相关标记的简单 HTML 表单：<form> <label for="boy">男</label> <input type="radio" name="sex" id="boy" /> <br /> <label for="gril">女</label> <input t

29、ype="radio" name="sex" id="gril" /></form>可选的属性属性值描述forelement_id规定 label 与哪个表单元素绑定。 HTML <style> 标签定义和用法<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档（编写CSS语句）。type 属性是必需存在，唯一的值是 "text/css"。style 元素位于 head 部分中。实例<html>

30、<head><style type="text/css">h1 color:redp color:blue</style></head><body><h1>标题标签</h1><p>段落标签</p></body></html>HTML <div> 标签定义和用法<div> 可定义文档中的分区或节。<div> 标签可以把文档分割为独立的、不同的部分。实例文档中的一个部分会显示为绿色：<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p></div>HTML <span> 标签定义和用法<

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论