Web前端开发--HTML语言

文章目录

  • 前言
  • 1.介绍
  • 2.组成
  • 3.基本框架
  • 4.常见标签
    • 4.1双标签
      • 4.1.1.标题标签
      • 4.2.2段落标签
      • 4.1.3文本格式化标签
      • 4.1.4超链接标签
      • 4.1.5视频标签
      • 4.1.6 音频标签
    • 4.2单标签
      • 4.2.1换行标签和水平线标签
      • 4.2.2 图像标签
  • 5.表单控件
  • 结语

前言

生活中处处都有网站,无论你是学习爬虫,还是学习web前端开发,HTML(超文本标记语言)都值得你认真学习,本篇博客主要介绍了HTML语言的基本语法,以及常见标签的使用方法,希望带你快速入门HTML语言。

1.介绍

HTML(超文本标记语言):是创建网页的基础标准语言。它结构简单,由一系列标签组成,易于学习且具有跨平台性,能在不同操作系统和设备上通过浏览器显示。HTML 的标签和属性可定义网页结构与内容,展示文本、图片、视频等多种类型内容,还能定义页面结构。

2.组成

主要有标签属性元素三部分组成
标签:HTML 标签是用来标记网页内容的元素。每个标签都有特定的含义和用途。
属性:标签可以带有属性,属性提供了关于标签的更多信息。
元素:由开始标签、内容和结束标签组成的整体称为元素。

3.基本框架

主要由head 和body两部分组成
代码展示:

<!-- html:超文本标记语言 --><!DOCTYPE html>
<html lang="en"><!-- head:网页头部,存放给浏览器看的代码,css -->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- title:网页标题 --><title>Document</title>
</head>
<!-- body:网页主体:存放给用户看的代码,图片文字等 -->
<body></body>
</html>

4.常见标签

4.1双标签

4.1.1.标题标签

标题标签:h有很多等级显示的大小并不相同
示例代码:

<!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-h6 --><!-- 特点:1.文字加粗   2.字号逐渐减小  3.独占一行 --><!-- h1标签在一个网页中只能用一次,用来新闻标题或网页logo --><h1>标题一</h1><h2>标题二</h2><h3>标题三</h3><h4>标题四</h4><h5>标题五</h5><h6>标题六</h6>
</body>
</html>

运行结果:
在这里插入图片描述

4.2.2段落标签

段落标签:p用来产品介绍或者新闻内容
示例代码:

<!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><!-- 段落标签:p(双标签) 用来产品介绍或者新闻内容--><!-- 特点:1.独占一行   2.段落之间存在空隙  3.自动换行--><p>语文是基础教育课程体系中的一门重点教学科目,其教学的内容是语言文化,其运行的形式也是语言文化。语文能力是学习其他学科和科学的基础,也是一门重要的人文社会科学,是人们相互交流思想等的工具。具有工具性与人文性的统一特点。《语文》也是中国的学校等教育机构开设的一门主要学科。</p><p>语文是基础教育课程体系中的一门重点教学科目,其教学的内容是语言文化,其运行的形式也是语言文化。语文能力是学习其他学科和科学的基础,也是一门重要的人文社会科学,是人们相互交流思想等的工具。具有工具性与人文性的统一特点。《语文》也是中国的学校等教育机构开设的一门主要学科。</p>
</body>
</html>

4.1.3文本格式化标签

文本格式化标签:为文本添加特殊格式,以突出重点,默认不会换行
示例代码:

<!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><!-- 文本格式化标签:为文本添加特殊格式,以突出重点。常见的文本格式:加粗,倾斜,下划线,删除线等 --><!-- 加粗:<b></b>或者<strong></strong> -->原字体<b>原字体</b><strong>原字体</strong><!-- 倾斜:<em></em>或者<i></i> --><em>原字体</em><i>原字体</i><!-- 下划线:<ins></ins>或者 <u></u>--><ins>原字体</ins><u>原字体</u><!-- 删除线 --><del>原字体</del><s>原字体</s>
</body>
</html>

运行结果:
在这里插入图片描述

4.1.4超链接标签

超链接标签:a用于跳转至其他页面或者网站等
示例代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 超链接:点击跳转到其他页面 <a href=""></a>     --><!-- href属性值为跳转的网址或者文件(一般为html文件) --><a href="https://www.baidu.com/">百度</a><a href="./7.图像标签.html"> 个人图像标签</a><!-- target标签:属性值"_blank"可以打开一个新窗口(新窗口跳转) --><a href="./source/1.jpg" target="_blank">白鹿</a><!-- 开发初期:不知道超链接的跳转地址,href属性值写“#”,表示空链接,不会跳转--><a href="#">空链接</a>
</body>
</html>

运行结果:
在这里插入图片描述

4.1.5视频标签

视频标签:video用于在网页中插入视频

<!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><!-- 视频标签:<video src=""></video> --><!-- src属性: 视频的url--><!-- controls属性:显示视频控制面板 --><!-- loop属性:循环播放 --><!-- muted属性:静音播放 --><!-- autoplay属性:自动播放  为了提升用户体验,浏览器支持在静音下自动播放--><video src="C:\Users\c\Videos\Captures\自动化网页调试.mp4" controls loop muted autoplay></video>
</body>
</html>

4.1.6 音频标签

音频标签:audio用于在网页中插入音频
示例代码:

<!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><!-- 音频标签: <audio src="音频的url"></audio> --><!-- src属性:音频的url --><!-- controls属性:显示音频的控制面板 --><!-- loop属性:循环播放 --><!-- autoplay属性:自动播放  为了提升用户体验,浏览器一般会禁用自动播放功能 --><!-- 注:在HTML5里面如果属性值和属性名相同,可以简写成一个单词 --><audio src="播放音频的路径" controls loop autoplay></audio>
</body>
</html>

4.2单标签

4.2.1换行标签和水平线标签

换行标签:br用于换行显示文本
水平线标签:hr显示一条水平线
示例代码:

<!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><!-- 单标签 :不包含内容--><!-- 1.换行:<br> -->第一行内容<br>第二行内容<!-- 2.水平线:<hr> --><hr>第三行内容
</body>
</html>

运行结果:
在这里插入图片描述

4.2.2 图像标签

图像标签:用于在网页中插入图片

<!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><!-- 图像标签:在网页中插入图片  <img src="图片的url" alt="">  默认不换行 ,各属性之间用空格隔开(顺序不分先后) --><!-- src属性:(绝对路径或者相对路径或者在线网址)用于指定图像的位置和名称,是img的必须属性 --><img src="./source/1.jpg" ><!-- alt属性:替换文本,图片无法显示的时候显示文字 --><!-- mu'di'wei'le解决以前的问题:由于网速过慢,图片加载不出来 --><img src="./source/3.jpg" alt="失败"><!-- title属性:提示文本,鼠标悬停在图片上面的时候显示的文字 --><img src="./source/2.jpg" alt="" title="风景画"><!-- width:图片的宽度,值为数字(像素),没有单位,默认等比缩放 --><!-- heighth:图片的高度,值为数字(像素),没有单位,默认等比缩放--><img src="./source/1.jpg" width="100" height="100" ><img src="https://profile-avatar.csdnimg.cn/4e80a12a108b4a1aba499e2288e78654_2401_85464956.jpg!1" alt="加载失败">
</body>
</html>

备注:上述代码图片需要按相应的文件夹放置,采用的是相对路径

5.表单控件

form 表单是用于收集用户输入信息并将其提交到服务器进行处理的一种 HTML 元素。它由<form>标签开始,以</form>标签结束。
示例代码:

<!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><!-- form标签:表单控件 --><form action=""><h1>注册信息</h1><h3>个人信息</h3><label>姓名:</label><input type="text" placeholder="请输入您的真实姓名"><br>密码:<input type="password" placeholder="请输入密码"><br>确认密码:<input type="password" placeholder="请再次输入密码"><br>性别:<label><input type="radio" name="sex"></label><label><input type="radio" name="sex"></label><br>居住城市:<select><option>上海</option><option>北京</option><option>南京</option><option selected>合肥</option><option >武汉</option></select><h3>教育信息 </h3>最高学历:<select ><option >博士</option><option >硕士</option><option  selected>学士</option><option >高中及其以下</option></select><br><label>学校名称:</label><input type="text"><br><label >所学专业:</label><input type="text"><br><label>在校时间</label><select ><option >2022</option><option >2023</option><option  selected>2024</option><option >2021</option></select>---<select ><option >2022</option><option >2023</option><option  selected>2024</option><option >2021</option></select><h3>工作经历:</h3><label>公司名称:</label><input type="text"><br><label >工作描述:</label><br><textarea cols="30" rows="10"></textarea><br><input type="checkbox"><label >已同意以下协议</label><ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私协议》</a></li></ul><br><button>免费注册</button><button type="reset">重新填写</button></form></body>
</html>

运行结果:
在这里插入图片描述

结语

通过本篇博客的学习,希望你能对HTML语言有初步的了解,更多内容可以参考官方文档进行学习。如有不足还请批评指出!!!

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

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

相关文章

数据结构-图的概念

不存在空图现象,顶点集不能为空,边集可以为空 研究链接一个顶点的边有多少条非常有意义 无向图的度边的二倍 有向图的入度出度,度边数 有向图一致 重点 子图必须联通,尽可能多的边和结点 对于一个生成树,他有n个节点就有n-1条边 修路问题将各个村庄相连,由于经费有限,只能选择…

TDengine 签约蘑菇物联,改造通用设备工业互联网平台

在当前工业互联网迅猛发展的背景下&#xff0c;企业面临着日益增长的数据处理需求和智能化转型的挑战。通用工业设备的高能耗问题愈发突出&#xff0c;尤其是由这些设备组成的公辅能源车间&#xff0c;亟需更高效的解决方案来提升设备运行效率&#xff0c;降低能源消耗。为此&a…

LSM-TREE和SSTable

一、什么是LSM-TREE LSM Tree 是一种高效的写优化数据结构&#xff0c;专门用于处理大量写入操作 在一些写多读少的场景&#xff0c;为了加快写磁盘的速度&#xff0c;提出使用日志文件追加顺序写&#xff0c;加快写的速度&#xff0c;减少随机读写。但是日志文件只能遍历查询…

vue3使用easy-player播放hls监控流

easy-player未发布在npm上&#xff0c;只能采用静态引入方式&#xff0c;老版本不支持v3 1. 在public文件夹下放入EasyPlayer-element.min.js 和 EasyPlayer.wasm 文件 2. 在根目录index.html引入 这样在vue文件中可以使用easy-player 标签 附件

【VScode】C/C++多文件夹下、多文件引用、分别编译——仅一个设置【适合新人入手】

【VScode】C/C多文件夹内的多文件引用编译 1、问题2、前提&#xff08;最简环境&#xff09;3、核心&#xff08;关键配置&#xff09;4、成功享用~ 1、问题 在使用 VScode 编写一个简单项目的时候&#xff0c;没有特别配置的情况下&#xff0c;若主文件(.c)引用了自定义的头文…

【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!

数据集介绍 【数据集】道路事故识别数据集 8939 张&#xff0c;目标检测&#xff0c;包含YOLO/VOC格式标注。数据集中包含2种分类&#xff1a;{0: accident, 1: non-accident}。数据集来自国内外图片网站和视频截图。检测范围道路事故检测、监控视角检测、无人机视角检测、等&…

Scala 的包及其导入

Scala使用包来创建用于模块化程序的命名空间。通过在Scala文件的顶部声明一个或多个包名称可以创建包&#xff0c;另一种声明包的方式是使用0&#xff0c;这种方式可以嵌套包&#xff0c;并且提供更好的范围与封装控制。对于包的导入&#xff0c;Scala与Java的区别之一便是&…

使用 HuggingFace 提供的 Elasticsearch 托管交叉编码器进行重新排名

作者&#xff1a;来自 Elastic Jeff Vestal 了解如何使用 Hugging Face 的模型在 Elasticsearch 中托管和执行语义重新排序。 在这篇简短的博文中&#xff0c;我将向你展示如何使用 Hugging Face 中的模型在搜索时在你自己的 Elasticsearch 集群中执行语义重新排序。我们将使用…

深究JS底层原理

一、JS中八种数据类型判断方法 在JavaScript中&#xff0c;数据类型分为两大类&#xff1a;基本&#xff08;原始&#xff09;数据类型和引用&#xff08;对象&#xff09;数据类型。 基本数据类型&#xff08;Primitive Data Types&#xff09; 基本数据类型是表示简单的数…

C++虚继承演示

在继承中如果出现&#xff1a; 这种情况&#xff0c;B和C都继承了A&#xff0c;D继承了B、C 在D中访问A的成员会出现&#xff1a; 这样的警告 是因为在继承时A出现两条分支&#xff1a;ABD、ACD 编译器不知道访问的A中的元素是经过B继承还是C继承 所以B、C在继承A时要用到…

【1】虚拟机安装

1.安装VMware WorkStation Pro VMware下载地址&#xff1a; 密钥&#xff1a;YF390-0HF8P-M81RQ-2DXQE-M2UT6 2.新建虚拟机 centos7下载地址&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云

【机器学习】均方误差根(RMSE:Root Mean Squared Error)

均方误差根&#xff08;Root Mean Squared Error&#xff0c;RMSE&#xff09;是机器学习和统计学中常用的误差度量指标&#xff0c;用于评估预测值与真实值之间的差异。它通常用于回归模型的评价&#xff0c;以衡量模型的预测精度。 RMSE的定义与公式 给定预测值 和实际值 …

python可视化进阶

引用&#xff1a; 首先需要安装 plotnine from plotnine import* import joypy数据可视化进阶操作 3.1 类别数据可视化 【例3-1】——绘制简单条形图 【代码框3-1】——绘制简单条形图 # 图3-1的绘制代码 import pandas as pd import matplotlib.pyplot as plt from cvxpy …

玩的花,云产品也能拼团了!!!

说起拼单大家都不陌生&#xff0c;电商一贯的营销手段&#xff0c;不过确实可以给消费者省下一笔钱。双11到了&#xff0c;腾讯云产品也玩起了拼团&#xff0c;这明显是对开发人员和各企业的福利。 对于有云产品需求的个人或企业&#xff0c;这次绝对是难得的一次薅羊毛机会。…

设计模式-七个基本原则之一-开闭原则 + SpringBoot案例

开闭原则:(SRP) 面向对象七个基本原则之一 对扩展开放&#xff1a;软件实体&#xff08;类、模块、函数等&#xff09;应该能够通过增加新功能来进行扩展。对修改关闭&#xff1a;一旦软件实体被开发完成&#xff0c;就不应该修改它的源代码。 要看实际场景&#xff0c;比如组内…

Flutter 插件 sliding_up_panel 实现从底部滑出的面板

前言 sliding_up_panel 是一个 Flutter 插件&#xff0c;用于实现从底部滑出的面板。它在设计上非常灵活&#xff0c;能够适应多种 UI 场景&#xff0c;比如从底部滑出的菜单、可拖动的弹出面板等。以下是 sliding_up_panel 的详细用法&#xff0c;包括常用的参数说明和示例代…

出海企业如何借助云计算平台实现多区域部署?

云计算de小白 如需进一步了解&#xff0c;请单击链接了解有关 Akamai 云计算的更多信息 在本文中我们将告诉大家如何在Linode云计算平台上借助VLAN快速实现多地域部署。 首先我们需要明确一些基本概念和思想&#xff1a; 部署多区域 VLAN 为了在多区域部署中在不同的 VLAN …

Linux(CentOS)安装 JDK

CentOS版本&#xff1a;CentOS 7 JDK版本&#xff1a;JDK17 1、下载 JDK 官网&#xff1a;https://www.oracle.com/ 2、上传 JDK 文件到 CentOS 使用FinalShell远程登录工具&#xff0c;并且使用 root 用户连接登录&#xff08;注意这里说的root用户连接登录是指这样的&…

多边形电子围栏算法

在日常生活工作中&#xff0c;我们经常接触到电子围栏&#xff0c;大部分的电子围栏基本上都是圆形的&#xff0c;想要知道某一个点是否在圆形区域内&#xff0c;算法很简单&#xff0c;只需要知道这个圆形区域的圆心坐标和被测点的坐标的距离是否小于半径即可。两点的距离小于…

柯桥学日语J.TEST考试是什么?J.TEST考试报名

J.TEST考试是什么&#xff1f; J.TEST全称为实用日本语鉴定考试&#xff0c;在2007年获得了国家劳动和社会保障部的认可&#xff0c;作为面对母语为非日本语的人员进行的日本语能力测试&#xff0c;J.TEST被越来越多的日本企业所认可&#xff0c;由于其对日语的实际运用能力具有…