提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
目录
前言
本文章中代码都使用VScode编辑而成
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML学习总结
1、HTML简介
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2、HTML标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吕教程</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>代码运行效果示意图：
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吕教程</title>
</head>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>代码运行效果示意图：
3、HTML文本格式
HTML 格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签
主要HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <mark> | 可以使用该标签突出显示文本 |
| <del> | 可以使用该标签显示为删除文本 |
| <s> | 可以使用该标签显示为不再准确文本 |
| <ins> | 可以使用该标签使文本表示对文档的补充 |
| <u> | 可以使用该标签使文本显示为下划线 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <em> | 定义 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吕教程</title>
</head>
<body>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</body>
</html>
代码运行效果示意图：
4、HTML超链接
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。HTML 链接语法
-
链接的 HTML 代码很简单。它类似这样：
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>href 属性描述了链接的目标。
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示，下面的这行会在新窗口打开文档
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吕教程</title>
</head>
<body>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>代码运行效果示意图：
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>5、HTML图片及文件路径
定义图像的语法是：
<img src="url" alt="some_text" width='XXX' height='xxx'> URL 指存储图像的位置。alt 属性用来为图像定义一串预备的可替换的文本。height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
| 例子 | 解释 |
|---|---|
| <img src="photos1.jpg"> | 该图片文件与当前文档在同一目录中 |
| <img src="./images/photos1.jpg"> | 该图片文件在当前目录下的images目录中 |
| <img src="../photos1.jpg"> | 该图片位于在上一级目录中 |
| <img src="/photos1.jpg"> | 该图片在网站根目录中 |
提示：Vscode中可以选择该文件右键复制该文件路径
6、HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
7、HTML列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>代码运行效果示意图：
有序列表
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>代码运行示意图：
8、HTML表单
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吕教程</title>
</head>
<body>
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名" required><br>
<!-- 密码框 -->
密码：<br>
<input type="password" name="ps" placeholder="请输入密码" required><br>
年龄：<br>
<!-- 数字输入框，注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期：<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
</body>
</html>代码运行示意图：
二、CSS学习总结
CSS（层叠样式表）是一种用于网页设计的语言，它可以控制网页的布局、字体、颜色、背景、边框、大小等多方面的样式。以下是CSS学习的一些知识点总结：
1、 选择器：
为了给HTML元素应用样式，需要使用CSS选择器来选中这些元素。常见的选择器包括标签选择器、类选择器、ID选择器、后代选择器等。
-标签选择器：
选择所有指定标签的HTML元素
p {
color: red;
}
-类选择器：
选择所有具有指定类名的HTML元素
.example {
font-size: 14px;
}
- ID选择器：
选择具有指定ID的HTML元素
#para1
{
text-align:center;
color:red;
}
- 后代选择器：
选择所有后代元素，例如选择`<div>`标签下的所有`<p>`元素。
div p {
font-family: Arial;
}
2. 盒子模型：
所有HTML元素都可以看作是一个矩形的盒子。CSS盒子模型通过四个部分来描述HTML元素：内容(content)、内边距(padding)、边框(border)和外边距(margin)。可以通过CSS样式来控制盒子的大小、边框样式、内边距和外边距等属性。以下是每个部分的解释。
- 内容(content)：HTML元素的真正内容。
- 内边距(padding)：内容和边框之间的空白区域。
- 边框(border)：内边距和外边距之间的区域。
- 外边距(margin)：元素以外的空白区域。
以下是一个盒子模型的示例：
3. 布局：
CSS可以使用不同的布局方式来控制网页的外观，如使用float、position、display属性等。网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo；
菜单导航条包含了一些链接，可以引导用户浏览其他页面；
内容区域一般有三种形式:
- 1 列：一般用于移动端
- 2 列：一般用于平板设备
- 3 列：一般用于 PC 桌面设备
底部区域在网页的最下方，一般包含版权信息和联系方式等。
以下是一些基本的布局技巧：
- position属性：用于设置元素的定位方式。其中有三种值可选，分别为'static'(默认属性)、'relative'和'absolute'。
div {
position: relative;
left: 50px;
top: 50px;
}- float属性：用于控制元素的浮动方式，可以让元素脱离流动布局，实现多列布局和横向菜单等效果。
.left {
float: left;
width: 150px;
}
.right {
float: right;
width: 150px;
}- display属性：用于设置元素的显示方式，可以控制元素以块级元素、行内元素或表格元素的方式展示。
.block {
display: block;
}
.inline {
display: inline;
}
.table {
display: table;
}创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吕教程</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 头部标题 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的网页</h1>
<p>重置浏览器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#" style="float:right">链接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章标题</h2>
<h5>2019 年 4 月 17日</h5>
<div class="fakeimg" style="height:200px;">图片</div>
<p>一些文本...</p>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
<div class="card">
<h2>文章标题</h2>
<h5>2019 年 4 月 17日</h5>
<div class="fakeimg" style="height:200px;">图片</div>
<p>一些文本...</p>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>关于我</h2>
<div class="fakeimg" style="height:100px;">图片</div>
<p>关于我的一些信息..</p>
</div>
<div class="card">
<h3>热门文章</h3>
<div class="fakeimg"><p>图片</p></div>
<div class="fakeimg"><p>图片</p></div>
<div class="fakeimg"><p>图片</p></div>
</div>
<div class="card">
<h3>关注我</h3>
<p>一些文本...</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部区域</h2>
</div>
</body>
</html>常见的布局方式有流式布局、固定布局、响应式布局等。
4. CSS属性
CSS属性用于定义HTML元素的样式。以下是一些基本的CSS属性：
- background-color：用于设置背景颜色。
body {
background-color: #FFFFFF;
}- color：用于设置文本颜色。
h1, h2, h3 {
color: red;
}- font-size：用于设置字体大小。
p {
font-size: 16px;
}
- font-family：用于设置字体样式。
body {
font-family: Arial, sans-serif;
}- width和height：用于设置元素的宽度和高度。
总结
这些是HTML、CSS学习的基础知识，理解并掌握这些内容可以帮助你实现更好的网页设计。对于该文章是对HTML和CSS的个人学习总结，仅供参考。
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
