HTML总结
1.什么是HTML?
HTML是用来描述网页的一种语言,即我们用HTML来构建Web页面即所谓的网页。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
2.HTML标签
HTML标记标签通常被称为HTML标签。
- HTML 标签是由尖括号包围的关键。
- HTML 标签通常是成对出现的,但也有可以单独出现的标签,我们称之为自闭合标签。
- 标签对中的第一个标签是开始标签,第二个标签是结束标签。
- 标签是存在各种属性的,给属性赋不同的值可以实现不同的效果。
3.HTML文档结构
一个HTML文档就是通常意义上的一个网页。它里面包含HTML标签和纯文本,Web浏览器的作用就是读取HTML文档,并以网页的形式显示出来。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。而一个HTML文档的结构大致分为两个部位:头部和身体部。所谓头部即是head
标签里面包含的内容;而身体部则是body
标签里包含的内容。注意:body
标签里面的内容才是会被渲染到Web页面上的,因此我们在编写HTML文档时,编写的内容都一定要放在body
标签里面。
4.HTML常用标签
- 标题标签:是通过
h1
-h6
等标签进行定义的。h1
定义最大的标题。h6
定义最小的标题。 - 段落标签:段落是通过
p
标签定义的。 - 换行标签:在HTML中换行是通过
br
标签实现的。 - 超链接标签:超链接是通过
a
标签实现的,在实际应用中,我们经常给文本、图片等加上超链接。
如图便是通过a
标签实现 用户点击百度一下,便可去访问百度官网的效果。
- div标签:定义文档中的节。
- form标签: 定义供用户输入的 HTML 表单。
- ol标签:定义有序列表。
- ul标签:定义无序列表。
- table标签:定义表格。
- input标签:定义输入框。
CSS总结
1.什么是CSS?
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
2.CSS语法
CSS 规则集(rule-set)由选择器和声明块组成:
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
实例:
p {
color: red;
text-align: center;
}
在此例中,所有 p
元素都将居中对齐,并带有红色文本颜色。其中p
是 CSS 中的选择器(它指向要设置样式的 HTML 元素:p
);color
是属性,red
是属性值;text-align
是属性,center
是属性值。
3.CSS选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
我们可将CSS选择器分为五类:
- 简单选择器(根据名称、id、类来选取元素)。
- 组合器选择器(根据它们之间的特定关系来选取元素)
- 伪类选择器(根据特定状态选取元素)
- 伪元素选择器(选取元素的一部分并设置其样式)
- 属性选择器(根据属性或属性值来选取元素)
最为常用的是元素选择器、id选择器和类选择器。
1.元素选择器:元素选择器根据元素名称来选择 HTML 元素。
p {
color: red;
text-align: center;
}
在这里,页面上的所有 p
元素都将居中对齐,并带有红色文本颜色。
-
id选择器:id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。
#para1 { text-align: center; color: red; }
这条 CSS 规则将应用于 id=“para1” 的 HTML 元素。
3.类选择器:类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素,需要写一个句点(.)字符,后面跟类名。
.center {
text-align: center;
color: red;
}
这条 CSS 规则所有带有 class=“center” 的 HTML 元素将为红色且居中对齐。
4.CSS如何生效?
当浏览器读到样式表时,它将根据样式表中的信息来格式化 HTML 文档。
有三种插入样式表的方法:
- 外部CSS
- 内部CSS
- 行内CSS
外部CSS
通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观。每张 HTML 页面必须在 head 部分的 link
元素内包含对外部样式表文件的引用。
<!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>
外部样式在 HTML 页面 head
部分内的 link
元素中进行定义。外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。但注意:外部 .css 文件不应包含任何 HTML 标签。
内部CSS
如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。内部样式是在 head 部分的 style
元素中进行定义。
<!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>
内部样式在 HTML 页面的 head
部分内的 style
元素中进行定义。
行内CSS
行内样式(也称内联样式)可用于为单个元素应用唯一的样式。如需使用行内样式,需要将 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>
行内样式在相关元素的 “style” 属性中定义。
当为某个 HTML 元素指定了多个样式时,样式优先级从高到底依次是:行内样式、内部样式表或外部样式表、浏览器缺省样式。
5.颜色、尺寸、对齐
颜色
我们可以采用颜色名称也可以使用颜色RGB16进制值,来设定前景或背景的颜色。
尺寸
我们可以用 height
和 width
设定元素内容占据的尺寸。常见的尺寸单位有:像数 px
,百分比 %
等。
对齐
对于元素中的文本,我们可以简单的设置text-align属性为left, center, right即可。
6.盒子模型
所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒子模型”。CSS 盒子模型实质上是一个包围每个 HTML 元素的框。它包括:外边距(margin)、边框(border)、内边距(padding)以及实际的内容(content),如下图:
- Margin 外边距,边框以外与其它元素的区域
- Border 边框,默认不显示
- Padding 填充,也叫内边距,即内容和边框之间的区域
- Content 盒子的内容,如文本、图片等
7.定位
position
属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute )
position 属性
position
属性规定应用于元素的定位方法的类型,有五个不同的位置值:
- static
- relative
- fixed
- absolute
元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。
static:
HTML 元素默认情况下的定位方式为 static(静态)。静态定位的元素不受 top、bottom、left 和 right 属性的影响。
relative:
position: relative;
的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
fixed:
position: fixed;
的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。
absolute:
position: absolute;
的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。
注意:“被定位的”元素是其位置除 static
以外的任何元素。
8.浮动
CSS float
属性规定元素如何浮动。
CSS clear
属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
float 属性:
float
属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。
float
属性可以设置以下值之一:
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。