前端与HTML|青训营笔记

94 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

html,css,js,http构成了前端最基础的技术栈,HTML是超文本标记语言,是一种相当简单的、由不同元素组成的标记语言

页面适用:
不同的人群(考虑特殊的人群,如色盲等),以及不同的场景(网页端,移动端)

HTML语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如 input,meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略,比如 required,readonly

HTML语义化

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表 ol; 无序列表 ul
    • lang 属性表示内容所使用的语言(对部分标签不适用)
一些标签(括号里的表示有相同效果的标签)
文本标签
  • cite 对某个参考文献的引用标签
  • q 引用前面的内容
  • code 代码引用(可长可短)
  • pre 可以保留一段话里面的空格
  • strong(b) 事情紧急,字体自动加粗
  • em(i) 在一句话里面突出表示,字体自动斜体
  • abbr 定义缩写(可以将一些长单词用手写字母表示,用属性title表示全部信息)
  • del 定义被删除文本,类似:123
  • ins 下划线
  • img 图片标签
  • audio 语音标签
  • video 视频标签
  • a 超链接
表单内容(通过type设置)-form
  • text 基本文本框
  • textarea 多行文本
  • password 密码框
  • radio 单选按钮(多个单选框有相同的name值才有单选效果)
  • checkbox 多选按钮
  • select option 下拉列表(用select包裹,选项在option内)
  • submit 提交按钮
  • reset 重置按钮,将表单内的值全部重置
  • button 普通按钮
  • color 颜色框(兼容性不好)
  • data 日历(可设置最小日期2022-07-23)
  • number 数字框
  • hidden 将input隐藏起来
  • file 文件选择按钮(可通过accept进行设置接受文件类型)
表格-table
  • thead 头部
  • tbody 主体
  • tfoot 底部
  • caption 添加表格标题
  • tr 单元行
  • td 单元格
  • th 头部单元格,文字会有加粗效果

在我们进行页面布局时,可以灵活的运用这些标签,从而达到我们想要的样式,而不用再通过css调整。
更多标签:(www.runoob.com/tags/ref-by…)