html5 + css3

HTML认知

初识-web标准

小结：

• 结构：HTML → 页面元素
• 表现：CSS → 页面样式
• 行为：JavaScript → 页面交互的动态效果

vscode的简介和使用

英文状态!→回车（或者tab键），

快速生成骨架，

注释

ctrl + /

标题和段落

快捷方式：快速修改多个同个字样

1️⃣鼠标左键长按选中想要修改的1，（同个字样就会自动标识出来）

2️⃣ctrl + d 多选，都按一次d，多选一个字样。（可以看到三个光标同时在闪）

⭐️标题标签

<h1></h1>

⭐️段落标签

<p></p>

换行和水平线标签

⭐️换行标签

<br>

⭐️水平线标签

<hr>

文本格式化标签

⭐️

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

⭐️

语义：突出重要性的强调语境：

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

图片-基本使用

⭐️<img src=" " alt=" ">

图片-属性

⭐️<img src=" " alt=" " title=" ">

title：悬停时显示文本

width：

height：

⭕️如果只设置weight和height其中一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

⭕️如果同时设置weight和height，设置不当会变形

绝对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。

🍎盘符开头：D:\day01\images\1.jpg

完整的网络地址：https://www.itcat.cn/2018czgw/images/logo.gif（了解）

相对路径-同级和下级

相对路径（常用）：从当前文件开始出发找目标文件的过程

同级目录：当前文件和目标文件在同一目录中

​ 代码步骤：直接写目标文件名字即可

​ 🍎 <img src="目标图片.gif">或<img src="./目标图片.gif">

下级目录：目标文件在下级目录中

​ 代码步骤：文件夹名字/直接写目标文件名字

​ 🍎<img src="images/目标图片.gif">

上级目录：目标文件在上级目录中

​ 代码步骤：…/直接写目标文件名字

​ 🐱…/返回上一级

​ 🍎:apple<img src="../目标图片.gif">

音频标签

⭐️<audio src=" " controls autoplay loop></audio>

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

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

视频标签

⭐️<video src=" " controls autoplay muted loop></video>

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中序配合muted实现静音播放）
loop	循环播放

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

超链接

⭐️<a href="./目标网页.html">超链接</a>

不知道跳转地址的时候，href的值书写#（空链接）

链接标签的target属性：

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转
_blank	在新窗口中跳转

HTML基础

列表-无序和有序

无序列表：

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示陆无序列表的每一项，用于包含每一行的内容

⭕️ul标签中只允许包含li标签

⭕️li标签可以包含任意内容

有序列表：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示陆无序列表的每一项，用于包含每一行的内容

⭕️ol标签中只允许包含li标签

⭕️li标签可以包含任意内容

列表-自定义

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进效果

⭕️dl标签中只允许包含dt/dd标签

⭕️li标签可以包含任意内容

表格-使用

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

标签的嵌套关系：table > tr > td

表格的相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

实际开发时针对样式效果推荐用CSS设置

表格-表格标题和表头单元格

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

表格-结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

表格-合并单元格

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

 <tr><td>小哥哥</td><td rowspan="2">100</td><td>真帅气</td></tr><tr><td>小姐姐</td><!-- <td>99</td> --><td>真漂亮</td></tr>

<tr><td>总结</td><td colspan="2">郎才女貌</td><!-- <td>郎才女貌</td> -->
</tr>

⭕️只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

表单-应用场景

表单-input基本使用

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

文本框：<input type="text"><br>密码框：<input type="password"><br>单选框：<input type="radio"><br>多选框：<input type="checkbox"><br>上传文件：<input type="file"><br>提交按钮：<input type="submit"><br>重置按钮：<input type="reset"><br>普通按钮：<input type="button">

表单-input-占位符

属性名	说明
placeholder	占位符。提示用户输入的文本

  文本框：<input type="text" placeholder="请输入用户名">

表单-单选功能和默认选中