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