前端基础：HTML和CSS简介

目录

1、HTML 简介

（1）在 HTML 中引入外部 CSS

（2）在 HTML 中引入外部 JavaScript

2、CSS 简介

（1）CSS 的基本语法

（2）三种使用 CSS 的方法

2.1 - 外部 CSS 的使用

2.2 - 内部 CSS 的使用

2.3 - 行内 CSS 的使用

---

1、HTML 简介

        HTML 指的是超文本标记语言 (Hyper Text Markup Language)，标记语言 (markup language) 不是一种编程语言，而是一套标记标签 (markup tag)，标记标签来描述网页

        HTML -> 定义网页元素的一些标签，标签手册点击这里：W3C_HTML5。

        一些常用的 HTML 实例，点击这里：W3C_HTML实例。

// 页面布局，表单提交等标签内容

//一个前端页面的组成：html(标签) + css(样式) + js(动态页面) + 图片等

（1）在 HTML 中引入外部 CSS

        当样式需要被应用到很多页面的时候，可以使用外部样式表，通过更改一个文件来改变整个站点的外观。

（2）在 HTML 中引入外部 JavaScript

        JavaScript 使 HTML 页面更具动态性和交互性。

        HTML

2、CSS 简介

        CSS 是一种描述 HTML 文档样式的语言，CSS 描述应该如何显示 HTML 元素。

        CSS 指的是层叠样式表 (Cascading Style Sheets)，描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，外部样式表存储在 CSS 文件中。// 页面渲染的样式

        CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。下边为 CSS 使用样例示例：

    
        
    
    
        
我的第一个 CSS 实例
        
这是一个段落。
    

        有关 CSS 样式设计的参考手册，请点击这里：W3C_CSS。

（1）CSS 的基本语法

        CSS 规则集（rule-set）由选择器和声明块组成：

• 选择器指向需要设置样式的 HTML 元素。
• 声明块包含一条或多条用分号分隔的声明。
• 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
• 多条 CSS 声明用分号分隔，声明块用花括号括起来。

        例如，所有

元素都将居中对齐，并带有红色文本颜色：

p {
  color: red;
  text-align: center;
}

解释：
// p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：
）。
// color 是属性，red 是属性值
// text-align 是属性，center 是属性值

（2）三种使用 CSS 的方法

2.1 - 外部 CSS 的使用

        通过使用外部样式表，只需修改一个文件即可改变整个网站的外观，每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。

        例如，外部样式在 HTML 页面 部分内的 元素中进行定义：

     
        
    
    
        
This is a heading
        
This is a paragraph.
    

        外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。外部 .css 文件不应包含任何 HTML 标签。"mystyle.css" 是这样的：

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

2.2 - 内部 CSS 的使用

        如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式在 head 部分的

This is a heading

This is a paragraph.

2.3 - 行内 CSS 的使用

        行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

        例如，行内样式在相关元素的 "style" 属性中定义：

    
        
This is a heading
        
This is a paragraph.
    

        前端基础的 HTML 和 CSS 样式就介绍到这里，涉及的知识都是一些网页的标签元素以及样式设计，本身跟编程关系不大，重点在于一些常用标签的熟悉以及对于标签的使用，查看W3C的相关手册即可。

        至此，全文结束。