一、标题标签<h1>——<h6>
1、<h1>的字体最大,<h6>字体最小。与<font>标签的size属性是相反的,<font>标签中size值为1,则最小;值为7,则最大。
2、标题标签必须是独占一行。
3、使用<h1>、<h6>标签,文字会变大加粗。但不要因为想让文字变大加粗就加一个标题标签,这是不对的!可以使用<font>或<b>标签来实现变大加粗。
4、搜索引擎会把文章中出现的<h1>——<h6>的标签用来作为文章的结构与主次,进而索引;懂seo的朋友就知道。
二:段落与换行
换行标记: <br/>
段落标记: <p></p>
把<p></p>标记中的文本当做一段文字, 一段文件完毕之后, 会自然换行。
三:分割线
<hr 属性名="属性值" />
width:宽度大小
300px; 即标记宽度大小为300px;
50%; 即占用父标记宽度的百分比。
align: 对齐方式
left 居左
center 居中
right 居右
四:html实体
1、使用实体名而不是数字。
好处:名称易于记忆。
坏处:浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
2、需要在页面中展现特殊字符时:
>: > great than
<: < less than 或 <
空格:
3、浏览器总是会截短 HTML 页面中的空格。
如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。
如需在页面中增加空格的数量,您需要使用 字符实体。
HTML 中有用的字符实体
注释:实体名称对大小写敏感!
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 日圆 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
五:图片标签 (单标记)
用于页面中显示图片。
<img />
属性:
src: 指定目标图片的路径
width: 宽度
height: 高度
经验:宽、高同时设置后,会出现图片失真的现象,若需要等比例缩放图片,则设置其中一个即可。
路径:
1、绝对路径:
操作系统绝对路径:
windows: 以盘符开头的路径为绝对路径
c:\Program Files\xxxx.jpg
linux / Unix / Mac:
以/(根目录)开头的路径为绝对路径
/home/soft01/xxx.jpg
网络端绝对路径:
以http://开头的url路径
http://tts6.tarena.com.cn/xxx.jpg
2、相对路径:
指的是通过当前html文档和目标文件生成的路径。
相对路径也可以指向目标文件。
不以盘符和/(根目录)开头的路径。
网页所支持的图片格式:
JPG/JPEG: 体积小 图像有较小的失真。
png: 显示颜色种类较多 体积较大 图像保存完好。
gif: 支持动态图 体积小 显示的颜色非常少。
png/gif: 支持透明色
jpg: 不支持
六:链接
<a> 链接文本 </a>
属性:
href: 点击链接之后跳往的目标地址。
图片链接:
点击图片跳转
<a href=""><img src=""/></a>
图片热点链接
这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。
<img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL资源地址">
<!--可根据需要定义多少个热点区域-->
<area shape=形状 coords=区域座标列表 href="URL资源地址">
</map>
【1】shape -- 定义热点形状
shape=rect: 矩形
shape=circle:圆形
shape=poly: 多边形
【2】coords -- 定义区域点的坐标
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
demo :
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
<area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
<area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
<!-- onFocus="this.blur()" 去掉虚线框 -->
</map>
七:表格
表格的第一种规范:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table: 表格标记
属性:
width: 宽度
height: 高度
border: 边框宽度
align: 对齐方式 left|center|right
cellpadding: 单元格的内边距
cellspacing: 单元格与单元格之间的距离
tr: 表格行
td: 单元格
属性:
rowspan: 合并行
colspan: 合并列
表格的第二种规范:
<table>
<caption></caption> 表格标题
<thead> 表头
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody></tbody>表体
<tbody></tbody>
<tfoot></tfoot>表脚
</table>
使用时用第一种或第二种都可以.
第一种更简单
第二种更规范
八:表单标签
表单用于收集用户信息, 一个表单中可以含有多个
表单组件.
input标签:
文本框:
<input type="text" name="" value=""/>
type:定义了input组件的样式(文本框)
name:定义了input组件的名称, 只有写上name属性的组件在提交的时候才可以向服务器传递数据.
value:定义了页面加载后文本框中的默认值.
提交按钮:
<input type="submit" value=""/>
value:定义按钮上的文字
密码框:
<input type="password" name=""/>
单选按钮:
<input type="radio" name="" value=""/>
name:多个单选按钮 若name相同,则为一组单选按钮.一组单选按钮只能选择一个.
value:提交给服务器的参数值.
checked="checked" 若希望某个单选钮默认被选中,则需要添加该属性.
多选框:
<input type="checkbox" name="" value=""/>
&pwd=&sex=m&hobby=swimming&hobby=coding
checked="checked" 默认被选中
普通按钮:
<input type="button" value=""/>
value:代表按钮上的文字
重置按钮:
作用: 把当前表单中的所有组件的值恢复默认.
<input type="reset" value=""/>
非input标签:
下拉列表框:
<select> 下拉框
<option value="">text</option> 下拉项
<option></option> 下拉项
</select>
option:
text: 表示显示在下拉项中的文字
value: 代表当前下拉项的值
多行文本域:
<textarea name=""></textarea>
列表标记:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>