html标签

来源：互联网发布：涡扇15和f119知乎编辑：程序博客网时间：2024/05/23 10:51

一、标题标签<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>。

</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" />
    
    
    </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="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>

0 0