大家好，我是秋意临。
HTML和CSS的内容比较多，但作为一个运维以及后端，我们没有必要全部学习，下面就是个人认为运维、后端以及小白用户所需要熟练掌握的知识。
欢迎加入云社区
一、HTML5基础
1.1、前端开发的核心技术
- HTML (Hyper Text Markup Language)
超文本标记语言，用来写静态页面，HTML5的5是版本号。
HTML是基础架构，文件扩展名为
.html
- CSS (Cascading Style Sheets)
CSS用来美化静态网页，CSS3的3是版本号。
HTML和CSS的关系：HTML代码是用来构建网页总体内容，CSS则是用来美化网页。
CSS是元素格式、页面布局的灵魂，文件扩展名为
.css
- JS(JavaScript)
用来做网页前端的动态交互。
注意JavaScript和Java没用一点关系，JavaScript诞生时想借助当时Java火的势头，所以名字包含了Java。
JavaScript是实现网页的动态性、交互性的点睛之笔，文件扩展名为
.js
1.2、Web组成标准
Web网页主要有3部分组成：结构（structure）、表现（presentation）、行为（behavior）。
那么什么是结构、表现和行为呢？？？
- 结构： 一个网页包含，标题、正文、列表结构等，而这些构成了网页的 ”结构“（也可以称为内容）。
- 表现： 每个结构的组成部分有字号、字体和颜色等属性构成了网页的 ”表现“（也可以称为样式）。
- 行为： 网页和传播媒体不同的是，它可以随时变化，而且可以和读者互动。这种变化和互动就称为网页的 ”行为“（也可以称为动作）。
HTML、CSS、JavaScript关系图！！
PS：
3部分组成，一搬把3个部分的代码分离（3个文件）。实现结构（内容）、表现（样式）、行为（动作）的分离。
3个文件后缀为：.htm .css .js。
1.3、HTML 实例
工欲善其事，必先利其器。
推荐一个写Web网页的开发软件：HBuilderX（国内的）
下载地址：https://dcloud.io/hbuilderx.html
1.3.1、第一个网页
创建一个HTML文件，后缀名为：.html 或 .htm，内容如下：
<!DOCTYPE html> <!-- 网页声明 必须位于第一行 --> <html> <!-- HTML --> <head> <!-- 头部：功能、约束--> <meta charset="utf-8"> <title>Hello World！！</title> <!-- 网页标题 --> </head> <body> <!-- 主体：内容 --> 大家好，我是秋意临！！ </body> </html>
HTML：以
<html\>开始，以</ html>结束，这是一个成对的标记。CSS：以
<style\>开始，以</ style>结束，也是一个成对的标记。JavaScript：以
<Script Language="JavaScript">开始，以</Script>结束。
标签分为：
单、双标签，行、块元素
单标签：
<br />单标签：
<p> </p>行元素：只占用自己本身的位置大小，默认不换行。
快元素：占用这一整行的位置大小，默认换行。
注意：
块元素嵌套行元素，行元素不要嵌套块元素。因为行元素嵌套块元素，块元素会打破行元素的特性，所以没用意义。
1.4、 文本标签
| 标签 | 描述 | 块/行元素 | 单/双标签 |
| p | 一个自然段 | 块 | 双 |
| br | 换行 | 块 | 单 |
| h1~h6 | 设置标题等级 | 块 | 双 |
| hr | 水平线 | 块 | 单 |
文本格式化
| 标签 | 描述 | 块/行元素 | 单/双标签 |
| p | 定义粗体文本 | 行 | 双 |
| big | 定义大号字 | 行 | 双 |
| small | 定义小号字 | 行 | 双 |
| em | 定义强调的文本（较少使用，通常浏览器会将强调的文本斜体显示) | 行 | 双 |
| strong | 定义加重语气的文本（通常浏览器会将强调的文本加粗显示) | 行 | 双 |
| i | 定义斜体文本 | 行 | 双 |
| sub | 定义下标文本 | 行 | 双 |
| sup | 定义上标文本 | 行 | 双 |
| ins | 定义插入文本 (通常浏览器会将该文本加下划线显示) | 行 | 双 |
| del | 定义删除文本 (通常浏览器会将该文本加单删除显示） | 行 | 双 |
| font | 定义文本颜色、大小、字体 | 行 | 双 |
文本标签大同小异，这里以前4个标签为例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个网页</title> </head> <body> <h1>我是秋意临，我爱学习</h1> <h2>我是秋意临，我爱学习</h2> <h3>我是秋意临，我爱学习</h3> <h4>我是秋意临，我爱学习</h4> <h5>我是秋意临，我爱学习</h5> <h6>我是秋意临，我爱学习</h6> <h2>个人简介</h2> <hr/> <p> 姓名：秋意临 <br /> 学号：123456 <br /> 性别：男 <br /> 爱好：跑步、篮球 <br /> 特长：跑步、篮球 <br /> </p> </body> </html>
效果图：
1.5、转义字符
HTML中<，>，&等有特殊含义（<，>，用于链接标签，&用于转义），不能直接使用，这时我们需要将他们放入Web网页中就需要使用转义字符。
案例练习：
1.6、图片
| 标签 | 描述 | 块/行元素 | 单/双标签 | 语法 |
| img | 引用图片 | 行 | 单 | <img src="图片地址" alt="图形的替代文字" title="鼠标悬停提示文字" "width="图片宽度" height="图片高度"/> |
1.7、超链接
| 标签 | 描述 | 块/行元素 | 单/双标签 | 语法 |
| a | 超链接 | 行 | 双 | <a href=“链接地址” target=“目标窗口位置 _sele(自身) _blank(新建窗口)”> 链接文本或图像 </ a> |
(1）页面间链接
A页 --> B页
<a href="http://www.people.com.cn/">人民日报</a>
(2）锚链接
A页甲位置 --> A页乙位置
在A页乙位置使用name属性设置标记，语法如下：
<a name="marker">目标位置A页乙</a>在A页甲位置使用href属性设置链接路径,href属性值为“#标记名”，语法如下
<a href="#marker">当前位置A页甲</a>
A页甲位置 --> B页乙位置
A页-登录.html —>甲页-锚链接通页.html
(3)功能性链接
在页面中调用其他程序功能如电子邮件等
<a href="mailto:电子邮箱地址">我的邮箱</a>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)