第二章

 # 案例1
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>静夜思</h1>
  <h2>李白</h2>
  <p>床前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
  低头&nbsp;&nbsp;&nbsp;&nbsp;思故乡
</body>
</html>
 
# 案例2
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小滴课堂xdclass.net</title>
</head>
<body>
</body>
</html>

标签简介

 ⽂档声明
  告诉浏览器⽹⻚是以html5版本编写的
meta标签
  ⾃结束标签
  可以提供该⽹⻚相关信息,元数据
  charset="utf-8"：中⽂的⽹⻚需要⽤到的声明编码，否则会出现乱码
  name="keywords" content="静夜思,诗词"：提供⽹⻚的关键字，关键字⽤,隔开
  name="Description"：描述⽹⻚的信息
空格
  &nbsp;

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素的属性</title>
  <style>
    .front{
      color: red;
      font-weight: 900;
    }
  </style>
</head>
<body>
  <a href='https://xdclass.net'>小滴课堂</a>
  <p class="front">前端</p>
  <p>后端</p>
  <p>测试</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>自结束标签和注释</title>
  <link rel="stylesheet" href="">
</head>
<body>
  床前明月光
  <hr>
  疑是地上霜
  <!-- 大课训练营的图片 -->
  <!-- 
    <img src="https://file.xdclass.net/video/2021/62-paas/zt-x.jpeg" alt="大课训练营图片">
  <input> -->
</body>
</html>

⾃结束标签

 <meta>
<link>
<hr>
<img>
<input>

注释

 内容要简介明了
在实际⼯作中，当代码复杂程度⼤时，便于解释说明代码含义
注释暂时⽤不到的代码⽚段
注释不能嵌套，否则⽹⻚中会渲染出 -->

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语义化标签</title>
</head>
<body>
  <h1></h1>
  <h2></h2>
  <h3></h3>
  <p>小滴课堂：</p> <strong>前端</strong> <em>后端</em> 测试的教程
</body>
</html>

语义化

 每个HTML元素都有其具体的含义
⽹⻚标题：title
⽹⻚内容标题：h1~h6
段落：p
强调：strong
头部元素：header
导航元素：nav
主要内容：main
 
语义化的作用
代码结构：在⻚⾯没有css的情况下，也能够呈现出很好的内容结构
有利于SEO: 标签确定关键字的权重，因此可以增加搜索相关权重，使⽹站在搜索结果中排名靠前

posted @ 2022-08-29 08:42 DogLeftover 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 区块标签和⾏内标签

· CSS写法

· 【HTML5】1

· 前端学习笔记DAY2 HTML5基础（2）（b站pink老师）

· （二）复习第二课（07.15- 07.20第一轮）：HTML标签元素练习大全

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

第二章

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	# 案例1
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<h1>静夜思</h1>
	<h2>李白</h2>
	<p>床前明月光</p>
	<p>疑是地上霜</p>
	<p>举头望明月</p>
	<p>低头思故乡</p>
	低头    思故乡
	</body>
	</html>

	# 案例2
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>小滴课堂xdclass.net</title>
	</head>
	<body>
	</body>
	</html>

	⽂档声明
	告诉浏览器⽹⻚是以html5版本编写的
	meta标签
	⾃结束标签
	可以提供该⽹⻚相关信息,元数据
	charset="utf-8"：中⽂的⽹⻚需要⽤到的声明编码，否则会出现乱码
	name="keywords" content="静夜思,诗词"：提供⽹⻚的关键字，关键字⽤,隔开
	name="Description"：描述⽹⻚的信息
	空格

	放在开始标签上
	总是以名值对的形式出现的,值是通过双引号或者单引号包裹
	在元素中添加附加信息，⽅便我们找到它
	设置标签的内容展示

	内容要简介明了
	在实际⼯作中，当代码复杂程度⼤时，便于解释说明代码含义
	注释暂时⽤不到的代码⽚段
	注释不能嵌套，否则⽹⻚中会渲染出 -->

	每个HTML元素都有其具体的含义
	⽹⻚标题：title
	⽹⻚内容标题：h1~h6
	段落：p
	强调：strong
	头部元素：header
	导航元素：nav
	主要内容：main

	语义化的作用
	代码结构：在⻚⾯没有css的情况下，也能够呈现出很好的内容结构
	有利于SEO: 标签确定关键字的权重，因此可以增加搜索相关权重，使⽹站在搜索结果中排名靠前