前端路线--HTML篇(day01)

最新推荐文章于 2024-09-11 14:09:02 发布
最新推荐文章于 2024-09-11 14:09:02 发布
阅读量368 收藏 3
点赞数 2
分类专栏： 前端 文章标签： HTML 基础 学习 教程 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/122232849
版权

Html篇Day01

```html

<!DOCTYPE html>
<!-- 文档声明  -->
<html lang="en">
<!-- 根目录、语言=英语 -->
<head>
	<meta charset="UTF-8">
	<!-- 字符集=国际通用编码格式 -->
	
	<title>淘宝网 - 淘！我喜欢</title>
	<link rel="icon" href="img/a4.ico">
	<!-- https://www.taobao.com/favicon.ico -->
	<!-- 通过官网后面添加/favicon.ico访问图标，下载下来 -->
	<!-- 通过link标签引用，把rel属性改为icon、href属性里填写图片路径 -->
</head>
<body>
	<!-- 网页的组成：文字、图片、超链接、音频、视频、按钮、搜索框 -->
	hello world!
	<h1>hello world!</h1>

	<!-- 标签分为双标签和单标签 -->
	<!-- 标签关系分为：兄弟关系和父子关系 -->


	
</body>
</html>

网页初识

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>

	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
		span{
			width: 200px;
			height: 200px;
			background-color: #ff0;
		}
	</style>
</head>
<body>
	<h1>我是1级<br>标题</h1>
	<h2>我是2级标题</h2>
	<h3>我是3级标题</h3>
	<h4>我是4级标题</h4>
	<h5>我是5级标题</h5>
	<h6>我是6级标题</h6>

	<p>段落标签Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptate cupiditate accusantium quibusdam vero distinctio facilis facere cum pariatur, placeat nobis consequatur eius fuga in dolor impedit temporibus? Quam, alias?</p>
	<p>段落标签Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptate cupiditate accusantium quibusdam vero distinctio facilis facere cum pariatur, placeat nobis consequatur eius fuga in dolor impedit temporibus? Quam, alias?</p>

	<hr>
	<!-- 水平线标签 -->

	<br>
	<!-- 换行标签 -->

	<div>标准的块元素</div>
	<span>标准的行内元素</span>

	<!-- 文本格式化标签 -->
	<b>文本加粗</b>
	<strong>文本加粗</strong>
	<i>倾斜</i>
	<em>倾斜</em>
	<s>删除线</s>
	<del>删除线</del>
	<u>下划线</u>
	<ins>下划线</ins>
	<small>小号文本</small>
	<mark>显示高亮文本</mark>
</body>
</html>

基本标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>

	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
		span{
			width: 200px;
			height: 200px;
			background-color: #ff0;
		}
	</style>
</head>
<body>
	<h1>我是1级<br>标题</h1>
	<h2>我是2级标题</h2>
	<h3>我是3级标题</h3>
	<h4>我是4级标题</h4>
	<h5>我是5级标题</h5>
	<h6>我是6级标题</h6>

	<p>段落标签Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptate cupiditate accusantium quibusdam vero distinctio facilis facere cum pariatur, placeat nobis consequatur eius fuga in dolor impedit temporibus? Quam, alias?</p>
	<p>段落标签Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptate cupiditate accusantium quibusdam vero distinctio facilis facere cum pariatur, placeat nobis consequatur eius fuga in dolor impedit temporibus? Quam, alias?</p>

	<hr>
	<!-- 水平线标签 -->

	<br>
	<!-- 换行标签 -->

	<div>标准的块元素</div>
	<span>标准的行内元素</span>

	<!-- 文本格式化标签 -->
	<b>文本加粗</b>
	<strong>文本加粗</strong>
	<i>倾斜</i>
	<em>倾斜</em>
	<s>删除线</s>
	<del>删除线</del>
	<u>下划线</u>
	<ins>下划线</ins>
	<small>小号文本</small>
	<mark>显示高亮文本</mark>
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>
</head>
<body>
	<!-- 添加网络图片 -->

	<!-- width="300"   设置图片宽度(在不知道图片比例的情况下，一般只设置宽度) -->
	<!-- height="300"   设置图片高度 -->
	<img src="https://gw.alicdn.com/bao/upload/O1CN01gKeril1ktQSJUZrF1_!!6000000004741-0-yinhe.jpg_Q75.jpg" alt="" width="300">

	<!-- 导入本地图片 -->
	<!-- alt="长袖毛衣短款"  图片加载不出来时显示的文本 -->
	<img src="img/aa.jpg" alt="长袖毛衣短款" width="300" title="鼠标移入的提示信息">
</body>
</html>

超链接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>
</head>
<body>
	<!-- 点击之后可以跳转的内容，称为超链接 -->

	<!-- 跳转到网络地址 -->
	<a href="http://www.baidu.com">百度一下</a>

	<!-- 跳转到本地页面 -->
	<!-- target="_blank"    控制a标签在新的标签页打开 -->
	<a href="03-图片标签.html" target="_blank" title="提示信息">跳转本地页面</a>

	<!-- 跳转到图片 -->
	<a href="img/aa.jpg">大美女</a>

	<!-- 设置空连接 -->
	<a href="#">设置空链接</a>
</body>
</html>

锚点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>
</head>
<body>
	<a href="#two">跳到第二段</a>
	<a href="06-锚点2.html#three" target="_blank">跳到锚点2页面的第三段</a>
	<h1 id="top">第一段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1 id="two">第二段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1>第三段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1>第四段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1>第五段</h1>
	<h2><a href="#top">回到顶部</a></h2>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
</body>
</html>

锚点2
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>
</head>
<body>
	<h1>第一段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1>第二段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1 id="three">第三段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1>第四段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<h1>第五段</h1>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo magni unde ipsa molestias porro iusto eaque atque beatae necessitatibus velit sapiente itaque similique, culpa ipsum sunt illo commodi enim tempora!</p>
</body>
</html>

特殊字符

<!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>
	你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好
	<h1>&lt;&gt;</h1>
	&copy;


	<!-- 注释 -->
	<!-- 注释快捷键    ctrl+/ -->
	<!-- 注释让程序员自己看的，不会渲染在浏览器页面里 -->
</body>
</html>

路径

<!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="img/aa.jpg" alt="" width="300">
	<img src="../课件/images/js.gif" alt="" width="300">


	<!-- 绝对路径:通过盘符寻找的路径，不推荐使用 -->
	<img src="C:\Users\41616\Pictures/cc.jfif" alt="" width="300">
</body>
</html>
喝西瓜汁的兔叽Yan
关注
专栏目录
前端路线--HTML篇（day07）
Yan9_9的博客
01-08 120
边框三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 0px; height
前端路线--HTML篇（Day03）
Yan9_9的博客
01-04 250
CSS的引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第二种:内联样式 --> <style> sp
前端路线--HTML篇（day05）
Yan9_9的博客
01-05 77
背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; heigh
前端路线--HTML篇（day04）
Yan9_9的博客
01-04 126
标签的分类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> hr{ width: 400px; height
前端路线--HTML篇（day08）
Yan9_9的博客
01-08 197
浮动带来的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*子元素浮动过后会造成父元素高度为0*/ .box
前端路线--HTML篇（day06）
Yan9_9的博客
01-07 262
外边距合并1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; he
前端路线--JavaScript篇（day01）
Yan9_9的博客
01-13 253
编程语言 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{ width: 200px; heigh
前端路线--H5篇（day01）
Yan9_9的博客
03-05 144
H5 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> main{ height: 600px; border: solid 1px red; } </style> </head> <body> <!-- H5新标签 --&gt
前端路线--H5篇（day05）
Yan9_9的博客
03-09 517
移动端布局概念 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 布局视口:屏幕小，盒子宽，出现滚动条 js获取: document.body.clientWidth 视觉视口：人眼睛看屏幕的大小 js获取:window.inn
〖Python语法进阶篇⑬〗- 正则表达式 - re 模块常用函数
易编橙 · 终身成长社群，相遇已是上上签！
04-19 4万+
直奔主题，今天我们来学习一下 re 模块的常用函数 。
〖Python自动化办公篇㉑〗- python实现邮件自动化 - 定时发送邮件
易编橙 · 终身成长社群，相遇已是上上签！
05-23 4万+
该章节为 [Python自动化办公篇]的最后一章，通过定时任务发送邮件的方式学习定时模块的使用 --> `schedule` 。(该章内容篇幅较少)
vue大型电商项目尚品汇（后台篇）day03
weixin_45566993的博客
06-18 903
今天把平台属性的管理基本完成了，后台管理做到现在基本也开始熟悉，确实就是对ElementUI的一个熟练程度。先把接口弄好，应该在第三级标题选择后进行发请求静态页面搭建渲染数据属性值列表，用到一个新组件 tag，并且这里有多个属性值，所以要遍历，既然要在里面加标签那就要用slot，最后添加两个图标点击添加修改应该将下面的表格组件隐藏出来一个新的组件如果没有选择到三级分类的时候，添加属性按钮应该不可点新的页面布局点击取消应该回到列表展示界面首先我们的接口需要的数据，这里要注意我们categoryId是收集cat
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
热门推荐
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
从10个角度来检测自己是不是一个合格的前端工程师，这些要求你都达到了吗？
BOM485480的博客
04-10 933
开篇 前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到： 到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。 这样是...
前端用html写excel文件直接打开
全易
09-10 554
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 328
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1093
水平垂直居中的几种方法（总结）
HTML中的文字与分区标记
最新发布
qq_74861982的博客
09-11 416
HTML中的文字与分区标记
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值