HTML(快速入门)

                                         欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

目录

  • 一、前言
  • 二、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.rhkb.cn/news/10541.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

d3.js: Relation Graph

d3.js: Relation Graph

d3.js Tags d3/d3 GitHub D3 by Observable | The JavaScript library for bespoke data visualization 下载或 <!-- 引入 D3.js 库 --> <script src"https://d3js.org/d3.v7.min.js"></script> <!-- 引入 D3.js 库 --> <…
阅读更多...
Oracle Primavera P6自动进行进度计算

Oracle Primavera P6自动进行进度计算

前言 在P6 Professional 有一个自动计划计算的选项&#xff0c;很多人不了解该设置如何使用&#xff0c;以及什么时候该启动这项配置。 详情 P6 Professional 默认为非自动进度计算。启用自动选项后&#xff0c;可以快速查看调度更改的效果。 ​ ​ 如图所示&#xff0c;当你…
阅读更多...
反射、枚举以及lambda表达式

反射、枚举以及lambda表达式

一.反射 1.概念&#xff1a;Java的反射&#xff08;reflection&#xff09;机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法和属性&#xff0c;既然能拿到那么&am…
阅读更多...
【Proteus仿真】【51单片机】简易计算器系统设计

【Proteus仿真】【51单片机】简易计算器系统设计

目录 一、主要功能 二、使用步骤 三、硬件资源 四、软件设计 五、实验现象 联系作者 一、主要功能 1、LCD1602液晶显示 2、矩阵按键​ 3、可以进行简单的加减乘除运算 4、最大 9999*9999 二、使用步骤 系统运行后&#xff0c;LCD1602显示数据&#xff0c;通过矩阵按键…
阅读更多...
HarmonyOS简介：HarmonyOS核心技术理念

HarmonyOS简介：HarmonyOS核心技术理念

核心理念 一次开发、多端部署可分可合、自由流转统一生态、原生智能 一次开发、多端部署 可分可合 自由流转 自由流转可分为跨端迁移和多端协同两种情况 统一生态 支持业界主流跨平台开发框架&#xff0c;通过多层次的开放能力提供统一接入标准&#xff0c;实现三方框架快速…
阅读更多...
(即插即用模块-特征处理部分) 十九、(NeurIPS 2023) Prompt Block 提示生成 / 交互模块

(即插即用模块-特征处理部分) 十九、(NeurIPS 2023) Prompt Block 提示生成 / 交互模块

文章目录 1、Prompt Block2、代码实现 paper&#xff1a;PromptIR: Prompting for All-in-One Blind Image Restoration Code&#xff1a;https://github.com/va1shn9v/PromptIR 1、Prompt Block 在解决现有图像恢复模型时&#xff0c;现有研究存在一些局限性&#xff1a; 现有…
阅读更多...
Day24-【13003】短文，数据结构与算法开篇，什么是数据元素？数据结构有哪些类型？什么是抽象类型？

Day24-【13003】短文，数据结构与算法开篇，什么是数据元素？数据结构有哪些类型？什么是抽象类型？

文章目录 13003数据结构与算法全书框架考试题型的分值分布如何&#xff1f; 本次内容概述绪论第一节概览什么是数据、数据元素&#xff0c;数据项&#xff0c;数据项的值&#xff1f;什么是数据结构&#xff1f;分哪两种集合形式&#xff08;逻辑和存储&#xff09;&#xff1f…
阅读更多...
使用 MSYS2 qemu 尝鲜Arm64架构国产Linux系统

使用 MSYS2 qemu 尝鲜Arm64架构国产Linux系统

近期&#xff0c;我的师弟咨询我关于Arm64架构的国产CPU国产OS开发工具链问题。他们公司因为接手了一个国企的单子&#xff0c;需要在这类环境下开发程序。说实在的我也没有用过这个平台&#xff0c;但是基于常识&#xff0c;推测只要基于C和Qt&#xff0c;应该问题不大。 1. …
阅读更多...
unity学习21：Application类与文件存储的位置

unity学习21：Application类与文件存储的位置

目录 1 unity是一个跨平台的引擎 1.1 使用 Application类&#xff0c;去读写文件 1.2 路径特点 1.2.1 相对位置/相对路径&#xff1a; 1.2.2 固定位置/绝对路径&#xff1a; 1.3 测试方法&#xff0c;仍然挂一个C#脚本在gb上 2 游戏数据文件夹路径&#xff08;只读&…
阅读更多...
【Redis】hash 类型的介绍和常用命令

【Redis】hash 类型的介绍和常用命令

1. 介绍 Redis 中存储的 key-value 本身就是哈希表的结构&#xff0c;存储的 value 也可以是一个哈希表的结构 这里每一个 key 对应的一个 哈希类型用 field-value 来表示 2. 常用命令 命令 介绍 时间复杂度 hset key field value 用于设置哈希表 key 中字段 field 的值为…
阅读更多...
基于51单片机和WS2812B彩色灯带的流水灯

基于51单片机和WS2812B彩色灯带的流水灯

目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码四、主函数总结 系列文章目录 前言 用彩色灯带按自己想法DIY一条流水灯&#xff0c;谁不喜欢呢&#xff1f; 所用单片机&#xff1a;STC15W204S &#xff08;也可以用其他1T单片机&#xff0c;例如&#xff0c;S…
阅读更多...
力扣017_最小覆盖字串题解----C++

力扣017_最小覆盖字串题解----C++

题目描述 我们可以用滑动窗口的思想解决这个问题。在滑动窗口类型的问题中都会有两个指针&#xff0c;一个用于「延伸」现有窗口的 r 指针&#xff0c;和一个用于「收缩」窗口的 l 指针。在任意时刻&#xff0c;只有一个指针运动&#xff0c;而另一个保持静止。我们在 s 上滑动…
阅读更多...
如何从客观角度批判性阅读分析博客

如何从客观角度批判性阅读分析博客

此文仅以个人博客为例&#xff0c;大量阅读朋友反馈给我的交流让我得知他们所理解我的博客所表达的意思并非我所想表达的&#xff0c;差异或大或小&#xff0c;因人而异。 观点与事实 只有从客观角度反复批判性阅读和分析&#xff0c;才能逐渐清晰观点和事实。 观点不等于事实…
阅读更多...
深入理解MySQL 的 索引

深入理解MySQL 的 索引

索引是一种用来快速检索数据的一种结构, 索引使用的好不好关系到对应的数据库性能方面, 这篇文章我们就来详细的介绍一下数据库的索引。 1. 页面的大小: B 树索引是一种 Key-Value 结构&#xff0c;通过 Key 可以快速查找到对应的 Value。B 树索引由根页面&#xff08;Root&am…
阅读更多...
Spring Boot项目如何使用MyBatis实现分页查询及其相关原理

Spring Boot项目如何使用MyBatis实现分页查询及其相关原理

写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油&#xff0c;冲鸭&#x…
阅读更多...
LabVIEW温度修正部件测试系统

LabVIEW温度修正部件测试系统

LabVIEW温度修正部件测试系统 这个基于LabVIEW的温度修正部件测试系统旨在解决飞行器温度测量及修正电路的测试需求。该系统的意义在于提供一个可靠的测试平台&#xff0c;用于评估温度修正部件在实际飞行器环境中的性能表现&#xff0c;从而确保飞行器的安全性和可靠性。 系统…
阅读更多...
动态规划每日一练（四）

动态规划每日一练（四）

一、day1——最长数对链 题目链接&#xff1a; 646. 最长数对链 - 力扣&#xff08;LeetCode&#xff09;646. 最长数对链 - 给你一个由 n 个数对组成的数对数组 pairs &#xff0c;其中 pairs[i] [lefti, righti] 且 lefti < righti 。现在&#xff0c;我们定义一种 跟随…
阅读更多...
对比category_encoders库和sklearn库中的OrdinalEncoder

对比category_encoders库和sklearn库中的OrdinalEncoder

OrdinalEncoder 是用来对数据中的分类特征进行编码、转换为整数标签的函数。 category_encoders库 from category_encoders import OrdinalEncoder 安装&#xff1a;pip install category_encoders --trusted-host pypi.tuna.tsinghua.edu.cn&#xff08;记得关闭代理&#x…
阅读更多...
【PLL】杂散生成和调制

【PLL】杂散生成和调制

时钟生成 --》 数字系统 --》峰值抖动频率生成 --》无线系统 --》 频谱纯度、 周期信号的相位不确定性 随机抖动&#xff08;random jitter, RJ&#xff09;确定性抖动&#xff08;deterministic jitter,DJ&#xff09; 时域频域随机抖动积分相位噪声确定性抖动边带 杂散生成和…
阅读更多...
理解神经网络：Brain.js 背后的核心思想

理解神经网络：Brain.js 背后的核心思想

温馨提示 这篇文章篇幅较长，主要是为后续内容做铺垫和说明。如果你觉得文字太多，可以： 先收藏，等后面文章遇到不懂的地方再回来查阅。直接跳读，重点关注加粗或高亮的部分。放心，这种“文字轰炸”不会常有的，哈哈~ 感谢你的耐心阅读！😊 欢迎来到 brain.js 的学习之旅！…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023