【html】基础(一)

本专栏内容为:前端专栏 记录学习前端,分为若干个子专栏,html js css vue等
💓博主csdn个人主页:小小unicorn

⏩专栏分类:js专栏

🚚代码仓库:小小unicorn的代码仓库🚚

🌹🌹🌹关注我带你学习编程知识

目录

什么是html?

html是超文本标记语言。

  • 超文本:文本,声音,图片,视频,表格等等...
  • 标记:由许许多多的标签组成

而我们的html页面是运行在浏览器上的。

VScode环境搭建

编写环境由很多,在这里我们还是推荐搭配vscode。

首先安装:

我们直接在官网下载vscode即可。

下载好后。新建一个文件夹,并在目录下常见后缀为html的文件:

然后呢,为方便我们写代码更方便,我们可以安装三个插件:

第一个:

第二个:

第三个:

html结构

第一个html页面

首先打开我们的记事本,并在记事本编写hello world,注意保存时将后缀保存成html的形式:

我们点击他:

我们看到,他在网页了打印出来了我们刚写进去的内容。

显然这个写法是不标准的,没有标签啊。

html文件结构

html 复制代码
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>

完整的代码应该是这样的。但是这里面的标签到底是什么意思呢?我们一个一个解释

  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性.
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题.

其中标签又可以分为单标签和双标签,我们标签满足一个结构,DOM树,DOM 是 Document Object Mode (文档对象模型) 的缩写.也可以说所有的标签都是html的子标签,而我们的head和body标签可以理解他们是兄弟标签,每一个标签就相当于是一个对象,程序员可以通过代码拿到这些对象,拿到之后就可以对这些对象进行增删查改。

接下来我们对笔记本里面的内容进行修改,将我们的标签也写上:

会发现跟之前结果是一样的。

我们按一下F12,调出开发者模式,会发现源码跟我们一样。

快速生成代码框架

我们用vscode写代码时,我们可以

直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架

看这个框架里面:

常见标签

在之前我们知道了html标签,头标签,接下来我们将学习几个常用的标签:

注释标签

注释不会显示在界面上. 目的是提高代码的可读性

html 复制代码
<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释.

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我是一个注释 -->
</body>
</html>

我们运行一下:

会发现什么都没有,我们调出开发者模式

注释原则:

  • 要和代码逻辑一致.
  • 尽量使用中文.
  • 不要传递负能量.

标题标签

有六个, 从 h1 - h6. 数字越大, 则字体越小.字体越来越细

html 复制代码
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

结果:

段落标签

我们先在网上找一段话:

html 复制代码
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
   素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css
     中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
   的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的
    移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
        实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,
     苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着
     同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是
        这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五
     花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。
还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中
     1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于
        这点,在文章后面的部分还会讲到
   在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的
     定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 /
    独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该
    设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,
   也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在
     些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。

直接运行:

发现很乱,没有层次,我们加上段落标签:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我是一个注释 -->
    unicorn
    <h1>unicorn</h1>
    <h2>unicorn</h2>
    <h3>unicorn</h3>
    <h4>unicorn</h4>
    <h5>unicorn</h5>
    <h6>unicorn</h6>
    <p>css中的1px并不等于设备的1px</p>
    <p>在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
        素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css
        中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
        的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的
        移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
        实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,
        苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着
        同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是
        这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五
        花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。</p>
    <p>还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中
        1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于
        这点,在文章后面的部分还会讲到</p>
    <p>在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的
        定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 /
        独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该
        设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,
        也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在
        些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。</p>
</body>
</html>

这样层次感就更明显了

注意:

  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
  • 自动根据浏览器宽度来决定排版.
  • html 内容首尾处的换行, 空格均无效.
  • 在 html 中文字之间输入的多个空格只相当于一个空格.
  • html 中直接输入换行不会真的换行, 而是相当于一个空格'

换行标签

br 是 break 的缩写. 表示换行

  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样带有一个很大的空隙.
  • < br/> 是规范写法. 不建议写成 < br>

直接想在哪换行,加在后面即可。

格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

图片标签

img 标签必须带有 src 属性. 表示图片的路径.

html 复制代码
<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.

示例1

使用相对路径: 创建一个 1 目录和 html 同级, 并放入一个 rose2.jpg

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
</body>
</html>

运行结果:

示例2:

第二种相对路径:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
    <img src="./test/2.png">
</body>
</html>

运行结果:

示例3

第三种相对路径:

访问上级目录的:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
    <!-- <img src="./test/2.png"> -->
    <img src="../3.png">
</body>
</html>

示例4

第一种绝对路径:

使用绝对路径1: 最好使用 / , 不要使用 \

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="Z:/Code/html/1/1.png">
</body>
</html>

示例5

第二种绝对路径:

使用绝对路径2: 使用网络路径

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
</body>
</html>


img 标签的其他属性

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
    失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
html 复制代码
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">

注意:

  1. 属性可以有多个, 不能写到标签之前
  2. 属性之间用空格分割, 可以是多个空格, 也可以是换行
  3. 属性之间不分先后顺序
  4. 属性使用 "键值对" 的格式来表示.

超链接标签a

href: 必须具备, 表示点击后会跳转到哪个页面

html 复制代码
<a href="http://www.baidu.com">百度</a>

外部链接: href 引用其他网站的地址

代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

内部链接: 网站内部页面之间的链接. 写相对路径即可.

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
    <a href="http://www.baidu.com">百度</a><br>
    <a href="1_1.html">点我跳转到 1.html</a>
</body>
</html>

空链接: 使用 # 在 href 中占位.

html 复制代码
<a href="#">空链接</a>

点空连接没有反应

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
    <a href="http://www.baidu.com">百度</a><br>
    <a href="1_1.html">点我跳转到 1.html</a>
    <a href="#">空链接</a>
    <a href="http://www.sogou.com">
        <img src="./1.png" title="点击跳到搜狗">
    </a>
</body>
</html>


相关推荐
QGC二次开发几秒前
Vue3:快速生成模板代码
前端·javascript·vue.js·前端框架·vue
天涯学馆3 分钟前
Svelte Store与Vuex:轻量级状态管理对比
前端·vue·vuex·svelte
时光书签40 分钟前
通过http地址下载文件
服务器·前端·c#·asp.net
专注VB编程开发20年1 小时前
如何保存网站CSS和JS中的图片?网页另存为本地显示不正常
前端·javascript·css
丶重明1 小时前
【2024】前端学习笔记9-内部样式表-外部导入样式表-类选择器
前端·笔记·学习
又写了一天BUG2 小时前
关于在vue2中给el-input等输入框的placeholder加样式
前端·javascript·vue.js
秋月霜风2 小时前
Web爬虫应用功能及需求设计
前端·爬虫·python
蜡笔小新星2 小时前
前端框架对比和选择
前端·javascript·vue.js·经验分享·学习·前端框架
LE...2 小时前
HTML元素居中
css·html·css3
一直在学习的小白~2 小时前
中间添加一条可以拖拽的分界线,来动态调整两个模块的宽度
前端·javascript·react.js