Web软件开发学习记录1——HTML

╰半橙微兮° 2022-11-04 11:30 139阅读 0赞

### Web软件开发学习记录 ###

*  1.HTML
 *   *  web展示
     *  vscode 快捷键
     *  快速链接

> 仅作为学习记录

# 1.HTML #

**HTML**是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

**HTML** 不是一门编程语言，而是*一种用于定义内容结构的标记语言*。

web=HTML+CSS+JS+Angular+NestJs----（全栈开发）

http：超文本传输协议  
html：超文本标记语言 （双引号， 单引号留给JS）

URL：统一资源定位器，俗称网址  
webp格式： 减少文件大小

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70]  
**HTML 标签(HTML TAG)**

*  HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
 *  HTML 标签是**由尖括号包围的关键词**，比如 **< html >**
 *  HTML 标签通常是**成对出现**的，比如 **< b >** 和 **< /b >**
 *  标签对中的**第一个标签是开始标签，第二个标签是结束标签**
 *  开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

> HTML基础  
> HTML 标题（Heading）是通过< h1 > - < h6 > 标签来定义的  
> HTML 段落是通过标签 < p > 来定义的  
> HTML 链接是通过标签 < a > 来定义的  
> HTML 图像是通过标签 < img> 来定义的

**HTML的元素可以进行嵌套**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 2]  
以上内容皆来自[棋歌教学网][Link 1]，同时是我个人感觉比较重要的知识。更多教程可以参考学习[菜鸟教程-HTML][-HTML]

## web展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 3]

## vscode 快捷键 ##

格式化文档：shift+Alt+F  
live server：Alt+L Alt+O  
注释 ：CTRL+K+C （CTRL+K+U） shift+Alt+A - /\* \*/  
Ctrl+/ /

## 快速链接 ##

[HTML 速查列表][HTML]

[HTML 标签简写及全称][HTML 1]

网页目前实现的比较丑，但实现了基本的超链接和图片base64转换。

通过上手编辑写出web是一件很激情人心的事情。希望之后可以开发自己的网页。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70]: /images/20221023/eb71c8d6245b43bb9b2a6df0c8034933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 1]: /images/20221023/2d6ed0db96af4eeba164e6ac80732208.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 2]: /images/20221023/63589ee8e5a741dd964220b8989cc2d5.png
[Link 1]: http://qige.io
[-HTML]: https://www.runoob.com/html/html-intro.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 3]: /images/20221023/a6e04a6767f441b1afc97bdf1caf5eff.png
[HTML]: https://www.runoob.com/html/html-quicklist.html
[HTML 1]: https://www.runoob.com/html/html-tag-name.html