HTML +CSS 学习(四) 文章目录 HTML +CSS 学习(四) 1、HTML 与 XHTML区别 ? 2、strong与b、em与i? 3、引用标签? 4、iframe标签? 5、br 与 wbr ? 6、pre 与 code ? 7、map 与 area ? 8、embed 与 object ? 9、audio 与 video ? 10、文字注解? 11、link扩展学习? 12、meta扩展学习? 13、HTML5新的语义化标签? 14、表格扩展学习? 15、表单扩展学习? 16、BFC规范? 1、HTML 与 XHTML区别 ? DOCTYPE文档及编码 元素大小写 属性布尔值 属性引号 图片的alt属性 单标签写法 双标签闭合
2、strong与b、em与i? 表现形态都是 文本加粗 和 文本斜体
区别:是否具备语义化
3、引用标签? blockquote : 引用大段的段落解释 q : 引用小段的短语解释 abbr : 缩写或首字母缩略词 address : 引用文档地址信息 cite : 引用著作的标题
4、iframe标签? 可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
5、br 与 wbr ? br 就是换行、 wbr 就是软换行(在指定时机进行换行)
6、pre 与 code ? 针对网页中的程序代码的显示效果。
7、map 与 area ? 给特殊图形添加链接,area能添加的热区的形状:矩形、圆形、多边形。
8、embed 与 object ? 给flash和一些插件进行渲染操作的标签。
9、audio 与 video ? 引入音频与视频的标签。属于H5的功能。
10、文字注解? ruby 、 rt 这样一个组合
11、link扩展学习? 添加网址标题栏前的小图标:
DNS预解析: 12、meta扩展学习? meta添加一些辅助信息。
13、HTML5新的语义化标签? header : 页眉 footer : 页脚 main : 主体 hgroup : 标题组合 nav : 导航
注:header、footer、main 在一个网页中只能出现一次。
article : 独立的内容 aside : 辅助信息的内容 section : 区域 figure : 描述图像或视频 figcaption : 描述图像或视频的标题部分
datalist : 选项列表 details / summary : 文档细节 / 文档标题 progress / meter : 定义进度条 / 定义度量范围 time : 定义日期或时间 mark : 带有记号的文本
14、表格扩展学习? 添加单线 : border-collapse : collapse 隐藏空单元 : empty-cells : hide 斜线分类 : border / rotate 列分组 : colgroup / col
15、表单扩展学习? 美化表单控件: 1. label + :checked 2. position + opacity
新的input控件 email : 电子邮件地址输入框 url : 网址输入框 number : 数值输入框 range : 滑动条 date / month / week : 日期控件 search : 搜索框 color : 颜色控件 tel : 电话号码输入框 ( 在移动端会默认调起数字键盘 ) time : 时间控件
表单属性: autocomplete : 自动完成 默认 on / off autofocus : 获取焦点 required : 不能为空 pattern : 正则验证
method : 数据传输方式 enctype : 数据传输类型 name / value : 数据的键值对
扩展标签 : fieldset : 表单内元素分组 legend : 为fieldset元素定义标题 optgroup : 定义选项组
16、BFC规范? 触发BFC规范的元素,可以形成一个独立的容器。不受到外界的影响,从而解决一些布局问题。
触发的样式: float、display、position、overflow
原文链接:https://blog.csdn.net/weixin_44908159/article/details/107684704?utm_medium=distribute.pc_feed.none-task-blog-personrec_tag-4.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-personrec_tag-4.nonecase&request_id=5f43906e0388ae0b5643c130