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