600字范文 > 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程

【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程

时间：2024-06-06 16:06:22

学习视频来源：哔哩哔哩弹幕网（/video/BV1XJ411X7Ud?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click）

1. 课程介绍

客户端形式：图形化界面C/S(client/server)、网页B/S(browser/server）

网页相比具有如下优点：不需要安装、无需更新、跨平台

网页中所需语言：HTML、CSS、JavaScript

2. 网页简史

蒂姆·伯纳斯·李–万维网的发明人

第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html

前端工程师负责编写网页源代码，而浏览器负责将网页渲染成我们想要的样子

万维网联盟（W3C）的出现为了制订网页开发标准，以使同一个网页在不同的浏览器中有相同的效果

W3C标准：结构（HTML）：描述页面的结构、表现（CSS）：控制页面中元素的样式、行为（JavaScript）：响应用户操作

3. HTML简介

HTML（Hypertext Markup Language）超文本标记语言，HTML使用标签的形式来标识网页中的不同组成部分，所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

新建一个网页：用左下角小娜搜索notepad，在里面任意添加内容，另存为index.html，这样在桌面上打开就是一个网页。index.html

注意：暂时不要从桌面右键新建记事本，因为这样可能会出现问题。因为这样创建的话，会附带拓展名，并且有的时候拓展名不可见

4. 编写你的第一个网站

在网页中添加标签，而标签的作用就是标识出网页中不同的内容。

标签有开始<…>，有结束</…>，开始与结束之间放的是标签体

<html><head><title>哈哈，我在哪出现？</title></head><body><h1>回乡偶书（二首）</h1><h2>其一</h2><h2>贺知章</h2><p>少小离家老大回，</p><p>乡音无改鬓毛衰。</p><p>儿童相见不相识，</p><p>笑问客从何处来。</p></body></html>

5. 安装notepad++

并没有找到视频当中的官网，只找到这样一个下载地址：https://notepad-plus.

李立超老师的个人主页：

6. 自结束标签和注释

创建一个source（源码）的文件夹

自结束标签： or 、 or

HTML的注释：

开发中一定要养成良好的注释的编写注释的习惯，注释要求简单明了

HTML中的注释是多行注释，注释不能嵌套

7. 标签中的属性

在标签（开始标签或者自结束标签）中设置属性，属性是一个键值对结构（x=y），但是有的属性没有属性值。如果有属性值，属性值应该用引号引起来。

属性用来设置标签中的内容如何显示

属性和标签名或者其他属性应该使用空格隔开

<html><head><title>标签的属性</title></head><body><h1>这是我的<font color="red" size='9'>第三个</font>网页!</h1></body></html>

8. 文档声明

文档声明（doctype）：用来告诉浏览器当前网页的版本

html5的文档声明：<!doctype html> or <!Doctype HTML>

<!doctype html><html></html>

9. 关于进制

十进制：

-特点：满10进1-计数：0 1 2 3 ... 9 10 ...-单位数字：10个（0 1 2 3 4 5 6 7 8 9）

二进制：(计算机底层的进制）

-特点：满2进1-计数：0 1 10 11 100 101 ...-单位数字：2个（0 1）-扩展：所有数据在计算机底层都会以二进制的形式保存，可以将内存想象为一个由多个小格子组成的容器，每个小格子中可以存储一个0或者一个1，这一个小格子在内存中被称为1位（bit）8 bit = 1byte（字节）1024 byte = 1 Kb（千字节）1024 kb = 1 Mb（兆字节）1024 Mb = 1 Gb1024 Gb = 1 Tb1024 Tb = 1 Pb

八进制：（很少用）

-特点：满8进1-计数：0 1 2 3 4 5 6 7 10 11 12 ... 17 20-单位数字：8个（0 1 2 3 4 5 6 7）

十六进制：（一般显示一个二进制数字时，都会转换为十六进制）

-特点：满16进1-计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 ... 1F 20 ...-单位数字：16个（0 1 2 3 4 5 6 7 8 9 A B C D E F)

10. 字符编码

编码：将字符转换为二进制码的过程

解码：将二进制码转换为字符的过程

字符集：编码和解码所采用的规则

乱码问题：编码和解码所采用的字符集不同

常见的字符集：

ASCII：7位、128个

ISO88591：8位、256个

GB2312：

GBK：

UTF-8：万国码

可以通过meta标签来设置网页的字符集，避免乱码问题

<!doctype html><html><head><meta charset='utf-8'></head><body></body></html>

11. 文档的使用

<!doctype html><html><head><meta charset='utf-8'><title>网页的标题</title></head><body><h1>网页的一级标题</h1></body></html>

视频十四分钟之后的过程稍显复杂，且最终取得的内容为英文，建议直接访问：HTML元素参考（/zh-CN/docs/Web/HTML/Element）

12. VSCode的安装

在左侧第五个Extensions里面搜索Chinese，install微软的官方汉化包，重启就可以显示汉语。

在…html的文件中，！+tab，可以快速生成最完整的HTML格式

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body></html>

注释的快捷键：Ctrl+/

13. 配置liveServer

在Extensions中搜索liveServer并安装，在代码界面右键选择open with Live Server，就可以实时看到网页的变动，只需要Ctrl+S保存即可。

打开设置，将autoSave调至afterdelay，时长可以选择500ms

14. 实体

在HTML中，有时一些特殊的显示会被浏览器错误解析，比如说多个空格解析为一个空格，比如字母两侧的大于和小于号。如果我们需要在网页中书写这些特殊符号，则需要使用HTML中的实体（转义字符）。

实体的语法：&实体的名字;

 空格

>>大于号

<<小于号

©©版权符号

更多实体表示获取方法：W3school /html/html_entities.asp

15. meta标签

<meta charset="UTF-8"><meta name="keywords" content="HTML5,前端,CSS3"><meta name="description" content="这是一个非常不错的网站"><meta http-equiv="refresh" content="3;url=">

keywords表示网页的关键字，可以同时指定多个关键字，关键字之间使用","隔开

description用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中

title标签的内容会作为搜索结果的超链接上的文字显示

http-equiv="refresh"将页面重定向到另外一个网站，例子中的意思就是三秒后跳转到百度

16. 语义化标签

在网页中，HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式

标题标签：h1~ h6 一共有六级标题，从h1~h6重要性递减，h1最重要，h6最不重要

h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1，一般情况下标题标签只会使用到h1~h3

在页面中独占一行的元素称为块元素（block element）

p标签表示页面中的一个段落，p也是一个块元素

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中

<hgroup><h1>回乡偶书（二首）</h1><h2>其一</h2></hgroup>

em标签用于表示语音语调的一个加重

strong标签表示强调重要内容

br标签表示页面中的换行

<p>今天天气<em>真</en>不错!</p><p>你今天必须<strong>完成作业</strong>!</p><br>

在页面中不会独占一行的元素称为行内元素（inline element）

17. 块和行内

块元素（block element）：在网页中一般通过块元素来对页面进行布局

行内元素（inline element）：行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，而p元素中不能放任何的块元素

浏览器在解析网页时，会自动的对网页中不符合规范的内容进行修正，比如：

-标签写在了根元素的外部-p元素中嵌套了块元素-根元素中出现了除head和body以外的子元素... ...

可以使用F12后选择Elements检查代码在内存中的运行状况

18. 语义化标签

布局标签（结构化语义标签）

header表示网页的头部

main表示网页的主体部分（一个页面只会有一个main）

footer表示网页的底部

nav表示网页中的导航

aside和主体相关的其他内容（侧边栏）

article表示一个独立的文章

section表示一个独立的区块，上边的标签都不能表示时使用section

div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span是一个行内元素，没有任何的语义，一般用在网页中选中文字

<header></header><main></main><footer></footer><nav></nav><aside></aside><article></article><section>,</section><div></div><span></span>

19. 列表

在HTML中也可以创建列表，HTML列表一共有三种：1.有序列表 2.无序列表 3.定义列表，且列表之间可以互相嵌套

有序列表：使用ol标签来创建有序列表，使用li表示列表项

<ol><li>行为</li><li>表现</li><li>结构</li></ol>

无序列表：使用ul标签来创建无序列表，使用li表示列表项

<ul><li>行为</li><li>表现</li><li>结构</li></ul>

定义列表：使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl><dt>结构</dt><dd>结构表示网页的结构，结构用来规定网页中那里是标题，哪里是段落</dd><dd>... ...</dd><dd>... ...</dd></dl>

20.超链接简介

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

使用a标签来定义超链接，同时a标签也是一个行内元素，但是在a标签中可以嵌套除它自身外任何的元素

a标签的属性：

-href指定跳转的目标路径-值可以是一个外部网站的地址-也可以写一个内部页面的地址（如果与当前.html文件在同一个目录下可以直接用命名来查找）

<a href="">超链接</a>

21. 相对路径

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，而相对路径都会使用.或…开头

./表示当前文件所在目录

…/表示当前文件所在目录的上一级目录，并且可以多次使用，…/…/表示返回上上一级目录

./可以省略不写，如果不写./也不写…/则就相当于写了./

22. 超链接的其他用法

目标：不覆盖原网页，在新的标签页中打开超链接中的网页

target属性：用来指定超链接打开的位置

可选值：_self 默认值在当前页面中打开超链接_blank 在一个新的页面中打开超链接

可以直接将超链接的href属性设置为# ，这样点击超链接以后，页面不会发生跳转，而是转到当前页面顶部的位置。在开发中可以将# 作为超链接的展位符号使用。

也可以使用javascript:;来作为href的属性值，此时点击这个超链接什么也不会发生。

也可以跳转到页面的指定位置，只需将href属性设置为 # 目标元素的id属性值

id属性：唯一不重复的。每一个标签都可以添加一个id属性，id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

<a href="" target="_self">超链接</a><a href="" target="_blank">超链接</a><a href="#bottom">go to the bottom</a><a id="bottom" href="#">return to the top</a><a href="javascript:;">this is a new hyperlink</a>

23. 图片标签

图片标签用于向当前页面中引入一个外部图片。使用img标签来引入外部图片，同时img标签是一个自结束标签。img这种元素属于替换元素（介于块元素和行内元素之间），具有两种元素的特点。

属性：

src属性指定的是外部图片的路径（相对路径，绝对路径皆可）alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示。但是更重要的作用是，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。width 图片的宽度（单位是像素），宽度和高度中如果只修改了一个，另外一个会等比例缩放height 图片的高度（单位是像素）

24. 图片的格式

jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。

gif：支持的颜色比较少，支持简单透明，支持动图。适合表示颜色单一图片和动图。

png：支持的颜色丰富，支持复杂透明，不支持动图。表示颜色丰富，复杂透明的图片。

webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。它具备其他图片格式的所有优点，而且文件还特别小。缺点：兼容性不好

base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片。一般都是一些需要和网页一起加载的图片才会使用。

效果一样，用小的；效果不一样，用效果好的。

25. 内联框架

内联框架（iframe）：用于向当前页面中引入一个其他页面

src：指定要引入的网页的路径frameborder：指定内联框架的边框

<iframe src="" frameborder="0"></iframe>

26. 音视频播放

audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下是不允许用户自己控制播放停止的。

属性：

controls--是否允许用户控制播放autoplay--音频文件是否自动播放loop--音频是否循环播放

<audio src="audio.mp3" controls autoplay></audio><audio controls><source src="audio.mp3"><source src="audio.ogg"> <embed src="audio.mp3" type="audio/mp3" width="200" height="100"></audio>

使用video标签来向网页中引入视频文件

<video controls><source src="video.webm"><source src="video.mp4"><embed src="video.mp4" type="video/mp4"> </video>

27. CSS简介

CSS：层叠样式表。网页实际上是一个多层的结构。通过CSS可以为网页的每一层来设置样式，而最终我们能看到的是网页最上边的一层。总之一句话，CSS可以用来设置网页中元素的样式。

使用CSS来修改元素的样式。

第一种方式（内联样式/行内样式）：在标签内部通过style属性来设置元素的样式

问题：使用内联样式只能对一个标签生效，如果希望影响到多个元素就必须在每个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，十分麻烦。注意：开发时绝对不要使用内联样式

<p style="color: red;font-size: 30px;">少小离家老大回，乡音无改鬓毛衰</p>

28. CSS编写的位置

第二种方式（内部样式表）：将样式编写到head中的style标签里面。然后通过CSS选择器来选中元素并为其设置各种样式。可以同时为多个标签设置样式，并且修改时只需修改一处就可全部应用。内部样式表更加方便对样式进行复用。

问题：内部样式表只能对一个网页起作用，它里面的内容不能跨页面进行复用

<head><meta charset="UTF-8"><title>Document</title><style>p{color: purple;font-size: 50px;}</style></head>

第三种方式（外部样式表）：可以将CSS样式编写到一个外部的CSS文件里，然后通过link标签来引入外部的CSS文件。

<link rel="stylesheet" href="style.css">

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同的页面之间进行复用。

将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

29. CSS的基本语法

在内部样式表中，style标签的区域是一个特殊的区域，是属于CSS的区域是与HTML隔离的，HTML的语法在这里不再适用，需要使用CSS的语法。

CSS中的注释：/* */

CSS的基本语法：选择器+声明块

选择器：通过选择器可以选择页面中的指定元素，比如p的作用就是选择页面中所有的p元素

声明块：通过声明块来制定要为元素设置的样式，声明块由一个个的声明组成，声明是一个键值对结构，一个样式名对应一个样式值，名和值之间用冒号连接，用分号结尾

30. 常用选择器

元素选择器：

作用：根据标签名来选中指定的元素语法：标签名{ }例子：p{ } h1{ } div{ }

id选择器：

作用：根据元素的id属性值选中一个元素语法：# id属性值{ }例子：#box{ }， #red{ }

class是一个标签的属性，它和id类似，不同的是class可以重复使用。还可以同时为一个元素指定多个class属性，多个class之间用空格隔开

类选择器（class选择器）：

作用：根据元素的class属性值选中一组元素语法：.class属性值{ }

通配选择器：

作用：选中页面中的所有元素语法：*{ }

31. 复合选择器

交集选择器

作用：选中同时符合多个条件的元素语法：选择器1选择器2...选择器n{ }注意：交集选择器如果有元素选择器，必须使用元素选择器开头

选择器分组（并集选择器）：

作用：同时选择多个选择器对应的元素语法：选择器1，选择器2，选择器3，...，选择器n{ }

32. 关系选择器

父元素：直接包含子元素的元素叫做父元素

子元素：直接被父元素包含的元素是子元素

祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是他的祖先元素

后代元素：直接或间接被祖先元素包含的元素叫做后代元素，一个元素的子元素也是后代元素

兄弟元素：拥有相同父元素的元素称为兄弟元素

子元素选择器：

作用：选中指定父元素的指定子元素语法：父元素>子元素{ }

后代元素选择器：

作用：选中指定元素内的指定后代元素语法：祖先后代{ }

兄弟元素选择器：

1.作用：选择下一个兄弟语法：前一个 + 后一个2.作用：选择下边所有的兄弟语法：兄 ~ 弟

33. 属性选择器

[ 属性名 ]选择含有指定属性的元素

[ 属性名=属性值 ]选择含有指定属性且含有指定属性值的元素

[ 属性名^=属性值 ] 选择属性值以指定值开头的元素

[ 属性名$=属性值 ] 选择属性值以指定值结尾的元素

[ 属性名*=属性值 ] 选择属性值中含有指定值的元素

34. 伪类选择器

伪类（不存在的类，特殊的类）用来描述一个元素的特殊状态，比如：第一个元素，被点击的元素，鼠标移入的元素…

伪类一般情况下都是使用冒号：开头

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child() 选中第n个子元素

特殊值：n第n个n的范围0到正无穷2n 或 even表示选中偶数位的元素2n+1 或 odd表示选中奇数位的元素

以上这些伪类是根据所有的子元素进行排序的。

:first-of-type

:last-of-type

:nth-of-type

这几个伪类的功能和上述的类似，不同点是他们在同类型元素中排序

:not( ) 否定伪类

将符合条件的元素从选择器中去除

35. 超链接的伪类

:link 用来表示没访问过的连接

:visited 用来表示访问过的连接，由于隐私的原因，所以visited这个伪类智能修改链接的颜色

:hover 用来表示鼠标移入的状态

:active 用来表示鼠标点击

36. 伪元素

伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

::first-letter 表示第一个字母

::first-line 表示第一行

::selction 表示选中的内容

::before 元素的开始

::after 元素的结束

-before和after必须结合content属性使用

div::before{content:'abc';color: red;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。