HTML—CSS

最新推荐文章于 2024-08-06 21:32:10 发布

王梦浩~

最新推荐文章于 2024-08-06 21:32:10 发布

阅读量99

点赞数

分类专栏：前端知识文章标签：大数据

本文链接：https://blog.csdn.net/weixin_58602166/article/details/125511786

版权

前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

媒体标签

1.音频标签

<audio>:用于播放声音，比如音乐或其他音频流，是HTML5的新标签。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style>
    </style>
    <link rel="stylesheet"  type="text/css" href="123.css">
</head>
<body>
    <!-- 音频标签  -->
    <audio src="许飞 - 父亲写的散文诗 (时光版).flac" autoplay ="autoplay" controls ="controls" loop = "loop"></audio>
</body>
</html>

2.视频标签

<video>标签用于播放视频，比如电影片段等视频流，是HTML5的新标签。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style>
    </style>
    <link rel="stylesheet"  type="text/css" href="123.css">
</head>
<body>
    <!-- 视频按钮  -->
    <video src="shipin.mp4" width="300px" height="300px" controls ="controls" loop ="loop"  preload="preload">白面具</video>
</body>
</html>

HTML5中新增的type类型

注意：不同的浏览器支持上有差异，有些浏览器依然不支持!

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style>
    </style>
    <link rel="stylesheet"  type="text/css" href="123.css">
</head>
<body>
<form action="123.html" method="post">
<!-- 定义拾色器 -->
<input type="color" name="ss">

<!-- 定义日期字段 -->
<input type="date" name="riqi">

<!-- 定义用于e-mail地址的文本字段，如果不正确的邮箱地址有验证的功能 -->
<input type="email" name="youxiang" value="1663745607">

<!-- 定义带有spinner控件的数字字段 -->
<input type="number">

<!-- 定义带有slider控件的数字字段 -->
<input type="range">

<!-- 定义用于搜索的文字字段，当输入内容的时候，搜索框后边会自动出现一个小X点这个小X，可以清除内容 -->
<input type="search">

<!-- 定义用于电话号码的文本字段，在手机操作会出现输入数字的键盘 -->
<input type="tel">

<!-- 定义用于URL的文本字段，在手机操作会出现输入网址的键盘 -->
<input type="url">

</form>
</body>
</html>

详情和概要标签

利⽤summary标签来描述概要信息, 利⽤details标签来描述详情信息. 默认情况下是折叠展示, 想看⻅详情必须点击

CSS

1.div:div是html⾥⾯的⼀个标签<div></div> . 没有特定的含义,作为容器. ⼀般⽤于配合css完成⽹⻚的基本布局,

2.span:span也是⼀个标签<span></span> ,没有特定含义,⼀般作为⽂本容器

解释：div是块级元素会独占一行，span是行内元素不会独占一行，div中可以嵌套其他所有的标签(除了body，html，head)，span标签只能嵌套文本，图片，超链接

什么是CSS

学习html就是学习标签，学习CSS主要学习样式(属性)，选择器

HTML负责内容(小王)，CSS负责样式(颜色，字体大小....)

<font color = "blue" size ="6">小王</font>

HTML是⼀种语⾔；CSS也是⼀种语⾔。如果想要CSS能够修饰HTML的样式，就必须把CSS引⼊到HTML中。即：要解决把CSS代码写在什么地⽅的问题
引入的方式有:
- 内联样式：把 CSS 代码内嵌到 HTML 代码⾥ , 通过标签的style属性来结合
- 内部样式：把 CSS 代码写在 HTML ⽂档内部 , 通过 style 标签来结合
- 外部样式：把 CSS 代码写在独⽴的 CSS ⽂件⾥ , 通过 link标签结合

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML</title>
    <!-- 内部样式 -->
    <style>
        h1{
            color: aqua;
            font-size: 10px;
            font-family: 宋体;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="123.css">
</head>
<body>
    <!-- 内联样式 -->
    <p style="color:blue; font-size: 10px; font-family: 宋体;">小王</p>

    <h1>小李</h1>

    <span>小张</span>

</body>
</html>

注意：这三种方式都是就近原则(相对于代码，也就是要修饰的标签)

CSS基本选择器

常用的选择器

标签选择器
ID选择器
类选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style>
        h1{
            color: antiquewhite;
        }
        #A{
            color: bisque;
        }
        .B{
            color: aqua;
        }
    </style>
</head>
<body>
    <!-- 标签选择器，标签选择器 只要是当前这个标签的 都会修饰到-->
    <h1>标签选择器 </h1>

    <!-- ID选择器,id选择器 适合找1个 -->
    <h1 id="A">ID选择器</h1>

    <!-- 类选择器.class选择器 适合找多个(>=1) -->
    <h1 class="B">类选择器</h1>


</body>
</html>

注意：选择器也分优先级，ID选择器>类选择器>标签选择器>通用选择器(如果优先级同，那么就还按照就近原则)

CSS扩展选择器

CSS还提供了更多更加灵活的选择器
- 使⽤多个基本选择器进⾏组合，可以更灵活的选取标签
- 使⽤伪类选择器，添加⼀些特殊效果

1.组合选择器

层级选择器:

<!DOCTYPE html>
<html>
<head>
	<title>层级选择器</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		p .c1{
			font-size:24px;
		}
	</style>
</head>
<body>
<p>
	<span class="c1">你好北京</span>
</p>
<div>
	<a class="c1" href="">你好北京</a>
</div>
<div></div>
</body>
</html>

属性选择器：

<!DOCTYPE html>
<html>
<head>
	<title>属性选择器</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		p .c1{
			font-size:24px;
		}
		input[type="text"]{
			color:red;
			background-color: yellow;
		}
	</style>
</head>
<body>
<p>
	<span class="c1">你好北京</span>
</p>
<div>
	<a class="c1" href="">你好北京</a>
</div>
<div>
	<input type="text" name="">
</div>
</body>
</html>

并集选择器：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		p .c1{
			font-size:24px;
		}
		#i1[type="text"]{
			color:red;
			background-color: yellow;
		}
		h1,h2,h3{
			color:blue;
			font-size:12px;
		}
	</style>
</head>
<body>
<p>
	<span class="c1">你好北京</span>
</p>
<div>
	<a class="c1" href="">你好北京</a>
</div>
<div>
	<input id="i1" type="text" name="">
</div>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html>
<head>
	<title>伪类选择器</title>
	<style type="text/css">
        /* 选择正常状态的超链接 */
		a:link{
			color:red;
		}
        /* 选择鼠标按下的超链接 */
		a:active{
			color:blue;
		}
        /* 选择被访问过的超链接 */
		a:visited{
			color:yellow;
		}
        /* 选择属性按下的超链接 */
		a:hover{
			background-color: yellow;
		}
		

	</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>