HTML笔记——千锋Ghost老师_2019前端入门

不知-_

已于 2022-05-11 15:02:20 修改

阅读量858

点赞数 2

分类专栏：前端基础笔记文章标签： html

于 2020-11-30 16:53:10 首次发布

本文链接：https://blog.csdn.net/http____/article/details/108248394

版权

本文是HTML5的基础教程，介绍了HTML的基本结构和属性，包括Web前端三大核心技术，HTML的定义和标记，VSCode编辑器的快捷操作。讲解了标题、段落、文本修饰、图片、链接、表格、表单、列表等元素的使用，并提到了文件路径、注释、特殊符号等内容，是前端新手入门的良好参考资料。

摘要由CSDN通过智能技术生成

了解 VSCode 编辑器

Shift + Alt + ↓：快速复制该行内容到下一行
Alt + ↑或↓：将该行内容快速移动一行
Tab键：向后缩进
Tab + Shift：向前缩进
多光标：Alt + 鼠标左键
将光标快速移动到行首/行尾：Home/End，在笔记本上这两个键和方向键为同一个键，需要使用Fn+Home/End
一些快速输入的方法记录：
```
li{
     列表项$}*4
```

HTML基本结构和属性

Web前端三大核心技术

HTML：结构
CSS：样式
JavaScript：做与用户的交互行为

HTML：超文本标记语言

超文本：文本内容 + 非文本内容
标记：<***>
标记也叫“标签”，写法分为两种：
a) 单标签：< img>
b) 双标签：< head>< /head>
语言：编程语言

创建标签的快捷键：单词+Tab（先写一个单词，之后按下Tab键），编辑器就会自动识别完成标签的创建
标签可以上下排列，也可以组合嵌套
HTML5标签含义之元素周期表
标签的属性：来修饰标签的，设置当前标签的一些功能

初始代码

每个.html文件都有的代码叫做初始代码。
创建初始代码的方法：! + Tab（一要注意是英文状态下的!，二要注意保证文件名后缀是.html）

<!DOCTYPE html>     //文档声明：告诉浏览器这是一个html文档
<html lang="en">    // html文件的最外层标签。包裹着所有html标签代码。
<head>
    <meta charset="UTF-8">  // charset属性规定html文档的字符编码,防止乱码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     //设置网页的标题
</head>

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

HTML注释

写法
```

```
快速创建和删除注释的两种方法：
• Ctrl + /
• Shift + Alt + a

标题与段落

标题
• h标签，做的是网页内容中的标题
• 是双标签，分为六个等级，< h1>< /h1> … < h6></ h6>
• 在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签
• h5、h6标签在网页中不经常使用
段落
• p标签，也是双标签，< p>< /p>
• 每一个段落就是一个p标签，不要把所有段落都写在一个p标签里

文本修饰标签

强调：< strong>< /strong>、< em>< /em>
• strong标签会对文本进行加粗，strong的强调性更强
• em标签会对文本进行斜体，强调性稍弱
< sub>< /sub>、< sup>< /sup>：下标文本、上标文本
< del>< /del>、< ins>< /ins>：删除文本、插入文本，一般情况下，删除和插入配合使用

图片标签与图片属性

< img>，是一个单标签，向网页中嵌入一幅图像，具有以下属性：

src：必需的属性，是引入图片的地址
alt：必需的属性，当图片出现问题的时候，可以显示一段友好的文字代替图片，可以优化用户体验；图片没问题时不会显示该文字
title：可选属性，title其实是所有html标签都具有的一个属性，它表示一个提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来

最低0.47元/天解锁文章

不知-_

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML笔记——千锋Ghost老师_2019前端入门

B站千锋教育了解 VSCode 编辑器HTML基本结构和属性初始代码HTML注释标题与段落文本修饰标签图片标签与图片属性引入文件的地址路径跳转链接跳转锚点特殊符号列表标签表格表单表格表单组合div 与 span了解 VSCode 编辑器Shift + Alt + ↓：快速复制该行内容到下一行Alt + ↑或↓：将该行内容快速移动一行Tab键：向后缩进Tab + Shift：向前缩进多光标：Alt + 鼠标左键将光标快速移动到行首/行尾：Home/End，在笔记本上这两个键和方向键为同一个键，
复制链接

扫一扫