HTML基础

最新推荐文章于 2025-06-17 00:38:27 发布

hellobbboy

最新推荐文章于 2025-06-17 00:38:27 发布

阅读量75

点赞数

文章标签： javascript xhtml ViewUI

一，显示内容
1,标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

2,段落
段落是通过 <p> 标签定义的。可以把 HTML文档分割为若干段落。

3,图像
图像由 <img> 标签定义
通过使用 src 属性 - 图像的 URL 地址
通过使用 alt 属性 - 预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

4，音频，视频
插件内容由 <object> 标签定义

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="400" height="40">
	<param name="SRC" value="bookmark.swf">
	<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

二，设计结构
1,水平线
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

2,折行
<br /> 标签

3,表格结构
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

4,列表结构
无序列表始于 <ul> 标签。每个列表项始于 <li>标签。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

5,框架结构
注意，框架需要直接定义到html标签中。
<frameset>通过 cols,rows 属性 - 定义框架之间的纵向或横向的比例。
<frame>通过 src 属性 - 定义框架的url。

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

6,内嵌框结构
内嵌框由<iframe>标签定义。
通过 src 属性 - 定义内嵌网页
通过 width, height 属性 - 定义iframe的高度和宽度
通过 frameborader 属性 - 定义iframe的边框

三，链接
<a>标签
通过使用 href 属性 - 创建指向另一个文档的链接

<a href="http://www.w3school.com.cn/">Visit W3School</a>

使用 target 属性，你可以定义被链接的文档在何处显示。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

通过使用 name 属性 - 创建文档内的书签

<a name="tips">提示内容</a>
<a href="#tips">提示</a>

图片超链接

<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>

四，提交信息
表单使用表单标签（<form>）定义。
通过使用 action 属性 - 指定提交位置，当submit型输入标签被点击，form的内容被提交
通过使用 method 属性 - 指定提交方法

输入标签用输入标签（<input>）定义。
使用 type 属性 - 指定输入类型，有text,radio,checkbox,submit

First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />

<input type="radio" name="sex" value="male" /> Male <br />
<input type="radio" name="sex" value="female" /> Female

<input type="checkbox" name="bike" />I have a bike <br />
<input type="checkbox" name="car" />I have a car

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" /> <input type="submit" value="Submit" />
</form>

文本用文本标签(<textarea>)定义。

下拉列表用选择标签和选项标签(<select>,<option>)定义。

<select name="car">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

按钮标签<button>

<button type="button">Click Me!</button>

域标签<fieldset>和<legend>

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
</fieldset>

五，添加信息
在head标签中，可以添加信息标签：

引入信息:

引入样式:<link>,<style>

<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

引入脚本: <script>

<script type="text/javascript">
document.write("Hello World!")
</script>

设置基础信息:<base>

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

设置元信息：<meta>

<meta name="author" content="w3school.com.cn">
<meta name="revised" content="David Yang,8/1/07">
<meta name="generator" content="Dreamweaver 8.0en">
<meta name="description" content="HTML examples">
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />