小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

HTML基础（新手入门教程）_html入门

作者：小蓝xlanll | 2024-06-03 09:11:17

踩

html入门

前言

HTML(Hyper Text Markup Language):超文本标记语言是一种用于创建网页的标准标记语言。
「所谓超文本，有2层含义：」

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

一、HTML初识

1.HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

2.HTML元素标签分类

常规元素(双标签)
空元素(单标签)

  常规元素(双标签)
  <标签名> 内容 </标签名>   比如<body>我是文字</body>

  空元素(单标签)
  <标签名 />  比如 <br />或<br>

1
2
3
4
5
6

3.HTML标签关系

嵌套关系父子级包含关系
并列关系兄弟级并列关系
如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

二、HTML基本语法

1.基本元素

声明文档		<!DOCTYPE html>
根元素		<html>
头部元素<head>	标题	<title>
头部元素<head>	网页编码格式	<meta...>
可见内容<body>	标题	<h1>
可见内容<body>	段落	<p>

HTML 标签通常是成对出现的，比如
和

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML教程(runoob.com)</title>
</head>
<body>
 
<h1>这是标题 1</h1>     <!-- 注释: h1,h2,h3表示标题字体大小逐渐变小 -->
 
<p>这是一个段落。</p>
 
<h2>这是标题 2</h2>
 
<p>这是另外一个段落。</p>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在线编译器练习尝试一下吧！！

2.文本

格式化标签：

粗体	<b>
斜体	<i><em>
下划线	<u><ins>
~~删除线~~	<del>

<br>标签：用于不产生一个新段落的情况下进行换行（新行）代码如下（示例）：

<p>这个<br>段落<br>演示了分行的效果</p>
1

注:对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

3.常用字符实体

在这里插入图片描述
其他常用字符实体

4.链接

HTML使用标签<a>来设置超文本链接

链接语法：

<a href="url">链接文本</a>
1

实例：

<a href="https://www.bilibili.com">进入B站</a>
1

5.图像

在 HTML 中，图像由标签定义。
在这里插入图片描述

实例：

<img src="cat.gif" width="300" height

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/666589