HTML与CSS入门
- 前言
- 一、什么是HTML与CSS？
- 二、HTML标签
- 1.常用标签
- 2.详细写法
- 三、CSS样式
- 1.常用样式及写法
- 2.选择器权重及写法
- 3.HTML如何配合CSS一起使用
- 总结
前言
例如：HTML和CSS是两种常用的网站开发语言，它们通常需要配合使用，作为网站开发的基础语言。HTML全称Hypertext Markup Language（超文本标记语言）CSS全称Casading Style Sheets（层叠样式表）
一、什么是HTML与CSS？
HTML是HyperText Markup Language的缩写，即超文本标记语言，是用于创建网页的标准标记语言。它用于结构化文本、链接网页、插入图片、视频和音频等多媒体元素，是构建网页的基础。通过标签和属性的组合，HTML能够定义网页的内容和结构，让文字、图片、链接等多媒体元素在网页上展示。这种标记语言是网页开发的基础，易于学习和使用，广泛应用于网站和网页应用程序等领域。
二、HTML标签
1.常用标签
| 标签名称 | 标签类型 | 使用场景 |
|---|---|---|
| html | 根标签 | 用标签于定义整个HTML文档的根元素 |
| head | 头部标签 | 用于定义HTML文档的头部信息，如标题、元数据等 |
| title | 标题标签 | 用于定义网页的标题，显示在浏览器的标题栏或标签页上 |
| body | 主体标签 | 用于定义HTML文档的主体内容，如文字、图片、链接等 |
| div | 块级标签 | 用于定义文档中的区段，可以对区段进行样式设置和布局操作 |
| span | 行内标签 | 用于定义文档中的行内元素，通常用于设置文本的样式 |
| ul | 无序列表 | 用于创建无序列表，以表示项目或事物的列表 |
| ol | 有序列表 | 用于创建有序列表，以表示项目或事物的有序列表 |
| li | 列表标签 | 用于定义列表中的每一项，需咋ul、ol中使用，可以包含文本、图片、链接等元素 |
| img | 图片标签 | 用于插入一个图像，可以设置图像的源文件、宽度、高度等属性 |
| a | 链接标签 | 用于创建一个链接，可以链接到其他网页、图片、文档等资源 |
| h1-16 | 标题标签 | 用于定义六个不同级别的标题，h1为最高级别，h6为最低级别 |
| p | 段楼标签 | 用于定义一个段落，可以包含文本 |
2.详细写法
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<h3>欢迎来到我的网页</h3>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
<img src="1.jpg" alt="我的图片">
<a href="./a.html">我的链接</a>
<span>包裹文本设置样式<span>
</div>
</body>
</html>
三、CSS样式
1.常用样式及写法
| 样式名称 | 样式类型 | 使用场景 |
|---|---|---|
| width | 宽度 | 通过CSS样式设置元素的宽度 |
| height | 高度 | 通过CSS样式设置元素的高度 |
| color | 字体颜色 | 设置文本颜色，如：color: #333; |
| font-size | 字体大小 | 设置字体大小，如：font-size: 16px; |
| font-weight | 字体粗细 | 设置字体粗细，如：font-weight: bold; |
| text-decoration | 文本装饰 | 设置文本装饰，如：text-decoration: underline; |
| background-color | 背景颜色 | 设置背景颜色，如：background-color: #f2f2f2; |
| padding | 内边距 | 设置内边距，如：padding: 10px; |
| margin | 外边距 | 设置外边距，如：margin: 10px; |
| border | 边框 | 设置边框样式，如：border: 1px solid #ccc; |
| display | 显示属性 | 设置元素显示方式，如：display: block; 或 display: none; |
| position | 定位属性 | 设置元素定位方式，如：position: absolute; 或 position: relative; |
| text-align | 对齐方式 | 通过CSS样式设置文本对齐方式 |
2.选择器权重及写法
注：选择器权重越大越优先显示，越小的将会被大的覆盖，1为最小，也是最后显示的
| 选择器名称 | 选择器类型 | 使用场景 |
|---|---|---|
| 元素选择器 | 1 | 选择页面中所有给定元素，如：p { color: red; } |
| 类选择器 | 10 | 选择页面中所有带有指定类的元素，如：.myClass { color: blue; } |
| ID选择器 | 100 | 选择页面中带有指定ID的元素，如：#myId { font-size: 20px; } |
| 后代选择器 | 1 | 选择给定元素的后代元素，如：div p { color: green; } |
| 子元素选择器 | 10 | 选择给定元素的直接子元素，如：div > p { background-color: yellow; } |
| 相邻兄弟选择 | 10 | 选择给定元素的下一个兄弟元素，如：h1 + h2 { margin-top: 50px; } |
| 通用兄弟选择器 | 背景颜色 | 设置背景颜色，如：background-color: #f2f2f2; |
| 属性选择器 | 10 | 选择带有指定属性的元素，如：[href] { color: purple; } |
| 伪类选择器 | 10000 | 选择给定元素的特定状态，如：a:hover { text-decoration: underline; } |
| 伪元素选择器 | 10000 | 选择给定元素的特定部分，如：p::first-line { text-transform: uppercase; } |
3.HTML如何配合CSS一起使用
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<style>
.div1 {
width:"100px";
height:"100px";
bsckground:red;
}
#p1{
color:blue;
font-size:15px
}
</style>
</head>
<body>
<div class="div1">
<p id="p1">这个div就会变成宽高100并且是红色背景色，并且p标签会显示蓝色字体并且字体为15px</p>
</div>
</body>
</html>
总结
我们要是想写好一个页面就需要让HTML配合CSS这样才可以让页面美观起来哦
