前端 | 青训营笔记

70 阅读3分钟

这是我参与第五届青训营伴学笔记创作活动的第七天!

学习使我快乐.jpeg

语义化是什么?

  • 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实现静音播放

d7bd2fc23a194c738ef9c7e2e089766b.jpeg

加油!拒绝摆烂!让我们不负青春!在青训营度过充实的一天!