HTML 与 CSS：从 “认识标签” 到 “美化页面” 的入门指南
个人主页：♡喜欢做梦
目录
🎠HTML
🎡一、什么是HTML？
⛲️1.定义
⛲️2.核心特点
⛲️3.HTML的基本结构
⛲️4.标签的层次结构关系
🎡二、HTML的常用标签
🌅1.文本列表标签
标题标签：h1-h6
段落标签：
换行标签：br
🌅2.链接与资源标签（链接外部标签）
图片标签：img
超链接：a
🌅3.表格标签
🌅4.表单标签
form标签
input标签
🌅5.无语义标签：div&span
🎠CSS
🎡一、什么是CSS？
🎡二、引入方式
🎡三、css常见属性分类
🎡四、常用选择器
🚤1.标签选择器选中所有标签
🚤2.class选择：选中所有class=“box”的元素
🚤3.id选择器：选中id=“a”的元素（唯一）
🚤4.通配符选择器
🚤5.复合选择器
🎠HTML
🎡一、什么是HTML？
⛲️1.定义
HTML（HyperText Markup Language，超文本标记语言）是用于创建和描述网页的标准标记语言。他不是编程语言，而是通过标记标签来定义网页结构和内容的标记语言。
⛲️2.核心特点
- 超文本（HyperText）：比文本强大，文本只能有文字，而是超文本指的是页面中包含的链接，可以包含音频、图片、补充或注脚等。
- 标记语言（Markup Language）：使用一系列预定义标签来描述网页的结构和内容，浏览器会根据这些标签解析并解析页面。在浏览器中，我们一般按快捷键F12，就可以显示该页面的html。
- 平台无关性：You浏览器解析html代码，无论在哪个操作系统，只要有浏览器就可以显示html页面。
⛲️3.HTML的基本结构
<html><head><title>这是一个页面</title></head><body>hello</body>
</html>- html：是整个html文件的根标签（最顶层的标签）；
- head：页面的属性；
- title：页面标签标题；
- body：页面显示内容 。
- body：页面显示内容 。
- 效果显示：
⛲️4.标签的层次结构关系
- html是head和body的父标签；
- head与title：父子关系
- head与body：兄弟关系
🎡二、HTML的常用标签
在VS Code中，创建xxx.html，直接输入！，可以自动生成代码的主题框架。
代码生成：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>- 可以Ctrl+/来注释；
- Ctrl+s来保存，VS Code要记得保存。
常见标签
🌅1.文本列表标签
标题标签：h1-h6
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>- h1->h6:数字越大，字体越小
显示效果
段落标签：<p>
<p>这是一个段落</p>效果显示：
- 段落没有缩进，首尾空格均无效；
- 多个空格，都只算一个空格
- 如果想要多个空格，可以用 
换行标签：br
这是一个换行标签<br/>这是一个换行标签<br/>- <p>与<br/> 区别，p的间隔更大
🌅2.链接与资源标签（链接外部标签）
图片标签：img
<!-- 写法一 --><img src="图片.jpg"><!-- 写法二 --><img src="图.jpg" alt="这是一张图片"><!-- 写法三 --><img src="图片.jpg" alt="这是一张图片" width="100px" height="100px">效果显示
- 此时“图片.jpg”放在同一个目录下 ，有可以使用相对路径或者绝对路径。
- alt：图片加载失败是显示的文本结构，上述我写的是错误的名称，所以无法加载出来。
- witdth/height：控制高度和宽度，一般改一个就可以。
- px是像素，是一种相对长度单位。
超链接：a
<!-- 写法一：在本页面跳转网页 --><a href="https://hao.360.com/?src=lm&ls=n009c1cd49d" > 搜索 </a><br/><!-- 写法二:在新建一个网页进行跳转--><a href="https://hao.360.com/?src=lm&ls=n009c1cd49d" target="_blank"> 搜索 </a><br/><!-- 空连接：使用#在href占位 --><a href="#"> 空链接 </a>
- 第一个写法会在本页面进行跳转地址，第二个写法会另起新建一个地址。
- target=“_blank”:在新窗口打开链接。
🌅3.表格标签
标签：
- <table>:表格容器
- <tr>：表格行
- <td>:表格单元格（普通单元格）
- <th>:表头单元格（通常加粗居中）
- <thead>:表格头部
- <tbody>：表格主体
<body><body><!-- border：边框粗细cellpadding：内容边距cellspacing：单元格边距 --><table style="width: 100px;height: 150px;"border="4px" cellspacing="10" cellpadding="30"><!-- tr：表格行td：单元格 --><tr><td>a</td><td>b</td></tr><tr><!-- 跨列合并 --><td colspan="2">b</td></tr><tr><!-- 跨行合并 --><td rowspan="2">c</td></tr><tr><td>d</td></tr>
</body>结果显示：
- style="width: 500;height: 300;"：通过内敛样式设置表格位宽度为500，高度为300；
- border：用于设置表格边框的粗细；
- cellspacing：用于设置单元格与单元格之间的宽度；
- cellpadding：内容距离边框的距离；
- colspan:跨列合并；
- rowspan：跨行合并。
🌅4.表单标签
用于创建交互表单，收集用户数据
分成两个部分
- 表单域：包含表单元素的区域，重点的form标签（表单容器）
- 表单控件：输入框，提交按钮，重点是input标签（输入框）
form标签
<form action="test.html" method="get">内容</form>- action：指定表单要提交的目标地址
-
method：表单数据的提交方式，常用的有post和get
- pos：数据会附加在URL后面（格式：？参数名1=值1&参数名2=值2），可见性高
- get：数据会放在HTTP请求的“请求体”中，不在URL中显示，更安全。
input标签
input：输入框(通过type属性定义类型)
文本框
<input type="text">
<input type="text" placeholder="请输入姓名">结果显示：
- placeholder：显示提示文本，引导用户输入相关信息。
密码框
<input type="password">
单选框
<input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label>
<input type="radio"name="gender" id="gender2" value="2"><label for="gender2">女</label><br/>效果：
- name是给后端看的标识名，用来收数据，这提交表单时，后端会收到gender1或gender2；
- lable是用来关联表单元素；
- id是给前端用的唯一身份证，方便元素操作，整个页面中id必须唯一，与<lable>标签关联，实现点击文字也能选中选项；
- value是实际传给后端看的内容。
多选框
<input type="checkbox" name="Evaluation" id="evaluation1" value="1"><label for="evaluation1">很好</label>
<input type="checkbox" name="Evaluation" id="evaluation2" value="2"><label for="evaluation2">一般</label>
<input type="checkbox" name="Evaluation" id="evaluation3" value="3"><label for="evaluation3">不好</label> 
提交
<input type="submit" value="提交"> 
select标签：下拉菜单
<select><option>1</option><option>2</option><option selected="selected">3</option>
</select><br/>结果显示
- selected=“selected”表示默认选中
textarea标签：多行文本输入框
<textarea row="3" cols="40"></textarea>结果显示：
- row：默认行数
- cols：默认列数
🌅5.无语义标签：div&span
div：块级元素，会独占一行，常用来做页面大结构
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color:rgb(216, 17, 17)}</style>
</head>
<body><div style="color: blue;">1</div><div>1</div><div>1</div><div>1</div>
</body>
span：行内元素，不会独占一行，常用来包裹小段文本
<span style="color: blue;">1</span>
<span style="color: blue;">1</span>
<span>1</span> 
案例：
用户注册
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action method="get"><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><input type="submit" value="注册"><span>已有账号？</span><a href="#">登入</a></form>
</body>
</html>🎠CSS
🎡一、什么是CSS？
CSS（Cascadong Style Sheets，层叠样式表）用于控制页面的样式，主要负责网页的视觉表现、包括布局、颜色、字体、间距等外观样式。HTML决定网页“有什么内容”，CSS决定网页内容“看起来什么样的”。
下面的布局就是由css控制的，而里面布局的内容是由html写的
🎡二、引入方式
- 行内样式：直接写在html元素的style属性中
<div style="属性">文本</div>示例：
<div color:red>hello</div><div color:black>hello</div><div color:blue>hello</div>结果显示
- 内部样式：定义style标签，在标签内定义css样式
<style>div{属性;}
</style> <body><div>文本</div>
</body>示例：
<style>div{color:aquamarine;}
</style> <body><div>hello</div><div>hello</div><div>hello</div>
</body>显示结果
- 外部样式：定义link标签，通过href属性引入外部css文件
<link rel="stylesheet" href="css外部文件">示例：
<link rel="stylesheet" href="style.css"><body><div>hello</div><div>hello</div><div>hello</div>
</body>//style.css文件
div{color: blueviolet;
}- 在创建css外部文件时，可以先先直接写<link ret=""...>,在点击ctrl+clik自动创建外部文件
- 遵循就近原则
-
<style>div{color:aquamarine;} </style> <body><div style="color: chocolate;">hello</div><div>hello</div><div>hello</div> </body>
-
🎡三、css常见属性分类
- color：文本颜色；
- front-size：字体大小
- width/height：宽/高
- margin：外边距
- padding：内边距
示例
<style>#div1{color: #ba1515;font-size:large;}#div2{width: 300px;height: 200px;margin: 50px;padding: 20px;border: 60px;}
</style>
<body><div id="div1">hello</div><div id="div2">world</div><!-- <div id="div3">zhangsan</div> -->
</body>结果显示
🎡四、常用选择器
🚤1.标签选择器选中所有标签
a{属性；}div{属性；}span{属性；}🚤2.class选择：选中所有class=“box”的元素
.box{属性;
}示例：
<style>.a1{color:aquamarine;}
</style><body><a class="a1">这个一个</a><div class="div1">这个一个</div><span class="a1">这个一个</span>
</body> 
🚤3.id选择器：选中id=“a”的元素（唯一）
#a{属性;
}示例：
<style>#a{color:aquamarine;}
</style><body><a id="a">这个一个</a><div id="a">这个一个</div>
</body>
</html>
🚤4.通配符选择器
*{...}示例：
<style>*{color: rgb(17, 207, 67);}
</style>
<body><a>这个一个</a><div>这个一个</div>
</body>
🚤5.复合选择器
ul li{...}示例：
<style>ol li{color:aqua;}
</style>
<body><ol><li>这个一个li</li><li>这个一个li</li></ol>
</body>