HTML的简单标签

苏荷☆

已于 2022-09-25 15:20:30 修改

阅读量480

点赞数

分类专栏：前端文章标签：前端

于 2022-09-25 15:15:06 首次发布

本文链接：https://blog.csdn.net/m0_63454586/article/details/127014492

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是HTML？

超文本标记语言(英语:HyperText Markup Language，简称: HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML运行在浏览器
上，由浏览器来解析。

超文本
超越普通文本的特性，不仅是文字，还可以有图片、链接、视频、程序
等非文本信息。

标记语言
将上述超文本的信息组合起来进行展示(包含结构和数据)的一种语
言。

HTML基础结构
html 标签:根节点标签
head 标签:头部标签，主要存放网站的基本描述信息 body 标签:正文标签，主要存放网页显示的内容

<html>
    <head>
        <title>
            我是网站标题
        </title>
        <style></style>

    </head>
    <body>
        <h1>我是标题（正文内容）</h1>
    </body>
</html>

<!-- 声明文档类型 是HTML：5 的类型 -->
<!-- head是给机器看的 body是给人看的 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符编码 防止乱码  -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 是网页名 -->
    <title>Document</title>
</html>

标签
标签是HTML 的核心部分。

特性
标签由两个尖括号包含起来的关键字，例如<html>
标签一般都是成对的出现，开始标签和结束标签，例如<html></
html>
也有一些标签是单标签，例如<br/><img/>
浏览器渲染的时候不会单纯的显示该标签，而是解析该标签后转换成另外一种形式进行展示。

2.标签语言

<div></div>在这中间敲的任意东西都可以在页面中显示出来，进行模块布局，当然，你在<body></body>中直接打字也是可以的，这与div的显示完全一样

对于颜色来说，我们可以在<head></head>中添加background中添加颜色,当然，这是css中的东西，但比较简单，所以带过一嘴。

可能刚学的小伙伴们会有点疑惑，为什么你自己的不行呢，这是因为我们要在<head>中添加<style>然后再引用div{};

<style>
        div{
            background-color: red;
    }
    </style>

对于页面来说，图片是必不可少的，接下来就说说图片的引用：

对于图片而言，我们要保存他的地址放在你的vscode的左边的(自建)的文件里，这样你才可以正常引用，这时就需要第二个标题语言了：<img src=" ">对于同级的代码来说，直接引用图片的地址就好了(你存的地址)，不在同级的就要../文件名/图片地址了：

我这里举的例子是不在同一级的，我想大家也看到了图片中图片地址中的alt=" " ,这个的含义就是当自己马虎的时候引错了地址，这时候图片不显示就会显示alt中的东西。

当我们看到京东或者百度页面的时候就会看到那里的图片有大有小，这时候呢我们就可以跟div一样的设置，就可以做到，十分简单。

这里的width是长，height是高；px呢代表的是像素大小。

标题：

从h1开始，1最大，6最小：如图

<p></p>:

这是表示的段落，p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

<span></span>:

span标签被用来组合文档中的行内元素，没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<a>:

标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

<a href="https://baidu.com">百度</a>
<!-- 这就是一个百度网站，你一点就自动跳到百度的页面去了，感兴趣的小伙伴可以去试试 -->

表单元素：

我们常常都能看到各种用户名，密码窗口，不管是在游戏的登入界面还是学校的教务系统或者各种app的登入界面，这时我们就来看看如何用HTML来展示这些东西：

<form action=""></form>我们所用的标签都在这里；action后面的是在摁提交按钮之后跳转的页面位置

第一种就是用户名：<input type="text">

第二种就是密码：<input type="password">

第三种是性别：<input type="radio",name="sex">男|女

注意：后面一定要加name，否则就会变成如下这样：

第四种是兴趣爱好：<input type="checkbox">唱|跳|rap|篮球

第五种是学校：在select中的<option value="">学校名</option>

第六种是文本域也就是备注：<textarea ></textarea >

最后就是提交按钮：<input type="submit"><button>按钮</button>

这里的submit是提交按钮，而button就是普通的按钮。

表格：

对于学HTML的小伙伴们来说，这时候已经对这些标签语言不陌生了，所以我们来讲最后一个，当然哈，也是非常简单的，叫做表格：

<!-- table 表格 tr:行  td:列 -->
    <!-- cellspacing 外框边距 cellpadding 内框边距 -->
    <!-- th 表头 -->
<table border="1" cellspacing="56" cellpadding="20">
        <tr>
            <th>111</th>
            <th>222</th>

        </tr>
        <tr>
            <td>333</td>
            <td>444</td>

        </tr>

这个就是表格的代码，这里的border是代表的边框 cellspacing代表的是外边距，而cellpadding就是内边距，这里的tr是行，td是列，而th就是表头，也就是加重效果。