HTML & CSS 学习总结

圆籽

于 2022-07-10 06:45:59 发布

阅读量136

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/ningziya/article/details/125701175

版权

本文介绍了HTML的基本结构，包括doctype声明、头部元素和可见页面内容，以及CSS的概述、语法、选择器和属性。重点讲解了如何使用HTML标签定义页面内容和CSS来控制元素样式，适合初学者快速上手。

摘要由CSDN通过智能技术生成

HTML

1.概述

完整的HTML页面包括三个部分：声明、头部元素和可见页面内容。

完整的html界面可以由以下来概括：

<!DOCTYPE html>

<!-- 页面声明-->

<html>

<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<!-- 头部-->

<body>


 
</body>
<!-- 页面可见元素-->

</html>

2.可见页面内容

这部分主要由HTML中标签进行定义页面中的元素，确定整个网页中的内容。

需要注意：

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。HTML 文档由相互嵌套的 HTML 元素构成。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

通过对上述三方面的把握以及需求编写网页相关内容。

Css

概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来。

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

部分学习记录

选择器{属性：值}

嵌入式：

选择器{属性：值}       /*例如：h1、span*/

.类选择器{属性：值}       /*class的值*/

#id选择器{属性：值}       /*id的值*/

tips：后两个的区别在于：id选择器只能用一次，而类选择器可以被多次用
16、CSS不同写法的含义
①子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素；例如：

.food>li{border:1px solid red;}

②包含选择器，即加入空格,用于选择指定标签元素下的后辈元素；例如：

.food li{border:1px solid red;}

即：>作用于元素的第一代后代，空格作用于元素的所有后代。
③通用选择器，是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

*{color:red;}

④伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式

a:hover{}

⑤分组选择符，当你想为html中多个标签元素设置同一个样式时，可以使用（，）连接多个标签，为其设置同一种样式

圆籽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫