一、环境与新建
在VSCODE里,加载插件:"open in browser"
然后新建一个文件夹,再在VSCODE中打开该文件夹,在右上角图标新建文档,一定要是加.html,不要忘了文件后缀
复制任意一个代码比如:
css
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请投币</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
h1 {
font-size: 4rem;
color: #ff6347;
text-shadow: 2px 2px 4px #000000;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<h1>第一个网页</h1>
</body>
</html>
鼠标右击空白处单击【open In Default Browser】查看运行结果。
网页弹出即说明新建成功。
二、标签和属性详解
1.标题标签 <h1> 到 <h6>
标题标签用于定义文档中的标题和子标题。<h1> 是最高级别的标题,通常用于主标题,而 <h6> 是最低级别的标题,用于最小的子标题。数字越大,字体越小。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.段落标签 <p>
段落标签用于定义文本段落。浏览器会自动在段落前后添加一些空白。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
3.链接标签 <a>
链接标签用于创建超链接,指向其他网页或同一网页的不同部分。href 属性指定了链接的目标URL。
<a href="https://www.example.com">访问示例网站</a>
图片标签 <img>
图片标签用于在网页中嵌入图像。src 属性指定了图像文件的路径,alt 属性提供了图像的替代文本。
<img src="image.jpg" alt="描述图片的文本">
4.列表标签
无序列表 <ul>:列表项前面有项目符号。
有序列表 <ol>:列表项前面有数字或字母。
列表项 <li>:用于定义列表中的每一项。
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
5.表格标签
表格 <table>:定义一个表格。
表格行 <tr>:定义表格中的一行。
表格数据 <td>:定义表格中的一个单元格。
表格头 <th>:定义表格中的表头单元格。
html
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
6.表单标签
表单 <form>:定义一个表单,用于收集用户输入。
输入 <input>:定义一个输入字段,可以有不同的类型,如文本、密码、单选、复选等。
按钮 <button>:定义一个按钮,可以用于提交表单或执行其他操作。
html
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">提交</button>
</form>
7.特殊字符
HTML中有一些特殊字符需要使用字符实体来表示,以避免与HTML标签冲突。
空格:
小于号:<
大于号:>
和号:&
html
<p>这是一个包含特殊字符的段落:< > & </p>
三、CSS
CSS(Cascading Style Sheets,层叠样式表)是一种用于描述HTML或XML文档外观和格式的样式表语言。CSS的主要作用是分离内容和表现,使得网页的结构和样式可以独立修改,提高了代码的可维护性和可重用性。
1. CSS的基本概念
层叠:多个样式可以作用在同一个HTML元素上,同时生效。
样式表:定义如何显示HTML元素的规则集合。
2. CSS的好处
功能强大:可以控制网页的几乎所有视觉表现。
内容与样式分离:降低耦合度,便于维护和协作。
提高开发效率:样式可以复用,减少重复代码。
3. CSS的使用方式
内联样式:在标签内使用style属性指定CSS代码。
内部样式:在<head>标签内使用<style>标签定义CSS。
外部样式:通过<link>标签引入外部CSS文件。
4. CSS语法
格式:
css
选择器 {
属性名1: 属性值1;
属性名2: 属性值2;
...
}
选择器:用于筛选具有相似特征的元素。
5. 选择器类型
基础选择器:
id选择器:#id属性值{}
类选择器:.class属性值{}
元素选择器:标签名称{}
扩展选择器:
通用选择器:*{}
并集选择器:选择器1, 选择器2{}
子选择器:选择器1 > 选择器2{}
后代选择器:选择器1 选择器2{}
属性选择器:元素名称[属性名="属性值"]{}
伪类选择器:元素:状态{}
例如:
#uniqueID { color: green; }
.commonClass { font-weight: bold; }
div { background-color: yellow; }
6. 常用CSS属性
字体和文本:
font-size:字体大小
color:文本颜色
text-align:对齐方式
line-height:行高
背景:
background:背景颜色或图片
边框:
border:边框样式
尺寸:
width:宽度
height:高度
盒子模型:
margin:外边距
padding:内边距
box-sizing:控制盒子尺寸计算方式
布局:
float:浮动
position:定位
例如:
body {
font-family: Arial, sans-serif;
background: url('background.jpg');
border: 1px solid black;
width: 50%;
height: 300px;
margin: 20px;
padding: 10px;
}
7. CSS的引入方式
行内式:直接在标签的style属性中添加CSS样式。
内嵌式:在<head>标签内加入<style>标签。
外链式:使用<link>标签引入外部CSS文件。
例如:
<link rel="stylesheet" type="text/css" href="styles.css">
8. CSS的选择器
标签选择器:根据标签名选择元素。
类选择器:根据类名选择元素。
id选择器:根据id选择元素。
后代选择器:选择某个元素的后代元素。
子选择器:选择某个元素的直接子元素。
伪类选择器:根据元素状态选择元素。
例如:
ul li { color: purple; }
.container > p { text-decoration: underline; }
a:hover { color: orange; }
9. CSS的属性
布局常用属性:width, height, background, border, padding, margin, float
文本常用属性:color, font-size, font-family, font-weight, line-height, text-decoration, text-align, text-indent
例如:
h1 {
color: navy;
font-size: 2em;
text-align: center;
text-indent: 20px;
}
10. CSS的元素溢出
overflow属性:控制溢出内容的显示方式,可选值有visible, hidden, auto
例如:
div {
width: 100px;
height: 100px;
overflow: auto;
}
11. CSS的显示特性
display属性:控制元素的显示类型,可选值有none, inline, block, inline-block
例如:
span { display: block; }
div { display: none; }
12. 盒子模型
内容:元素的实际内容区域。
内边距:内容与边框之间的空间。
边框:围绕内容的线条。
外边距:元素与其他元素之间的空间。
例如:
.box {
width: 200px;
padding: 20px;
border: 5px solid gray;
margin: 20px;
}
13. CSS的优先级
优先级规则:内联样式 > ID选择器 > 类选择器 > 元素选择器
!important:用于提升某个样式的优先级,应谨慎使用。
例如:
#special { color: blue; }
.text { color: red !important; }
14. CSS的继承
继承属性:某些属性会自动继承父元素的值,如color, font-family等。
例如:
body { font-family: 'Arial', sans-serif; }
p { color: inherit; }
15. CSS的单位
绝对单位:如px, pt等。
相对单位:如em, rem, %等。
例如:
div {
width: 50%;
font-size: 1.2em;
}
16. CSS的响应式设计
媒体查询:根据不同的设备特性应用不同的样式。
例如:
@media (max-width: 600px) {
body { background-color: lightgreen; }
}
17. CSS的预处理器
Sass/SCSS, Less, Stylus:提供变量、嵌套、混合、函数等高级功能,增强CSS的可编程性。
例如:
$primary-color: #333;
body {
color: $primary-color;
}
18. CSS的命名规范
BEM(Block Element Modifier):一种命名约定,提高代码的可读性和可维护性。
例如:
.block__element--modifier { color: blue; }
19. CSS的最佳实践
模块化:将CSS分成多个模块,便于管理和复用。
性能优化:减少重绘和回流,提高页面加载速度。
可访问性:确保所有用户都能无障碍地访问网页。
例如:
/* 模块化 */
.button {
padding: 10px 20px;
border: none;
background-color: #007BFF;
color: white;
}
/* 性能优化 */
.lazy-load {
background: url('lazy-image.jpg') no-repeat center;
background-size: cover;
}