HTML、CSS【复习1】-优快云博客

本文链接：https://blog.youkuaiyun.com/wokenshin/article/details/88822449

本文详细介绍了HTML的基本结构及用途，包括标签、属性等，并深入探讨了CSS的选择器及其优先级，展示了如何通过不同的方式应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容可从W3School中学习
或者笔记地址：Web前端开发之HTML+CSS精英课堂【渡一教育】 https://ke.qq.com/course/231570#term_id=100273162
在这里插入图片描述
前端基本学习路径
HTML：结构
CSS ：样式
JavaScript：行为

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>我是标题</title>
		head里面放的内容类似于“人的思想信息”
	</head>

	<body>
		body里面放的内容就是显示的内容
	</body>

	href 锚点「超链接」

	form 表单标签
	表单里面还 含有 各种 输入框， <select> <option></option><select>
</html>

补充：上面的 lang属性是为了让爬虫获取信息的，可以用于SEO优化，html中还有其他SEO优化方式。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190327161818799.png?x-oss-process=imag 浏览器内核

CSS
CSS
1.可以在HTML的行间标签中设置
2.可以在head标签中设置
3.可以在head标签中引入
CSSDemo
可以在HTML的head标签中通过link标签引入css样式，css文件中可以通过#id的形式找到html中的标签并设置样式。
如下：
CSSDemo

<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="hello.css">
</head>

<body>
	<!-- 通过css选择器来对指定的标签进行修饰 -->
	<!-- 1.下面通过id 让css文件定位并修身的方式叫做：id选择器 在CSS中表现为: #idName{...}-->
	<div id="only1">hinato</div>
	
	<!-- 2.class选择器 在CSS中表现为 .className{...}-->
	<div class="demo">class选择器</div>
	<!-- 3.标签选择器 直接在css文件中用对应的标签描述即可 在CSS中表现为: div{}-->
	<span>123</span>
	<div>
	<span>321</span>
	</div>
	
	<!--4.通配符选择器 在CSS中表现为: *{效果作用与html中所有的标签} -->
</body>

</html>