【HTML和CSS学习总结】
一、HTML简介
HTML 俗称⽹页，就是我们打开浏览器访问任何⼀个⽹站所看到的都是由 HTML 页⾯提供的（或者与 HTML 技术相关的内容提供）。
HTML 全称为 HyperText Markup Language，被译为超⽂本标记语⾔。所谓的超⽂本就是不仅只有⽂本内容，包括链接、⾳频和视频、
图像等内容。所谓标记语⾔，简单来说就是元素。也就是说，HTML 提供⼀系列的元素来构成⼀个页⾯中最基础的内容。
HTML 是⼀种描述 Web ⽂档结构和语义的语⾔，它由元素组成，每个元素可以有⼀些属性或⽂本。
当你保存 HTML ⽂件时，既可以使⽤ .htm 也可以使⽤ .html ⽂件后缀。
编写HTML代码的⼯具：
记事本
sublime text
hbuilder
webstorm
vscode
pycharm – python代码 也可以写html代码
二、第⼀张⽹页
⼀个页⾯有且只有⼀个根标签是html， 元素⼀般包含 和 两个元素，也就是 HTML 的头部和主体内容。
<html>
<head>
<title>⽹页的标题</title>
</head>
<body>
<!-- 这是⼀个⽂本框 -->
<input type="text"></input>
</body>
</html>
| **HTML标签 | **由尖括号包围 |
|---|---|
| 成对出现 |
<p></p>即开标签和闭标签 |
| 属性 | 定义在开标签中，如input标签中的type属性 |
| 注释 | 是注释标签 |
| 简写 | 开闭标签之间的内容是标签体，如果标签体为空，则可以简写 |
| HTML⽂档在浏览器中被解释运⾏,展⽰的不是源码⽽是渲染之后的效果 |
三、HTML头部
< head > 元素包含了当前 HTML 页⾯的所有头部元素，在 < head > 元素内必须定义 < title > 元素，还可以定义 < script >、< link > 等元素。
这些 HTML 的头部元素定义了当前页⾯的标题、编码、使⽤的脚本或样式等信息。
1、title元素
< title >元素定义了当前HTML页⾯的标题
<title>百度⼀下，你就知道</title>
2、meta元素
元素提供了 HTML 页⾯的元数据（Metadata），元数据是存储数据的信息。
通常⽤于设置页⾯的编码、描述、关键词、作者等信息。
元素不会显⽰在页⾯中，但会被浏览器解析。
2.1 定义⽹页内容的编码格式
<meta charset="utf-8">
2.2 定义HTML页⾯关键字，⽤于搜索引擎
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
2.3 定义HTML页⾯描述
<meta name="description" content="百知教育IT培训,java培训,PHP培训,UI培训,H5培训,linux培训,⼤数据培训,Python⼈⼯智能,IT⾏业培训领跑者,⾼薪就业 ">
2.4 定义HTML页⾯作者
<meta name="author" content="百知教育">
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
四、HTML主体
1、body元素
标签定义⽂档的主体。 元素包含⽂档的所有内容（⽐如⽂本、超链接、图像、表格和列表等等）。body元素中包含的内容（⼦标签）是⽤
户可以看到的。
⼀个 HTML ⽂件只能存在⼀个标签。
2、HTML元素基本构成
2.1 元素类型
HTML 是标记语⾔，所谓标记就是指页⾯中的元素（元素也可以叫做标签）。⼀个完整的 HTML 页⾯都是由众多不同的元素组成的。
闭合元素：必须包含开始元素和结束元素，如果没有结束元素会产⽣意料之外的错误。
<title>⼈⼯智能</title>
<p>这是⼀个段落标签</p> <!--该标签的作⽤是表⽰⼀个段落，会有换⾏-->
空元素：也可以叫做单元素，只需要开始元素，⽽不需要结束元素。
<meta name="description" content="Web前端">
<br/> <!-- 换⾏ -- >
2.2 HTML属性
属性是设置在HTML元素中的，⽤于为元素添加附加信息。属性⼀般都是定义在开始元素中，并且是以“名称/值”对出现
<input type="text" /> <!-- 这是⼀个⽂本框 -->
<input type="button" value="点我" /> <!-- 这是⼀个按钮 -->
五、HTML⽂本
1.标题元素
HTML 提供了 6 个标题元素，由⼤到⼩依次为`
到
<h1>这是⼀级标题</h1>
<h2>这是⼆级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2.换⾏
元素定义的段落内容是不会⾃动换⾏的，如果换⾏需要使⽤ br 元素
<body>
⽣活赋予我们⼀种巨⼤的和⽆限⾼贵的礼品，这就是青春：充满着⼒量，充满着期待志愿，充满着求知和⽃争的志向，充满着希望信⼼和青春。
<br>
⼈所缺乏的不是才⼲⽽是志向，不是成功的能⼒⽽是勤劳的意志。
</body>
3.读入数据
代码如下（示例）：
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
该处使用的url网络请求的数据。
六、图像与链接
1、图像元素
元素引⼊外部图像， 元素是空元素。
1.1 src属性
src 属性（必需），表⽰引⼊图像的 URL 地址。
<img src="images/img.png">
图像可以是本地地址，也可以是⽹络地址。
<img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg">
1.2 图像⼤⼩
width 和 height 属性⽤于设置图像显⽰的宽度和⾼度。
<img src="img.png" width="350" height="233" />
七、列表
1、⽆序列表
1.1 定义⽆序列表
元素定义⽆序列表，⽤于列出页⾯上没有特定次序的条⽬。
<ul>
<li>北京市</li>
<li>上海市</li>
<li>重庆市</li>
</ul>
标题1.2 type属性
定义列表的项⽬符号的类型
disc：实⼼圆，默认值。
circle：空⼼圆。
square：实⼼矩形。
<ul type="circle">
<li>北京市</li>
<li>上海市</li>
<li>重庆市</li>
</ul>
2、有序列表
2.1 定义有序列表
<ol>
<li>北京市</li>
<li>上海市</li>
<li>重庆市</li>
</ol>
2.2 type属性
1：数字值，默认值。
a 或 A：⼩写或⼤写字母。
i 或 I：⼩写或⼤写罗马数字。
<ol type="a">
<li>北京市</li>
<li>上海市</li>
<li>重庆市</li>
</ol>
3、⾃定义列表
<dl>
<dt>北京</dt>
<dd>海淀</dd>
<dd>昌平</dd>
<dd>朝阳</dd>
<dt>⼴东</dt>
<dd>⼴州</dd>
<dd>深圳</dd>
<dd>东莞</dd>
</dl>
⼋、表格
1.表格使⽤
表格由 < table > 标签来定义。每个表格均有若⼲⾏（由 标签定义），每⾏被分割为若⼲单元格（由 标签定义）。
<table>
<tr>
<td>第1⾏，第1列</td>
<td>第1⾏，第2列</td>
</tr>
<tr>
<td>第2⾏，第1列</td>
<td>第2⾏，第2列</td>
</tr>
</table>
2.表格属性
<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left">
<tr>
<td>第1⾏，第1列</td>
<td>第1⾏，第2列</td>
</tr>
<tr>
<td>第2⾏，第1列</td>
<td>第2⾏，第2列</td>
</tr>
</table>
3.tr元素
<table border="1" cellspacing="0" width="500px" height="100px">
<tr align="center">
<td>第1⾏，第1列</td>
<td>第1⾏，第2列</td>
</tr>
<tr align="right" valign="top" bgcolor="blue">
<td>第2⾏，第1列</td>
<td>第2⾏，第2列</td>
</tr>
</table>
4.td元素
元素是定义表格的数据单元格。
<table border="1" cellspacing="0" width="500px" height="100px">
<tr>
<td align="center">第1⾏，第1列</td>
<td valign="top">第1⾏，第2列</td>
</tr>
<tr>
<td width="300px">第2⾏，第1列</td>
<td bgcolor='red'>第2⾏，第2列</td>
</tr>
</table>
九、表单
1、form 元素
表单⽤标签描述，表单内部可以有多个⼦标签，⽤来完成⽤户信息的收集，并发送请求给服务器。
属性：action=“xxx” method=“get/post”
请求地址 请求⽅式
http://www.baidu.com?uname=abc&passwd=123
<form action="http://www.baidu.com" method="get">
username:<input type="text" name="uname" id="uname115"/><br/> # abc
password:<input type="text" name="passwd" id="pwd115"/><br/> # 123
<input type="submit" value="提交" id="sub115"/>
</form>
2、表单元素
元素有很多不同类型，根据不同的 type 属性来决定。
type属性：
name属性 ：标签的普通的属性，相当于别名，是每个输⼊控件的重要属性=请求参数名。
id属性 ： 标签的唯⼀标识名，不能重复。
value属性 ：标签的普通属性，是中药属性==请求参数值。
2.1 ⽂本框
⽤户名：<input type="text" name="txt" /> <!-- text表⽰⽂本框-->
2.2 密码框
密码：<input type="password" name="pwd" value="123456" />
2.3 单选按钮
<!-- name：值必须⼀样，value：表⽰提交表单时的值 checked:默认选中-->
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0" checked="checked">⼥
2.4 复选框
<input type="checkbox" name="course" value="Mysql">Mysql
<input type="checkbox" name="course" value="HTML">HTML
<input type="checkbox" name="course" value="Linux">Linux
<input type="checkbox" name="course" value="Django">Django
2.5 按钮
<input type="button" name="btn" value="点我">
2.6 提交按钮
<input type="submit" name="sub_btn" value="提交">
2.7 重置按钮
<input type="reset" name="set_btn" value="重置">
2.8 ⽂件域
<input type="file">
2.9 ⽂本域
<textarea name="txtInfo" rows="4" cols="20">aa</textarea>
3、下拉选框
选择课程：
<select name="course">
<option value="1">Java</option>
<option value="2" selected="selected">C++</option>
<option value="3">PHP</option>
</select>
⼗、特殊符号
十一、CSS简介
CSS是 Cascading Style Sheets 的⾸字母缩写，意思是层叠样式表。⽬的是为了让⽹页元素的样式更加丰富，也为了让⽹页的内容和样式能拆分开CSS由此思想⽽诞⽣，有了CSS，html中⼤部分表现样式的标签就废弃不⽤了，html只负责⽂档的结构和内容，表现形式完全交给CSS，html⽂档变得更加简洁。
1、基本语法及引⽤⽅法
1.1基本语法
css的基本定义⽅法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页⾯元素关联起来的名称，属性是希望设置的样式属性每个属性有⼀个或多个值。选择器有很多种。
例如：
div{ width:100px; height:100px; color:red }
1.2三种引⽤⽅法
内联式 ：通过标签的style属性，在标签上直接写样式。
<div style="width: 100%;color: red;font-size: 16px;font-weight: bold;font-style: normal;font-family: '微软雅⿊';line-height: 34px">
嵌⼊式：通过style标签，在⽹页上创建嵌⼊的样式表。
<style type="text/css" >
div{color:red;
font-size:20px;
font-family:'Microsoft Yahei';
line-height:40px;
}
</style>
外联式：通过link标签，链接到外部样式表到页⾯中。如下⾯例⼦中在对应⽂件夹下新建main.css，将样式写⼊其中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、css⽂本设置
常⽤的应⽤⽂本的css样式：
color 设置⽂字的颜⾊，如： color:red;
font-size 设置⽂字的⼤⼩，如：font-size:12px;
font-family 设置⽂字的字体，如：font-family:‘微软雅⿊’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置⽂字倾斜 normal（标准） italic（斜体字体样式） oblique（倾斜字体样式）
font-weight 设置⽂字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 normal（标准 400）
bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）
font 同时设置⽂字的⼏个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/⾏⾼ 字体；如： font:normal
12px/36px ‘微软雅⿊’;
line-height 设置⽂字的⾏⾼，如：line-height:24px;
text-decoration 设置⽂字的下划线，如：text-decoration:none; 将⽂字下划线去掉 none（默认值）underline（⽂本下划线）overline（⽂本上划线）line-through（⽂本删除线）
text-indent 设置⽂字⾸⾏缩进，如：text-indent:24px; 设置⽂字⾸⾏缩进24px
text-align 设置⽂字⽔平对齐⽅式，如text-align:center 设置⽂字⽔平居中 left（排列在左侧，默认值）right（排列在右边）
center（排列在中间）justify（实现两端对齐⽂本效果）
3、颜⾊表⽰法 、
css颜⾊值主要有三种表⽰⽅法：
1、颜⾊名表⽰，⽐如：red 红⾊，gold ⾦⾊
2、rgb表⽰，⽐如：rgb(255,0,0)表⽰红⾊
3、16进制数值表⽰，⽐如：#ff0000 表⽰红⾊，这种可以简写成 #f00
CSS3中增加了新的颜⾊表⽰法，添加了透明度的概念
rgba（新的颜⾊值表⽰法）
1、盒⼦透明度表⽰法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表⽰颜⾊，第四个数值表⽰颜⾊的透明度
<style type="text/css" media="screen">
.box1{
background-color: red;
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.box2{
background-color: #ff0000;
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.box3{
background-color: rgb(255,0,0);
/*透明度0.5 （兼容IE）*/
opacity:0.5;
filter:alpha(opacity=10);
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.box4{
background-color: rgba(255,0,0,0.5);
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">颜⾊名</div>
<div class="box2">16进制</div>
<div class="box3">rgb</div>
<div class="box4">rgba</div>
</body>
4、选择器
4.1、标签选择器
标签选择器，此种选择器影响范围⼤
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
4.2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤。
#box{color:red}
<div id="box">....</div> <!-- 对应以上⼀条样式，其它元素不允许应⽤此样式 -->
4.3、类选择器
通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤。
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4.4、层级选择器
主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
4.5、组选择器
多个选择器，如果有同样的样式设置，可以使⽤组选择器。
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
4.6、伪类及伪元素选择器
常⽤的伪类选择器有hover，表⽰⿏标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插⼊内容。
box1:hover{color:red}
.box2:before{content:'⾏⾸⽂字';}
.box3:after{content:'⾏尾⽂字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
5、盒⼦模型
5.1 盒⼦模型解释
元素在页⾯中显⽰成⼀个⽅块，类似⼀个盒⼦，CSS盒⼦模型就是使⽤现实中盒⼦来做⽐喻，帮助我们设置元素对应的样式。
5.2 设置边框
设置⼀边的边框，⽐如顶部边框，可以按如下设置：
border-top-color:red; /* 设置顶部边框颜⾊为红⾊ */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线，常⽤的有：solid(实线)
dashed(虚线) dotted(点线); */
5.3 设置内间距 设 padding
设置盒⼦四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
5.4 设置外间距margin
外边距的设置⽅法和padding的设置⽅法相同，将上⾯设置项中的’padding’换成’margin’就是外边距设置⽅法。
5.5 盒⼦模型的尺⼨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒⼦的真实尺⼨</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
6、css元素溢出
当⼦元素的尺⼨超过⽗元素的尺⼨时，需要设置⽗元素显⽰溢出的⼦元素的⽅式，设置的⽅法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。
4、auto 如果内容超过⽗元素尺⼨时，则浏览器会显⽰滚动条以便查看其余的内容。
5、inherit 规定应该从⽗元素继承 overflow 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css" media="screen">
.con{
width: 500px;
height: 200px;
border:1px solid #333;
overflow: auto;
}
.box{
width: 400px;
height: 300px;
background-color: gray;
margin: auto ;
}
</style>
</head>
<body>
<div class="con">
<div class="box">当⼦元素的尺⼨超过⽗元素的尺⼨时，需要设置⽗元素显⽰溢出的⼦元素的⽅式，设置的⽅法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。
5、inherit 规定应该从⽗元素继承 overflow 属性的值。</div>
</div>
</body>
</html>
总结
我在学习Web开发时了解到了HTML和CSS这两门很重要的编程语言。在学习这两门语言的过程中，我通过阅读相关书籍和文档，以及各种在线资源和参考资料，慢慢地掌握了它们的基本概念和用法。
HTML是一种用于构建Web页面的标记语言。学习HTML的基础内容包括标签、属性、列表、表格、表单等等。这些基础知识是我们构建网页所必需的，可以让我们更好地组织和呈现网页的内容。在学习HTML时，要注意掌握常用的标签和属性的用法，例如div、span、img、a等，同时也要学习如何使用CSS来美化HTML页面。
CSS是一种用于设计网页布局和样式的语言。通过使用CSS，我们可以对HTML页面进行美化，如调整字体、颜色、背景、边框和布局等。我学习了CSS的基础知识，包括选择器、属性和值，也学习了如何使用盒子模型，并掌握了一些常用的CSS框架和库，例如Bootstrap和Materialize等。同时，我也注意到一些常见的CSS问题，如浮动问题、层叠样式表和响应式设计等，这些问题应该引起我们的重视。
在学习HTML和CSS时，我认识到实践经验非常重要。只有通过编写实际的代码和解决实际问题，我们才能够更好地掌握它们的用法并深入理解它们的特性。此外，阅读相关的文档和教程也是必要的，可以帮助我们更好地理解概念和技巧。
总之，学习HTML和CSS是Web开发的基础，掌握它们的基本概念和用法可以让我们更好地构建网页和设计页面布局。通过实践和学习，我们可以逐渐熟练掌握HTML和CSS，并在未来的Web开发中游刃有余。