首页 > 代码库 > HTML基础
HTML基础
HTML页结构说明：所有内容都在<html></html>标签之内；<head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中，<head>内的<title>中设置的是页面的标题，<title>只能放在<head>中；<body>是页面的主体，大部分显示内容都定义在这里。
h标签，HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。<br>只是回车，<p>是分段。<p>前后会有比较大的空白，而<br>则没有。<center>传智播客</center>居中显示。<b>a</b>粗体。<i>b</i>斜体，<font></font>字体标签，<font color="red">红色</font> <font size="30" color="red">红色</font> color size face 。特殊字符：HTML中<、>是有特殊含义的、空格是不会被显示的（输入一个带空格的字符串看看），所以需要特殊符号，相当于C#中的‘\n‘转义符。<（小于号，less than）；>（大于号，greater than）； （空格，no-break space）。<hr> color size width align=left,center,right； <pre> 预格式化 保持本色。body标签的bgcolor属性可以设定网页的背景颜色。URL：URL表示资源在网络中的地址。<a>中还可以嵌套图片，这样就是点击图片打开连接。
相对URL：相对URL表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“../../”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接。锚记：用name属性为<a> 起名字：<a name="Last">这里是最后</a>。这样可以通过<a href="http://www.mamicode.com/#Last">转到平台</a>来跳转到超链接的部分。<img src="http://www.mamicode.com/a.jpg"/>注意图片是链接的，不是插入的，所以如果Src指向的文件不存在了，就看不了了。alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；border属性指定边框，border="0"不显示边框；width、height属性指定图片的显示大小，如果不指定则是图片的原始大小。最好指定width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占位置，图片下载后才调整大小，会造成页面很乱。如果指定了width、height哪怕图片没有加载完成，也会先把位置占上。
表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td> 创建单元格。可以将table的border属性设为0来隐藏表格线。填充、间距Cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距s。<tr>的属性：align，水平对齐，可选值left、right、center；valign，垂直对齐，可选值top、middle、bottom。<td>也有align和valign。<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>：子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。还可以使用rowspan、colspan进行单元格的合并。（*）表头的td可以用th代替，这样就会表头粗体、居中显示。
<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。submit：点击submit按钮表单就会被提交给服务器，中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。text：size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。<input type="text" readonly/>（只写属性名，不写属性值）或者<input type="text" readonly="readonly" />（推荐）。checkbox：checked属性表示是否被选中，<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推荐)checked、readonly等这种只有一个可选值的属性都可以省略属性值。radio：相同name属性的为一组，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。file：使用file，则form的enctype必须设置为multipart/form-data、method属性为POST（*）。image：使用src属性指定图片的地址，用来实现美化的“登录按钮”。
<select>标签：如果size属性大于1就是ListBox（size的值为显示出来的列表数量），否则就是ComboBox。<select multiple>或者<select multiple="multiple">（推荐），那么就是可以多选的ListBox。select中的项是<option>，<option>北京</option>还可以设定项的值<option value="http://www.mamicode.com/1">北京</option>。将一个option设置为选中：<option selected>333</option>或者<option selected="selected">333</option>(推荐)就可以将这个项设定为选择项。如何实现“不选择”，添加一个<option value="http://www.mamicode.com/-1">--不选择--<option>，然后编程判断select选中的值如果是-1就认为是不选择。select分组选项，可以使用optgroup对数据进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都适用。
<textarea>多行文本（也是表单元素）：<textarea>文本</textarea>，cols、rows属性表示行数和列数。<label>：在<input type="text">前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for="txt1" >asdfad</label>为被修饰的控件设置一个唯一的id。fieldset：GroupBox效果，将控件划分一个区域，看起来更规整
<fieldset>
<legend>常用</legend>
<input type="text" />
</fieldset>
<meta>标签，<meta>有指定name和指定http-equiv两种用法，<meta name="名字" content="值" />、<meta http-equiv="名字" content="值" />两种用法。<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码。<meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
HTML基础