1、HTML入门、标题标签、文本标签、多媒体标签

最新推荐文章于 2022-10-15 16:49:19 发布
最新推荐文章于 2022-10-15 16:49:19 发布
阅读量191 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119610538
版权

文章目录

1、note

Web：HTML CSS JavaScript JQuery Bootstrap vue

IDE：IDEA HBuilder VSCode

HTML: 框, 书写页面元素, 内容
CSS: 装饰, 页面美化
JavaScript: 动画效果

帮助文档: W3School - W3C

html语法:(超文本标记语言)
超文本: 图片, 超链接, 视频, 音频…
标记语言: 标签
1.大小写不敏感
2.标签必须有结束
3.html的属性可以不加 “”

路径问题:
1.绝对路径: 盘符开始
URI: 统一资源路径
/Users/bonnie/Java2106/WEB/day01/img/logo2.png
URL: 统一资源路径
http:// 127.0.0.1:8848/WEB/day01/04_多媒体标签.html
协议file:// ftp:// ip:port / URI
file:///Users/bonnie/Java2106/WEB/day01/04_多媒体标签.html
2.相对路径
相对目录
. : 当前目录
…: 上一级目录

2、html入门

<!-- !DOCTYPE 就是html文档规范, html5规范 -->
<!DOCTYPE html>
<!-- html/htm文件根标签 - html
     子标签: head, body
     head: 文件头, 都不会显示在页面中
           css代码, js代码
     body: 文件内容
 -->
<Html lang="en">
<head>
    <!-- 元信息, 设置页面基本信息, 例如字符集, 缩放比例, 分辨率, 描述... -->
    <meta charset="UTF-8">
    <!-- 标题: 显示再标签卡中的 -->
    <title>html模板</title>
</head>
<body>
    <!-- 没有格式, 所有文本以外的内容, 都需要标签来完成 -->
    hello html!
    hello html!
    hello html!
</body>
</Html>

在这里插入图片描述

3、html标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<!-- 标题标签hn特点:
		     随着hn中 n的数值变大, 标题大小会变小
			 标题是独立占一行
			 n: 1 ~ 6
		-->
		<h1>1级标题</h1>
		文章正文
		<h2>2级标题</h2>
		<h3>3级标题</h3>
		<h4>4级标题</h4>
		<h5>5级标题</h5>
		<h6>6级标题</h6>
		<!-- 标题标签是没有h7 -->
		<h7>7级标题</h7>
	</body>
</html>

在这里插入图片描述

4、html文本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<!-- 1. 段落 
		        特点: 自动换行, p与p之间会有留白
		  -->
		<p>Lorem ipsum dolor sit amet,  <br />
		<!-- 手动换行 br -->
		<!-- 特殊字符, 例如 空格, <, >... 需要使用实体字符
		     格式: &xx;
		 -->
		consectetur    &nbsp; &nbsp; &nbsp; &lt; a &gt;       adipisicing elit. In error quos accusamus aperiam molestias sequi quae quis nesciunt beatae labore dolor tempora sint exercitationem iusto magni nulla quia voluptatum cumque nisi dolorem maxime aliquid alias veniam est reiciendis. Enim sit vitae laboriosam totam accusantium pariatur praesentium. Dolorem est repellat quae repudiandae dicta voluptas. Modi recusandae aperiam tempora corporis possimus autem porro fugit pariatur eveniet reiciendis molestiae id consectetur accusantium atque aut fugiat impedit facere harum enim numquam exercitationem earum in consequatur eligendi sapiente sint explicabo. Dolores laborum at impedit minima sit aliquid facilis facere animi rerum eligendi veritatis atque repellat?</p>
		<p align=right>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet ducimus vel adipisci fugiat corporis illo officia iusto voluptas facere magni!</p>
		
		
		<!-- 2.字体标签, 需要通过属性来控制效果
			 属性: 
			 color: 颜色 rgb(255,0,0)  #ff0000(#f00)  red
			 size: 大小  1~7 数值越大, 字体越大
			 face: 字体名
		 -->
		<font color="rgb(255,0,0)" size="1">Lorem ipsum dolor sit amet.</font> <br>
		<font color="#ff0000" size="2">Lorem ipsum dolor sit amet.</font><br>
		<font color="#f00" size="3">Lorem ipsum dolor sit amet.</font><br>
		<font color="red" size=4>Lorem ipsum dolor sit amet.</font><br>
		<font color="#3286BB" size="5">Lorem ipsum dolor sit amet.</font><br>
		<font color="#3286BB" size="6" face="arial">Lorem ipsum dolor sit amet.</font><br>
		<font color="#3286BB" size="7">Lorem ipsum dolor sit amet.</font><br>
		<font color="#3286BB" size="8">Lorem ipsum dolor sit amet.</font><br>
		
		<!-- 3.特殊字体标签 -->
		<!-- 加粗b, 变斜i, 下划线u -->
		<b><i>Lorem ipsum dolor.</i></b>
		<i>Lorem ipsum dolor.</i>
		<u>Lorem ipsum dolor.</u> <br>
		<!-- 加粗 strong -->
		<strong>Lorem ipsum dolor.</strong>
		<!-- 强调: em -->
		<em>Lorem ipsum dolor.</em>
		<!-- 预设标签 pre -->
		<pre>
			离离原上草
			  一岁一枯荣
		</pre>
		
		<!-- 4.分割线
			   属性: size noshade
			   noshade="noshade": 属性名和属性值一样的, 可以省略=后面部分
			   width: 宽度, [像素, 百分比]
			   align: 对齐方式, left, center, right
		 -->
		<hr size=7 noshade width="50%" align="left" />
		
	</body>
</html>

在这里插入图片描述

5、多媒体标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多媒体标签</title>
	</head>
	<body>
		<!-- 1.图片标签
			 属性
			  src: 必备, 图片路径, 当前目录: day01 -> ./
				   logo2.png路径: ./img/logo2.png
				   ../ -> WEB
		      width: 宽度 像素值  百分比
			  height: 高度
			  宽度和高度只设置一个, 等比例缩放
			  title: 标题, 鼠标悬停显示内容
			  alt: 图片无法显示时, 显示的内容, 如果没有设置alt, 就显示title
		 -->
		<img src="../img/logo2.png" />
		<img src="../img/10.jpg" width="100%"
		 title="一张图片" alt="要显示的内容" />
		 
		 <!-- 2.视频标签 h5
		      属性: controls 播放控制
			     loop 循环播放 
				 autoplay 自动播放
		  -->
		<video src="../media/video.mp4" controls
		    loop autoplay ></video>
			
		<!-- source 设置一个视频资源列表, 
		     顺序播放第一个视频, 
			 如果第一个视频文件有问题, 可以选择播放下一个视频 -->
		<video controls>
			<source src="../media/video2.mp4"></source>
			<source src="../media/video1.mp4"></source>
		</video>
		<!-- 3.音频标签 h5
			   不支持调整大小
		 -->
		<audio src="../media/audio.mp3" controls></audio>
		
		<!-- 嵌入第三方网站视频 -->
		<iframe height=498 width=510 src='https://player.youku.com/embed/XNTE2Mjk5MTEzMg==' frameborder=0 'allowfullscreen'></iframe>
	</body>
</html>

在这里插入图片描述

天 阳 在 线€
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML标签教程-1.hn标签
qianzhilin123456的博客
07-01 1079
HTML标签教程 1.hn标签 先看代码: <h1 align="对齐方式">文本</h1> hn拥有六种样式。分别是h1~h6。下面请看表格： hn 说明 h1 大标题 h2 副标题 h3 3级标题 h4 4级标题 h5 5级标题 h6 6级标题 从表格可以看出来，h1最大，h6最小 hn的对齐方式有三种，下面请看表格： 对齐 说明 left 左 center 中 right 右 没了 ...
HTML的常用标签
冷兮雪的博客
11-08 6119
这个标签可以在页面上画水平线。
前端入门HTML篇
qq_44354408的博客
08-04 788
HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。 标签是什么？ HTML标签 是由一对尖括号包裹的单词构成 例如: 所有标签中的单词不可能以数字开头；标签不区分大小写 和 推荐使用小写；标签分为两部分: 开始标签 和 结束标签 ， 两个标签之间的部分，......
web---HTML基础知识
Allure泽宇的博客
06-11 5388
HTML基础知识内容总结
html基础学习
weixin_52676304的博客
10-15 3738
html新手学习，以菜鸟教程为主
HTML语言(概述及常用标签）
hacker707的博客
07-29 7894
1.1什么是HTMLHTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用)目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术1.2HTML概念HTMLHyperTextMarkupLanguage，超文本标记语言。是用来帮助我们构建网页的。【超文本】网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。【标记语言】标记，也叫做标签。...
HTML 入门资料Demo
01-23
它使用一系列标签来描述网页内容的结构和样式，包括段落、标题、链接、图片、列表等。HTML文档是由HTML元素组成的，这些元素可以嵌套在其他元素中，从而构建出复杂的网页结构。 HTML5是HTML的最新版本，相比之前的...
从入门到精通HTML5——PDF——网盘链接
02-27
　1.3.4 文件标题标签<title> 7 　1.3.5 文件主体标签<body> 7 　1.3.6 编写文件的注意事项 8 　1.4 编写第一个HTML文件 8 　1.4.1 HTML文件的编写方法 8 　1.4.2 手工编写页面 9 　1.4.3 使用可视化...
HTML开发王
01-03
第1篇 html基础入门篇 第1章 建立首要的、基础的正确认知 1.1 internet和万维网 1.1.1 什么是www(万维网) 1.1.2 w3c是什么 1.2 网页、浏览器、网站和网络服务器 1.2.1 网页和浏览器 1.2.2 不可不知的浏览器发展史 ...
常用的文本标签都有哪些呢？
csdn1048的博客
03-06 5926
常用的文本标签
HTML学习3：常用标签之文本标签
热门推荐
life is wonderful
10-18 1万+
前面说到HTML是一种标记语言，在HTML中就是用一个个标签来标记网页的，下面就来进行常用标签的学习。我们说到网页，首先关注到的就是网页中显示的文本内容，而这些文本内容就是用文本标签来标记的。        在说常用的标签之前，我们先来说说标签的组成。        HTML 标记标签通常被称为 HTML 标签 (HTML tag)。        1HTML 标签是由尖括号包围的关键词，比
pyzmq-23.1.0-cp310-cp310-musllinux_1_1_x86_64.whl
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
MAVEN 教程和详细讲解
06-07
MAVEN 教程和讲解
人工智能基础知识背诵（大学生期末）
06-07
人工智能基础知识背诵（大学生期末）
pyzmq-25.1.0-cp37-cp37m-musllinux_1_1_x86_64.whl
最新发布
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
grpcio-1.23.0-cp37-cp37m-win_amd64.whl
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
html文档入门重点难点,html中的重难点标签的用法
05-16
4. 常用的HTML标签：HTML中有很多常用的标签，包括标题标签、段落标签、列表标签、链接标签、表格标签、图像标签、表单标签等。 5. HTML标签的语义化：HTML标签的语义化是指使用正确的HTML标签来描述文档的内容。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值