安装vscode 并使用vscode创建第一行代码,介绍了骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
内容都是写在body里面,注释快捷键是用Ctrl + / (shift旁边的斜杠)
在html代码里面存在这嵌套还有并列关系,
h系列标签从h1-h6 逐级减小,标题标签独占一行 字体也是加粗, h1标题最大,h6最小,其中h1最为重要一般用于标题,logo,一般一个网页中只有一个h1
下面有一些快捷键
ctrl + X 剪切
ctrl + C 复制
ctrl + V 粘贴
1. ctrl + Z 撤回
2. ctrl + Y 撤销撤回的操作
3. ctrl + enter 快速在下面新建一行
4. ctrl + shift + enter 快速在上面新建一行
段落标签p 用于文章中,在头条新闻微博常见,其他地方不常见。p标签的特点是段落之间存在间隙,独占一行
换行标签br 强制换行, hr水平线标签
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br>
<!-- 第二组:推荐使用,语义更加强烈 -->
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
img标签图片标签,
1、src:告诉浏览器要显示哪一张图片
属性值:路径(如果图片和当前页面在同级目录下,此时直接写图片的名字即可)
2、alt:替换文本
当图片加载失败时(如:路径写错了),才显示的文字
3、title:提示文本
当鼠标悬停在图片上时,才显示的文字
4、width:图片的宽度
5、height:图片的高度
注意点:
1、如果只设置图片的宽度或者高度,此时另一个会自动等比例缩放
2、如果同时设置了两个,若设置不当此时图片可能会变形
音频标签:audio
属性:
1、src:路径
2、controls:播放的控件
3、autoplay:自动播放(部分浏览器不支持)
4、loop:循环播放
视频标签:video
属性:
1、src:路径
2、controls:播放的控件
3、autoplay:自动播放(部分浏览器不支持)——》在谷歌浏览器中写muted可以完成静音的自动播放
4、loop:循环播放
超链接:a标签 双标签
作用:点击之后跳转网页
属性:
1、href:告诉浏览器点击之后跳转去哪一个网页
取值:路径
1、外部链接:互联网上的绝对路径
2、内部链接:推荐使用相对路径
2、target:目标网页的打开方式
取值:
1、_self:(默认值) 在当前窗口中进行跳转,原网页会被覆盖
2、_blank:在新窗口中进行跳转,原网页保留