HTML的介绍

HTML

        HTML是一种超文本标记语言,超文本是指,除了文本之外,还可能包含图片,音频,或者评注等的 文本形式,比文本强大,通过链接和交互方式来组织和呈现信息.标记语言是指,由标签构成的语言.HTML定义了多种不同的标签,用来表示不同的内容.

         标签的介绍:

1.<h3> 三级 </h3> 

标签名h3要放在<>中,大部分标签成对出现 ,<h3>是开始标签</h3>是结束标签,也有部分标签只有开始标签,称之为"单标签".开始标签和结束标签之间写的是标签的内容.开始标签也可以设置属性.id属性相当于一个标识符,唯一表示一个标签.

       HTML 文件的基本结构:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个页面</title>
</head>
<body>hello,world
</body>
</html>

      html标签是整个html文件的根标签.head标签写页面的属性.body标签中写的是页面上要显示内容.title标签是页面的标题.由标签的排布将标签之间可以分为父子关系和兄弟关系.上面的标签中html标签就是head和body标签的父标签.head和body标签之间的关系就是兄弟标签.

1.1常见的HTML标签的介绍

标题标签h1-h6,有六个,从h1到h6.数字越大字体越小.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

段落标签,在HTML中,段落,换行符,空格都会失效,如果需要分成段落,就需要使用专门的标签. P标签表示一个段落.

<body><p>这是一个段落</p><p>这是一个段落</p><p>这是一个      段落</p>
</body>

p标签描述的段落,前面没有缩进.自动根据浏览器来排版.html首尾处的换行,空格都无效.在html中文字之间输入的多个空格只相当于一个空格.html中直接输入换行不会真的换行,而是相当于一个空格. 

换行标签:br  这是一个单标签,用来实现换行.<br/>比<p>标签的空隙小. 

<body>换行标签<br/>接下来会进行换行
</body>

图片标签:img  img标签必须带有src属性.表示图片的路径.这个路径既可以是绝对路径也可以是相对路径.

<body><img src="D:\新建文件夹 2\新建文件夹\31.jpg" width=400px><img src="picture/31.jpg" width="300px">

 

img标签除了src属性用来表示图片的路径之外,还有width/height:控制宽度和高度.只需修改一个即可,会按照等比例缩放,否则图片就会失衡. 

注意属性有多个,不能写到标签之前,属性之间可以用空格分隔,也可以是换行分隔.属性之间不分先后顺序.

超链接:a href:必须具备,表示点击后会跳转到那个界面.  target:打开方式,默认是_self.如果是_blank则会用新的标签页打开.

<body><a href="https://www.jd.com">京东</a>
</body>

 

点击之后会跳转到京东的页面.这里是在原有的页面上生成一个京东的页面,也可以保留原有页面,新生成一个页面.如下:

<body><a href="https://www.jd.com">京东</a><br/><a href="https://www.jd.com" href="_blank">京东2</a>
</body>

 空连接:使用#在href中占位,仅仅只是占位的作用,点击之后不会发生跳转.

表格标签:table标签:表示整个表格  tr:表示表格的一行. td:表示一个单元格  thead:表格的头部位置.

tbody:表格的主体位置.表格标签有一些属性,可以用于设置大小边框等.这些属性都要放在table标签中,align是表格相对于周围其他元素的对齐方式.border表示边框,可以用来设置表格边框的像素.cellpadding:表格中内容距离边框的距离,默认是1像素. cellspacing:单元格之间的距离,默认是2像素.width/height:设置尺寸.

<body><table align="center" border="2" cellpadding="3" cellspacing="3" width="400" heigth="300"><tr><td>姓名</td><td>年龄</td></tr><tr><td>李四</td><td>12</td></tr><tr><td>张三</td><td>18</td></tr><tr><td>王五</td><td>20</td></tr></table>
</body>

表单标签:表单是让用户输入信息的重要途径.分成两个部分:表单域:包含表单元素的区域.重点是form标签. 表单控件:输入框,提交按钮等.重点是input标签.

form标签,描述了要把数据按照什么方式,提交到那个页面中. input标签,各种输入控件,单行文本框,按钮,单选框,复选框.  type(必须有),取值种类很多,button,checkbox,text,file,image,password等.    name:给input起了个名字,尤其是对于单选按钮,具有相同的name才能多选一.value:input中的默认值.checked:默认被选中.

<body><form>用户名:<input type="text"><br/>密码:<input type="password"><br/>性别:<input type="radio" name="gender" id="male"><label for="male">男<input type="radio" name="gender" id="female"> <label for="female">女 <br/>兴趣爱好:<input type="checkbox"> 篮球   <input type="checkbox">足球<br/><input type="checkbox"> 网球    <input type="checkbox"> 羽毛球 居住的城市:<br/><select><option>西安</option><option selected="selected">昆明</option></select></form>
</body>

 

 无语义标签:div&span

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

div是独占一行  span不独占一行.

<body><div><span>t1</span><span>t2</span><span>t3</span>   </div><div><span>t4</span><span>t5</span><span>t6</span></div>
</body>

实现一个用户注册页面:

<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td>  </tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><input type="button"value="注册">已有帐号?<a href="#">登录</a><br/></div>
</body>

实际的页面如下:

 

xcx'c

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

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

相关文章

如何彻底掌握 JavaScript 23种设计模式

设计模式是解决特定问题的常用解决方案&#xff0c;它们可以帮助开发者编写更清晰、可维护、可扩展的代码。在 JavaScript 中&#xff0c;常见的设计模式可以分为三大类&#xff1a;创建型模式、结构型模式 和 行为型模式。本文将全面介绍 JavaScript 中常见的设计模式&#xf…

03_23 种设计模式之《原型模式》

文章目录 一、原型模式基础知识原型模式的结构应用场景 实例拷贝构造函数被调用场景如下&#xff1a;典型的应用场景&#xff1a; 一、原型模式基础知识 原型模式是一种创建型设计模式&#xff0c;其功能为复制一个运行时的对象&#xff0c;包括对象各个成员当前的值。而代码又…

Python知识点:基于Python技术,如何使用YOLO进行实时物体检测

开篇&#xff0c;先说一个好消息&#xff0c;截止到2025年1月1日前&#xff0c;翻到文末找到我&#xff0c;赠送定制版的开题报告和任务书&#xff0c;先到先得&#xff01;过期不候&#xff01; 使用YOLO进行实时物体检测的Python技术详解 实时物体检测是计算机视觉中的一个关…

等保测评中安全计算环境高风险分析

在信息安全等级保护测评中&#xff0c;安全计算环境的重要性不言而喻。它涵盖了从网络设备、主机设备到数据安全等多个关键领域&#xff0c;一旦出现高风险情况&#xff0c;可能会对整个信息系统造成严重的安全威胁。 一、安全审计功能缺失 如果重要核心网络设备、安全设备、操…

云计算第四阶段 CLOUD2周目 01-03

国庆假期前&#xff0c;给小伙伴们更行完了云计算CLOUD第一周目的内容&#xff0c;现在为大家更行云计算CLOUD二周目内容&#xff0c;内容涉及K8S组件的添加与使用&#xff0c;K8S集群的搭建。最重要的主体还是资源文件的编写。 (*^▽^*) 环境准备&#xff1a; 主机清单 主机…

matlab 判断多组数据的分布是否一致,可以使用什么方法?

在 MATLAB 中&#xff0c;可以使用以下几种方法来判断多组数据的分布是否一致&#xff1a; 1. Kolmogorov-Smirnov 检验 (K-S Test) K-S 检验是一种非参数检验&#xff0c;用于比较两组数据是否来自相同的分布。MATLAB 提供了 kstest2 函数来进行这种检验。该方法适用于连续分…

【D3.js in Action 3 精译_033】4.1.0 DIY 实战:如何通过学习 d3.autoType 函数深度参与 D3 生态建设

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

基于YOLO11/v10/v8/v5深度学习的安检X光危险品检测与识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

Microsoft Visual Studio安装gtest

1. 参考【Windows Visual Studio下安装和使用google test&#xff08;gtest&#xff09;】 https://blog.csdn.net/Bule_Zst/article/details/78420894 2. 编译gtest使用Win32模式。 3. 配置属性&#xff0c;C/C&#xff0c;常规&#xff0c;附加包含目录 …

Zilliz获Forrester报告全球第一;OB支持向量能力;Azure发布DiskANN;阿里云PG发布内置分析引擎

重要更新 1. Azure发布PostgreSQL向量索引扩展DiskANN&#xff0c;声称在构建HNSW/IVFFlat索引上&#xff0c;速度、精准度都超越pg_vector&#xff0c;并解决了pg_vector长期存在的偶发性返回错误结果的问题( [1] )。 2. 阿里云RDS PostgreSQL 发布AP加速引擎&#xff08;rds…

《Programming from the Ground Up》读后感

之所以看这本书&#xff0c;是想了解一些跟汇编相关的知识&#xff0c;打开这本书后就被作者的观点——“If you don’t understand something the first time, reread it. If you still don’t understand it, it is sometimes best to take it by faith and come back to it …

qemu启动busybox虚拟机网络连接配置

一、busybox文件系统网络问题 由于根文件是用busybox构建&#xff0c;所以很多配置文件是没有的&#xff0c;包括部分网络的默认设置。启动虚拟机后只能使用ip命令和ifconfig命令查看网络状态。 二、开启qemu网络支持 想要使虚拟机上网&#xff0c;最简单的方式可以使用 -netde…

error: RPC failed; curl 16 Error in the HTTP2 framing layer

yschai@LAPTOP-F2L146JK:~$ git clone https://github.com/Chyusen/yschai.git Cloning into ‘yschai’… error: RPC failed; curl 16 Error in the HTTP2 framing layer fatal: expected flush after ref listing 使用Ubuntu在git clone github上的项目的时候,遇到以上报错…

Opencv中的直方图(3)直方图比较函数compareHist()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 比较两个直方图。 函数 cv::compareHist 使用指定的方法比较两个密集或两个稀疏直方图。 该函数返回 d ( H 1 , H 2 ) d(H_1, H_2) d(H1​,H2​…

南科大分享|大数据技术如何赋能大模型训练及开发

嘉宾介绍 张松昕&#xff0c;南方科技大学统计与数据科学系研究学者&#xff0c;UCloud 顾问资深算法专家&#xff0c;曾任粤港澳大湾区数字经济研究院访问学者&#xff0c;主导大模型高效分布式训练框架的开发&#xff0c;设计了 SUS-Chat-34B 的微调流程&#xff0c;登顶 Ope…

基于深度学习的图像背景去除系统

项目介绍 该项目的主要目标是开发一种高效、准确且适用于高分辨率的抠图系统&#xff0c;能够在自然场景中精确定位并分割出图像中的人、动物、建筑等一系列目标物体。 技术介绍 本项目使用的是基于python的pytorch神经网络框架&#xff0c;使用的神经网络是基于Resnet-50的…

非空断言操作符(!)

非空断言操作符&#xff08;!&#xff09;是 TypeScript 中的一种语法&#xff0c;用于告诉编译器某个值在特定位置不会是 null 或 undefined&#xff0c;即使编译器无法静态地证明这一点。它可以帮助消除编译器警告&#xff0c;但需要谨慎使用&#xff0c;以避免潜在的运行时错…

【微信小程序_7_WXML 模板语法 - 按钮事件和输入框事件绑定】

摘要:本文主要介绍了小程序中 WXML 模板语法的事件绑定相关知识。首先阐述了事件是渲染层到逻辑层的通讯方式,包括交互事件的过程。接着介绍了小程序中常用的事件,如 tap、input 和 change 及其绑定方式和事件描述。详细说明了事件对象的属性列表,包括 type、timeStamp、ta…

[mysql]多表查询详解

我们如果要查询,我们就要用 SELECT .... FROM .... WHERE AND/OR/NOT #我们需要用过滤的条件来对数据进行筛选,不然会有很多多余数据 ORDER BY (ASC/DESC)#排序 LIMIT....,#是在几个有限的数据库管理系统里所以,PGsql,mysql,等 多表查询的意义 我们目前为止的查询语句…

ElasticsearchClient入门指南

在本教程中,我们将探讨如何使用Elasticsearch的官方Java客户端 - ElasticsearchClient。这个强大的工具允许您的Java应用程序与Elasticsearch集群进行交互,执行各种操作,如索引文档、执行搜索查询等。 前提条件 在开始之前,确保您的项目中已经包含了必要的依赖。您可以通过Ma…