Web前端三大技术
Web前端三大技术HTML、CSS、JavaScript
- HTML 负责页面结构
- CSS 负责页面样式
- JS 负责页面逻辑
HTML概述
学习HTML主要掌握两大知识点：
元素
HTML使用标签创建元素。
如div标签则表示创建一个块级元素。
文档结构元素
| 元素名 | 描述 |
|---|
| html | HTML文档根元素 |
| head | 文档元信息 |
| title | 页面标题 |
| meta | 设置字符编码、视口等 |
| style | 内部样式 |
| link | 引入外部资源，如CSS、图标等 |
| script | 引入或编写JS代码 |
| body | 页面内容容器 |
容器和布局元素
| 元素名 | 描述 |
|---|
| div | 块级元素 |
| header | 头部 |
| nav | 导航栏 |
| main | 核心内容 |
| section | 分区内容 |
| aside | 侧边栏 |
| footer | 底部 |
| span | 行内元素 |
文本内容元素
| 元素名 | 描述 |
|---|
| h1~h6 | 1~6级标题，字体依次减小 |
| p | 段落 |
| strong | 粗体 |
| em | 斜体 |
| br | 换行 |
| blockquote | 块级引用 |
| q | 行内引用 |
| code | 行内代码 |
| pre | 保留格式代码 |
表单元素
| 元素名 | 描述 |
|---|
| form | 表单容器 |
| input | 输入框 |
| select | 下拉框 |
| textarea | 文本域 |
| button | 按钮 |
| label | 标签关联 |
表格元素
| 元素名 | 描述 |
|---|
| table | 表格容器 |
| th | 表头 |
| tr | 表格行 |
| td | 单元格 |
列表元素
链接和媒体画布元素
| 元素名 | 描述 |
|---|
| a | 链接 |
| img | 图片 |
| video | 视频 |
| audio | 音频 |
| iframe | 嵌入内容，如：地图、第三方组件等 |
| canvas | 画布 |
元素属性
元素属性语法：
属性名="属性值"
可以使用单引号或双引号。
通用属性
| 属性名 | 描述 |
|---|
| id | 元素唯一标识 |
| class | 元素类名 |
| style | 行内样式 |
| title | 鼠标悬浮显示的提示文本 |
| hidden | 布尔属性，隐藏元素 |
| lang | 指定元素语言 |
文档结构和元信息属性
| 元素名 | 属性名 | 描述 |
|---|
| meta | charset | 指定文档字符编码（常用UTF-8） |
| name | 元信息名称 viewport 控制移动端视口、description 页面描述 |
| content | 配合name或http-equiv定义具体内容，如 content="width=device-width, initial-scale=1.0" |
| link | href | 指定外部资源路径 |
| rel | 定义资源和当前文档的关系 stylesheet 表示样式表 icon表示图标 |
| type | 资源类型，如text/css |
| script | src | 引入外部JS文件路径 |
| type | 脚本类型 |
| async | 异步加载脚本 |
| defer | 延迟到文档解析完成后执行 |
表单元素属性
| 元素名 | 属性名 | 描述 |
|---|
| form | action | 表单提交的目标url |
| method | 提交方式，get 明文传参，post 隐式传参，常用post |
| enctype | 文件上传时需设置enctype="multipart/form-data"指定表单需要提交二进制数据 |
| target | 提交后响应页面的打开方式 |
| input | type | 输入类型 text文本、password密码、email邮箱、checkbox复选框、radio单选框、file文件、data日期 |
| name | 表单数据的键名，提交时和value配对，必填 |
| value | 输入框的默认值或提交值 |
| placeholder | 输入提示文本 |
| required | 布尔属性，标记为必填项 |
| disabled | 布尔属性，禁用输入框 |
| readonly | 只读属性，可查看不可编辑 |
| checked | 复选框/单选框默认选中（布尔属性） |
| maxlength | 限制输入的最大字符数 |
| select | name | 提交时键名 |
| value | 默认选中项的value |
| multiple | 布尔属性，允许多选（按住Ctrl点击） |
| size | 显示选项数量 |
| option | value | 选项的提交值（未设置默认标签文本） |
| selected | 默认选中该选项（布尔属性） |
| textarea | name | 提交时的键名 |
| rows | 默认显示行数 |
| cols | 默认显示列数 |
| placeholder | 输入提示文本 |
| required | 必填项 |
| disabled | 禁用 |
| readonly | 只读 |
| maxlength | 最大输入字符数 |
| button | type | 按钮类型 submit 提交表单（默认）reset 重置表单 button 自定义功能 |
| disabled | 禁用 |
表格元素属性
| 元素名 | 属性名 | 描述 |
|---|
| table | border | 表格边框宽度 |
| width/height | 表格宽/高 |
| cellspacing | 单元格之间的间距 |
| cellpadding | 单元格内边距 |
| td | colspan | 跨列合并 |
| rowspan | 跨行合并 |
| align | 单元格内容水平对齐 left/center/ right |
列表元素属性
| 元素名 | 属性名 | 描述 |
|---|
| ol | start | 定义列表起始序号（默认1） |
| type | 序号类型（1数字、A大写字母、a小写字母、I大写罗马数字、i小写罗马数字 |
链接和媒体画布元素属性
| 元素名 | 属性名 | 描述 |
|---|
| a | href | 跳转目标 |
| target | 打开方式 |
| rel | 定义与目标链接的关系 |
| img | src | 图片资源路径 |
| alt | 图片加载失败时的替代文本 |
| width/height | 图片宽/高（单位px) |
| loading | 懒加载 |
| title | 鼠标悬浮时图片说明 |
| video | src | 视频资源路径 |
| controls | 显示播放控件 |
| autoplay | 页面加载完成后自动播放 |
| muted | 默认静音 |
| loop | 循环播放 |
| width/height | 视频宽/高 |
| audio | 同video，但无width/height属性 | |
| iframe | src | 嵌入外部页面路径 |
| width/height | 嵌入框宽/高 |
| frameborder | 是否显示边框，0隐藏 1显示 |
| sandbox | 限制嵌入页面的权限 |
