HTML笔记1

1,标签的写法

<strong>加粗内容</strong>

<hr>

2,快速生成骨架

![Tab]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>网页标题</title>

</head>

<body>

给用户看的

</body>

</html>

3,标签的关系

<html>

<head></head>

<body>

</body>

</html>

4,注释

Ctrl + Shift + P

<!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>

</body>

</html>

5,标题标签

<h1>...</h1>

<!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>

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

</body>

</html>

6,段落标签

<p>...</p>

<!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>

<p>主要用于文章段落,自动换行,有默认行距。</p>

<p>主要用于文章段落,自动换行,有默认行距。</p>

<p>主要用于文章段落,自动换行,有默认行距。</p>

</body>

</html>

7,换行与水平线标签

**...****<br>**换行

**...****<hr>**水平线

<!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>

第一行内容<br>

第二行内容<hr>

</body>

</html>

8,文本格式化标签

<strong>...</strong>加粗内容

<em>...</em>斜线

<ins>...</ins>下划线

<del>...</del>删除线

<!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><br>

<em>斜线em</em><br>

<ins>下划线ins</ins><br>

<del>删除线del</del>

</body>

</html>

9,图像标签

<img src="...">

<!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>

<img src="./57daeeab9de42fc2a66369c000b42709.jpg">

<img src="./lofter_1658434302302.jpg" >

</body>

</html>

10,图像标签_属性

alt="..."

title="..."

**width="..."**

**height="..."**

<!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>

<img src="./forget me not.pdf" alt="哎呀图片找不到了"><br>

<img src="./57daeeab9de42fc2a66369c000b42709.jpg" title="这是图片"><br>

<!-- 宽度高度为等比例缩放 -->

<img src="./57daeeab9de42fc2a66369c000b42709.jpg" width="100"><br>

<img src="./lofter_1658434302302.jpg" height="100">

</body>

</html>

相关推荐
下雪天的夏风3 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom14 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
青椒大仙KI1123 分钟前
24/9/19 算法笔记 kaggle BankChurn数据分类
笔记·算法·分类
Hello-Mr.Wang31 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
liangbm31 小时前
数学建模笔记——动态规划
笔记·python·算法·数学建模·动态规划·背包问题·优化问题
GoppViper1 小时前
golang学习笔记29——golang 中如何将 GitHub 最新提交的版本设置为 v1.0.0
笔记·git·后端·学习·golang·github·源代码管理
Charles Ray2 小时前
C++学习笔记 —— 内存分配 new
c++·笔记·学习
重生之我在20年代敲代码2 小时前
strncpy函数的使用和模拟实现
c语言·开发语言·c++·经验分享·笔记
我要吐泡泡了哦3 小时前
GAMES104:15 游戏引擎的玩法系统基础-学习笔记
笔记·学习·游戏引擎