HTML学习总结
什么是HTML？HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。它定义了网页内容的含义和结构。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
那么HTML中包含什么呢？HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。 标记中包含一些规定的"元素"如 <head>，<title>,<body>,<header> 等等。其中head元素主要用来提供有关网页的信息，body元素用来提供网页的具体内容，它由一系列其他的元素组成，比如其中可包含div、p、ul、li等元素。HTML一般由多条语句组成，一条语句也叫做一条元素，语句的组成结构一般为：开始标记+内容+结束标记，例如<p>Hello</p>。语句中也能嵌套一条或多条语句，例如：<div><p>Hello</p></div> 。 下面是个网页中最基本的元素：<html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。<title>元素 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。<head>元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。<body>元素中包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。另外还有一些空元素，它们只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>等等。
下面介绍我所学习的一些元素。
标题元素：HTML 提供了从大到小6级标题，分别是：<h1>~<h6>。
超链接元素：超链接的语法一般为：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
其中href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)。target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）。超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的。
图片元素：在HTML中插入一张图片的语法一般为：
<img src=URL alt="MDB Logo width="200" height="200">
其中src属性为要显示图片文件的位置 URL，即图片文件的路径。alt属性当获取图片出现问题时显示的文字（占位符）。width和height属性用来设置图片的尺寸。
表格元素：在HTML中展示表格元素的一般语法为：
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
其中，<table>表示一张表，<tr>表示行, <td>表示行中的单元, <th>是表头的单元，表头的单元会加粗显示。
列表元素：列表元素分为有序列表ol和无序列表ul。使用的语法是一致的，以无序列表的一般语法来举例：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ul改成ol之后就会变成有序列表。ul无序列表一般默认使用实行圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。ol有序列表默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。以上都是通过设置属性值type设置。例如：
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
CSS学习总结
什么是CSS？CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。它的具体作用就是布局整个页面，对HTML中的元素设置位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
那么如何写CSS呢？CSS中一条样式规则由选择器和其中以{}包裹的一条或多条声明组成，一个声明又由属性和值构成，属性和值之间用冒号而开，声明之间用分号隔开。例如：
p{
color:red;
text-align:center;
}
这里的例子中选择器为p，属于元素选择器，即选择p元素展示的内容更改它们的样式，此外还有id选择器和class选择器。以id选择器为例，其一般语法为：
#sky{
color: blue;
}
这条样式规则就会寻找HTML中id为sky的元素，更改其样式，又因为HTML文件中id的值是唯一的，所以id选择器只能选中一个元素去更改样式。而class选择器与它不同的就是class选择器能选中很多个元素，只要元素的class值与CSS中的相互对应。class的选择器语法是class值前加.，例如：
.sky{
color: blue;
}
另外，CSS中还能对选择器进行组合，从而更精准或者方便的选择元素。
例如：
.haha p {
background-color: yellow;
}
两个选择器用空格相隔表示选择类为haha的元素中的所有p元素
例如：
.haha > p {
background-color: yellow;
}
两个选择器用>连接表示选择类为haha的元素中的直接p元素
例如：
.haha , p {
background-color: yellow;
}
两个选择器用,号分隔表示选择类为hah的元素和p元素
另外，当我们有鼠标移到某元素上变换背景颜色或者超链接访问前后访问后样式不同等等需求时，我们使用伪类或者伪元素，它是用于定义元素的某种特定的状态或位置等。
语法为选择器后使用 : 号，再跟上某个伪类/伪元素 ，例如：
p:hover {
background-color: rgb(226, 43, 144);
}
它表示的是鼠标移到段落则改变背景颜色
下面是CSS中一些常用的属性。
颜色，尺寸，对齐属性：background-color,width,height,text-align是一些常用的。一般运用：
.example {
width: 100px;
height: 200px;
background-color: powderblue;
text-align: center;
}
定位属性：position属性有一些值：static 静态 relative 相对 fixed 固定 absolute 绝对
设置了position的值之后，我们才能使用top，bottom，left，right属性来对元素的位置进行设置，否则定位无效。下面介绍position不同的值的作用。
static：它是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
relative：它将把元素相对于他的静态（正常）位置进行偏移，怎么偏移？通过设置top，bottom，left，right的值。
fixed：它将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。此时元素固定的位置仍由top，bottom，left，right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
absolute：它将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。
溢出属性：这个属性的使用范围是当元素内容超过其指定的区域时，我们可以通过溢出overflow属性来处理这些溢出的部分。同样的，溢出属性也有一些值：visible 溢出部分不被裁剪，在区域外面显示 hidden 裁剪溢出部分且不可见 scroll 裁剪溢出部分，但提供上下和左右滚动条供显示 auto 裁剪溢出部分，视情况提供滚动条
浮动属性：在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。一般这种样式用来使图像和文本进行合理布局。
不透明度属性：opacity是用来对任何元素（不过常用于图片）设置不透明度的一个属性。它的值是在0.0~到1.0之间的数字，值越高，透明度越低。
边框与边距属性：边框属性是border，内边距是padding，外边距是margin。一般运用：
.box {
border: 10px;
padding: 25px;
margin: 25px;
}
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
