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语言有初步的了解，更多内容可以参考官方文档进行学习。如有不足还请批评指出！！！

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

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

相关文章

存算一体化与边缘计算：重新定义智能计算的未来

存算一体化与边缘计算：重新定义智能计算的未来

随着数据量爆炸式增长和智能化应用的普及&#xff0c;计算与存储的高效整合逐渐成为科技行业关注的重点。数据存储和处理需求的快速增长推动了对计算架构的重新设计&#xff0c;“存算一体化”技术应运而生。同时&#xff0c;随着物联网、5G网络、人工智能&#xff08;AI&#…
阅读更多...
Kubernetes-ArgoCD篇-03-部署

Kubernetes-ArgoCD篇-03-部署

1、从 Git 存储库创建应用程序 包含留言簿应用程序的示例存储库可在 https://github.com/argoproj/argocd-example-apps.git 上找到&#xff0c;以演示 Argo CD 的工作原理。 1.1 argocd server port-forward 我们这里通过port-forward 访问 Argo CD&#xff1a; kubectl p…
阅读更多...
6层板设计常用知识笔记

6层板设计常用知识笔记

1. 6层板设计叠层方案 &#xff08;1&#xff09;叠层方案优选以下方式 &#xff08;2&#xff09;过孔做固定孔时 plated作为固定孔时需要去掉勾选&#xff0c;焊盘去金属化。 &#xff08;3&#xff09;屏蔽罩&#xff1a;电源、主控存储、wifi需要加屏蔽罩&#xff0c;屏蔽…
阅读更多...
【mongodb】数据库的安装及连接初始化简明手册

【mongodb】数据库的安装及连接初始化简明手册

NoSQL(NoSQL Not Only SQL )&#xff0c;意即"不仅仅是SQL"。 在现代的计算系统上每天网络上都会产生庞大的数据量。这些数据有很大一部分是由关系数据库管理系统&#xff08;RDBMS&#xff09;来处理。 通过应用实践证明&#xff0c;关系模型是非常适合于客户服务器…
阅读更多...
Unity跨平台基本原理

Unity跨平台基本原理

目录 前言 ​编辑 Mono Unity和Mono的关系 Unity跨平台必备概念 Mono利用 Mono主要构成部分 基于Mono跨平台的优缺点 IL2CPP Mono和IL2CPP的区别 Mono IL2CPP Mono和IL2CPP的使用建议 安装IL2CPP IL2CPP打包存在的问题 类型裁剪 泛型问题 前言 Unity跨平台的基…
阅读更多...
【go从零单排】接口（interface）和多态（Polymorphism）

【go从零单排】接口（interface）和多态（Polymorphism）

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在Go语言中&#xff0c;interface 是一种重要的类型&#xff0c;用于定义一组方法…
阅读更多...
Science Robotics 综述揭示演化研究新范式，从机器人复活远古生物！

Science Robotics 综述揭示演化研究新范式，从机器人复活远古生物！

在地球46亿年的漫长历史长河中&#xff0c;生命的演化过程充满着未解之谜。如何从零散的化石证据中还原古生物的真实面貌&#xff1f;如何理解关键演化节点的具体过程&#xff1f;10月23日&#xff0c;Science Robotics发表重磅综述&#xff0c;首次系统性提出"古生物启发…
阅读更多...
WPS文档中的“等线”如何删除

WPS文档中的“等线”如何删除

如何删除“等线”占用的行如何删除表格之间的空行WPS文档中的“等线”是什么如果删除脚注文本占用的行 如下这种&#xff0c;在文档中添加了表格和脚注&#xff0c;发现上下表格之间有多行空行&#xff0c;鼠标选中&#xff0c;显示是“等线”&#xff0c;那么如何去除等线占用…
阅读更多...
开源办公软件OnlyOffice的使用教程以及8.2版本的更新功能测评

开源办公软件OnlyOffice的使用教程以及8.2版本的更新功能测评

OnlyOffice 8.2 是一款功能全面的在线办公套件&#xff0c;在实际使用中&#xff0c;PDF协作编辑功能给我留下了深刻印象&#xff0c;让团队成员能够轻松共同编辑PDF并签署文档。这些改进不仅增强了协作效率&#xff0c;也让办公体验更加流畅和高效。如果你的团队需要一个集协作…
阅读更多...
C/C++/PYTHON 改变 console terminal cmd 字体输出颜色

C/C++/PYTHON 改变 console terminal cmd 字体输出颜色

C代码 #include <stdio.h>// 定义一些常用颜色的转义序列 #define RED "\x1b[31m" #define GREEN "\x1b[32m" #define YELLOW "\x1b[33m" #define BLUE "\x1b[34m" #define RESET "\x1b[0m"int main() {// 在控制台输…
阅读更多...
数据分析反馈：提升决策质量的关键指南

数据分析反馈：提升决策质量的关键指南

内容概要 在当今快节奏的商业环境中&#xff0c;数据分析与反馈已成为提升决策质量的重要工具。数据分析不仅能为企业提供全面的市场洞察&#xff0c;还能帮助管理层深入了解客户需求与行为模式。掌握数据收集的有效策略和工具&#xff0c;企业能够确保获得准确且相关的信息&a…
阅读更多...
Unity性能优化 -- 性能分析工具

Unity性能优化 -- 性能分析工具

Stats窗口Profiler窗口Memory Profiler其他性能分析工具&#xff08;Physica Debugger 窗口&#xff0c;Import Activity 窗口&#xff0c;Code Coverage 窗口&#xff0c;Profile Analyzer 窗口&#xff0c;IMGUI Debugger 窗口&#xff09; Stats 统级数据窗口 game窗口 可…
阅读更多...
ELK-ELK基本概念_ElasticSearch的配置

ELK-ELK基本概念_ElasticSearch的配置

文章目录 一、什么是ELK&#xff1f;有什么用&#xff1f;ELK是什么&#xff1f;ElasticsearchLogstashKibana ELK的作用要注意ELK的三个组件的版本需要相互兼容版本兼容性的一般原则版本兼容性对照表ELK Stack 6.x 系列ELK Stack 7.x 系列 版本升级和兼容性注意事项注意事项2 …
阅读更多...
【网络安全 | 并发问题】Nginx重试机制与幂等性问题分析

【网络安全 | 并发问题】Nginx重试机制与幂等性问题分析

未经许可，不得转载。 文章目录 业务背景Nginx的错误重试机制proxy_next_upstream指令配置重试500状态码非幂等请求的重试问题幂等性和非幂等性请求non_idempotent选项的使用解决方案业务背景 在现代互联网应用中，高可用性（HA）是确保系统稳定性的关键要求之一。为了应对服务…
阅读更多...
spring—boot(整合redis)

spring—boot(整合redis)

整合redis 第一步导入数据源 <!--redis--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> RedisConfig&#xff08;默认有RedisTemplate&#…
阅读更多...
关于倍速播放百度网盘视频

关于倍速播放百度网盘视频

免责声明&#xff1a; 下述内容均为自学探索&#xff0c;仅供学习交流&#xff01;&#xff01;&#xff01; 【侵权删】 正文&#xff1a; 倍速播放百度网盘视频&#xff0c;检索到的通常有&#xff1a;1、使用夸克浏览器倍速播放&#xff1b;2、使用ipad 快捷命令。 推荐…
阅读更多...
对HFSS中的结构使用Icepak进行热仿真-以微带电路为例-含工程

对HFSS中的结构使用Icepak进行热仿真-以微带电路为例-含工程

对HFSS中的结构使用Icepak进行热仿真-以微带电路为例-含工程 在HFSS中依据厂家模型自己进行连接器仿真—以SMP接口为例中分析了基于现有的结构在HFSS中对连接器进行3D建模&#xff0c;下面基于这个模型简要介绍如何在HFSS中进行热仿真。 下载链接&#xff1a;对HFSS中的结构使…
阅读更多...
如何处理模型的过拟合和欠拟合问题

如何处理模型的过拟合和欠拟合问题

好久没有写人工智能这块的东西了&#xff0c;今天正好在家休息&#xff0c;给大家分享一下最近在训练时遇到的过拟合和欠拟合的问题&#xff0c;经过仔细的思考&#xff0c;总结如下&#xff1a; 在处理模型的过拟合和欠拟合问题时&#xff0c;我们需要根据具体情况采取不同的…
阅读更多...
【EFK】Linux集群部署Elasticsearch最新版本8.x

【EFK】Linux集群部署Elasticsearch最新版本8.x

【EFK】Linux集群部署Elasticsearch最新版本8.x 摘要环境准备环境信息系统初始化启动先决条件 下载&安装修改elasticsearch.yml控制台启动Linux服务启动访问验证查看集群信息查看es健康状态查看集群节点查询集群状态 生成service token验证service tokenIK分词器下载 摘要 …
阅读更多...
省级基础设施水平数据（2000-2022年）

省级基础设施水平数据（2000-2022年）

基础设施不仅是社会生产和居民生活的基础&#xff0c;也是国民经济各项事业发展的基石。本文将通过计算公式“基础设施水平公路里程/年末人口数”&#xff0c;结合《中国统计年鉴》和国家统计局的数据&#xff0c;对基础设施水平进行量化分析 2000年-2022年省级基础设施水平数…
阅读更多...
最新文章

Copyright @ 2022~2023