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> <img src="img.png"> </figure>
3. <table> 表格元素,用法:
<table border="1" > <caption>这里是标题</caption> <colgroup> <col> //占位 <col background="red;"> //第二列背景色设为红色 </colgroup> <tfoot> //表尾-始终在最后一行显示 <tr> <td colspan="3">共计:1人</td> </tr> </tfoot> <tbody> //表体 <tr> <td>张三</td> <td>男</td> <td>27</td> </tr> </tbody> <thead> //表头-始终在第一行显示 <tr> <th rowspan="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 | 图像的url |
width,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 | 上阙值,大于该值进度条变××× |
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。