## Emmet

是代码的简写方式，是快速编写HTML和CSS代码的有效方法。

## HTML

- 类选择器：标签名.类名
- id选择器：标签名#id名
- 同级标签：div+p
- 父子级标签：div>p
- 多个相同标签：span*3
- 有内容的标签：div{内容}

## CSS

大多数简写方式为属性单词首字母。


VS Code中使用Emmet语法快速编写HTML/CSS代码

## Chinese Podcasts

中文播客推荐，是一个GitHub项目仓库，收集分享一些中文播客节目，包括编程、设计、Vlog、音乐、访谈、播客等等，可以按照城市或者内容领域筛选查看，而且上面收集的中文播客等信息还在不断更新。

## 网站地址

Chinese Podcasts：[https://github.com/alaskasquirrel/Chinese-Podcasts](https://github.com/alaskasquirrel/Chinese-Podcasts)


中文播客推荐-Chinese Podcasts

一个网页由哪些部分组成（网页标准）？

- 内容（骨骼）- HTML
- 样式（皮肤）- CSS
- 行为（动作）- JavaScript

HTML+CSS=植物人，HTML+CSS+JavaScript=人。

HTML开发者平时用的最多的网站MDN：[https://developer.mozilla.org/zh-CN/docs/Web/HTML](https://developer.mozilla.org/zh-CN/docs/Web/HTML)

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言，超文本可以是图片、标题、链接、表格等等。

## HTML语法

- 标签和属性不区分大小写，推荐**小写**
- 空标签可以不闭合，比如input、meta
- 属性值推荐用**双引号**包裹
- 某些属性值可以省略，比如required、readonly

语义化标签：

- h1-h6：语义 (含义) 标题
- p：语义 (含义) 段落
- div：没有语义，span标签也是没有语义

语义化标签默认的效果不重要，语义最重要！

内容划分：

- header

- nav

- main

- article

- aside
- footer

## 标题

- h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
- h2~h6没有使用次数的限制
- h1~h6不能互相嵌套

## 文本格式化

为文本添加特殊格式，以**突出重点**。常见的文本格式：加粗、倾斜、下划线、删除线等。

工作中建议使用strong、em、ins、del（这些标签自带强调含义），不要使用b、i、u、s。

## 超链接

作用是点击跳转到其他页面。

- 跳转到本地文件，用相对路径
- target="_blank"新窗口跳转页面
- href="#"表示空连接，不会跳转

## 多媒体标签

### 音频

<audio src="./preview.mp3" controls loop autoplay></audio>在HTML5中，如果属性名和属性值完全一样，可以简写为一个单词。

- controls：显示音频控制面板
- loop：循环播放
- autoplay：自动播放（浏览器一般会禁用自动播放）

### 视频

<video src="./preview.mp4" controls loop muted autoplay></video>muted：静音播放，想要自动播放，必须有muted属性。

## 列表

- 有序列表（ordered list）
- 无序列表（unordered）
- 自定义列表（definition list）

### 自定义列表

dt是自定义列表的标题，dd是自定义列表的描述/详情。 <dl> <dt>服务中心</dt> <dd>申请售后</dd> <dd>联系方式</dd> </dl>

## 表格

<table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> <tr> <td>张三</td> <td>100</td> <td>120</td> </tr> <tr> <td>总结</td> <td>班级第一</td> <td>全市第一</td> </tr> </table>tr：行，th：表头单元格，td：内容单元格。

### 表格结构标签

用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰，了解即可，一般不用。 <table border="1"> <caption> 表格标题 </caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>100</td> <td>120</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>班级第一</td> <td>全市第一</td> </tr> </tfoot> </table>

### 合并单元格

rowspan：跨行合并，colspan：跨列合并。 <table border="1"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>100</td> <td rowspan="2">120</td> <td>220</td> </tr> <tr> <td>李四</td> <td>101</td>  <td>221</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>班级第一</td> <td colspan="2">全市第一</td>  </tr> </tfoot> </table>

## 字符实体

作用是在网页中显示预留字符。

- 空格：
- 小于号：<
- 大于号：>

字符实体官方列表：[https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)

## input

### list属性

<input list="countries" /> <datalist id="countries"> <option>USA</option> <option>Canada</option> <option>Mexico</option> </datalist>

HTML5基础知识学习笔记

## PyDebloatX

是一款开源用于卸载Windows 10默认程序工具Python GUI，帮助Windows 10 用户卸载Windows系统预装的应用程序，工具非常直观简洁，只需点击几下即可卸载应用程序，而且该工具不会破坏操作系统，所有列出的应用程序都可以通过Microsoft Store重新安装，也不需要提升管理员权限即可运行，也不保存注册表项，对小白非常友好。

## 下载地址

官网：[https://pydebloatx.com/](https://pydebloatx.com/)

GitHub地址：[https://github.com/Teraskull/PyDebloatX/](https://github.com/Teraskull/PyDebloatX/)


PyDebloatX-开源卸载Windows 10默认程序工具

## 就诊问问

一个关于医疗问题的搜索引擎，是由冯大辉的无码科技出品，可以用它来查询相关医疗知识。理解你的健康医疗问题，查找全网专业医疗信息，整合线上线下资源，通过智能分析、匹配和甄选，为用户找到精准、有效、优质的答案。支持疾病、药品、医院、医生等常用医疗场景的搜索查询，致力于提供简洁可信的医疗信息内容。

## 网站地址

就诊问问：[https://ask.nocode.com/](https://ask.nocode.com/)


就诊问问-在线医疗搜索引擎

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。