文章目录
前言:博主的编译软件为VSCode,编译软件不同或许写的方法不同
1.认识HTML
HTML 指的是超文本标记语言( HyperText Markup Language)的简写
HTML 不是一种编程语言,而是一种描述网页的标记语言
HTML文档也叫做 web 页面
2.标签介绍
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
单标签:一般用于声明一些属性 eg: 告诉计算机其为HTML文件
双标签:决定范围 eg: 文章的本体在双标签中间,可以在双标签中间修改
UTF-8: 万国码,即可以输出所有国家的文字
GB2312: 中国码,只能输出中国字
title 版头内容 在双标签中间空格处修改
body 页面内容 在双标签中间空格处修改
(想输出上述框架的话,不需要背,在编译器中输入英文!+回车即可)
2.1换行标签
br+回车 单标签
因为在编辑器中的换行,在浏览器中展示一个空格
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<br>
</body>
</html>
2.2水平线标签
hr+回车运行后可以显示一个水平线, 单标签
(下面标签不在写回车,但都要回车)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr>
</body>
</html>
2.3标题标签
h1–h6 字体加大加粗,且单独成行。字体逐渐变小,直到h6停止变小
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>
运行结构如下:
2.4字体标签
em 字体倾斜 双标签 不能独占一行
strong 字体加粗 双标签 不能独占一行
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<em>内容写在这里</em>
<strong>内容写在这里</strong>
</body>
</html>
运行结果如下:
2.5段落标签
p 双标签,标签里的内容是一个自然段,每个段落之间自动换行
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我家很温暖 </p>
</body>
</html>
2.6图片标签
img
-
src:路径( ./代表当前目录
…/代表上级目录) -
alt:对图片补充说明,当图片加载不出来时显示
-
hieght/width:对图片长/宽的规定(注:其后要加单位px)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="路径写这" alt="补充说明写这">
</body>
</html>
2.7超链接
a 可以跳转到另一个链接或其他(eg:tel:电话 mailto 邮箱)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="链接或其他写这里">备注写这</a>
</body>
</html>
2.8 锚链接
锚链接,点击内容可以跳转到指定位置
下面代码的意思是 点5跳转到3
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>1</h1>
<h1>2</h1>
<h1 id="name"></h1id>3</h1>
<h1>4</h1>
<a href="#name"><h1>5</h1></a> <!-- 跳转到3 #代表id-->
</body>
</html>
2.9特殊符号
-
空格  
-
大于号 >(可以直接从键盘上输)
-
小于号 <(可以直接从键盘上输)
-
引号 "(后加的内容全在引号内,可以直接从键盘上输)
-
版权符号 ©
-
注释,解释说明,取消的话,重复一下上述操作 ctrl+/
注意:书写时遵循 W3C标准:
1 标签名称,属性名称必须小写
2标签必须严格嵌套,并且必须闭合,即使是空元素标签也必须闭合
3 属性值必须用引号引起来
如果有错误,欢迎指正。
标签:网页,标签,标题,HTML,字体,Document,制作,回车 From: https://blog.csdn.net/2403_89957632/article/details/145241360