1.html使用标签来表达
结束标签多一个/
<strong>文字内容</strong>
<hr>
包裹内容就是双标签,换行等是单标签
浏览器中显示内容:
2.html的骨架是网页模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title>
</head>
<body>给用户看的
</body>
</html>
html:整个网页
head:网页头部,存放给浏览器看的代码如CSS
body:网页主体,存放给用户看的代码,如文字,图片
title:网页标题
vscode快速生成骨架:!+ tab / enter
浏览器显示:
3.标签关系
父子:父在子的缩进之上(嵌套)
兄弟:缩进一样(并列)
html是head和body的父,head和body是兄弟关系
4.注释
注释不会在浏览器中显示
vscode中,添加删除/注释的快捷键:ctrl + /
<body><!-- 这是文字,注释! --><strong>加粗显示</strong>普通文字
</body>
显示:
5.标题标签
标题名:h1~h6
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标签</h5><h6>六级标题</h6>
</body>
标题独占一行
规范:h1在一个网页只能用一次,用来放新闻标题或网页logo,其他无限制
6.段落标签
<body><p>新手晋升ES6 - 12特性,至少ES6,尝试看看八股文,理解this,作用域,深浅拷贝,原型链,能用明白一些库,框架,html语义化,less sass,能写出动态效果,基本排版能力,可以不借助框架写出漂亮的页面,配合ajax做数据交互找工作看天赋,可能根据你的理解能力录取</p><p>新手晋升ES6 - 12特性,至少ES6,尝试看看八股文,理解this,作用域,深浅拷贝,原型链,能用明白一些库,框架,html语义化,less sass,能写出动态效果,基本排版能力,可以不借助框架写出漂亮的页面,配合ajax做数据交互找工作看天赋,可能根据你的理解能力录取</p>
</body>
p来表示
7.换行,水平线
第一行<br>第二行<hr><br><hr>
一个br是一行,hr是水平线
8.文本格式化标签
<strong>strong加粗</strong><b>b加粗</b><br><em>em倾斜</em><i>i倾斜</i><br><ins>ins下划线</ins><u>u下划线</u><br><del>del删除线</del><s>s删除线</s>
strong等如图都有对应的快捷方式,但是一般都用左边的写法
9.图像标签
<body><img src="./szk.jpg"><img src="./ksm.jpg">
</body>
]
打开后发现图片显示在同一行
图片标签属性:
示例:
<!-- 图片加载不出来,提示文字 --><img src="./szk2.jpg" alt="这里是图片"><!-- 鼠标停在图片上的提示 --><img src="./szk.jpg" title="这也是图片"><!-- 浏览器缩放图片默认等比例缩放 --><img src="./ksm.jpg" width="100"><img src="./ksm.jpg" height="600">
加载不出来的提示文字
尺寸比较
10.路径
相对路径
从当前文件位置出发查找目标文件
注意看文件位置
绝对路径
<body><img src="E:\image\szk.jpg"><img src="E:/image/szk.jpg">
</body>
绝对路径应用场景:友情链接
11.超链接
点击后跳转到其他页面
输入a即可
<body><!-- 跳转到网上地址 --><a href="https://www.baidu.com/">跳转到百度</a><!-- 跳转到本地地址,且新加窗口跳转 --><a href="./01-标签的写法.html" target="_blank">跳转到01</a><!-- herf属性值写#,表示空链接,不会跳转 --><a href="#">空链接</a>
</body>
12.多媒体标签-音频和视频
音频标签
<!-- controls音频面板 loop循环 autoplay自动播放,浏览器默认禁用--><audio src="./music/Chris Rickwood - Banzai.mp3" controls loop autoplay></audio>
视频标签
<!-- controls控制面板 loop循环 muted静音 autoplay自动播放--><!-- 自动播放需要muted --><video src="./media/1.我从没觉得跳广场舞开心过 【酒醉的蝴蝶】(Av831713062,P1).mp4" controls loop muted autoplay></video>
浏览器支持在静音状态下自动播放,也就是如果要自动播放需要muted和autoplay一起加