当前位置：首页 > article >正文

Web前端开发--HTML语言

article 2024/11/15 13:32:33

文章目录

前言
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>