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>

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

在这里插入图片描述

欧耶！！我学会啦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/961572.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

二叉树-堆（补充）

二叉树-堆（补充）

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…
阅读更多...
JVM01_概述、跨平台原理、分类、三大商业虚拟机

JVM01_概述、跨平台原理、分类、三大商业虚拟机

①. 什么是JVM&#xff1f; ①. JVM 是 java虚拟机&#xff0c;是用来执行java字节码(二进制的形式)的虚拟计算机 ②. jvm是运行在操作系统之上的&#xff0c;与硬件没有任何关系 ②. Java的跨平台及原理 ①. 跨平台&#xff1a;由Java编写的程序可以在不同的操作系统上运行&am…
阅读更多...
实现基础的shell程序

实现基础的shell程序

1. 实现一个基础的 shell 程序&#xff0c;主要完成两个命令的功能 cp 和 ls 1.1.1. cp 命令主要实现&#xff1a; ⽂件复制⽬录复制 1.1.2. ls 命令主要实现&#xff1a; ls -l 命令的功能 1.1. 在框架设计上&#xff0c;采⽤模块化设计思想&#xff0c;并具备⼀定的可扩…
阅读更多...
idea修改模块名导致程序编译出错

idea修改模块名导致程序编译出错

本文简单描述分别用Idea菜单、pom.xml文件管理项目模块module 踩过的坑&#xff1a; 通过idea菜单创建模块&#xff0c;并用idea菜单修改模块名&#xff0c;结构程序编译报错&#xff0c;出错的代码莫名奇妙。双击maven弹窗clean时&#xff0c;还是报错。因为模块是新建的&am…
阅读更多...
C27.【C++ Cont】时间、空间限制和STL库的简单了解

C27.【C++ Cont】时间、空间限制和STL库的简单了解

&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;春节篇&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8; 目录 1.竞赛中的…
阅读更多...
ResNet 残差网络

ResNet 残差网络

目录 网络结构 残差块&#xff08;Residual Block&#xff09; ResNet网络结构示意图 残差块&#xff08;Residual Block&#xff09;细节 基本残差块&#xff08;ResNet-18/34&#xff09; Bottleneck残差块&#xff08;ResNet-50/101/152&#xff09; 残差连接类型对比 变体网…
阅读更多...
组件框架漏洞

组件框架漏洞

一.基础概念 1.组件 定义&#xff1a;组件是软件开发中具有特定功能或特性的可重用部件或模块&#xff0c;能独立使用或集成到更大系统。 类型 前端 UI 组件&#xff1a;像按钮、下拉菜单、导航栏等&#xff0c;负责构建用户界面&#xff0c;提升用户交互体验。例如在电商 AP…
阅读更多...
电脑无法开机，重装系统后没有驱动且驱动安装失败

电脑无法开机，重装系统后没有驱动且驱动安装失败

电脑无法开机&#xff0c;重装系统后没有驱动且驱动安装失败 前几天电脑突然坏了&#xff0c;电脑卡住后&#xff0c;强制关机&#xff0c;再开机后开机马上就关机。尝试无数次开机后失败&#xff0c;进入BIOS界面&#xff0c;发现已经没有Windows系统了。重新安装系统后&…
阅读更多...
NLP自然语言处理通识

NLP自然语言处理通识

目录 ELMO 一、ELMo的核心设计理念 1. 静态词向量的局限性 2. 动态上下文嵌入的核心思想 3. 层次化特征提取 二、ELMo的模型结构与技术逻辑 1. 双向语言模型&#xff08;BiLM&#xff09; 2. 多层LSTM的层次化表示 三、ELMo的运行过程 1. 预训练阶段 2. 下游任务微调 四、ELMo的…
阅读更多...
二进制安卓清单 binary AndroidManifest - XCTF apk 逆向-2

二进制安卓清单 binary AndroidManifest - XCTF apk 逆向-2

XCTF 的 apk 逆向-2 题目 wp&#xff0c;这是一道反编译对抗题。 题目背景 AndroidManifest.xml 在开发时是文本 xml&#xff0c;在编译时会被 aapt 编译打包成为 binary xml。具体的格式可以参考稀土掘金 MindMac 做的类图&#xff08;2014&#xff09;&#xff0c;下面的博…
阅读更多...
Mac Electron 应用签名（signature）和公证（notarization）

Mac Electron 应用签名（signature）和公证（notarization）

在MacOS 10.14.5之后&#xff0c;如果应用没有在苹果官方平台进行公证notarization(我们可以理解为安装包需要审核&#xff0c;来判断是否存在病毒)&#xff0c;那么就不能被安装。当然现在很多人的解决方案都是使用sudo spctl --master-disable&#xff0c;取消验证模式&#…
阅读更多...
stack 和 queue容器的介绍和使用

stack 和 queue容器的介绍和使用

1.stack的介绍 1.1stack容器的介绍 stack容器的基本特征和功能我们在数据结构篇就已经详细介绍了&#xff0c;还不了解的uu&#xff0c; 可以移步去看这篇博客哟&#xff1a; 数据结构-栈数据结构-队列 简单回顾一下&#xff0c;重要的概念其实就是后进先出&#xff0c;栈在…
阅读更多...
【Rust自学】15.0. 智能指针(序)：什么是智能指针及Rust智能指针的特性

【Rust自学】15.0. 智能指针(序)：什么是智能指针及Rust智能指针的特性

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 15.0.1 指针的基本概念 指针是一个变量在内存中包含的是一个地址&#xff0c;指向另一个数据。 Rust 中最常见的指针是引用&#xff0c…
阅读更多...
单调栈算法

单调栈算法

文章目录 题目概述题目详解739.每日温度1475.商品折扣后的最终价格84.柱状图中最大的矩形 题目概述 单调栈&#xff1a;栈&#xff0c;并且栈是有序的 单调栈的两种写法&#xff1a; 左 -> 右&#xff0c;或者右 -> 左 建议使用左到右的写法 及时去掉无用元素&#xff0c…
阅读更多...
vue-有关于TS与路由器

vue-有关于TS与路由器

title: vue(TS)路由器 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端Vue3-第二部分 这里是代码中出现TS的&#xff0c;后面是路由器 现在先上代码&#xff0c;步步分析。 eg1-props的使用 步步分析代码&#xff08;先理解&#xff0c;再实践&#xff09; 框架…
阅读更多...
【AI编辑器】字节跳动推出AI IDE——Trae，专为中文开发者深度定制

【AI编辑器】字节跳动推出AI IDE——Trae，专为中文开发者深度定制

目录 一、背景 二、核心特性 2.1 AI驱动的代码自动生成 2.2 智能问答与代码补全 2.3 多语言支持 2.4 插件与扩展 三、架构 四、下载使用 4.1 下载与安装 4.2 界面与配置 五、应用实践 5.1 快速生成代码 5.2 智能问答与调试 5.3 团队协作与代码审查 六、与Cursor…
阅读更多...
(done) ABI 相关知识补充：内核线程切换、用户线程切换、用户内核切换需要保存哪些寄存器？

(done) ABI 相关知识补充：内核线程切换、用户线程切换、用户内核切换需要保存哪些寄存器？

由于操作系统和编译器约定了 ABI&#xff0c;如下&#xff1a; 编译器在对 C 语言编译时&#xff0c;会自动 caller 标注的寄存器进行保存恢复。保存的步骤通常发生在进入函数的时候&#xff0c;恢复的步骤通常发生在从函数返回的时候。 内核线程切换需要保存的寄存器&#…
阅读更多...
把本地搭建的hexo博客部署到自己的服务器上

把本地搭建的hexo博客部署到自己的服务器上

配置远程服务器的git 安装git 安装依赖工具包 yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel安装编译工具 yum install -y gcc perl-ExtUtils-MakeMaker package下载git&#xff0c;也可以去官网下载了传到服务器上 wget https://www.ke…
阅读更多...
71-《颠茄》

71-《颠茄》

颠茄 颠茄&#xff0c;别名&#xff1a;野山茄、美女草、别拉多娜草&#xff0c;拉丁文名&#xff1a;Atropa belladonna L.是双子叶植物纲、茄科、颠茄属多年生草本&#xff0c;或因栽培为一年生&#xff0c;根粗壮&#xff0c;圆柱形。茎下部单一&#xff0c;带紫色&#xff…
阅读更多...
二次封装的方法

二次封装的方法

二次封装 我们开发中经常需要封装一些第三方组件&#xff0c;那么父组件应该怎么传值&#xff0c;怎么调用封装好的组件原有的属性、插槽、方法&#xff0c;一个个调用虽然可行&#xff0c;但十分麻烦&#xff0c;我们一起来看更简便的方法。 二次封装组件&#xff0c;属性怎…
阅读更多...
最新文章

Copyright @ 2022~2023