您的位置：首页 > Web前端 > HTML

01 HTML 基础

2013-06-03 15:33 183 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<meta http-equiv="refresh" content="10;URL=http://www.baidu.com" />    // 跳转

<title>网页标题</title>   // 非常重要。数量可以观察你想排名的搜索引擎对它的算法。一般建议一行显示完。即类似于百度搜索出来的结果中第一行的长度。

<meta name="keywords" content="关键词，关键词，等等，不要太多。一般控制在三五个词汇之间即可，数量不要超过24个字符，目前并不是很重要的一个排名参考因素" />
<meta name="description" content="网页内容简述，建议不超过80个字。长度可观察你想排名的搜索引擎" />
例如下面的例子：
<title>武汉php培训_武汉PHP学习_武汉PHP培训还是武汉PHP家园好</title>
<meta name="keywords" content="武汉PHP培训_武汉PHP学习_武汉网页设计培训_PHP教程_武汉DIV+CSS培训_PHP家园" />
<meta name="description" content="武汉PHP培训是PHP家园的实训项目。武汉PHP培训还会在PHP教程里融入经典的SEO教程。零基础培养PHP网站开发全能人才。培训理念：专业、趣味、实战、实用。武汉PHP培训还是武汉PHP家园好。" /></head>
<body>正文部分，所有可见的内容都写这里</body>
</html>


//要点--------------------------------------------------------------------------
HTML的大小写是不区分的
有一部分没有结束标签，其它的都是成对出现的。没有结束标签的，全部在其内部加斜线/，最好前面空一个空格
例如：<img src="" /> <br /><hr />

//链接--------------------------------------------------------------------------
<a href="指向的链接地址" target="_blank|_self|_top|_parent">百度</a>
<a href="网址#ID名">锚点</a>锚点要配合页面上的一个ID名来实现这个功能，同时还必须有滚动条才能看到效果。锚点找到的位置，浏览器默认是将其放在第一行的。
<a href="mailto:cuijuntao@163.com">打开邮件发送软件</a>

例如：
<a href="#bbb" id="aaa">锚点</a>
<p style="height: 800px;">aaaaa</p>
<div id="bbb">BBBB</div><a href="#aaa">[返回顶部]</a>
<p style="height: 800px;">aaaaa</p>

//图像--------------------------------------------------------------------------
<img src="图片地址" alt="替换文本，图片打不开的时候显示" title="图片说明提示" width="图片宽度" height="高度" border="0" />宽度和高度是可以更改的。但是有可能造成图片变形。所以要引起注意
//热点--------------------------------------------------------------------------
<img src="images/02.jpg" width="740" height="1016" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="359,122,98" href="#" />
<area shape="rect" coords="279,262,535,415" href="#" />
</map>

//FLASH-------------------------------------------------------------------------
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="swf/001.swf" />
<param name="quality" value="high" />
<embed src="swf/001.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
注意事项：里面有两个地址，即.swf的。要改一起改

<!-- HTML的注释 -->

//DIV--------------------------------------------------------------------------
<div>内容</div>
<span>内容</span>

//文本--------------------------------------------------------------------------
<b>加粗</b>
<strong>加粗</strong>
<em>斜体</em>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<br />回车换行
<hr />水平线
<p>里面一般放一段话，也可以放任何其它标签及内容。比如图片，FLASH等等。P就是表示段落</p>

<blockquote>块引用，这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话这是也是一段话
</blockquote>了解

<pre>这段话里面有英文 的 空格，pre是保持原有格式的一种标签。</pre>
这段话里面有英文 的 空格，这里面的空格只会保留一个。如果在第一个，会自动消失。那么平时的空格是怎么实现。方法是，用中文输入法的全角空格实现。但是最好不要在英文网站里用这种方法，以免引起乱码现象。或者用 代替一个半角空格

<h1>第一级标题，重要级别最高</h1>
<h2>第2级标题，重要级别次之</h2>
<h3>第3级标题，重要级别次之</h3>
<h4>第4级标题，重要级别次之</h4>
<h5>第5级标题，重要级别次之</h5>
<h6>第6级标题，重要级别次之</h6>

<font color="red" size="15">文字样式</font>

//特殊符号----------------------------------------------------------------------
 代表一个空格
©版权符
&&符号
<<
>>
文字<sub>下标</sub>
文字<sup>上标</sup>
M<sup>2</sup>
地址栏里面会出现的一些特殊字符
20%代表一个空格
23%代表一个#

//序列化标签--------------------------------------------------------------------
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>

<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>

<dl>
<dt>标题</dt>
<dd>描述描述描述描述</dd>
<dd>描述描述描述描述</dd>
<dt>标题</dt>
<dd>描述描述描述描述</dd>
<dd>描述描述描述描述</dd>
</dl>

//表格--------------------------------------------------------------------------
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td width="100" height="100" align="center" valign="baseline" bgcolor="#CCCCCC">对齐</td>
<td background="images/02.jpg" bgcolor="#FF0000">asdfasd</td>
</tr>
<tr>
<td colspan="2" nowrap="nowrap"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>

//框架--------------------------------------------------------------------------
<frameset rows="100,*" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="header.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset rows="*" cols="200,*" framespacing="0" frameborder="no" border="0">
<frame src="http://www.qq.com" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="http://www.taobao.com" name="rightFrame" id="rightFrame" title="mainFrame" />
</frameset>
</frameset>
<noframes><body>当浏览器不支持框架的时候就显示现在的内容，否则显示frameset中间页面
</body>
</noframes>

//内置框架iframe
<iframe align="left" frameborder="0" marginheight="0" marginwidth="0" src="index.html" width="500" height="400" scrolling="yes"></iframe>

//表单--------------------------------------------------------------------------
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址">
表单
</form>

--输入框
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
<input name="pwd" type="password" maxlength="5" size="100" value="" />
<input name="userId" type="hidden" value="123" />
<textarea name="ttt" cols="30" rows="10">asdfasdfsdafdsafdsa</textarea>

--选择框
<input name="lovedo[]" type="checkbox" value="1"  /> 唱歌
<input name="lovedo[]" type="checkbox" value="2" checked="checked" />看书
<input name="lovedo[]" type="checkbox" value="3" />打球

<input name="sex1" type="radio" value="1" />男
<input name="sex1" type="radio" value="2" checked="checked" />女
注：checked="checked"可以简写成checked

--菜单列表框
<select name="sss">
<option value="1">崔俊涛</option>
<option value="2" selected="selected">覃宁茂</option>
<option value="3">陈俊良</option>
</select>
注：selected="selected"可简写成selected

--多选列表框
<select name="sss" size="10" multiple="multiple">
<option value="1">崔俊涛</option>
<option value="2" selected="selected">覃宁茂</option>
<option value="3">陈俊良</option>
</select>
注:shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。

--图片域--按钮
<input type="image" name="imageField" src="ui/images/baidu.gif" />它的功能等同一个submit按钮
--文件域
<input type="file" name="fff" />文件域在php里，接收的时候必须用$_FILES['fff']来接收，如果有文件域，那么form表单里必须要有一个属性和值如下：
enctype="multipart/form-data"

<input type="submit" name="Submit" value="提交" disabled="disabled" />
<input type="button" name="Submit" value="按钮" />
<input type="reset" name="Submit2" value="重置" />

<fieldset><legend>这里是标题</legend>
这里是内容<br />
这里是内容
</fieldset>

<div class="nav">
<div class="nav"></div>
</div>

//搭建本地虚拟主机--------------------------------------------------------------


# 扩展资料 ----------------------------------------
横向合并
colspan

纵向合并
rowspan

单元格空隙
cellspacing

单元格边距
cellpadding

表格的标题
<tr><td></td></tr>
<tr><th></th></tr>

表格背景色属性
bgcolor
background
单元格对齐方式
横向对齐：align:center
纵向对齐：valign:top,middle,bottom,baseline

width,height
border

<A>
href,target:_blank,_self,_top,_parent,框架名称
<img src="" alt="" />
<b><strong><i><em><u><s>
<br />
<hr />水平分隔线

<form id="form1" name="form1" method="post" action="002.php"></form>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航