大家好，我是秋意临。

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，内容如下：

       Hello World！！     大家好，我是秋意临！！

HTML：以开始，以结束，这是一个成对的标记。

CSS：以开始，以结束，也是一个成对的标记。

JavaScript：以

结束。

标签分为：

单、双标签，行、块元素

单标签：


单标签：

行元素：只占用自己本身的位置大小，默认不换行。

快元素：占用这一整行的位置大小，默认换行。

注意：

块元素嵌套行元素，行元素不要嵌套块元素。因为行元素嵌套块元素，块元素会打破行元素的特性，所以没用意义。

1.4、 文本标签

文本格式化

文本标签大同小异，这里以前4个标签为例：

       
我是秋意临，我爱学习 
我是秋意临，我爱学习 
我是秋意临，我爱学习 
我是秋意临，我爱学习 
我是秋意临，我爱学习 
我是秋意临，我爱学习  
个人简介 
 
 姓名：秋意临 
  学号：123456 
  性别：男 
  爱好：跑步、篮球 
  特长：跑步、篮球 
    

效果图：

1.5、转义字符

HTML中<，>，&等有特殊含义（<，>，用于链接标签，&用于转义），不能直接使用，这时我们需要将他们放入Web网页中就需要使用转义字符。

案例练习：

1.6、图片

标签	描述	块/行元素	单/双标签	语法
img	引用图片	行	单

1.7、超链接

(1）页面间链接

A页 --> B页

人民日报

(2）锚链接

A页甲位置 --> A页乙位置

在A页乙位置使用name属性设置标记，语法如下：

目标位置A页乙

在A页甲位置使用href属性设置链接路径,href属性值为“#标记名”，语法如下

当前位置A页甲

A页甲位置 --> B页乙位置

A页-登录.html —>甲页-锚链接通页.html

(3)功能性链接

在页面中调用其他程序功能如电子邮件等

我的邮箱