这是我参与「第四届青训营 」笔记创作活动的的第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…)