一. 思维导图
二.HTMl
1.定义：
HTML是超文本标记语言，页面内可以包含除了文字外的其他元素，如音频、图片、视频。
开发工具有webStrom、vsCode、HBuilder X等
2.基本结构
<html>
<head>
<meta name="XXX" value="XXX"/>
<title>标题</title>//页面标题
</head>
<body>
<!--注释-->
主体内容
</body>
</html>3.基本标签：
3.1标题标签:
h1~h6标签可以定义标题，从1~6依次递减
<h1>这是一个h1标题</h1>
3.2段落标签：
p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间，也可以在样式表中规定。
<p>段落一</p>
<p>段落二</p>
3.3加粗标签：
Strong用来加粗字体，标题标签自带加粗
3.4斜体标签：
em用来让字体倾斜
<p><em>斜体标签</em></p>
<p>非斜体</p>
3.5超链接标签：
a标签定义超链接，⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。a元素最重要的属性是 href 属性，它指示要链接的⽬标位置。
<a href="http://www.baidu.com">百度</a>
这是超链接标签的默认样式，也可以通过css改变它的样式，点击它就能跳转到百度
3.6图片标签
img 元素向⽹⻚中嵌⼊⼀幅图像。
<img src="" alt="" >
| 属性 | 值 | 描述 |
| src | URL | 规定显示图像的 URL。即图片的位置路径 |
| alt | text | 规定图像的替代⽂本，⼀般在图⽚⽆法正常显示占位的⽂字。 |
| width | px，% | 定义图像的宽度。 |
| height | px，% | 定义图像的⾼度。 |
| title | text | 当⿏标在图⽚上时显示的⽂字 |
3.7表单标签：
form 标签⽤于为⽤户输⼊创建 HTML 表单。
表单能够包含 input 元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。
action:规定表单提交何处，值为URL
method：表单提交⽅式：get、post
get：默认，主动的获取⽅式，数据放在url上，数据的容量有限，安全性差，有缓存
post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存
3.8无序标签
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>好好学习</li>
<li>天天向上</li>
</ul>
3.9有序标签
<ol>
<li>好好</li>
<li>学习</li>
</ol>
<ol>
<li>好好学习</li>
<li>天天向上</li>
</ol>
三.CSS
1.基本语法：
CSS 样式由选择器和⼀条或多条以分号隔开的样式声明组成。每条声明的样式包含着⼀个 CSS属性和属性值。
选择器名 {
属性 : 属性值;
......
}
例：
.box{
width: 20%;
height: 35px;
background-color: #E9185A;
}2.CSS引入：
1.行内样式
<p style="color:red;font-size:50px;">这是⼀段⽂本</p>
2.内联样式
通过在html⻚⾯内容开辟⼀段属于css的代码区域，通常做法为在 head 标签中嵌套 style标签，在 style 中通过选择器的⽅式调⽤指定的元素并设置相关 CSS。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.head{
width: 20%;
height: 35px;
background-color: #E9185A;
}
#title{
vertical-align: middle;
}
.bo{
width: 20%;
height: 75%;
}
.number{
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
}
</style>
</head>3.引⼊外联样式
在外部创建.css文件，然后在html内引入
<link type="text/css" rel="stylesheet" href="css/value.css"><!--根据HTML所在位置确定路径-->3.CSS选择器
3.1通⽤选择器：
将所有元素的内外边距设为0
*{
padding: 0;
margin: 0;
}3.2元素选择器
元素名称 {
......
}
例：
p {
color: red;
font-size: 20px;
}
3.3 ID选择器
#id属性值 {
......
}
#p1 {
font-weight: bold;
}
3.4 类选择器
.class属性值 {
......
}
.hidden {
display: none;
}
3.5后代选择器
⽤于选择指定标签元素下的后辈元素，只要是指定的后辈元素就能应用
.l_child li{
width: 140px;
margin: 5px 15px;
list-style: none;
border-bottom: 1px dashed gray;
}3.6子代选择器
只选则指定标签下的子代元素3
form>p{
margin: 5px 0px 5px 20px;
}
4.CSS常用属性
4.1背景:background
背景颜色： background-color
背景图片：background-image
4.2⽂本：
添加文本颜色：color:
对齐方式：text-align：center（居中），left（左对⻬），right（右对⻬）
规定添加到⽂本的修饰：text-decoration：underline（下划线）、overline（上划线）、line-through（中划线）、none去除文本修饰
设置⽂本⾸⾏缩进：text-indent：
4.3字体
⽂本字体，该属性设置⽂本的字体：font-family
⽂本中字体⼤⼩： font-size
字体⻛格：font-style：normal（⽂本正常显示）、italic（⽂本斜体显示）、oblique（将⽂字强制倾斜）
字体加粗：font-weight：bold：可以将⽂本设置为粗体，值为100 ~ 900，100为最细
