web——web认知、html认知

小琛

已于 2022-05-29 15:59:27 修改

阅读量171

点赞数

分类专栏： web前端文章标签：前端 html vscode

于 2022-05-27 09:54:31 首次发布

本文链接：https://blog.csdn.net/qq_44745063/article/details/124979551

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

作者：小琛
欢迎转载，请标明出处

文章目录

什么是web标准

目的：再不同浏览器打开，页面效果一致。

为实现该目的，设定了web标准，web标准即内容由三大模块组成：

结构使用HTML：完成页面元素和内容的组合
表现使用CSS：完成页面样式的渲染，令页面更加优美
行为使用JavaScript：完成页面模型与页面交互

就像一只鸟，HTML画出了鸟的骨架，CSS为它增加了丰富且漂亮的羽毛，JS则令这个鸟能动起来

html入门

目的：对该语言有基本认知，可以完成一些简单的页面组合

骨架结构

基本骨架结构：html标签、head标签（title标签）、body标签

在vscode中，新建一个html文件，输入!(英文感叹号)，键盘敲击Tab，会自动生成一个框架。
在这里插入图片描述

标签排版

对于标签而言，有单标签和双标签，区分可采用以下原则：若该内容，需要确定头和尾，例如对某些字体加粗，要确定从哪个字开始到哪个字结束，为双标签；若某些操作，不需要自主确定头和尾。例如换行。则为单标签。

换行与水平线

两者均为单标签

换行： < br >
水平线：< hr >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行与水平线</title>
</head>
<body>
    这句话之后换行<br>
    这行下面加水平分割线
    <hr>
</body>
</html>

运行结果：
在这里插入图片描述

标题与段落

html中设定了六级标题，分别用
< h1>< /h1>
< h2>< /h2>
< h3>< /h3>
< h4>< /h4>
< h5>< /h5>
< h6>< /h6>
标题大小逐级递减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

在这里插入图片描述

段落的使用：< p> < /p>。标签中间插入文字，段落会实现自动换行。
插入字体后，使用快捷键Alt+z，可以实现自动换行，令代码美观

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试段落</title>
</head>
<body>
    <p>对于标签而言，有单标签和双标签，区分可采用以下原则：若该内容，需要确定头和尾，例如对某些字体加粗，要确定从哪个字开始到哪个字结束，为双标签；若某些操作，不需要自主确定头和尾。例如换行。则为单标签。</p>
    <p>下一个段落</p>
</body>
</html>

在这里插入图片描述

插入图片

在vscode中输入图片的英文：img之后会有 < img src=“” alt=“”>

属性	含义
src	图片的路径
alt	替换文本，当图片无法显示时，替换
title	提示文本，鼠标悬停图片，显示
width、height	图片的高、宽

src的路径可以为相对路径和绝对路径，一般使用相对路径
高和宽一般只设置一个，另一个自主生成，这样可以保证图片不扭曲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- src为路径，alt为替换文本(图片未加载) -->
    <!-- title为提示文本 width&height为宽高，一般设定一个，另一个自行生成 -->
    <img src="./1.jpg" alt="雷霆三少" title="雷霆三少" width="200">
    <hr>
    <img src="./2.gif" alt="刘星" title="刘星" height="100">
</body>
</html>

在这里插入图片描述

插入音视频

在vscode输入音视频的英文，audio、video之后：
< audio src=“”>
< video src=“”>

属性	含义
src	音视频的路径
controls	加入后，页面会有播放控制器
autoplay	自主播放
loop	循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="./周杰伦 - 听妈妈的话.mp3" controls autoplay></audio>
    <video src="./视频.mp4"></video>
</body>
</html>

网页间的链接

在vscode输入a，出现：< a href=“”>< /a>

属性	含义
href	路径
target	覆盖属性

href：路径可以为某一个网址的url，例如https://www.baidu.com，也可以为一个相对路径，例如该项目中的某一个html
target属性代表点击链接后，出现的网页会覆盖现在的网页还是新打开一个网页，默认为_self即覆盖，若要修改，则改为_blank

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=a, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- href为跳转地址 -->
    <a href="https://fanyi.baidu.com/?aldtype=16047#en/zh/video">跳转到百度</a>
    <br>
    <!-- traget属性：覆盖原网页还是新增网页，默认_self覆盖，_blank为新增 -->
    <a href="./图片.html" target="_blank">跳转到图片.html</a>
    <br>
    <a href="#">空链接</a>
    <a href=""></a>
</body>
</html>