你的位置:首页 > 网页设计

[网页设计]HTML5进阶段内联标签汇总(小篇)


内联元素,与别人公用一行,但是设置宽高无效。其特点:

  ①和其他元素都在一行上;
  ②高,行高及外边距和内边距不可改变;
  ③宽度就是它的文字或图片的宽度,不可改变
  ④内联元素只能容纳文本或者其他内联元素
代码如下:
 1 <!doctype html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>标签基础2</title> 6 </head> 7 <body> 8   <!-- 内联元素 与别人公用一行 但是设置宽高无效 --> 9 10   <!-- 无语义 -->11   <span>无语义</span>12 13   <!-- 图片 alt图片加载失败显示-->14   <img src="d" alt="加载失败">15 16   <!-- 超链接 -->17   <a href="http://www.baidu.com">跳转</a>18 19   <!-- 斜体强调 -->20   <var>斜体强调作用</var>21   <!-- em和i经常用于制作小图标 -->22   <em>斜体强调作用</em>23   <i>斜体强调作用</i>24 25   <!-- 加粗强调 -->26   <strong>加粗强调</strong>27 28   <!-- 表单 提交数据-->29   <form action="">30     <!-- 输入框 -->31     <input type="text">32     <!-- 密码输入框 -->33     <input type="password">34     <!-- 按钮 -->35     <input type="button" value="按钮">36     <!-- 提交表单 -->37     <input type="submit" value="提交表单">38 39     <!-- 日期 年月日-->40     <input type="date">41     <!-- 日期 年周 -->42     <input type="week">43     <!-- 日期 年月 -->44     <input type="month">45     <!-- 日期 当前时间 -->46     <input type="time">47 48     <!-- 选择文件 -->49     <input type="file" value="打开文件">50     <!-- 只能输入数字 -->51     <input type="number">52     <!-- 颜色选择器 -->53     <input type="color">54     <!-- 重置 -->55     <input type="reset">56     <!-- 复选框 -->57     <input type="checkbox">我爱你58     <input type="checkbox">你爱我59     <!-- 单选框 name 同名字为一组-->60     <input type="radio" name="sex" checked="checked">男61     <input type="radio" name="sex">女62   </form>63 64   <!-- 多行文本 cols宽度 rows高度 -->65   <textarea name="" id="" cols="30" rows="10"></textarea>66 67   <!-- 选择列表 默认第一个选项的值为初始值-->68   <select name="" id="">69     <option value="">选项1</option>70     <option value="">选项2</option>71     <option value="">选项3</option>72   </select>73 </body>74 </html>