HTML5常用标签学习

HTML常用标签（元素）

标签按照功能可以分为三类：块级元素、行内块元素、行内元素

块级元素

块级元素：每个块级元素通常会独自占据一整行或多行，可以对其设
置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

标签简介：

• div 分区标签，将浏览器分成一个个可视 可操作区域使我们看到的内容更为整洁和有层次。
• p 段落标签
• h 标题标签
• ul 无序列表
• ol 有序列表
• li 包含在ul或ol中，是列表项
• form 表单
• table 表格
  • tr 表格的行
  • td 表格的一个单元格
• hr 水平分割线（单标签）
• br 换行（单标签）

特点：

1. 总是从新的一行开始
2. 宽度、行高、外边距和内边距都可以控制
3. 宽度默认是父元素的100%
4. 可以包含内联元素和其他块级元素

行内块元素

行内块元素：块级元素的可替换元素，可以对他们设置宽高和对齐属性。

标签简介：

• img 图片标签（单标签）
• input 表单控件（type属性可以为text、passWord、radio、checkbox、button、submit、reset、）（单标签）
• button 按钮标签
• select 下拉菜单
• option 下拉菜单中的选项
• textarea 文本域标签

特点：

1. 和相邻的行内元素或行内块元素在同一行，它们之间会存在空隙
2. 默认宽度是它本身内容的宽度
3. 高度、行高、外边距以及外边距都可以控制

行内元素

行内元素：行内元素（内联元素）仅靠自身的字体大小和图片尺寸来撑开，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

标签简介：

• span 分区标签，可用于小区域的样式设置
• i 字体倾斜
• em 字体倾斜
• b 加粗
• strong 加粗
• label 短文本
• a 超链接
  1. 跳转外链
  <a href="www.baidu.com">百度</a>
  2. 跳转本地文件
  <a href="index.html">首页</a>
  3. 锚点
  使用 <a href="#id名">链接文本<a> 创建超链接
  给跳转目标设置相应的id名
  4. 设置target=”_blank“属性，点击超链接后会在新窗口打开

特点：

1. 和行内相邻元素在同一行
2. 宽高无法设置，但水平方向的padding和margin可以设置，垂直方向则无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能包含文本和其他行内元素（a标签除外）

form标签：用来收集用户信息

form标签的属性：

• action 地址（后台发送链接）
• method 请求方式（get不安全，post拼接参数请求是安全的）
• name 表单名称（区分表单使用）
• target 打开页面是在当前页面，还是新建页面

input标签的属性：

• type 类型
• name 表单控件名称
• value 控件中的默认文本
• placeholder 占位符，当用户输入时，里面的文字自动消失