h5基础

本文介绍了HTML5的语法变化,包括标签大小写不敏感、元素结束标签的省略、属性值的简化,以及属性值引号的可选性。详细探讨了常用标签的功能与区别,例如标题标签、段落标签、水平线标签、span与div的使用场景。此外,还深入讲解了文本格式化元素、列表元素、H5新增的通用属性和元素,如contentEditable、designMode、hidden、spellcheck、文章结构元素、语义相关元素以及拖放API。

HTML5语法的改变

  • 标签不区分大小写
  • 元素可以省略结束标签
  • 元素的属性可以省略属性值
  • 属性的属性值可以不使用引号

常用标签元素

  • 标题标签: h1到h6依次变大 换行
  • 段落标签: p 换行
  • 水平线标签: hr 换行
  • span与div的区别: span不换行,div换行
  • p标签可以包含span,span不可以包含p标签
  • div标签可以包含各种各样的内容,因此在h5之前,经常会大量使用div元素完成布局

文本格式化元素

  • 粗体: b,strong
  • 斜体: i, em
  • 小号: small
  • 上下标: sup, sub 比如: 24
  • 文本显示方向: bdo 指定dir属性,该属性只能是ltr或者rtl

列表相关元素

  • 有序列表: ol, 包含子元素li , 它有三个属性: start: 指定列表项的起始数字,默认是第一个,如1,A等;type: 指定使用哪种类型的编号,如1,a,i(罗马数字);reversed: 指定是否将排序反转。
  • 无序列表: ul, 包含子元素li
  • 定义层级列表: dl, 包含dt和dd两种子元素。dt: 定义标题列表项, dd: 定义普通列表项

H5新增的通用属性

  • contentEditable: 允许开发者直接编辑HTML元素里的内容,具有可继承的特点
  • designMode: 相当与一个全局的contentEditable属性,默认为off
  • hidden: true/false,浏览器不再显示该组件,hidden="true"相当于CSS中设置display:none
  • spellcheck: true/false,浏览器会负责对用户输入的文本内容执行输入检查

H5新增的常用元素

  • 文档结构元素: <article…/>,<section…/>,<nav…/>,<aside…/>,<header…/>,<footer…/>等
  • 语义相关元素: <mark…/>: 浏览器通常会用黄色显示标注的内容,<time…/>: 用来显示被标注内容是时间,日期
  • 两个特殊功能的元素: <meter…>: 用于表示一个已知最大值和最小值的计数仪表;<progress…/>: 用于表示一个进度条

H5新增的拖放API

  • <img…/>元素默认就是可拖动的;<a…/>元素只要设置了href属性,它默认也是可拖动的
  • 对普通元素而言,如果希望把它变成可拖动的,开发者只要把该元素的draggable属性设为true即可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值