当前位置： 首页 > article >正文

HTML(快速入门)

article 2025/1/31 1:22:11 
                                         欢迎大家来到我的博客~
                        欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

目录

  • 一、前言
  • 二、HTML基础
    • 2.1 什么是HTML?
    • 2.2 认识HTML标签
      • 2.2.1 HTML标签当中的基本结构
      • 2.2.2 标签层次结构
    • 2.3 HTML常见标签
      • 2.3.1 标题标签
      • 2.3.2 段落标签
      • 2.3.3 换行标签
      • 2.3.4 图片标签
      • 2.3.5 超链接
      • 2.3.6 表格标签
      • 2.3.7 表单标签
      • 2.3.8 select标签
      • 2.3.9 无语义标签
    • 2.4 综合练习-实现一个用户注册的网页

一、前言

这篇博客的目的认识 HTML 的基本结构, 学习常用的 HTML 标签。
这里说的所用的文本编辑器是idea。
在这里插入图片描述

二、HTML基础

2.1 什么是HTML?

HTML(Hyper Text Markup Language), 超文本标记语言。

超文本: 比文本要强大. 通过链接和交互方式来组织和呈现信息的⽂本形式. 不仅仅有文本， 还可能包含图片, ⾳频, 或者自已经审阅过它的学者所加的评注、补充或脚注等等.
标记语言: 由标签构成的语言。
HTML的标签都是提前定义好的, 使用不同的标签, 表示不同的内容.
类似飞书文档, Word文档。
在这里插入图片描述
标签：如果选中文本, 点击标题1, 就会使用标题1的样式来显示文本, 上述标题1就是⼀个"标签“。
如以下代码（建立一个demo1.html文件）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>我的第一个HTML文件</title>
</head>
<body>
<!--<h1>我是一级标题</h1>-->
<!--<h2>我是二级标题</h2>-->
<!--<h3>我是三级标题</h3>-->
<!--<h4>我是四级标题</h4>-->
<body>

在这里插入图片描述

用浏览器打开的效果：
在这里插入图片描述

上面代码中的h1、h2、h3、h4说的就是标签，学习HTML最主要的就是学习标签。

2.2 认识HTML标签

2.2.1 HTML标签当中的基本结构

创建一个叫test1.html的文件,然后输入下面这些内容：

<html>
<head>
    <title>我的第一个HTML文件</title>
</head>
<body>
   Hello HTML !
<body>
<html>

• html 标签是整个 html 文件的根标签(最顶层标签)
• head 标签中写页面的属性.
• body 标签中写的是页面上显示的内容。
• title 标签中写的是页面的标题。

效果如下：
在这里插入图片描述
在这里插入图片描述

2.2.2 标签层次结构

• 父子关系
• 兄弟关系
上面代码其中:
• head 和 body 是 html 的⼦标签(html 就是 head 和 body 的父标签)。
• title 是 head 的子标签. head 是 title 的父标签.
• head 和 body 之间是兄第标签。

**注意：**F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements（元素） 标签, 就可以看到页面结构细节。
在这里插入图片描述
标签之间的结构关系, 构成了⼀个 DOM树：

DOM 是 Document Object Mode (⽂档对象模型) 的缩写。
在这里插入图片描述

2.3 HTML常见标签

2.3.1 标题标签

有6个（h1-h6)数字越大标签字体越小。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>我的第一个HTML文件</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<body>
<html>

2.3.2 段落标签

p表示一个段落

<!--&nbsp;代表一个空格-->
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;这是一个段落(首行缩进四个空格)
</p>
<p>
    这是    
    一个段落（单空格）
</p>

上面两个标签的效果如下：
在这里插入图片描述

注意：
• p 标签描述的段落, 前面没有缩进.
• 主动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换行, 空格均无效。
• 在 html 中文字之间输入的多个空格只相当于⼀个空格。
• html 中直接输入换行不会真的换行, 而是相当于⼀个空格。

2.3.3 换行标签

想要完成换行的话, 也可以通过br标签来实现.br 是 break 的缩写. 表示换行。

在上面的段落标签当中加一个br标签看看会怎样呢？ 
<!--&nbsp;代表一个空格-->
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;这是一个段落(首行缩进四个空格)
</p>
<p>
    这是
    <br>一个段落（单空格）
</p>
<body>
<html>

用浏览器打开看看效果：
在这里插入图片描述

可以看到换行成功了。

2.3.4 图片标签

<img src="rose.jpg alt="" border="">

img 标签必须带有 src 属性. 表示图片的路径。
img 标签的其他属性
• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就可以, 另外⼀个会等比例缩放.，否则就会图片失衡。
• border: 边框, 参数是宽

我们先随便去网上找一张图片，如下
在这里插入图片描述
然后输入代码：

<br>
<!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注-->
<img src="https://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w.jpg?source=1940ef5c"
     alt="这是一张图片" width="60px"height="60">
<br>

效果：
在这里插入图片描述

可以看到这个表情出现了。
这个alt相当于一个注释,我们把这个路径去掉一部分然后再打开浏览器，然后就会发现这个alt在这块的作用啦。

<!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注-->
<img src="https://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w."
     alt="这是一张图片" width="60px"height="60">

在这里插入图片描述

可以看到那个图片不见了，然后多了一行字,这个就是这个alt的作用了。

2.3.5 超链接

<a href=""target=""></a>

• href: 必须具备, 表示点击后会跳转到哪个页面。
• target: 打开方式， 默认是 _self. 如果是 _blank 则用新的标签页打开。

<!--超链接-->
<!--外部链接 链接其他的网址-->
<a href="https://blog.csdn.net/2302_81090306?type=blog"target="_blank">我的博客主页</a><br>
<!--再创建一个demo1.html文件-->
<!--内部链接-->
<a href="demo1.html">点我跳转到demo1链接</a><br>
<!--空链接-->
<a href="#"target="_blank">空链接</a><br>

效果如下：

在这里插入图片描述

2.3.6 表格标签

<!--表格标签-->
<table border="1" align="center" width="300"height="300" cellspacing="0">
    <tr>
        <td>qqq</td>
        <td>www</td>
    </tr>
    <tr>
        <td>eee</td>
        <td>fff</td>
    </tr>
    <tr>
        <td>ggg</td>
        <td>hhh</td>
    </tr>
</table>

• align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
• border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框。
• cellpadding: 内容距离边框的距离, 默认 1 像素。
• cellspacing: 单元格之间的距离. 默认为 2 像素。
• width / height: 设置尺寸。

在这里插入图片描述

合并单元格：

<!--表格标签-->
<table border="1" align="center" width="300"height="300" cellspacing="0">
    <tr>
<!--        合并单元格 www-->
        <td colspan="2">qqq</td>
<!--        <td>www</td>-->
    </tr>
    <tr>
        <td >eee</td>
<!--        合并单元格hhh-->
        <td rowspan="2">fff</td>
    </tr>
    <tr>
        <td>ggg</td>
<!--        <td>hhh</td>-->
    </tr>
</table>

效果：

在这里插入图片描述

2.3.7 表单标签

表单是让用户输⼊信息的重要途径.
分成两个部分:
• 表单域: 包含表单元素的区域. 重点是 form 标签.

<!--from 标签  跟submit一起用-->
<!--get->向服务端获取资源-->
<!--post->向服务端发送信息-->
<form action="test1.html" method="get">

• 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.
• type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
• value: input 中的默认值.
• checked: 默认被选中
介绍几种类型：
1.文本框

<input type="text">

举个例子：

    用户名:<input type="text"name="username"size="11"><br>

效果：
在这里插入图片描述

2.密码框

<input type="password">

举个例子：

&nbsp;密码:<input type="password"name="password"size="11"><br>

效果：
在这里插入图片描述

3.单选框

<!--单选按钮-->
    &nbsp;性别:<input type="radio" name="gender" id="gender1"value="1" > <label for="gender1">男</label>
    <input type="radio" name="gender" id="gender2"value="2"> <label for="gender2">女</label>
    <input type="radio" name="gender" id="gender3"value="0"> <label for="gender3">保密</label><br>

效果：
在这里插入图片描述

4.复选框

  <!--多选按钮-->
    &nbsp;兴趣:<input type="checkbox" name="hobby" id="fun1"value="1"> <label for="fun1">篮球</label>
    <input type="checkbox" name="hobby" id="fun2"value="2"><label for="fun2">足球</label>
    <input type="checkbox" name="hobby" id="fun3"value="3"><label for="fun3">乒乓球</label>
    <input type="checkbox" name="hobby" id="fun4"value="4"><label for="fun4">羽毛球</label><br>

效果：
在这里插入图片描述

5.按钮的实现

   <!--实现按钮-->
    <button> 1.这是一个button按钮</button><br>
    <input type="button" value="2.这是一个input:button按钮"><br>
    <input type="submit" value="3.这是一个submit按钮"><br>

效果：
在这里插入图片描述

2.3.8 select标签

1.文本域

个人描述:<textarea rows="10" cols="5"></textarea><br>

效果：
在这里插入图片描述

2.下拉菜单

<!--   下拉菜单-->
<!--    默认选择selected-->
   专业：<select>
        <option value="1" selected>数据科学与大数据技术</option>
        <option value="2">计算机科学与技术</option>
        <option value="3">数字媒体与技术</option>
        <option value="4">人工智能</option>
    </select><br>

效果：
在这里插入图片描述

2.3.9 无语义标签

div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度就是两个盒子. 用于网页布局

<div>
    <span>span1</span>
    <span>span2</span>
</div>
<div>
    <span>span3</span>
    <span>span4</span>
</div>
<div>
    <span>span5</span>
    <span>span6</span>
</div>

效果：
在这里插入图片描述

2.4 综合练习-实现一个用户注册的网页

要求实现效果：

在这里插入图片描述

• 使用表格进行整体布局
• 使用各种 input 标签实现页面中的输入控件

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户注册</title>
    <style>
        div{
        color:red;
        font-size=300px;
        }
    </style>
</head>
<body>
<h1>用户注册</h1>
<table>
    <tr>
        <td>用户名</td>
        <td><input type="text" name="Username" size="11" placeholder="请输入用户名"></td>
    </tr> <br>
    <tr>
        <td>手机号</td>
        <td><input type="text" name="Number" size="11" placeholder="请输入手机号"></td>
    </tr> <br>
    <tr>
        <td>密码</td>
        <td><input type="password" name="Password" size="11" placeholder="请输入密码"></td>
    </tr>
</table>
<div>
    <button>注册</button> &nbsp;<span>已有账号？</span><a href="#">登录</a>
</div>
</body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

欧耶！！我学会啦！！！


http://www.kler.cn/a/522403.html

相关文章：

  • 21.2-工程中添加FreeRTOS(掌握) 用STM32CubeMX添加FreeRTOS
  • 分布式微服务系统架构第88集：kafka集群
  • gesp(C++六级)（6）洛谷：P10109：[GESP202312 六级] 工作沟通
  • 【JavaEE】_MVC架构与三层架构
  • DeepSeek LLM解读
  • 第 5 章：声音与音乐系统
  • WPS数据分析000010
  • Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局
  • 【JAVA项目】基于ssm的【宠物医院信息管理系统】
  • 【论文阅读】Equivariant Diffusion Policy
  • 1.Template Method 模式
  • 【信息系统项目管理师-选择真题】2011下半年综合知识答案和详解
  • 软件测试 —— jmeter（2）
  • SpringBoot中Excel表的导入、导出功能的实现
  • 【处理和预防校园霸凌】。营造安全
  • Android开发基础知识
  • Github 2025-01-26 php开源项目日报Top10
  • 练习题 - Django 4.x File 文件上传使用示例和配置方法
  • 电脑开机后就会出现一个名叫DIRECT-OK***AmsDL的WiFi，***是我的电脑名
  • zyNo.18
  • Golang笔记——常用库context和runtime
  • Linux：线程池和单例模式
  • golang命令大全5--依赖管理
  • 【设计模式-行为型】访问者模式
  • 基于nodejs+json+websocket+html的聊天应用
  • 【unity游戏开发之InputSystem——05】PlayerInput组件的介绍（基于unity6开发介绍）