一、简介
1.html
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
2.css
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二html基本内容
（1）html标签
整个网页是从<html>这里开始的，然后到</html>结束。（2）head标签
（2）标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
（3）段落
HTML 段落是通过标签
来定义的
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
(3)链接
HTML 链接是通过标签 <a> 来定义的
<a href="https://blog.csdn.net/zong596568821xp">这是一个链接使用了 href 属性</a>
(4)图像
HTML 图像是通过标签 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。
<img src="zongxp.jpg" width="640" height="640" />
（5）表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性，表格将不显示边框。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
（6）标签
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
（7）链接
：<a href="http://www.example.com/">链接文本</a>
<a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
<a href="mailto:webmaster@example.com">发送e-mail</a>
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
（8）图片
<img src="URL" alt="..." height="42" width="42">
（9）无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
（10）有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
（11）表格
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
三、css基本内容
（1）基本语法
选择器：{属性名：属性值；属性名：属性值}
选择器：用来选择标签然后增加样式
div{
width:100px;
height:100px;
background:gold;
}
class选择器
它的值可以多个也可以重复
.center{text-align:center;}
(2)如何生效
外部样式表
先创建一个html文件
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<h2>h2》</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4<span>p5</span></p>
</body>
</html>
同一目录创建css文件
h2{
color: lightsalmon;
}
p{
color:limegreen ;
font-size: 18px;
line-height: 20px;
}
span{
color: mediumpurple;
font-weight: bold;
}
在html文件中用来引用css文件
内部样式表
内部样式表指的是将css台吗卸载html文档中的head标签中，并且用style标签定义
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2{
color: green;
font-size: 20px;
}
h4{
color: purple;
font-size: 18px;
}
p{
color: blue;
font-size: 16px;
}
</style>
`
内联优先级
1.内联样式
2.内部样式表或外部样式表
3.浏览器省缺样式
(3)文本属性
1.color
颜色名称：英文单词（如Tomato）
color: red;
16进制rgb值：#RRGGBB
background-color:#ccc;
rgb函数：rgb（red，green，blue）
background-color: rgb(0, 237, 255);
rgba函数：rbga(red,green,blue,alpha)
background-color: rgba(0, 237, 255, 0.5);
2.尺寸
用height和width来设置元素内容转矩的尺寸
width: 100%;
height: 200px;
3.对齐
对于元素中的文本，我们可以简单的设置text-align属性为left，center，right
（4）盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
content盒子的内容
padding填充
border边框
margin外边框
先建立html文件
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
</body>
</html>
在建立css文件
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
（5）边框与变距
1.边框
上下左右都相同的边框
border: 1px dotted black;
只设置低边框
border-bottom: 1px solid blue;
边框圆角
border: 1px solid grey;
border-radius: 15px;
2.边距
padding：20px；上下左右相同
padding-top：20px
padding-right：20px
padding：20px，20px，20px，20px；上下左右顺序
padding：25px，20px；简写上下位25px，左右位20px
（6）定位
1.静态定位
position：static；元素的默认定位方式，无论设置与否，元素将按照正常布局进行
2.相对定位
position：relative；相对正常位置进行的偏移
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>
3.固定定位
position：fixed；使元素固定不动
4.绝对定位
position：absolute；将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
（7）溢出
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
（8） 浮动
使用float属性让元素水平方向上向左或者向右移动，周围元素从新排列
（9）不透明度
用opacity对任何元素设置不透明度值越低不透明度越低
注意：值在0.0~1.0之间
（10）组合选择器
1.后代选择器
<head>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
2.子元素选择器
<head>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<div>
<h2>我的名字叫Tom</h2>
<p>我住在中国</p>
</div>
<div>
<span><p>啊哈哈</p></span>
</div>
<p>我最好的朋友是Rose</p>
（11）伪类和伪元素
1.伪类：
为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
它可以用于
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
2.伪元素
创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)
它可以用于设置元素的首字母、首行的样式，在元素的内容之前或之后插入内容。
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
