Html与Css基础知识整合

最新推荐文章于 2021-07-13 21:01:18 发布

南风知易✓✓✓

最新推荐文章于 2021-07-13 21:01:18 发布

阅读量280

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/tianynnb/article/details/115506912

版权

html基础

2.1 HTML5基本结构

**HTML5****文档的基本结构如下：

<!DOCTYPE html>

<html>

 <head>

  <title>网页标题</title>

 </head>

 <body>

  主体内容

 </body>

</html>

2.1.1 文档类型声明**<!DOCTYPE>

就是HTML5的DOCTYPE声明

—**在HTML5中，该声明被大幅度化简：

<!DOCTYPE html>

2.1.2 根标签<html>

**是HTML5文档的根元素标签，除顶部文档类型声明以外，所有的HTML5文档都是以标签开始，以****标签结束。

2.1.3 首部标签<head*>****

HTML5文档的首部以标签开始，以标签结束。标签中的内容不会显示在网页的页面中。标签中可包含和等标签，用于声明页面标题、字符集和关键词等.

网页标题标签

HTML5文档使用和标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，若省略标签则网页标题会显示为“无标题文档”。
基础地址标签
标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档中使用了相对路径时，浏览器会用标签指定的URL进行补全。标签也可以为该网页上所有超链接统一设置打开方式: 百度网易

元数据标签

标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。通常标签可用于定义网页的字符集、关键词、描述、作者等信息。

— **(1)** **字符集声明**

以UTF-8字符集为例，HTML4.01的字符集声明如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

在HTML5中，同样的内容声明方式会更为简洁，写法如下：

<meta charset="utf-8">

	(2)关键词声明

<meta name="keywords" content="HTML5, CSS3, jQuery" />

— **(3)** **页面描述声明**

使用<meta>标签定义页面描述（description）的用法如下：

<meta name="description" content="This is a tutorial about HTML5, CSS3, jQuery" />

搜索引擎会根据<meta>标签中的name和content属性来索引网页.

4.样式标签

标签中。例如：

2.1.4主体标签

HTML5文档的主体部分以标签开始，以标签结束。标签中的内容将全部显示在网页的页面中。标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成多样化的显示效果。

2.1.5 HTML5****文档注释

HTML5使用标签为文档进行注释，注释标签以“ ”结束，中间的“…”替换为注释文字内容即可。标签支持单行和多行注释

2.1.6 HTML5****文档规范

万维网联盟（W3C）明确规定了在新版本HTML5中必须使用小写格式，包括元素标签本身和其中可能出现的属性均需要遵守此规范.

字符实体的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZ3GziUu-1617847539676)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210310113639479.png)]

2.1.7 HTML4.01转换为HTML5

基于HTML4.01开发的网页可以分成三个步骤转换为HTML5网页。
步骤一：化简DOCTYPE声明方式。
步骤二：化简charset字符集描述方式。
步骤三（可选，取决于需要转换的文件是否包含该内容）：若存在外部css文件或js文件的引用，可以直接省略其中的type描述。

2.2 HTML5保留的常用标签

2.2.1基础标签

段落标签
标题标签
-
水平线标签
换行标签

2.22 文本格式标签

斜体字标签
粗体字标签和
上标标签^{和下标标签}
修订标签和
预格式化标签

2.2.3 列表标签

有序列表标签
1. 第一项
2. 第二项
3. 第三项 .......
无序列表标签
- 第一项
- 第二项
- 第三项 .......
定义列表标签

第一个词条
第一个词条的定义
第二个词条
第二个词条的定义 .......

2.2.4 图像标签

2.25 *超链接标签**

超链接标签有如下两个重要属性：
href：目标内容的URL地址。
target：目标内容的打开方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fk4lDOU5-1617847539679)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210310132523161.png)]

外部链接
其基本格式如下：链接文本或图片
内部链接

链接文本或图像

2.2.6 **表格标签*

表格标签
表格行标签
单元格标签
表头标签
表格标题标签

2.2.7 框架标签

该标签在HTML5中仅支持src属性，用于指定框架内部的网页来源。例如：

<iframe src="news.html"></iframe>

2.2.8 容器标签

标签
标签

2.3 HTML5新增的常用标签

2.3.1 HTML5****新增文档结构标签

页眉标签
导航标签
节标签
文章标签
侧栏标签
页脚标签

—1. 记号标签** 2.** 进度标签****

—3. 度量标签****

Css样式表

3.1Css样式表

3.11 内部样式表

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

内部样式是在 head 部分的

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3.1.2 外部样式表

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的元素内包含对外部样式表文件的引用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3.1.3 行内样式表

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

3.1.4 层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

3.2 选择器

3.2.1 CSS 元素选择器

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

3.2.2 CSS id 选择器

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

#para1 {
  text-align: center;
  color: red;
}

3.2.3 CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

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

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

3.2.4 CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}

3.2.5 CSS 分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

3.2.6 CSS 属性选择器

下例选择所有带有 target 属性的元素；

a[target] {
  background-color: yellow;
}

[attribute=“value”] 选择器用于选取带有指定属性和值的元素。

a[target="_blank"] { 
  background-color: yellow;
}

下例选取所有带有 target="_blank" 属性的元素：

a[target="_blank"] { 
  background-color: yellow;
}

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 “.pdf” 结尾的每个元素。
[attribute=value*]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个元素。

3.2.7 CSS组合器

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
通用兄弟选择器 (~)

选择器	示例	示例描述
element element	div p	选择元素内的所有元素。
element>element	div > p	选择其父元素是元素的所有元素。
element+element	div + p	选择所有紧随元素之后的元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。

3.28 伪元素和伪类

伪类用于定义元素的特殊状态。

锚伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

悬停在 <div> 上

div:hover {
  background-color: blue;
}

:first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：
p:first-child {
  color: blue;
}

伪元素用于设置元素指定部分的样式。

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

::first-line 伪元素用于向文本的首行添加特殊样式。
注意 ::first-line 伪元素只能应用于块级元素。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。
注意：::first-letter 伪元素只适用于块级元素。


p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::before 伪元素可用于在元素内容之前插入一些内容。
::after 伪元素可用于在元素内容之后插入一些内容。
::selection 伪元素匹配用户选择的元素部分。

3.3 注释

位于

3.4 颜色

rgb(red, green, blue)

rgba(red, green, blue, alpha)

3.5背景

3.5.1

background-color
background-image
background-repeat
background-attachment
background-position

body {
  background-image: url("paper.gif");
}

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

  background-attachment: fixed;  background-attachment: scroll;

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

3.5.2 CSS背景简写

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

3.6 边框border

3.6.1 border-width

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick;

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）;

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

3.6.2 border-color

3.6.3 border 简写

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

3.6.4 圆角边框 border-radius

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

3.7 文本

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

vertical-align 属性设置元素的垂直对齐方式。

text-decoration 属性用于设置或删除文本装饰。

text-transform 属性用于指定文本中的大写和小写字母。

text-indent 属性用于指定文本第一行的缩进

letter-spacing 属性用于指定文本中字符之间的间距。

line-height 属性用于指定行之间的间距

text-shadow 属性为文本添加阴影。

font-style 属性主要用于指定斜体文本；

font-weight 属性指定字体的粗细；

font-size 属性设置文本的大小。

3.8 框模型

3.8.1外边距

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。margin 简写属性设置四个值：

p {
  margin: 25px 50px 75px 100px;
}

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
①合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
②当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并；

CSS 外边距合并实例 1

CSS 外边距合并实例 2

3.8.2 内边距

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

3.8.3 CSS 框模型

CSS 框模型

背景应用于由内容和内边距、边框组成的区域。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。

盒子模型水平方向布局

垂直方向的布局

默认情况下，父元素的大小被子元素撑开，子元素是在父元素内容区排列的，如果子元素大小超过父元素，那么就会出现溢出；

3.9 行内元素，块级元素，行内块元素

display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素

行内元素特征：
(1)设置宽高无效,只占自身大小，默认宽高总是被内容撑开；
(2)对margin，padding,border仅设置左右方向有效，上下无效；
(3)和其他元素都在一行上，遇到父级元素边界会自动换行

块状元素特征：
(1)能够识别宽高，默认宽度为父元素的宽度（全部），默认高度是 被子元素撑开；
(2)margin和padding的上下左右均对其有效
(3)可以自动换行,多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
综合了行内元素和块状元素的特性

3.10 设置元素的显示类型

display: inline;

display:block;

display:inline-block;

3.11 浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AxG8kRWg-1617847589396)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407184533743.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g3rdsKJz-1617847589398)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407185259880.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8PetCKU-1617847589399)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407185721560.png)]

3.12 高度塌陷

高度塌陷问题：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s9bd6h36-1617847589401)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407193645045.png)]

开启BFC

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M6iwVGh4-1617847589402)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407193853262.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7r7woxt-1617847589403)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407194407508.png)]

3.13 clear 清除浮动元素对当前元素产生的影响

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2REWGLoM-1617847589405)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407195145277.png)]

3.14使用after伪类解决高度塌陷的问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RmMQNCsR-1617847589406)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407200233683.png)]

3.15 clearfix

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bFG5nL40-1617847589407)(C:\Users\tianyn\AppData\Roaming\Typora\typora-user-images\image-20210407200935303.png)]

南风知易✓✓✓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Html与Css基础知识整合

HTML5基础2.1 HTML5基本结构**HTML5****文档的基本结构如下：<!DOCTYPE html><html> <head> <title>网页标题</title> </head> <body> 主体内容 </body></html>2.1.1 文档类型声明**<!DOCTYPE>就是HTML5的DOCTYPE声明—**在HT
复制链接

扫一扫