VSCode快捷键

标题tag

• 标题一共有6个,从<h1>到<h6>,字体分别从大到小

• VScode快捷键(快速生成全部'h'标签): h$*6

• 不要因为想要标题的效果就把段落用作标题!!!

段落, 换行, 水平线

• p标签<p>是段落,也就是网站的正文.

• <br>是换行符,是一个单标签

• <hr>是水平线,也是一个单标签,它有以下属性:
• color: 设置水平线颜色
• width: 设置水平线的长度
• size: 设置水平线的高度
• align: 设置水平线的对齐方式(默认居中),可取值left|right

在HTML放置图片<img>标签

• <img>用于显示图像,是一个单标签

• 属性:
• src: 路径
• alt: 图片的替换文本
• width: 图像宽度
• height: 图像高度
• title: 鼠标悬停时提示

超文本链接

• <a>标签,是一个双标签

• <a href="https://www.website.com">链接文本</a>
• 注意:链接要写完整

文本标签

• 常用文本标签

标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重语气
<del>	定义删除字
<span>	元素没有特定的含义

• 特别提示: 常用文本标签和段落是不同的,段落代表一段文本,而文本一般表示问本次汇

列表-有序列表

• <ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol>

• 有序列表是一列项目,列表项目使用数字进行标记,有序列表始于<ol>, 每个列表项始于<li>

• type属性(<ol>的属性type拥有的选项):
• 1 表示列表项目用数字符号(1, 2, 3...)
• a 表示列表项目用小写字母符号(a, b, c...)
• A 表示列表项目用大写字母符号(A, B, C...)
• i 表示列表项目用小写罗马符号(i, ii, iii...)
• I 表示列表项目用大写罗马符号(I, II, III...)

• 有序列表是可以嵌套的

列表-无序列表

• 无序列表是一个项目的列表,通常是用粗体圆点进行标记

• <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul>

• 无序列表始于<ul>, 每个列表项始于<li>

• type属性:
• disc: 默认实心圆
• circle: 空心圆
• square: 小方块
• none: 不显示

• 无序列表是可以嵌套的

• 常见应用场景:
• 无序的列表效果
• 导航效果

• 快捷键: 快速生成ul+li的布局(ul>li*3) 注: 数字根据需要修改li

表格

• 表格标签:
• 表格: <table>
• 行: <tr>
• 单元格(列): <td>
• 代码示例:

• 快捷键: table>tr*2>td{单元格}

• 表格属性:
• border: 设置表格边框
• width: 设置表格宽度
• height: 设置表格高度

表格-单元格合并

• 水平合并: colspan

• 垂直合并: rowspan

• 代码示例:在这个例子中, 用colspan将单元格1和单元格2合并; 用rowspan将单元格6和单元格9合并

• 合并规则:
• 水平合并: 保留左边, 删除右边
• 垂直合并: 保留上边, 删除下边

Form表单

• <form action="url" method="get|post" name="myform"></form>

• 属性说明:
• action 服务器地址
• name 表单名称

• method中Get和Post的区别:
• 数据提交方式，get把提交的数据url可以看到, post看不到
• get一般用于提交少量数据，post用来提交大量数据

• 表单元素:
• 表单标签
• 表单域
• 表单按钮
• 代码示例:
• <form> <input type="text"> <input type="submit"> </form>
• 文本框:
• <form> username: <input type="text"> <br> password: <input type="password"> <br> <input type="submit" value="登录"> </form>

input标签

• 什么是input标签: input标签是HTML中用来收集用户输入的一种元素，它可以根据不同的type属性值，显示为不同的输入控件，比如文本框、复选框、单选按钮、按钮等。input标签通常在form标签中使用，用来声明允许用户输入数据的input控件

• input标签属性:
• 单选框:
• radio: 单选按钮<input type="radio"> cat
• 扩大按钮点击范围:label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）。 例如，<label><input type="radio"> cat</label> 使得点击单词 cat 也会选择相应的单选按钮。
• 请注意，可以同时选择两个单选按钮。 为了使选择一个单选按钮自动取消选择另一个，两个按钮必须有具有相同值的 name 属性。
• fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。 fieldset 元素是块级元素，这意味着它们出现在新的一行上。
• legend 元素充当 fieldset 元素中内容的标题。 它为用户提供了有关他们应该在表单的该部分中输入什么的上下文。
• 复选框:
• 对于可能有多个答案的问题，表单通常使用复选框。 例如，这是一个带有 tacos 选项的复选框：<input type="checkbox"> tacos。
• 与单选按钮一样，选中复选框的表单数据是 name / value 属性。 虽然 value 属性是可选的，但最好将它包含在页面上的任何复选框或单选按钮中。
• 默认选中: 为了使复选框或单选按钮默认被选中，你需要为其添加 checked 属性。 无需为 checked 属性设置值。 只需将单词 checked 添加到 input 元素，确保它和其他属性之间有空格。

• input标签占位符: 占位符文本用于提示人们在输入框中输入什么样的信息。 例如:

H5新标签

• <header></header> 头部

• <nav></nav> 导航

• <section></section> 定义文档中的章节, 页眉, 页脚

• <aside></aside> 侧边栏

• <footer></footer> 脚部

• <article></article> 代表一个独立的完整的相关内容块

音频标签

• 代码: <audio src="./music.mp3" controls> 常见属性:

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

• 目前支持的格式: MP3, Wav, Ogg

视频标签

• 代码: <video src="./images/video.mp4" controls>

• 常见属性:

属性名	aut功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器需要配合muted实现静音播放）
loop	循环播放

• 目前支持的格式: MP4, WebM, Oagg

下拉菜单

• select嵌套option, select是下拉菜单整体, option是下拉菜单的每一项

• 默认选中: <option selected>选项2

article元素

• article元素是HTML中用来表示一个独立的、可分配的或可复用的内容单元的元素。它通常用来表示一些具有自身完整性的内容，比如论坛帖子、新闻文章、博客文章、评论、交互式组件等。article元素应该包含一个标题（h1-h6元素），除非有特殊的情况。article元素可以嵌套使用，表示与外层内容相关的子内容。article元素可以使用header, footer, address等元素来提供更多的信息，比如作者、发布日期、相关链接等

• 示例:

🤗 总结归纳

📎 参考内容

-HTML-CSS-JavaScript--/HTML要点.md at main · ningguoxu/-HTML-CSS-JavaScript--

欢迎来到HTML/CSS/JavaScript教程，这个教程旨在帮助你学习和掌握网页开发的基础知识和技能。(持续更新中......) - ningguoxu/-HTML-CSS-JavaScript--

https://github.com/ningguoxu/-HTML-CSS-JavaScript--/blob/main/HTML要点.md