阅读量:2
html
组成
<!--跟标签--> <html> <!--头标签--> <head> <!--网页的标题标签--> <tltle>测试html</title> </head> <!--体标签--> <body> <font color="yellow" size="7">测试体</font> </body> </html> VSCODE
常用插件
- open in brower:用浏览器 快捷打开并预览html文件
- path intellisense：路径自动补全与提示
- npm intellisense：require 三方文件时路径与文件名提示补全
- auto rename tag：修改html标签，修改一个另一个自动同步修改
- css peek:按住ctrl+左键点击class类名可以快速定位到样式表位置，快速修改
使用vscode注意
- 设置vscode的文件自动保存
- 快捷键
alt+shift+向上/下键：复制一行代码
alt+向上/下键：移动
ctrl+d：删除
基础标签
| 标签 | 描述 |
|---|---|
| h1-h6 | 定义标题 |
| font | 定义文本的字体、字体尺寸、字体颜色 |
| b | 定义粗体文本 |
| i | 定义斜体文字 |
| u | 定义文本下划线 |
| center | 定义文本居中 |
| p | 定义段落 |
| br | 定义换行 |
| hr | 定义水平线 |
特殊符号
<: <
>: >
@： ©
图片、音频、视频标签
| 标签 | 描述 |
|---|---|
| img | 定义图片 |
| audio | 定义音频 |
| video | 定义视频 |
img：定义图片
- src：规定显示图像的url
- height:定义图像的高度
- width：定义图像的宽度
aduio：定义音频，支持mp3，wav，ogg
- src：规定音频的url
- controls：显示播放控件
video:定义视频，支持mp4，webm，ogg
- src：规定视频url
- controls：显示播放控件
超链接标签
| 标签 | 描述 |
|---|---|
| a | 定义超链接，用于链接到另一个资源 |
| href：指定访问资源的url | |
| target：指定打开资源的方式 |
_self：默认值，当前页面打开 _blank:空白页面打开 列表标签
| 标签 | 描述 |
|---|---|
| ol | 定义有序列表 |
| ul | 定义无序列表 |
| li | 定义列表项 |
ol和ul标签均有type属性
表格标签
| 标签 | 描述 |
|---|---|
| table | 定义表格 |
| tr | 定义行 |
| td | 定义单元格 |
| th | 定义表头单元格 |
table：定义表格
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr：定义行
- align：定义表格行的内容对齐方式
td：定义单元格
- rowspan：规定单元格可横跨的行数
- colspan：规定单元格可横跨的列数
布局标签
| 标签 | 描述 |
|---|---|
| div | 定义html文档中的一个区域部分，经常与css一起使用，用来布局网页 |
| span | 用于组合行内元素 |
表单标签
| 标签 | 描述 |
|---|---|
| form | 定义表单 |
| input | 定义表单项，通过type属性控制输入形式 |
| label | 为表单项定义标注 |
| selcet | 定义下拉列表 |
| option | 定义下拉列表的列表项 |
| textarea | 定义文本域 |
form表单标签常见属性：
- action：将收集的数据提交到具体后台服务器地址
- method：提交数据到后台的方式（get/post）
表单项
input表单项，通过type属性控制输入形式
| type取值 | 描述 |
|---|---|
| text | 默认值，单行输入 |
| password | 密码 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| file | 文件上传按钮 |
| hidden | 隐藏的输入字段 |
| submit | 提交按钮，把表单数据发送给服务器 |
| reset | 重置按钮 |
| button | 可点击按钮 |
select：下拉列表，option定义列表项
select下拉项需要结合子标签option一起使用，有几个下拉项就有几个option，提交到后台数据的是option中的value值，option的属性selected表示当前下拉选项被选中
textarea：文本域，由行和列组成
CSS
CSS导入html有三种方式
- 内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color:red">HELLO</div> - 内部样式：定义style标签，在标签内部定义css样式
<style type="text/css"> div{ color:red; } </style> - 外部样式：定义link标签，引入外部css文件
link rel="stylesheet" href="demo.css"> css选择器
选择器是选取需设置样式的元素（标签）
分类：
- 元素选择器
元素名称{color:red;} div{color:red;} - id选择器
#id属性值{color:red;} #name{color:red;} - 类选择器
.class属性值{color:red;} .cls{color:red;} 