HTML学习 - 尤且's 小栈 - 认真的做些有意思的事

HTML学习ing

很久以前就想好好系统的学一下基础网页编程。
现在应该付诸行动了！
THANKS to 油油
我得到了一份不错的html教程，今天开始比较系统的学习
学习内容很简单，但是确实很充实/ 刚开始学，内容比较简单，体谅下。
果然，在感兴趣的东西上，学起来很舒服很畅快呢

点我进入网页笔记

学习笔记

1.Vscode编辑器使用（快捷键）

crtl + s ：保存   
crtl + a ：全选
crtl + z ：撤销
crtl + y ：前进
shift + end : 从头部选中此行
shift + home : 从尾部选中此行
shift + alt + ↓ : 快速复制一行(选中某段，快速复制)
alt + ↑或↓ : 快速移动一行(选中某段，快速移动此段)

tab : 快速缩进
tab + shift : 向前缩进
    Ps:代码快捷键 : 单词 + tab(<shift></shift>)
       html规范快捷 ：! + tab
    反正tab跟缩进和快捷有关

alt + 鼠标左键 : 多光标(一闪一闪的那个竖线)
crtl + d : 选中相同元素的下一个

2.网站开发

html : 结构
 CSS : 样式
  JS : 交互

3.HTML基本结构和属性?

HTML :超文本 标记语言

超文本:文本内容+非文本内容(图片、视频、音频等)标记:<单词>

语言:编程语言

标记也叫做标签:

<header>
<footer>

写法分成两种:

单标签
<header>

双标签
<header> </header>

创建标签的快捷键:单词+ tab键-> <单词>(既上面tab快捷键)  

    Ps:标签可以嵌套(例如:<div> <head> </head> </div> )

4.HTML初始代码?

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。

! + tab键:快速的创建html的初始代码

< DOCTYPE html>
    文档声明:告诉浏览器这是一个html文件

<html lang=" en"> html文件的最外层标签:包裹着所有html标签代码lang= ”en"表示是一个英文网站lang= ”zh-CN"表示个中文网站<head>

<meta charset="UTF-8">
    元信息:是编写网页中的一些赋值信息charset="UTF - 8”国际编码，让网页不出现乱码的情况

<title>Document</title>
设置网页的标题
</head>

<body>
显示网页内容的区域
</body>
</html>

8.HTML注释?
    写法:<!--注释的内容-->在浏览器中看不到，只能在代码中看到注释的内容。
    意义:
        1.把暂时不用的代码注释起来，方便以后使用。
        2.对开发人员进行提示。
    
    快捷添加注释与删除注释:
            1. ctrl + / 
            2. shift + alt + a

标题和段落
```
标题 : 双标签 : <h1>标题内容</h1>  ...  <h6></h6>
```
Ps: 在一个网页中，h1标题最重要，并且在一个.html文件中，只能有一个h1标签(h2/h3.../h6无限制)
```
段落 ： 双标签 : <p>段落内容</p>
```

文本修饰标签

强调->双标签; <strong></strong>、<em></em>

区别:
1.写法和展示效果是有区别的，一个加粗、一个斜体

strong(加粗)的强调性更强，em(斜体)的强调性稍弱。

下标 : <sub></sub>  (例如a的H2O的2)
上标 : <sup></sup>  (例如a的二次方的2)
删除文本 : <del></del>  (文本内容中间加一条划线)
插入文本 : <ins></ins>  (文本内容底部加一条线)

Ps ：一般删除文本和插入文本一起使用(管他呢)

7.图片标签

img ->单标签

src : 引入图片的地址。
alt :当图片出现问题的时候，可以显示一段友好的提示文字。title :提示信息(鼠标放在图片上的提示信息，直接在img标签里添加)
width、height : 图片的大小(直接在img单标签后面加入)
    例: <img src="图片地址" alt="图片失败反馈内容" width:="宽度(单位是像素)" height="高度(单位是像素)"

8.相对路径和绝对路径

"."表示在此目录下的路径
".."表示在上一级目录的路径
    例：若某一个图片在此目录下 则用./xxx.png
        若某一个图片在上一个目录 则用../xxx.png