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

HTML(快速入门)

news 2025/7/7 19:59:51

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

点击这里了解更多内容

一、前言
二、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>

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

在这里插入图片描述

欧耶！！我学会啦！！！

目录

一、前言

二、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 综合练习-实现一个用户注册的网页

相关文章：