Html+CSS

四川财阀

已于 2023-04-20 11:44:56 修改

阅读量31

点赞数

文章标签： html css javascript

于 2023-04-20 11:03:17 首次发布

本文链接：https://blog.csdn.net/hongsegeming/article/details/130261789

版权

alt：这个属性提供了一段描述性文本，用于替代图像显示在浏览器中的位置。如果图像无法加载，浏览器可以使用这个属性指定的文本来替代图像。在这个例子中，alt的值是"一只棕色的狗正在草地上奔跑"。
title：这个属性用于提供一段描述性的文本，当用户将鼠标指针悬停在图像上时，浏览器会将这个文本显示为一个工具提示（tooltip）。在这个例子中，title的值是"展示"。
width：这个属性指定了图像的宽度，可以是一个具体的像素值或者一个百分比值。在这个例子中，width的值为空，这意味着图像的宽度将自适应于父元素的宽度。
height：这个属性指定了图像的高度，可以是一个具体的像素值或者一个百分比值。在这个例子中，height的值为空，这意味着图像的高度将自适应于父元素的高度。

<img src="D:/dog.jpg" alt="一只棕色的狗正在草地上奔跑" title="展示" width="200" height="600">

controls属性：用于显示播放器控件，例如播放/暂停按钮、音量控制和时间轴。这个属性可以不指定，但是如果没有指定，用户将无法控制音频的播放。
autoplay属性：用于指定音频文件在加载后是否自动播放。如果指定了这个属性，音频将在页面加载后立即开始播放，否则用户需要手动点击播放按钮。
loop属性：用于指定音频文件是否循环播放。如果指定了这个属性，音频将一直循环播放，直到用户手动停止播放。
preload属性：用于指定浏览器在页面加载时是否应该预加载音频文件。这个属性有三个值：none表示不预加载，metadata表示仅加载音频文件的元数据，auto表示加载整个音频文件。默认值是metadata。
<source>标签：<audio>标签可以包含多个<source>标签，用于指定不同格式的音频文件。这样可以让浏览器根据支持的音频格式自动选择要加载的文件。每个<source>标签可以指定一个src属性和一个type属性，type属性用于指定音频文件的MIME类型。

<audio src="song.mp3" controls autoplay loop preload="auto">
  Your browser does not support the audio element.
</audio>

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

<p class="hello">两个特性都有

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		.hello{
			background: #cccccc;
		}
		.world{
			font-weight:bold;
		}
		#haha{
			color:blue;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>Java开发</h3>
	<hr>
	<p class="hello">welcome to css!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>Java开发</h3>
	<div class="hello">主讲：Hector</div>
	<div class="world">主讲：Hector</div>
	<hr>
	<h1 id="haha">哈哈</h1>
</body>
</html>

后代选择器

<div>
  <p>这是段落1</p>
  <p>这是段落2</p>
</div>

div p {
  color: red;
}

解释：选择div元素内的所有p元素，并将它们的颜色设置为红色。

子元素选择器

<div>
  <p>这是段落1</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <p>这是段落2</p>
</div>

div > ul {
  background-color: yellow;
}

解释：选择div元素内的直接子元素ul，并将它们的背景颜色设置为黄色。

相邻兄弟选择器

<h1>标题</h1>
<p>这是段落1</p>
<p>这是段落2</p>

h1 + p {
  color: red;
}

解释：选择h1元素后面紧跟的p元素，并将它们的颜色设置为红色。

通用兄弟选择器

<h1>标题</h1>
<p>这是段落1</p>
<div>
  <p>这是段落2</p>
  <p>这是段落3</p>
</div>

h1 ~ p {
  color: blue;
}

解释：选择在h1元素后面的所有p元素，并将它们的颜色设置为蓝色。

伪类选择器

根据不同的状态显示不同的样式，一般多用于标签

四种状态：

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
		/*a:link{
			font-size: 12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size: 15px;
			color:;
		}
		a:hover{
			font-size: 20px;
			color:blue;
		}
		a:active{
			font-size: 40px;
			color:green;
		}*/
		a:link,a:visited{
			color:#666666;
			font-size: 13px;
			text-decoration: none;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		/*普通的标签也可以使用伪类选择器*/
		p:hover{
			color:red;
		}
		p:active{
			color:blue;
		}
	</style>
</head>
<body>
	<a href="复杂选择器.html">复杂选择器.html</a>
	<p>CSS从入门到精通！</p>
</body>
</html>

text-decoration属性可以用于任何文本元素，如a、p、span等。

常用的text-decoration属性值包括：

none：表示不显示任何文本修饰。
underline：表示文本下方添加一条下划线。
overline：表示文本上方添加一条上划线。
line-through：表示在文本中间添加一条删除线。
blink：表示文本闪烁，不过这个属性在现代浏览器中已经不被支持了。

text-decoration属性也可以同时设置多个修饰样式，可以使用空格分隔。例如，text-decoration: underline overline表示同时添加上划线和下划线。

伪元素选择器

:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:pink;
		}
		p:before{
			content:"嘿嘿";
		}
		p:after{
			content:"哈哈";
		}
	</style>
</head>
<body>
	<p>hello world!</p>
	<hr>
	<p>
		hello world! <br>
		welcome to css!
	</p>
</body>
</html>