欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  HTML属性
 
  属性
 
  描述
 
  class
 
  为html元素定义一个或多个类名(classname)(类名从样式文件引入)
 
  id
 
  定义元素的唯一id
 
  style
 
  规定元素的行内样式(inlinestyle)
 
  title
 
  描述了元素的额外信息(作为工具条使用)
 
  HTML<head>元素
 
  <head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本(scripts),样式文件(CSS),及各种meta信息。
 
  可以添加在头部区域的元素标签为:<title>,<style>,<meta>,<link>,<script>,<noscript>,and<base>.
 
  HTML<title>元素
 
  <title>标签定义了不同文档的标题。
 
  <title>在HTML/XHTML文档中是必须的。
 
  <title>元素:
 
  定义了浏览器工具栏的标题
 
  当网页添加到收藏夹时,显示在收藏夹中的标题
 
  显示在搜索引擎结果页面的标题
 
  HTML<base>元素
 
  <base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
 
  eg:
 
  <head>
 
  <basehref="http://www.runoob.com/images/"target="_blank">
 
  </head>
 
  HTML<link>元素
 
  <link>标签定义了文档与外部资源之间的关系。
 
  <link>标签通常用于链接到样式表:
 
  eg:
 
  <head>
 
  <linkrel="stylesheet"type="text/css"href="mystyle.css">
 
  </head>
 
  HTML<style>元素
 
  <style>标签定义了HTML文档的样式文件引用地址.
 
  在<style>元素中你也可以直接添加样式来渲染HTML文档:
 
  <head>
 
  <styletype="text/css">
 
  body{/style>
 
  </head>
 
  HTML<meta>元素
 
  meta标签描述了一些基本的元数据。
 
  <meta>标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
 
  META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
 
  元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
 
  <meta>一般放置于<head>区域
 
  <meta>标签-使用实例
 
  为搜索引擎定义关键词:
 
  <metaname="keywords"content="HTML,CSS,XML,XHTML,JavaScript">
 
  为网页定义描述内容:
 
  <metaname="description"content="免费Web&编程教程">
 
  定义网页作者:
 
  <metaname="author"content="Runoob">
 
  每30秒钟刷新当前页面:
 
  <metahttp-equiv="refresh"content="30">
 
  HTMLhead元素
 
  标签描述
 
  <head>定义了文档的信息
 
  <title>定义了文档的标题
 
  <base>定义了页面链接标签的默认链接地址
 
  <link>定义了一个文档和外部资源之间的关系
 
  <meta>定义了HTML文档中的元数据
 
  <script>定义了客户端的脚本文件
 
  <style>定义了HTML文档的样式文件
 
  html图像-图像标签<img>
 
  <img>是空标签,意思是说,它只包含属性,并且没有闭合标签。
 
  要在页面上显示图像,你需要使用源属性(src)。src指"source"。源属性的值是图像的URL地址。
 
  定义图像的语法是:
 
  <imgsrc="url"alt="some_text">
 
  HTML图像-Alt属性
 
  alt属性用来为图像定义一串预备的可替换的文本。
 
  替换文本属性的值是用户定义的。
 
  <imgsrc="boat.gif"alt="BigBoat">
 
  在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
 
  HTML图像-设置图像的高度与宽度
 
  height(高度)与width(宽度)属性用于设置图像的高度与宽度。
 
  属性值默认单位为像素:
 
  <imgsrc="pulpit.jpg"alt="Pulpitrock"width="304"height="228">
 
  提示:指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
 
  HTML图像标签
 
  标签描述
 
  <img>定义图像
 
  <map>定义图像地图
 
  <area>定义图像地图中的可点击区域
 
  1、矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
 
  <areashape="rect"coords="x1,y1,x2,y2"href=url>
 
  2、圆形:(圆心坐标为(X1,y1),半径为r)
 
  <areashape="circle"coords="x1,y1,r"href=url>
 
  3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3)......)
 
  <areashape="poly"coords="x1,y1,x2,y2......"href=url>
 
  HTML表格
 
  表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(tabledata),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
 
  eg:
 
  (水平标题)
 
  <tr>
 
  <th>Name</th>
 
  <th>Telephone</th>
 
  <th>Telephone</th>
 
  </tr>
 
  <tr>
 
  <td>BillGates</td>
 
  <td>55577854</td>
 
  <td>55577855</td>
 
  </tr>
 
  (垂直标题)
 
  <tr>
 
  <th>FirstName:</th>
 
  <td>BillGates</td>
 
  </tr>
 
  <tr>
 
  <th>Telephone:</th>
 
  <td>55577854</td>
 
  </tr>
 
  <tr>
 
  <th>Telephone:</th>
 
  <td>55577855</td>
 
  </tr>
 
  带标题
 
  <caption>Monthlysavings</caption><!--标题内容-->
 
  <tr>
 
  <th>Month</th>
 
  <th>Savings</th>
 
  </tr>
 
  <tr>
 
  <td>January</td>
 
  <td>$100</td>
 
  </tr>
 
  单元格跨两格(标题)
 
  <thcolspan="2">Telephone</th>
 
  定义边框的宽度
 
  <tableborder="1">
 
  定义单元格边距
 
  <tableborder="1"cellpadding="10">
 
  定义单元格间距
 
  <tableborder="1"cellspacing="0">
 
  HTML表格标签
 
  标签描述
 
  <table>定义表格
 
  <th>定义表格的表头
 
  <tr>定义表格的行
 
  <td>定义表格单元
 
  <caption>定义表格标题
 
  <colgroup>定义表格列的组
 
  <col>定义用于表格列的属性
 
  <thead>定义表格的页眉
 
  <tbody>定义表格的主体
 
  <tfoot>定义表格的页脚
 
  HTML无序列表
 
  无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
 
  无序列表使用<ul>标签
 
  <ul>
 
  <li>Coffee</li>
 
  <li>Milk</li>
 
  </ul>
 
  HTML有序列表
 
  同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
 
  列表项使用数字来标记。
 
  <ol>
 
  <li>Coffee</li>
 
  <li>Milk</li>
 
  </ol>
 
  <olstart="50"><!--start用于定义列表开始数字-->
 
  <li>Coffee</li>
 
  <li>Tea</li>
 
  <li>Milk</li>
 
  </ol>
 
  HTML自定义列表
 
  自定义列表不仅仅是一列项目,而是项目及其注释的组合。
 
  自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
 
  <dl>
 
  <dt>Coffee</dt>
 
  <dd>-blackhotdrink</dd>
 
  <dt>Milk</dt>
 
  <dd>-whitecolddrink</dd>
 
  </dl>
 
  <h4>大写字母列表:</h4>
 
  <oltype="A">
 
  <li>Apples</li>
 
  <li>Bananas</li>
 
  <li>Lemons</li>
 
  <li>Oranges</li>
 
  </ol>
 
  大写字母列表:
 
  A.Apples
 
  B.Bananas
 
  C.Lemons
 
  D.Oranges
 
  <h4>罗马数字列表:</h4>
 
  <oltype="I">
 
  罗马数字列表:
 
  I.Apples
 
  II.Bananas
 
  III.Lemons
 
  IV.Oranges
 
  HTML布局-使用<div>元素
 
  div元素是用于分组HTML元素的块级元素。
 
  HTML表单
 
  表单是一个包含表单元素的区域。
 
  表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
 
  表单使用表单标签<form>来设置:
 
  <form>
 
  .
 
  input元素
 
  .
 
  </form>
 
  例子:
 
  <formaction="">
 
  Username:<inputtype="text"name="user"><br>
 
  Password:<inputtype="password"name="password">
 
  </form>
 
  HTML表单-输入元素
 
  多数情况下被用到的表单标签是输入标签(<input>)。
 
  输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
 
  文本域(TextFields)
 
  文本域通过<inputtype="text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
 
  密码字段
 
  密码字段通过标签<inputtype="password">来定义:
 
  <form>
 
  Password:<inputtype="password"name="pwd">
 
  </form>
 
  单选按钮(RadioButtons)
 
  <inputtype="radio">标签定义了表单单选框选项
 
  <form>
 
  <inputtype="radio"name="sex"value="male">Male<br>
 
  <inputtype="radio"name="sex"value="female">Female
 
  </form>
 
  复选框(Checkboxes)
 
  <inputtype="checkbox">定义了复选框.用户需要从若干给定的选择中选取一个或若干选项。
 
  <form>
 
  <inputtype="checkbox"name="vehicle"value="Bike">Ihaveabike<br>
 
  <inputtype="checkbox"name="vehicle"value="Car">Ihaveacar
 
  </form>
 
  提交按钮(SubmitButton)
 
  <inputtype="submit">定义了提交按钮.
 
  当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
 
  <formname="input"action="html_form_action.php"method="get">
 
  Username:<inputtype="text"name="user">
 
  <inputtype="submit"value="Submit">
 
  </form>
 
  简单的下拉列表。
 
  <formaction="">
 
  <selectname="cars">
 
  <optionvalue="volvo">Volvo</option>
 
  <optionvalue="saab">Saab</option>
 
  <optionvalue="fiat">Fiat</option>
 
  <optionvalue="audi">Audi</option>
 
  </select>
 
  </form>
 
  带预选的下拉列表
 
  <optionvalue="fiat"selected>Fiat</option>
 
  按钮
 
  <formaction="">
 
  <inputtype="button"value="Helloworld!">
 
  </form>
 
  文本框
 
  <textarearows="5"cols="30">
 
  我是一个文本框。
 
  </textarea>
 
  提交
 
  <formaction="demo-form.php">
 
  Firstname:<inputtype="text"name="FirstName"value="Mickey"><br>
 
  Lastname:<inputtype="text"name="LastName"value="Mouse"><br>
 
  <inputtype="submit"value="提交">
 
  </form>
 
  <p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>
 
  HTML框架
 
  通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
 
  iframe语法:
 
  <iframesrc="URL"></iframe>
 
  该URL指向不同的网页。
 
  Iframe-设置高度与宽度
 
  height和width属性用来定义iframe标签的高度与宽度。
 
  属性默认以像素为单位,但是你可以指定其按比例显示(如:"80%")。
 
  实例
 
  <iframesrc="demo_iframe.htm"width="200"height="200"></iframe>
 
  Iframe-移除边框
 
  frameborder属性用于定义iframe表示是否显示边框。
 
  设置属性值为"0"移除iframe的边框:
 
  实例
 
  <iframesrc="demo_iframe.htm"frameborder="0"></iframe>
 
  HTML脚本
 
  JavaScript使HTML页面具有更强的动态和交互性。
 
  <script>
 
  document.write("HelloWorld!")
 
  </script>
 
  不支持JavaScript的浏览器会使用<noscript>元素中定义的内容(文本)来替代。
 
  HTML字符实体
 
  HTML中的预留字符必须被替换为字符实体。
 
  一些在键盘上找不到的字符也可以使用字符实体来替换。
 
  HTML实体
 
  在HTML中,某些字符是预留的。
 
  在HTML中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
 
  如果希望正确地显示预留字符,我们必须在HTML源代码中使用字符实体(characterentities)。
 
  实体名称对大小写敏感!
 
  显示结果描述实体名称实体编号
 
  空格
 
  <小于号<<
 
  >大于号>>
 
  &和号&&
 
  "引号""
 
  '撇号'(IE不支持)'
 
  HTML统一资源定位器(UniformResourceLocators)
 
  URL是一个网页地址。
 
  URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址:192.68.20.50。大多数人进入网站使用网站域名来访问,因为名字比数字更容易记住。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h56461.shtml