【前端学习之HTML&CSS】-- HTML第三篇 -- 首个网页

生如昭诩

已于 2022-03-13 12:07:38 修改

阅读量449

点赞数 1

分类专栏：前端学习文章标签： css 前端 html vscode 网页设计

于 2022-02-28 15:48:19 首次发布

本文链接：https://blog.csdn.net/lc1852109/article/details/123184141

版权

前端学习专栏收录该内容

32 篇文章 2 订阅

订阅专栏

本文介绍了HTML和CSS的基础知识，包括HTML元素、属性、注释和元素嵌套，以及标准文档结构，如文档声明、HTML根元素、head和body元素。通过Emmet插件快速生成代码，并讲解了meta和img等空元素的使用。下一篇文章将讨论语义化概念。

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

【前端学习之HTML&CSS】-- 第三篇 – 首个网页

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章主要简单的介绍了简单网页的结构与生成。
图片来自于网络

快捷键

1) Emmet插件

可用于自动生成HTML代码片段：
例如：！ + tab == 生成标准格式HTML；
    html：5 + tab == 生成标准格式HTML；

2) 常用快捷生成

1* ctrl + /或者？ == 注释快捷键；
2* a + tab == 生成超链接；
3* ctrl + d == 依次选中相同元素；
4* ctrl + enter == 直接跳转到下一行；
   ctrl + shift + enter == 直接跳转到上一行；

基本内容

1) 注释

注释为代码的阅读者提供帮助，注释不参与运行；在HTML中，注释使用如下格式书写

<!-- 注释内容（可多行） -->

2) 元素（element）

<title>Document</title>
<a href="https://space.bilibili.com/123883164">昭诩</a>

元素 = 起始标记（begin tag）+ 结束标记（end tag）+ 元素内容 + 元素属性

1* 起始标记和结束标记

确定元素的名称，且二者除/外必须一样，表明该元素是一个对应字母的元素，如a元素、title元素，不同元素拥有不同功能；

2* 元素内容

页面要显示的内容，如document–标题，昭诩–页面中间的超链接名称；

3* 元素属性（起始标记中）

非必需（如标题），用来描述额外信息（如超链接要跳转的地址）；
元素属性 = 属性名（如href） + 属性值（可用双引号包围）【属性可有多个，中间用空格间隔开即可】
eg. <a href="https://space.bilibili.com/123883164" title="昭诩主页">昭诩</a>
此处title指鼠标放置到链接位置处显示的内容；

元素属性分类：
局部属性：某些元素特有的属性，如href；
全局属性：所有元素通用，如title，表示所有内容鼠标放置时显示的内容；

4* 空元素

空元素只有起始标记，例如img、meta元素；
meta元素常用于head元素中,eg.<meta charset="UTF-8">;
img元素用于插入图片,src–图片链接（右键图片复制图片链接）
eg.<img src="https://img2.baidu.com/it/u=3973001582,3969785935&fm=253&fmt=auto&app=138&f=JPEG?w=534&h=500" alt="">

空元素的两种写法：

<meta charset="UTF-8">
<meta charset="UTF-8" />

3) 元素嵌套

元素不能相互嵌套

eg. <div><p></div></p>

元素种类

a包含了b--a是b的父元素，b是a的子元素；
a包含了b，b包含了c--a是c的祖先元素，c是a的后代元素；
a包含b和c--b和c是兄弟元素，即拥有同一父元素的子元素；

标准文档结构

1) 文档声明

<!DOCTYPE html>

作用：告诉浏览器，当前文档使用的HTML标准是HTML5,没有声明浏览器会进入怪异渲染模式；

2) HTML根元素

<html lang="en">
</html>

根元素：一个页面只能有一个，并且该元素是所有其他元素的父元素或者祖先元素；
HTML5版本中没有强制要求书写该元素，且同样满足标准

lang属性：language，全局属性，表示该元素内部使用的文字是哪一种自然语言书写而成的，可以单独给某一个元素配置语言；
en–English、cmn-hans–中国大陆官方用语-简体中文汉字；

3) head元素

<head>
</head>

1* 定义：文档头

文档头内部的内容，不会显示到页面上；（必须作为html的子元素存在）

2* meta元素

空元素，表示文档的元数据（附加信息），通过该元素告诉网页的额外信息，不用来显示；

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>

第一行：charset（meta特有）--指定网页内容编码--UTF-8（文字、图片与二进制数字对应的关系--字符编码，UTF-8是Unicode编码的一个版本）
第二行：用于适配手机端，网页的视口宽度设置为设备宽度；
第三行：告诉浏览器，如果是IE，使用EDGE内核；
title--网页标题--浏览器上方显示；