HTML5基础复习

vsCode编写前端代码

前端文件最常使用vscode编译器书写，之前用html写项目前端用的是idea，后面用vue写项目前端用的是vscode，vue可以安装模板快捷生成的插件。 

VsCode的html文件中 “！”是生成html模板的快捷键

！+回车

 

html文件中右键可选择浏览器展示效果

 

 

标签结构

 

标签关系

HTML标签与标签之间的关系可以分为：父子关系（嵌套关系）和兄弟关系（并列关系）

例如：

常用文本格式化标签：

 图片标签的三大属性

src为图片的路径；

alt为图片的替换文本，当图片无法正常加载时，显示替换文本；

title为鼠标悬停在图片上时显示的文本文字

音频标签 audio

场景：在页面中插入音频

代码：

常见属性：

1.src：音频的路径

2.controls：显示播放的控件

3.autoplay：自动播放（部分浏览器不支持）

4.loop：循环播放

注意：音频标签目前支持三种格式：MP3，Wav，Ogg

视频标签 video

场景：在页面中插入视频

代码：

常见属性：

1.src：视频的路径

2.controls：显示播放的控件

3.autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放）

4.loop：循环播放

注意：视频标签目前支持三种格式：MP4，WebM，Ogg

页面的跳转

加上traget="_blank" 可以保留原本页面开启新窗口跳转页面

input系列标签

场景：在网页中显示手机用户信息的表单效果，如：登录页，注册页

标签名：input

        input标签可以通过type属性值的不同，展示不同的效果

type属性值：

 

select下拉菜单标签

 

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成

• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中 

textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数

注意：

• 右下角可以拖拽改变大小
• 实际开发时针对样式效果推荐用CSS设置 

 

label标签

场景：常用于绑定内容与表单标签的关系

标签名:label

使用方法1：

        1.使用label标签把内容（如：文本）包裹起来

        2.在表单标签上添加id属性

        3.在label标签的for属性中设置对应的id属性值

使用方法2：

        1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

        2.需要把label标签的for属性删除即可。

有语义的布局标签（了解）

 与div一致，但是比div多了不同的语义！