HTML 功能标签
1 图片
1.1 img 标签
<img src="图片地址" title="" alt="">
属性:
alt -- 代表图像的替代文字
src -- 代表一个图像源(就是图像的位置)
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
1.2 常见图片格式
GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.
2 超链接和锚点
2.1 超链接
<a href='要跳转的地址'>超链接文字</a>
① a 标签的属性
href -- 代表一个url链接源(就是链接到什么地方)
url 除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url 还可以是指向HTML文件中的一个位置。
url 还可以是Email地址。
target -- 用来指出哪个窗口或框架应该被此链接打开
target=_blank: 将链接内容在新的浏览窗口中打开。
target=_self: 将链接的内容,显示在目前的窗口中。 (默认)
target=_parent:将链接的内容,当成文件的上一个画面。
target=_top:这个参数可以解决新内容被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。
② 超链接示例
网站链接: <a href="http://www.atguigu.com">尚硅谷</a>
电子邮件链接: <a href="mailto:fuming@atguigu.com">写信给我</a>
电话 <a href="tel:10086">10086</a>
短信 <a href="sms:10086">发短息给我</a>
2.2 锚点
① 定义锚点
用 <a name=“”> 定义,例如:<a name=“here1”>第一部分</a>,
使用标签配合 id 属性定义,例如 <div id="header"></div>
③ 跳转到锚点
本页面内跳转 <a href="#锚点名">跳转</a>
跳转到指定页面指定锚点 http://www.lampuser.com/index.html#section2
3. 列表标签
标签名 | 标签的语义和作用 | 标签的属性 | 是单标签还是双标签 |
---|---|---|---|
li | 列表项,被嵌套在 ul 或者 ol 的里面 | 双 | |
ul | 无序列表 | 双 | |
ol | 有序列表 | 双 | |
dl | 自定义列表 | 双 | |
dt | 列表主题 | 双 | |
dd | 列表描述,对列表主题的描述 | 双 |
4. 表格标签
标签名 | 标签的语义和作用 | 标签的属性 | 是单标签还是双标签 |
---|---|---|---|
table | 表格 | width: 设置表格的宽度(建议用css设置) height: 设置表格的高度(建议用css设置) border: 设置表格的边框(建议用css设置) cellspacing: 设置单元格之间的间隙(建议用css设置) cellpadding:设置单元格内边距(建议用CSS设置) align: 对齐方式 left/top/center(建议用css设置) |
双 |
caption | 表格标题 | 双 | |
thead | 表格头部 | 双 | |
tbody | 表格主体 | 双 | |
tr | 行 | 双 | |
td | 单元格 | colspan: 指定跨越的列数 rowspan:指定跨越的行数 |
双 |
th | 表头单元格 | colspan: 指定跨越的列数 rowspan:指定跨越的行数 |
双 |
注意:
thead、tbody、tfoot 都有属性 align、valign
tr、th、td 都有属性 width、height、align、valign
5 表单标签
标签名 | 标签的语义和作用 | 标签的属性 | 是单标签还是双标签 |
---|---|---|---|
form | 表单 | action: 指定表单提交的地址 method: 指定表达的提交方式 target: 同超链接的 target 属性 |
双 |
label | 关联其他的表单控件 | for:指定其他要关联的表单控件的ID | 双 |
input | 输入框 | name: 标识该输入框,后端用改标识获取数据(暂时不用) type: 指定输入框的类型值:text / password / submit / reset / button / radio / checkbox value: type 属性的值不同,value具有不同的意义;type值如果是button/submit/reset,value指定按钮的文字;type如果是text/password,value指定默认文字,如果type是checkbox/radio,value指定真正提交到后台的值。 checked: 为 radio 和 checkbox设置默认选项。 length: 设置输入框的最大输入长度(text 和 password) size: 设置输入框尺寸(text 和 password) |
单 |
select | 下拉选择框 | name: 标识该输入框,后端用改标识获取数据(暂时不用) |
双 |
option | 下拉选项 | value:指定真正提交到后台的值。(暂时不用) selected: 表示默认选中 |
双 |
optgroup | 下拉选项分组 | label: 为选项组规定描述 | 双 |
textarea | 文本域 | name: 标识该输入框,后端用改标识获取数据(暂时不用) rows: 文本域行数,能决定文本域的高度 cols:文本域列数,能决定文本域的宽度 |
双 |
fieldset | 定位围绕表单的边框 | 双 | |
legend | 为 fieldset 定义标题 | 双 |
注意:表单控件可以通过添加 disabled 属性,让表单控件不可用
6 框架标签
标签名 | 标签的语义和作用 | 标签的属性 | 是单标签还是双标签 |
---|---|---|---|
iframe | 规定一个内联框架 | name 定义iframe的名称 width 定义iframe宽度 height 定义height高度 frameborder 是否显示边框,值为0不显示 src 要显示文档的url |
双 |
曾经事项框架分帧的还有
<frameset>
和<frame>
标签,但新标准都已经不推荐使用