HTML学习（2）
我的个人博客：欢迎来逛逛
HTML类
使用 <div>来进行给文章的分类，然后我们就可以为文章的类定义css样式，为相同的类设置相同的样式，或者为不同的类设置不同的样式。
如下所示：我们为下面的文章的几块定义了 <div>属性，则表示他们属于类，并且都属于 cities一类，所以我们便可以在<head>中统一设置 他们的类样式，如.cities所示
<html><head><!-- 分类设置样式 --><style>.cities{background-color: rgb(249, 255, 207);color: rgb(33, 113, 120);margin: 20;padding: 20;}</style></head><body><!-- ylh 类--><div class="cities"><h2>This is the Title</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div> <div class="cities"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p><p>Situated on the Seine River, it is at the heart of the le-de-France region, also known as the region parisienne.</p><p>Within its metropolitan area is one of the largest population centers in Europe,with over 12 million inhabitants.</p></div><div class="cities"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p><p>It is the seat of the Japanese government and the Imperial Palace,and the home of the Japanese Imperial Family.</p><p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p></div></body>
</html>
使用<span>来定义行内的类，设置此属性，能够为某一行的内容设置样式。
<html><head><!-- 分类设置样式 --><style>.cities{background-color: rgb(249, 255, 207);color: rgb(33, 113, 120);margin: 20;padding: 20;}.red{color: red;}.yellow{color: brown;}</style></head><body><!-- ylh 类--><div class="cities"><h2>This is the Title</h2><p>London is the capital city of England. <span class="red"> is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</span></p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div> <div class="cities"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p><span class="red">Situated on the Seine River, it is at the heart of the le-de-France region, also known as the region parisienne.</span><p>Within its metropolitan area is one of the largest population centers in Europe,with over 12 million inhabitants.</p></div><div class="cities"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p><p>It is the seat of the Japanese government and the Imperial Palace,and the home of the Japanese Imperial Family.</p><span class="yellow">The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</span></div></body>
</html>
HTML id属性
id用于为html指定唯一的id属性。id在html中是唯一的，id属性用于为特定样式表进行样式的设置。
注意id的写法：前面是一个#号，后面跟的是id名称，然后再花括号中定义css属性
然后再具有id的标签元素中，我们便可以改变他为指定的样式
<!DOCTYPE html>
<html><head><style>#ylh{background-color:rgb(199, 149, 114);color: black;text-align: center;font-size: 50px;}.red{color: red;}</style></head><body><h1>id属性</h1><p>设置id属性来指定样式</p><h2 id="ylh">London</h2><div><p>London is the capital city of England. <span class="red"> is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</span></p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Longinus.</p></div></body>
</html>
id对大小写敏感！
id至少包含一个字符，并且不能包含空格
class与id的区别：同一个class可以由多个HTML元素使用，但是一个id只能被页面的唯一一个HTML元素使用
使用id来进行跳转，类似于书签的跳转：
也可以跳转到另一个界面。
<a href="C1">点击跳转到第一章</a>...<h2 id="C1">第一章: xxxxx
</h2>....<a href="C1">点击跳转到第一章</a>
<a href="F:\\code\\html\\test2.html#C1">跳转到另一个界面的标签</a>
在 JavaScript 中使用 id 属性
HTML内联框架
使用<iframe>在网页内创建网页：
height和width属性来指定显示的网页的宽度和高度，frameborder来隐藏边框
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
我们的内联框架是 google.com，然后我们为其设置了一个name，之后在<a>标签中我们又指定了网页跳转的target，因此最终我们的网站将会在内联框架中显示
<iframe src="https://google.com" name="helloylh" width="500" height="500" frameborder="0"></iframe>
<a href="https://helloylh.com" target="helloylh">点击这里</a>
HTML Javascript
<!DOCTYPE html>
<html><body><h1>我的第一段JavaScript</h1><button type="button" onclick="document.getElementById('Time').innerHTML = Date()">点击显示时间</button><p id="Time"></p> <!-- 在这里显示时间 --></body>
</html>
我的第一段JavaScript
点击显示时间
<script>标签用来定义客户端脚本，即可以包含脚本语句，也可以通过src属性指向外部脚本文件。
🐀🐂🐅🐇🐉🐍🐎🐏🐒🐥🐕🐖
<p id="demo"></p> <!-- 在此显示 -->
<script>document.getElementById('demo').innerHTML = "🐀🐂🐅🐇🐉🐍🐎🐏🐒🐥🐕🐖";
</script>
JavaScript的简单介绍：
<!DOCTYPE html>
<html><body><h1>javascript举例</h1><p>javascript修改文字</p><button type="button" onclick="button_function1()">点击我，修改下面的内容</button><button type="button" onclick="button_function2()">点击这里，修改下面的文字的样式</button><p id="demo1">这是原来的内容！</p><p id="demo2">这是一段话</p><script>function button_function1(){document.getElementById('demo1').innerHTML = "🐀🐂🐅🐇🐉🐍🐎🐏🐒🐥🐕🐖";}function button_function2(){document.getElementById('demo2').style.fontSize = '50px';document.getElementById('demo2').style.color = 'red';document.getElementById('demo2').style.background = 'black';}</script><noscript>抱歉，您的浏览器不支持javascript</noscript></body>
</html>
HTML文件路径
文件的相对路径：
| 相对路径 | 内容 |
|---|---|
| “picture/images.png” | 同一级文件夹下的picture文件夹的images.png图片 |
| “images.png” | 当前文件夹下的images.png图片 |
| “/picture/images.png” | 根目录下的pciture文件夹下的images.png图片 |
| “…/images.png” | 上一级文件夹下的images.png图片 |
使用相对路径是个好习惯。
HTML头部
<head>是所有头部元素的容器，可以将以下标签添加到<head>中：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title>标签：定义文档的标题。
<head><title>一个简单的JavaScript测试网页</title>
</head>
<base>标签：指定链接的基地址与其他属性，在下面我们需要用到的时候直接使用相对路径即可
等价于：https://cdnjson.com/images/2023/04/01/6666.png
<!-- 指定默认链接基地址与打开方式 -->
<base href="https://cdnjson.com/images/2023/04/01/">
<base target="_blank">...<a href="6666.png">点击打开图片</a>
<link>：通过外部样式表进行格式化
<head><link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<style>：规定标签元素的样式：为网页主题设置颜色
<style>body{background-color: antiquewhite; }
</style>
<meta>：提供页面的信息。提供页面的元数据，但是这些数据对于用户是不可见的，但是对于机器是可见的。
常被用于规定页面的描述，关键词，作者，最后修改时间与其他数据。
下面规定了页面的描述与页面关键字
<meta name="description" content="test javascript">
<meta name="keywords" content="css javascript cpp">
name 和 content 属性的作用是描述页面的内容。
<script>：定义客户端的脚本。