使用 HTML CSS 编辑静态网页

文章目录

一、HTML 概念概述
二、HTML 语法使用说明
三、CSS 概念概述
四、CSS 中的选择器和属性

一、HTML 概念概述

HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。

超文本是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。

html文档后缀名 .html 或者 .htm。

二、HTML 语法使用说明

HTML中的标签分为：

围堵标签：有开始标签和结束标签。如 <html> </html>
'自闭和’标签：开始标签和结束标签在一起。如 <br/>

标签可以嵌套，但需要正确嵌套，不能你中有我，我中有你。

错误写法：<a> <b> </a> </b>
正确写法：<a> <b> </b> </a>

在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。

三、CSS 概念概述

CSS 用来美化页面和控制布局。是 Cascading Style Sheets（层叠样式表）的缩写。

层叠：多个样式可以作用在同一个 html 的元素上，同时生效。

CSS 的使用方式有三种：

内联样式。在标签内使用 style 属性指定 CSS 代码。
```
<div style="color:red;">hello css</div>
```
内部样式。在 head 标签内，定义 style 标签，style 标签的标签体内容就是 CSS 代码。
```
<style> div{ color:blue; } </style> <div>hello css</div>
```

外部样式。定义编辑 CSS 资源文件，然后在 head 标签内，定义 link 标签，引入外部的 CSS 资源文件（引入方式1）。引入方式2如下

/*css资源文件：a.css */
div{ color:green; }

<!-- 引入方式1 -->
<link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div>

<!-- 引入方式2 -->
<style> @import "css/a.css"; </style>

CSS语法格式：

选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }

选择器：筛选具有相似特征的元素。
每一对属性需要使用 ;（英文分号）隔开，最后一对属性可以不加 ; （英文分号）。

四、CSS 中的选择器和属性

使用 HTML CSS 编辑静态网页相关推荐

HTML+CSS+JavaScript 静态网页实例
HTML+CSS+JavaScript 静态网页实例静态网页链接网页源码地址
食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作
HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作文章目录 HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) ...
HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作
HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML\CSS实现静态网页附完整代码【W3school主页】
实现这个静态网页主要是为了练习HTML\CSS语言,让自己加深印象. 选择的网页是W3school的主页一.效果对比从对比能看出,和原版还是有很多的不同.还是可以继续细细打磨的. 1.顶部 2.底 ...
使用html和css创建静态网页版的个人简历
个人学习过程的记录之静态网页简历制作. <!DOCTYPE html> <html lang="en"><head><meta chars ...
HTML+CSS美食静态网页设计——八大菜系介绍舌尖上的美食5页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 ...
基于HTML和css的静态网页仿写
具体效果为: 采用的技术主要有: position定位浮动布局弹性盒子布局 a链接伪类表格表单等等首先全局设置为: *{margin: 0%;padding: 0%;}ul,ol{list- ...
HTML+CSS美食静态网页设计——美食餐厅8页(页面好看)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 ...
HTML+CSS鲜花静态网页设计---子悦花店 1页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 鲜花网页设计 | 鲜花商城网页制作 | 在线花店网站 | 盆栽 ...
HTML+CSS粮食静态网页设计--五常大米 3页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 ...