前端学习（一）

最新推荐文章于 2023-08-27 23:52:32 发布

小芒QVQ

最新推荐文章于 2023-08-27 23:52:32 发布

阅读量1k

点赞数 4

文章标签：前端 vscode html

本文链接：https://blog.csdn.net/qq_61662856/article/details/121453588

版权

走进前端

浏览器的组成

1.shell：外壳（控制界面）
2.core：内核（JS执行引擎，渲染引擎）
360，QQ没有自己的独定内核

主流浏览器

IE：Trident（许多网页只能在IE里运行）
Firfox：Gecko
Chrome：Webkit(之前)/Blink【支持W3C的最新标准】
Safari（苹果）：Webkit
Opera：Presto（已弃用）/Blink（现在）

版本和兼容性

-CSS3标准没有制定完成（有的代码不能识别）
-HTML5（目前使用）问题不大
-XHTML（以前的开发标准）：可以认为是html的一个版本（要求严格），完全符合xml的标准规范

扩展名决定了文件会被什么应用程序打开

md.markdown格式（记笔记）

编辑器

-Windows记事本
-VScode（现用，界面简洁，有很多插件）

var i=2;

快捷键

使用编辑器的好处：有智能提示，可以自动生成代码（由Emmet插件实现）

Emmet插件

自动生成HTML代码片段，VScode内置

注释（HTMl中）

为阅读者提供解释，注释不参与运行，如“超链接”

<!--注释内容-->

ctrl+/:加注释

元素

其他叫法：标签，标记
整体：元素

元素的组成

起始标记（begin tag）+结束标记（end tag）+元素内容+元素属性
eg：
a元素（超文本链接）：

<a href=""></a>

起始标记：

<a>

结束标记：

</a>

元素内容：
可以是图片文字

<a>元素内容</a>

元素属性（加在起始标记那里）

描述元素额外信息
属性名字+属性值
属性分类：
·局部属性：某些元素特有的属性
·全局属性：所有元素通用

·有些元素没有结束标记
这些元素叫空元素

元素的嵌套

元素可以嵌套，但是元素不能相互嵌套

相互嵌套理解：1212

父子元素祖先元素后代元素兄弟元素（拥有同一个父元素的元素）

标准的文档结构

HTML：页面，HTML文档

文档声明：告诉浏览器当前使用的HTML标准版本

<!DOCTYPE html>

不写文档声明的后果：
渲染结果和预想不一样，进入怪异渲染模式
根元素：

<html lang="en">

</html>

一个页面只能存在一个（类似C语言中的main函数），该元素是其他元素的的父元素或祖先元素

注意：HTML5标准中不强制书写html元素，不影响渲染

lang属性

language，是全局属性，表示元素内部（元素内容）使用的文字是使用哪一种自然语言书写（汉语，英语）而成的。选择哪一种语言会在有些时候触发浏览器的翻译功能和阅读功能。比如“cmn-hans”就会选择简体中文，上例（根元素）中选择英文。

head元素

必须作为html子元素出现

head元素：
文档头，里面的内容不会显示在网页里

<head>

</head>

关于meta元素

<meta>

文档的元数据：附加信息，额外的信息

<meta charset="UTF-8">

charset:指定网页内容编码（指定内容使用哪一套编码表）

（计算机工作原理）
计算机的两种状态：低压电（0_{2），高电压（2}5），低0高1；
计算机中只能用01表示数据，计算机中只能存储数字，文字和数字对应。
一种文字对应一个字符编码表
eg：
GB2312——简体中文
GBK—————繁体中文
本例中UTF-8是Unicode（万国码）的一个版本；

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

（用来适配手机端）

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

（用来适应IE浏览器，IE浏览器内核有问题）

网站标题：

<title>网页标题</title>

文档体body

<body>
    
</body>

要展示在网页上的元素

语义化

·这里我们要明白什么是语义化
·自从语义化之后元素跟样式是分开的

1.每个HTML元素都有具体的含义

a元素表示超链接
p元素：段落（两段之间带空行）
h1元素：一级标题

2.元素本身与展示效果无关

效果：文字的字体和大小等。
元素展示到页面中的效果应由css决定。

因为浏览器有自带默认的CSS样式，所以说每个元素都有默认样式，这也证明了元素的显示是由CSS决定。
选择什么元素，取决于内容的含义，而不是显示出的效果
比如是要为了一级标题来选择h元素，而不是因为需要加大加黑的字体而选择h元素。

为什么需要语义化

1.为了搜索引擎能够理解网页（SEO）

搜索引擎：百度，搜狗，谷歌；

搜索引擎工作原理：每隔一段时间搜索引擎就在互联网中抓取页面的源代码放在自己的数据库中，如果没有语义化引擎就不能识别（理解）你写的东西是什么意思。

2.为了让浏览器理解网页

比如阅读模式（只要正文），语音模式（有的元素不需要被读出来，有的元素读的音调不一样）

文本元素（和文本有关的元素：标题，段落等）

我们现在只是开发一个静态页面，可能之后后端人员会替换内容，再通过其它技术使之变成动态页面
·HTML5中支持的元素（百度搜索HTML5元素周期表）

·h（标题）

h1~h6：表示一级标题到六级标题

在使用h1*6>{一刀fu了你}+Tab后生成如下六个一级标题

    <h1>一刀fu了你</h1>
    <h1>一刀fu了你</h1>
    <h1>一刀fu了你</h1>
    <h1>一刀fu了你</h1>
    <h1>一刀fu了你</h1>
    <h1>一刀fu了你</h1>

$ 表示一个占位符，在每一次生成后会递增。比如使用h$*6+Tab后会生成如下递增的六个标题

    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

·p元素（段落）

知识扩展：
lorem：使用lorem+Tab后会生成一段文字（这里叫做乱数假文，即没有任何实际含义的文字，用来测试排版）

实际使用举例：输入p*6>lorem+Tab后生成如下六个里面全是假文的段落：

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos neque voluptatum consequuntur obcaecati excepturi voluptate, ea at, culpa nam, id rem. Vitae doloremque nobis, dolor fugit eligendi nam modi est?</p>
    <p>Perferendis enim non et numquam rem ducimus mollitia asperiores laboriosam debitis dolores sunt, hic placeat ex cum earum, deleniti molestias aperiam. Doloribus, animi fuga cum sint nesciunt architecto molestias rerum!</p>
    <p>Itaque totam ab repudiandae ratione adipisci, deserunt omnis fuga. Quod a possimus laboriosam, reprehenderit voluptate qui, repudiandae voluptas repellendus assumenda voluptatibus quia, aspernatur laudantium corporis aliquid necessitatibus ad illum. Nisi.</p>
    <p>Totam, libero officia! Odio placeat amet sed minima maiores eaque fugiat totam consequatur aspernatur? Dignissimos itaque nesciunt omnis, ex animi maxime odio, minima impedit aliquid dicta recusandae eveniet aut illo!</p>
    <p>Eaque alias laudantium deleniti eius odio dolorum! Omnis iste facilis distinctio animi libero suscipit vel fuga dolor, accusamus fugit quisquam iure consectetur incidunt laudantium unde ratione, dicta, culpa ex ut!</p>
    <p>Perspiciatis voluptatibus obcaecati aliquid molestiae, earum magnam ipsum dolorum necessitatibus. Recusandae optio dolores, hic eligendi voluptatem vitae. Totam dolorum vel amet, iusto quasi nostrum aperiam est modi, temporibus dignissimos cupiditate!</p>

lorem的多种用法

实际用法举例：输入p*6>lorem1+Tab后会生成六个各自只有一个假文单词的段落

    <p>Lorem.</p>
    <p>Velit.</p>
    <p>Consequuntur!</p>
    <p>Delectus.</p>
    <p>Fuga.</p>
    <p>Molestias.</p>

·span（无语义元素）

没有语义，仅用于样式设计，如果非得说span有语义，那span就表示的是一段文本
（ps：span在元素周期表里的解释是来放置其他东西的容器）

span的使用
实际举例使用：

<span style="color: red;">红色</span>

上例输出红色，即可证明span只参与了“红色”的颜色样式的设计。

知识补充：

某些元素（块级元素：独占一行，会换行）在显示时会占满（独占）一行，某些元素（行级元素：不会换行）不会；
【到了HTML5已经弃用这种块级/行级说法，最后一次使用是在HTML4.01时】

块级、行级是展示效果，所以到HTML5中弃用这种说法。根据W3C标准，一个元素代表的是什么含义而不是该代表的是展示效果。

·pre（预格式化文本元素）

空白折叠：在源代码中文本之间的连续空白字符（空格，回车，Tab），在页面显示时，会被折叠为一个空格字符；

例外：在pre元素中的内容不会出现空白折叠。

在pre元素内部出现的内容，会按照源代码格式显示在页面上，可以保持格式的一致。

该元素经常用于在网页中显示代码，因为代码有很多换行和缩进，需要保留源格式。

pre元素功能的本质：自带一个默认的CSS属性，因此per元素与文本的显示样式有关，这也很好的解释了在语义化后文本的样式与CSS有关。

pre元素可以看成是p元素加了一个CSS属性（具体如下）。

下面两段代码表示同样意思：

<p style="white-space:pre:">
var i=2;
if(i){
    console.log(i);
}
</p>

<pre>
var i=2;
if(i){
    console.log(i);
}
</pre>

所以严格来说不折叠空白实际上是CSS的功能。

-显示代码时，通常外面套用code元素将内容语义化，code表示代码区域。

表示跳转地址

分类：

1.普通链接，跳转地址；
2.跳转某个锚点（跳转到当前页面的不同位置）；
3.功能链接，点击后触发某个功能。

HTML实体

HTML实体也叫实体字符（HTML Entity）

实体字符通常用于在页面中现实一些特殊符号。

实体字符的两种表示形式：

1.&单词；
2.&#数字（数字就是ASCII码）；

实体字符举例：
-小于号：&lt；&#60；
-空格：&nbsp；
-版权符号：&copy；
-&符号：&amp；

·a元素（超链接元素）

<a href="">fu了你！QAQ</a>

作用效果来自href（hyper reference）属性

-锚链接

输入(h1>{第$点}+p>lorem10)*6+Tab后生成六个一级标题+六段乱数假文：

    <h1>
        第1点
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium, nisi.</p>
    </h1>
    <h1>
        第2点
        <p>Optio eos voluptatibus itaque magnam esse qui eum ut ad?</p>
    </h1>
    <h1>
        第3点
        <p>Earum officiis numquam quae nisi accusamus possimus error fugiat incidunt?</p>
    </h1>
    <h1>
        第4点
        <p>Eum impedit error ratione quis, modi dolores ipsum molestiae saepe?</p>
    </h1>
    <h1>
        第5点
        <p>Labore, deserunt error inventore vero asperiores esse facilis accusamus explicabo?</p>
    </h1>
    <h1>
        第6点
        <p>Blanditiis commodi non ducimus velit porro asperiores, veniam delectus aut?</p>
    </h1>

知识扩展：

id属性：全局属性（所有元素都有），表示元素在文档中的唯一编号，就像人的身份证编号。

添加超文本链接：

输入a*6>{第$点}+Tab后生成六个锚链接：

<a href="">第1点</a><a href="">第2点</a><a href="">第3点</a><a href="">第4点</a><a href="">第5点</a><a href="">第6点</a>

然后我们希望在运行后点击锚链接时页面能够跳转到“第$点”所在的位置,即用id属性将a与h关联起来。

接下来我们要进行添加id属性：

给h添加id属性：

<h id="NO.1">第1点</h>

给a添加锚点：

<a href="#NO.1">第一点</a>

这样就算是添加了锚链接（使用快捷生成方式可以提高工作效率）

锚链接本质上也是跳转，不过它不会跳出页面，因此也不会刷新页面，但是会改变地址。

知识拓展：

在页面末尾时放一个空锚点，点击之后会回到页面顶部。

<a href="#">第一点</a>

-功能链接（点击后触发某个功能）：

-执行JS代码：前缀-javascript：
-发送邮件：前缀-mailto:
写法实例：

<a href="mailto:3360284549@qq.com">点击后发送邮件给3360284549@qq.com</a>

-拨号：前缀-tel：

target属性（表示跳转窗口位置）

target的取值：

1._self：在当前页面中打开
2._blank：在新页面中打开

添加target属性：

<a href="http://douyu.com"_target="blank"title="这里是斗鱼">斗鱼直播</a>

路径（地址）的写法

站内资源和站外资源

站内资源：当前网页的资源（我们自己的东西）

站外资源：非当前网页的资源（别人的资源）

绝对路径&相对路径

站外资源：绝对路径

站内资源：相对路径

1.绝对路径的书写格式：

url地址（可以理解成绝对路径书写的一种方式）：

协议名：//主机名：端口号/路径

schema://host:port/path

协议名：http,https,file

主机名：域名，IP地址

本机的主机名是IP地址：

http://127.0.0.1:5500/

端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号是443。

2.相对路径（从当前位置出发）

以./开头，./表示当前资源所在的目录（可以理解为代码在哪个页面就是当前页面的目录）

可以书写. ./表示返回上一级目录

图片元素

本身是img元素

-img表示图片，是空元素

 <img src="" alt="">

src属性：source资源

alt属性：当图片资源失效时，将使用该属性的文字替代图片（当图片资源有效，不会显示）

img元素可以和a元素嵌套

和map元素的联用

map元素是img元素的唯一子元素

   <area shape="cirle" coords="x，y，r" href="地址" alt="">
    </map>

    <area shape="rect" coords="x（左上角），y（左上角），x（右下角），y（右下角）" href="地址" alt="">
    </map>

    <area shape="poly（多边形）" coords="各点坐标" href="地址" alt="">
    </map>

和figure元素联用

内容（元素，语段，标题等）

子元素（figcaption）
表示figure里面有标题

内容练习：

    <figure>
        <a target="_self"href="https://baike.baidu.com/item/%E5%88%9D%E9%9F%B3%E6%9C%AA%E6%9D%A5/8231955?fr=aladdin"title="miku酱">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201910%2F05%2F20191005174001_sytqf.thumb.700_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639747196&t=d2377dbd540b80691cfa40a4387c23e3" alt="初音未来">

        </a>
        <figcaption> <h1>初音ミク</h1></figcaption>
       
        <p>
            初音未来（ 初音ミク / Hatsune Miku ），是2007年8月31日由 Crypton Future Media 以雅马哈的 Vocaloid 系列语音合成程序为基础开发的音源库，音源数据资料采样于日本声优藤田咲。
2010年4月30日，发布初音未来6种不同声调的版本“初音未来Append”。2013年8月31日，初音未来英文版本同VOCALOID3一并发行。此外，初音未来还担任日本音乐团体Sound Horizon的演唱与合唱。
        </p>
        <a href="#">点击回到顶部</a>
    </figure>

多媒体元素

video 元素

<video controls="controls"src="./罗百万.mp4"></video>

播放控件controls
controls=“controls”

某些属性只有两种状态，要么不写，要么赋值自己元素名，这种元素叫布尔属性

布尔属性举例：

自动播放：autoplay=“autoplay”
静音播放：muted=“muted”
循环播放：loop=“loop”

audio 元素

和video完全一致

兼容性

1.旧版本不支持这两个元素
2.不同的浏览器支持的音频格式可能不一致

知识扩展
source
source 为媒介元素（比如 video 和 audio）定义媒介资源。

source 允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

<video controls="controls">
    <source src="./罗百万.mp4">
    <source src="./罗百万.webm">
    <p>
        你的浏览器不支持video元素，请下载最新浏览器
    </p>

列表元素

ol：order list有序列表

li：list item列表中的一项

ol的子元素只能是li

列表前面的序号可以用CSS控制

无序列表

把ol改成ul（undered list）

-无序列表常用于制作菜单

定义列表

通常用于一些术语的定义

dl（list），dt（title），dd（description）

容器元素

容器元素：该元素代表一块区域，内部用于放置其他元素。

div元素

没有语义，只是表示这里有一块区域

语义化容器元素

header：表示页头或者文章的头部

footer：通常用于表示页脚或者文章的尾部

article：通常用于表示整个文章，内部也可以使用header，footer

section：通常用于表示文章的一部分，比如段落。

aside：通常用于表示侧边栏

aside写了样式后才会显示在侧边

小芒QVQ

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫