常用标签dive in
1. <a> 插入超链接
示例<a href="http://www.baidu.com" target="_blank">百度</a>属性
说明
href
可使用绝对路径或相对路径,亦可使用锚点(页面内跳转)
<a href="#1">jump to "here"</a>
<a name="1">here</a>target
指定新页面的打开方式,取值如下:
_blank,在新标签页中打开
_self,在当标签页中打开
2. 分组元素
① <p> 段落,中间空行
② <div> 无实际效果
③ <blockquote> 段落,前后都缩进 ,中间空行
④ <pre> 按照编辑器内的排版格式显示(不完全一致)
⑤ <hr> 水平分割线
⑥ <ul> 添加无序列表,用法:
<ul><li>第一项</li>//li的value属性可设置此项开始的编号<li>第一项</li><li>第一项</li></ul>
⑦ <ol> 添加有序列表,start属性可指定起始编号,type可指定编号形式(a, A, i, I, 1)
⑧ <dl><dt><dd> 生成说明列表,用法:
<dl><dt>这是第一章</dt><dd>第一章第一节</dd><dd>第一章第二节</dd></dl>
⑨ <figure> 插图,用法:
<figure><figcaption>这是一张图片</figcaption><imgsrc="img.png"></figure>
3. <table> 表格元素,用法:
<tableborder="1"><caption>这里是标题</caption><colgroup><col>//占位<colbackground="red;">//第二列背景色设为红色</colgroup><tfoot>//表尾-始终在最后一行显示<tr><tdcolspan="3">共计:1人</td></tr></tfoot><tbody>//表体<tr><td>张三</td><td>男</td><td>27</td></tr></tbody><thead>//表头-始终在第一行显示<tr><throwspan="3">基本情况</th><th>姓名</th><th>性别</th><th>年龄</th></tr><thead></table>
4. 文档元素,基本无显示效果,主要表示语义以方便CSS进行样式标记,示例:
<body><header>这里放置LOGO,标题,导航等<hgroup><h2>这是一个大标题</h2><h5>这是一个小标题</h5></hgroup><nav>这是一个导航</nav></header><section>这是一个主题部分</section><article><header>...</header><section>...</section><address>这里放置联系信息</address><footer>...</footer></article><aside>这是一个注释栏<nav>这是注释栏内的导航</nav></aside><footer><h5>这是尾部的小标题</h5><address>这里放置联系信息</address></footer>
5. 嵌入元素,将外部资源插入到HTML中:
① <img> 插入图片
<a href="index.html"><img src="img.png" alt="风景" width="30" height="20"></a>属性
说明
src
图像的urlwidth,height宽度,高度
ismap
获取点击位置的坐标,并在请求的地址后添加该坐标值
usemap
创建分区响应,点击不同区域转到不同超链接
<img src="img.pne" usemap="#Map">
<map name="Map">
<area shape="rect" coords="44,33,123,102" href="www.baidu.com" target="_blank" alt="百度">
</map>
② <iframe> 嵌入另一个文档
示例<a href="www.baidu.com" target="in">百度</a>
<iframe src="www.soso.com" width="200" height="300" name="in"></iframe>
说明
src
初始化时显示的页面width,height宽度,高度
name
被其他标签的target属性引用时,使用的名称
③ <embed> 嵌入插件内容
示例<embed src="视频.swf" type="application/x-shockwave-flash" width="600" height="800"></embed>
属性
说明
src
视频源type
视频类型,自动识别后缀因而可省略
width,height宽度,高度
④ <progress> 进度条,IE10及以上支持,一般通过JS控制进度动态效果
<progress value="30" max="100"></progress>
属性
说明
value
进度值
max
进度最大值
⑤ <meter> 类似于进度条,可设置警示范围,IE不支持
示例<meter value="90" min="10" max="100" low="30" high="80"></meter>
属性
说明
value
进度值
min最小值,value小于等于该值不显示
max
最大值
low下阙值,小于该值进度条变×××
high
上阙值,大于该值进度条变×××
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。