超详细的html笔记总结

html认知

下载好vscode之后，快捷键：！+回车
注释：ctrl + / 第一次加注释，第二次取消注释
换行 <br>
打印横线 <hr>

1.字体加粗，使用strong

<strong>字体加粗</strong>

2.标题使用h标签，只有h1到h6，并且字体从大到小

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

3.段落使用p标签

<p>我是段落</p>

4.文本格式化标签

5.图片标签

 <img src="" alt="">

src是图片的位置，alt是当图片加载失败是展示的文字

使用title标签达到悬停图片展示文字的效果

 <img src="" alt="" title="这是一只小猫咪">

6.路径
工作中经常使用相对路径
绝对路径：从盘符开始，一级一级往下走
相对路径：从当前文件开始出发找目标文件

7.音频标签

<audio src="./黄丽玲 - 有一种悲伤.mp3" controls></audio>

controls是控件，显示按钮。
如果想点开网页就自动播放加上autoplay。如果想让音频循环播放加上loop

<audio src="./黄丽玲 - 有一种悲伤.mp3" autoplay loop controls></audio>

8.视频标签

<video src="./黄丽玲 - 聊聊天.mp4"autoplay loop controls></video>

9.超链接标签href

<a href="https://www.baidu.com">点击跳转百度</a>

如果想要新建一个网页展示内容，加上target=“_blank”

<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>

10.div块标签
一般是id和class一起使用，主要是分割样式

<div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
</div>

11.span标签
一般用于内联标签

<span>第一个span标签</span>

12.input标签之type=“text”
input标签中的type=“text”是输入框，配合id使用，配合placeholder使用

<label>用户名</label>
<input type="text" id="username" placeholder="请输入内容" >

其中type=text是输入框，placeholder是灰色的字体
如果想要黑色实体字，是value=“”

13.input标签之type=“radio”
type=“radio”是单选框

		<label >性别</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他

radio是圆圈的选项。name=“gender”，才能单选

14.input标签之type=“checkbox”
type=“checkbox”是正方形的框框

		<label>爱好</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">写代码

15.input标签之type=“submit”

<input type="submit" >