这是我参与第五届青训营伴学笔记创作活动的第七天!
语义化是什么?
- html中的元素,属性以及属性值都拥有某些含义,开发者应该遵循语义来编写html
- html是传达内容,而不是样式,按照规范去写,注意使用我们的用户遇到的各种情况
语法你了解吗?
- 标签和属性不区分大小写,推荐使用小写
- 空标签可以不闭合
- 属性值推荐使用双引号包裹
- 某些属性值可以省略
列表标签
- 无序列表 ul双标签 ul标签中只能包含li双标签
- 有序列表 ol orderlist 双标签 规则同ul
- 自定义列表 dl 双标签 dt中主题 dd中包含内容
有关表格的基础知识
- table双标签,表格整体,包裹tr
- 表格标题caption双标签居中显示,表头th放在tr之中
- tr表格每行,tr包裹td,td表示每列
- 表格相关属性:border width height
合并单元格:
- 需要合并哪些 左上原则 保留左上 删除其他
- 剩下的单元格设置跨行合并或者跨列合并 rowspan或者colspan
- 属性值为合并单元格的个数
- 注意不能跨结构标签合并
表单基础知识
form双标签,action数据库,父级标签
- input通过type属性值的不同,显示不同效果
- text显示文本框 输入单行文本
- number数值 min max date日期 range范围
- list datalist option 快捷输入选项
- password密码框 输入密码
- radio单选框 多选一
- checkbox多选框 多选多
- file文件选择,上传文件,multiple多文件选择
- submit提交按钮 用于提交
- reset重置按钮
- button普通按钮,按钮可加value属性设置名称
- button可作为双标签出现,type属性值可以为submit reset button
- placeholder占位符,提示用户输入的文本
- name分组,有相同属性值单选框为一组,只能一个被选中,checked默认选中
- select下拉菜单,option下拉菜单的每一项,selected下拉菜单的默认选中
- textarea文本域标签,cols规定可见宽度,rows规定可见行数,右下角可拖拽
label标签绑定内容与表单标签的关系:
方法一:
- 使用label标签把内容如文本包裹起来,在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
方法二:
- 直接使用label标签把内容和表单标签一起包裹起来,把label标签的for属性删除
图片音频视频标签
- 属性:src alt替换文本图片加载不成功时显示
- title提示文本鼠标悬停在图片上时显示同时亦可用于其他标签 width height 路径:
- 绝对路径 从盘符 根目录开始
相对路径 从当前位置开始到目标位置
- 同级目录 写图片名称加后缀即可
- 下级目录 文件夹名/目标图片名称加后缀
- 上级目录 ../转到上一级目录加文件名加图片名称以及后缀
音频标签:autdio双标签 音频目前支持MP3 WAV OGG
属性:
- src绝对路径以及相对路径
- controls显示播放的控件
- autoplay自动播放部分浏览器不支持
- loop循环播放
视频标签同音频标签,其中自动播放可以配合muted实现静音播放