文章目录
- 一、vscode的安装与插件安装
- 二、html 文件结构
- 三、文本
- 四、图片
- 五、音频和视频
- 六、超链接
- 七、表单
- 八、列表
- 九、表格
- 十、语义标签
一、vscode的安装与插件安装
- Live Server 插件。
- Auto Rename Tag 插件,当修改开始标签时,结束标签也随着修改。
- 设置自动格式化,保存会自动格式化代码。
二、html 文件结构
html
的所有标签为树型结构,每个标签都是一个 节点 ,起始标签 和 结束标签 中的所有部分都是其的 子节点,同一级标签是兄弟节点,有些特殊标签是没有起始标签和结束标签的,例如 meta
标签,即叶子节点。

<!DOCTYPE html> <html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</title></head><body> <h1>第一讲</h1></body></html>
:存配置信息,例如, 样式文件(CSS),js 文件,标题,meta 信息
:承载网站内所有内容的地方
:不能放到 中的放到 meta 中。meta 一般存 charset,description(搜索引擎中标题下方的描述),keywords。
icon
: 网页 logo
三、文本
- 绝大部分标签都可以看作是
div
和 span
标签扩展过来的。
:块状元素,默认带一个回车,长度默认 100%。用来定义一堆代码块的,将一堆代码放到一个 div 中,这一堆代码就相当于一个整体,这样就可以对整体进行操作 ,逻辑上将其归到一类打包到一起,方便 css 和 js 的操作。
快捷写法:
div>div>div
嵌套多层 div,
div*5
搞5个同级的 div。
会将空格和回车删掉,
中间的内容中如果有空格和回车不会显示出来
会保留空格和回车、字体是等宽字体。
:行内元素,默认不带回车。
四、图片
![]()
src
:图片路径,可以是绝对路径也可以是一个网址链接。alt
:当图片无法显示时则会显示 alt 里面的内容, 一般写这个图片表示的含义。
width
,height
。如果只设置其中的一个,另一个未设置的属性则会等比例压缩显示。
五、音频和视频
audio
音频标签。
src:音频路径
source:用于播放多个视频
video
视频标签,用法同音频标签
六、超链接
- 可以跳转到站内也可以跳转到站外
- target = “_blank”:跳转时打开新的标签页
标签中可以嵌套其它标签
七、表单
- 作用是和后端服务器进行交互,例如登录一个页面需要提交用户名密码等信息,需要将这些数据传给服务器,表单就是方便向服务器传送信息的功能。
- label 和 input是绑定在一起的,label 是用于标识 input 是干嘛用的。
- 一个 url 会接若干个参数,分割点是 ?,? 后面的都是参数,每一个参数的形式为:参数名称 = 参数值。
八、列表
ul
无序列表,ol
有序列表
- 列表里的每一个选项用
括起来
- 每一个列表里都可以嵌套列表
九、表格
定义表格名称
- 表格分为两个区域,一个是表头
,另一个是数据区
- 每一行用
- 表头每行的每一个单元格用
- 数据区每行的每一个单元格用
十、语义标签
- 作用:替代
,因为
只有语法是上的作用无实际意义。语义标签让写代码的时候更加简洁,让标签更具有实际意义,只看标签不用看 class 即可知道这部分的作用。
- 例如,
等价于
标题区,
导航区,
一块,
文章区,
图片区,
页脚
| |