Web前端开发--HTML语言

news2024/11/26 11:45:50

文章目录

  • 前言
  • 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.coloradmin.cn/o/2237571.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[ DOS 命令基础 2 ] DOS 命令详解-网络相关命令

[ DOS 命令基础 2 ] DOS 命令详解-网络相关命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…
阅读更多...
gitlab无法创建合并请求是所有分支都不显示

gitlab无法创建合并请求是所有分支都不显示

点击Merge Requests ------> New merge request 创建新的合并请求时&#xff0c;在Source branch和Target branch中一个分支都不显示 排查思路&#xff1a; 1.怀疑是权限问题。 发现只有我的一个账号出现&#xff0c;检查了账号的权限&#xff0c;尝试了master、develop角色…
阅读更多...
【温度表达转化】

【温度表达转化】

【温度表达转化】 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 利用公式 C5∗(F−32)/9 &#xff08;其中C表示摄氏温度&#xff0c;F表示华氏温度&#xff09; 进行计算转化。 输出 输出一行&#x…
阅读更多...
「QT」几何数据类 之 QPoint 整型点类

「QT」几何数据类 之 QPoint 整型点类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…
阅读更多...
[Linux]：高级IO

[Linux]：高级IO

1. IO 理解 1.1 IO 的基本概念 I/O即输入/输出&#xff08;input/output&#xff09;&#xff0c;是计算机系统中极为关键的操作环节。 在经典的冯诺依曼体系结构框架下&#xff0c;其核心在于数据的传输流向界定了输入与输出的概念。具体而言&#xff0c;当把数据从诸如键盘…
阅读更多...
【GeoJSON在线编辑平台】（2）吸附+删除+挖孔+扩展

【GeoJSON在线编辑平台】（2）吸附+删除+挖孔+扩展

前言 在上一篇的基础上继续开发&#xff0c;补充上吸附功能、删除矢量、挖孔功能。 实现 1. 吸附 参考官方案例&#xff1a;Snap Interaction 2. 删除 通过 removeFeature 直接移除选中的要素。 3. 挖孔 首先是引入 Turf.js &#xff0c;然后通过 mask 方法来实现挖孔的…
阅读更多...
【ReactPress】React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

【ReactPress】React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

ReactPress 是使用React开发的开源发布平台&#xff0c;用户可以在支持React和MySQL数据库的服务器上架设属于自己的博客、网站。也可以把 ReactPress 当作一个内容管理系统&#xff08;CMS&#xff09;来使用。 前言 此项目是用于构建博客网站的&#xff0c;包含前台展示、管理…
阅读更多...
ZISUOJ 2024算法基础公选课练习一（1）

ZISUOJ 2024算法基础公选课练习一（1）

前言、 又是一年算法公选课&#xff0c;与去年不同的是今年学了一些纯C&#xff08;而不是带类的C&#xff09; 一、我的C模板 1.1 模板1 #include <bits/stdc.h> using i64 long long;int main() {std::cin.tie(nullptr)->sync_with_stdio(false);return 0; } 1…
阅读更多...
【1】虚拟机安装

【1】虚拟机安装

1.安装VMware WorkStation Pro VMware下载地址&#xff1a; 密钥&#xff1a;YF390-0HF8P-M81RQ-2DXQE-M2UT6 2.新建虚拟机 centos7下载地址&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云
阅读更多...
【SpringBoot】SpringBoot自带的Jackson入门使用

【SpringBoot】SpringBoot自带的Jackson入门使用

导入依赖 springboot自带的&#xff0c;挨个点进去&#xff0c;就能找到 自定义对象转换器 import com.fasterxml.jackson.databind.DeserializationFeature; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.module.SimpleModu…
阅读更多...
软件工程概论项目(一)，git环境的配置和平台代码的拉取

软件工程概论项目(一)，git环境的配置和平台代码的拉取

距离软工概论项目答辩还有五个周的时间&#xff0c;需要做一个项目&#xff0c;把心得体会都做一个记录。以便以后进行回顾和反思 这里写目录标题 一、环境的配置gitbash 一、环境的配置 gitbash 安装gitbash&#xff0c;简单说两句&#xff0c;git用于多人协作和代码托管&am…
阅读更多...
分布式数据库中间件mycat

分布式数据库中间件mycat

MyCat MyCat是一个开源的分布式数据库系统&#xff0c;它实现了MySQL协议&#xff0c;可以作为数据库代理使用。 MyCat(中间件)的核心功能是分库分表&#xff0c;即将一个大表水平分割为多个小表&#xff0c;存储在后端的MySQL服务器或其他数据库中。 它不仅支持MySQL&#xff…
阅读更多...
万字长文解读深度学习——循环神经网络RNN、LSTM、GRU、Bi-RNN

万字长文解读深度学习——循环神经网络RNN、LSTM、GRU、Bi-RNN

&#x1f33a;历史文章列表&#x1f33a; 深度学习——优化算法、激活函数、归一化、正则化深度学习——权重初始化、评估指标、梯度消失和梯度爆炸深度学习——前向传播与反向传播、神经网络&#xff08;前馈神经网络与反馈神经网络&#xff09;、常见算法概要汇总万字长文解读…
阅读更多...
一文了解什么是腾讯云开发

一文了解什么是腾讯云开发

关于云开发的猜想 说到云开发&#xff0c;作为开发者的大家是否大概就有了想法。比如说过去的开发工作都是在自己本地电脑的开发工具&#xff0c;比如IDEA开发工具进行开发的&#xff0c;开发完成后再部署到服务器测试以及上线。那么腾讯云开发&#xff0c;是不是就是不用本地…
阅读更多...
双指针算法的妙用：提高代码效率的秘密（2）

双指针算法的妙用：提高代码效率的秘密（2）

双指针算法的妙用&#xff1a;提高代码效率的秘密&#xff08;2&#xff09; 前言&#xff1a; 小编在前几日讲述了有关双指针算法两道题目的讲解&#xff0c;今天小编继续进行有关双指针算法习题的讲解&#xff0c;老规矩&#xff0c;今天还是两道题目的讲解&#xff0c;希望…
阅读更多...
【Python】从入门开始抓取你想要的电影，一周可掌握基础，附完整源码

【Python】从入门开始抓取你想要的电影，一周可掌握基础，附完整源码

Python学习很简单&#xff0c;只是你走进了误区。 为什么你一定要先掌握枯燥的基础点后&#xff0c;再去做实际操作呢&#xff1f; 其实&#xff0c;你根本坚持不了那么长时间&#xff0c;但实际上你可以直接去做python项目。 不信&#xff1f;看看我做这个项目的思路&#x…
阅读更多...
逐梦代码深林：Linux编译之舞，链接之诗——自举、动静态库的浪漫旅程

逐梦代码深林：Linux编译之舞，链接之诗——自举、动静态库的浪漫旅程

文章目录 问题引入&#xff0c;为什么要进行编译->汇编?一、详细解释编译器自举1. 从最初的二进制编程到汇编2. 第一代汇编编译器的诞生3. 编译器自举的出现&#xff1a;从汇编到更高级的编译器4. 自举的延续&#xff1a;从汇编到高级编程语言5. 为什么要进行编译器自举&am…
阅读更多...
AI 写作（六）：核心技术与多元应用（6/10）

AI 写作（六）：核心技术与多元应用（6/10）

一、AI 写作的核心技术概述 AI 写作在当今数字化时代正发挥着越来越重要的作用。它不仅极大地提高了写作效率&#xff0c;还为不同领域带来了创新的可能性。 AI 写作的核心技术主要包括基于模板的文本生成和基于深度学习的文本生成。基于模板的文本生成通常依赖预先设定的模板…
阅读更多...
米家通过HomeAssistant控制笔记本电脑开关机

米家通过HomeAssistant控制笔记本电脑开关机

米家通过HomeAssistant控制笔记本电脑开关机 配置HomeAssistant配置EMQX mqtt自动化配置电脑关机实现电脑开机实现&#xff08;网络唤醒WOL包&#xff09; 环境准备&#xff1a; HomeAssistant&#xff1a;能配置接入米家的设备&#xff0c;我这里采用fnos安装MQTT服务器&…
阅读更多...
QT信号和槽与自定义的信号和槽

QT信号和槽与自定义的信号和槽

QT信号和槽与自定义的信号和槽 1.概述 这篇文章介绍下QT信号和槽的入门知识&#xff0c;通过一个案例介绍如何创建信号和槽&#xff0c;并调用他们。 2.信号和槽使用 下面通过点击按钮关闭窗口的案例介绍如何使用信号和槽。 创建按钮 在widget.cpp文件中创建按钮代码如下 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023