一篇文章弄懂 HTML

最新推荐文章于 2023-01-03 09:55:05 发布

Great Plum

最新推荐文章于 2023-01-03 09:55:05 发布

阅读量478

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/A940493814/article/details/87973408

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

layout: post
title: 一篇文章弄懂 HTML
categories: HTML
description: 一篇文章快速学习HTML
keywords: HTML

HTML是网页展示的基础，很简单，更重要。

从事 Java 后端开发工作很久了，一直没有系统的学习总结过前端的东西，都是需要用的时候再来查，导致效率低下。算是做一篇笔记吧，后面再打算做一篇 HTML 的 wiki，当然也是一些常用的，不可能一篇概全。开始正文吧。

TOC
{:toc}

HTML简介

首先来看看 HTML 的定义吧：
HTML 是指超文本标记语言: Hyper Text Markup Language，记住 HTML 不是变成语言，而是一种标记语言。最简单的理解就是 HTML 就是引入页头，然后用一对一对的标签来书写内容，我们这篇文章的重点也是记住并使用这些标签。

至于什么结构之内的这里就不做详细介绍了，下面贴出基本结构，主要内容在里面写就好了。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>页面标题</title> 
</head> 
<body> 
<h1>这是我的第一个标题</h1> 
<p>这是我的第一个段落。</p> 
</body> 
</html>

你可以把这段代码保存成 .html 后缀的文件，然后在浏览器中代开，你就可以看到你的第一个网页，看到的就是 <h1></h1> 和 <p></p> 标签里的内容了。

标签简介

上面说到了标签，大家应该也都看到了效果，其实 HTML 的内容并不多，我个人把标签做了分类，分别是文本标签、表格标签、表单标签、其他标签。是不是很简单，首先思路理清楚就好了。

其实很多人都会教别人用属性，但是我这里就不讲了，因为我个人提倡所有的样式都应该用 CSS 来做，就像 Java 的前后端分离，要分工明确。

文本标签

顾名思义，就是跟文本打交道的那些标签。

1.标题标签

这只最基本的入门的一组标签，当然记起来也很简单。?

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

效果?
标题标签

2.粗体

<p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>

效果?

粗体标签

3.斜体标签

<p>无斜体效果</p>
 
<i>使用 i 标签带来的斜体效果</i>
<br/>
 
<em>使用 em 标签带来的斜体效果</em>

效果?

斜体标签

4.预格式标签

<p>这里是没有用预格式的情况：</p>
 
public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
 
<br/>
<br/>
 
<p>使用预格式的情况:</p>
 
<pre>
public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
 
</pre>

效果?

预格式标签

5.删除效果

<p>无删除效果</p>
<del>使用del标签实现的删除效果</del>
<br/>
<s>使用s标签实现的删除效果，但是不建议使用，因为很多浏览器不支持s标签</s>

效果?

删除标签

6.下划线效果

<ins>使用ins标签实现的下划线效果</ins>
 
<br/>
 
<u>使用u标签实现的下划线效果，但是不建议使用</u>

效果?

下划线标签

表格标签