html

组成

  	 	 		 		测试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：删除

基础标签

特殊符号

<: <
>: >
@： ©

图片、音频、视频标签

img：定义图片

• src：规定显示图像的url
• height:定义图像的高度
• width：定义图像的宽度

aduio：定义音频，支持mp3，wav，ogg

• src：规定音频的url
• controls：显示播放控件

video:定义视频，支持mp4，webm，ogg

• src：规定视频url
• controls：显示播放控件

超链接标签

		_self：默认值，当前页面打开 		_blank:空白页面打开 

列表标签

ol和ul标签均有type属性

表格标签

table：定义表格

• border：规定表格边框的宽度
• width：规定表格的宽度
• cellspacing：规定单元格之间的空白

tr：定义行

• align：定义表格行的内容对齐方式

td：定义单元格

• rowspan：规定单元格可横跨的行数
• colspan：规定单元格可横跨的列数

布局标签

表单标签

form表单标签常见属性：

1. action：将收集的数据提交到具体后台服务器地址
2. method：提交数据到后台的方式（get/post）

表单项

input表单项，通过type属性控制输入形式

select：下拉列表，option定义列表项
select下拉项需要结合子标签option一起使用，有几个下拉项就有几个option，提交到后台数据的是option中的value值，option的属性selected表示当前下拉选项被选中

textarea：文本域，由行和列组成

CSS

CSS导入html有三种方式

1. 内联样式：在标签内部使用style属性，属性值是css属性键值对

HELLO
 

2. 内部样式：定义style标签，在标签内部定义css样式

5. 外部样式：定义link标签，引入外部css文件

link rel="stylesheet" href="demo.css"> 

css选择器

选择器是选取需设置样式的元素（标签）

分类：

1. 元素选择器

元素名称{color:red;} div{color:red;} 

2. id选择器

#id属性值{color:red;} #name{color:red;} 

3. 类选择器

.class属性值{color:red;} .cls{color:red;}