Html&CSS 学习笔记
笔记来源：https://www.bilibili.com/video/BV14J4114768

===导航栏===

图片卡住力

HTML基础


图片卡住力

CSS基础



===正文==HTML===

1 概念

HTML是一门超文本标记语言

2 基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>

<body>
……
</body>
</html>

3 常用标签

3.1 标题标签
<h1>-<h6>
标题一共六级选，
文字加粗一行显。
由大到小依次减，
从重到轻随之变。
语法规范书写后，
具体效果刷新见。
      ——Mr.Pink;

3.2 段落标签&换行标签
<p>属于双标签，将整个网页分成若干段落。 <br />属于单标签，打断一行。

3.3 文本格式化标签
含义 标签
加粗 <strong></strong>或<b></b>
倾斜 <em></em>或<i></i>
删除线 <del></del>或<s></s>
下划线 <ins></ins>或<u></u>

3.4 <div>&<span>标签
双标签，无语义 <div>用来布局，每行只能有一个，自动换行。 <span>用来布局，每行可以有多个，自动用空格隔开。

3.5 图像标签
单标签，显示图片。 用法：<img src="图片路径" /> src是<img>标签的必须属性，用于指定图像的路径和图像名称。 其他属性:
属性 属性值 说明 用法
alt 文本 当图片不能正常加载时将图片替换为文本 在<img>标签中加上alt="替换文本"
title 文本 当鼠标悬浮到图片上时在鼠标旁显示的文本 在<img>标签中加上title="悬浮文本"
width 像素 设置图像宽度，只有此标签没有height标签时等比缩放 在<img>标签中加上width="数值"
height 像素 设置图像高度，只有此标签没有width标签时等比缩放 在<img>标签中加上height="数值"
border 像素 设置图像边框粗细 在<img>标签中加上border="数值"

注意点:
  1.  1.图像标签可以拥有多个属性，必须写在标签名的后面
  2.  2.属性间不分先后顺序，多个属性用空格隔开
  3.  3.属性采用键值对的格式，即key="value"的格式

3.6 超链接标签
双标签，用于定义超链接，从一个页面链接到另一个页面
用法：<a href="跳转目标地址" target="目标出口的弹出方式">文本或图像</a>
属性 作用
href 必须属性，用于指定链接目标的url地址
target 可选属性，用于指定跳转方式，_self为默认值，_blank在新标签页中打开
分类：
  1.  1.外部链接：在href中填入外部网址的链接，如：<a href="https://bilibili.com" target="_blank">哔哩哔哩</a>。
  2.  2.内部链接：在页面间相互链接，如：<a href="index.html" target="_blank">首页</a>。
  3.  3.空链接：在herf中填入“#”，一般用于占位。
  4.  4.下载链接：在href中填入文件的路径。如：<a href="QRCode.png" target="_blank">文件下载</a>。
  5.  5.网页元素的链接：在<a>与</a>间插入图片、文本、音频、表格。视频等，点击即可访问链接。
  6.  7.锚点链接：页面内跳转。
    1.   7.1将href属性的值设置为“#名字”的形式。
    2.   7.2找到跳转的目标将其标签加上id属性，值设置为“名字”。

4 注释和特殊字符

4.1 注释
以“<!--”开头，“-->”结尾，可跨多行，浏览器不显示之间的字符。

4.2 特殊字符
一些常用符号:
特殊字符 描述 字符的代码 特殊字符 描述 字符的代码
  空格 &nbsp;   TAB &emsp;
< 小于号 &lt; > 大于号 &gt;
& 和号 &amp; ¥ 人名币 &yen;
© 版权 &copy; ® 商标 &reg;
° 度 &deg; ± 正负号 &plusmn;
× 乘号 &times; ÷ 除号 &divide;
¹ 上标1 &sup1; ² 上标2 &sup2;
³ 上标3 &sup3; " 双引号 &quot;
更多请戳这里!

5 表格

5.1 表格标签
作用：显示表格，展示数据。
基本语法&结构：
<table>
<tr>
<th>表头单元格</th>
......
</tr>
<tr>
<td>表格数据</td>
......
</tr>
......
</table>

解释：
  1.  1.<table></table>用于定义表格标签。
  2.  2.<tr></tr>用于定义表格的每一行，必须嵌套在<table></table>标签中。
  3.  3.<th></th>用于定义一格表头，表头单元格的文字都是加粗居中显示，必须嵌套在<tr></tr>标签中。
  4.  4.<td></td>用于定义一格表格，必须嵌套在<tr></tr>标签中。
  5.  5.<td>单元格内可以放任何元素。

5.2 表格标签的属性
属性名 属性值 描述
align left、centet、right 规定表格相对于整个页面的对齐方式
border "1"或"" 默认为""，没有边框
cellpadding 数值 规定单元格边缘与其内容的空白，默认为1像素
cellspacing 数值 规定单元格之间的空白，默认为2像素
width 数值或百分比 规定表格宽度
height 数值或百分比 规定表格高度

5.3 表格结构标签
使用场景：当表格过大或过长时，可以把表格分割成表格头部和表格主题两大部分。
在表格标签中使用<thead></thead>表示表格的头部区域，使用<tbody></tbody>表示表格的主体区域。
在表格标签中使用<thead></thead>表示表格的头部区域，使用<tbody></tbody>表示表格的主体区域。

注意:
  1.  1.<thead></thead>与<tbody></tbody>只能属于并列关系,且只能嵌套在<table></table>标签中。
    2.  2.<thead></thead>用于定义表格头部，必须拥有<tr>标签，一般位于第一行。  3.<tbody></tbody>用于定义表格主体，主要用于存放数据。
5.4 合并单元格
方式：
  1.  1.跨行合并：rowspan="合并单元格的个数"
  2.  2.跨列合并：colspan="合并单元格的个数"

写法：
  1.  1.跨行合并：最上侧为目标单元格（或理解为向下合并）
  2.  2.跨列合并：最左侧为目标单元格（或理解为向右合并）

合并单元格三步曲：
  1.  1.先确定是跨行还是跨列。
  2.  2.找到目标单元格，写上“合并方式="合并数量"”。比如<td colspan="2"><td>
  3.  3.删除多余的单元格。

6  列表

作用：布局。
分类：有序列表、无序列表、自定义列表。
6.1 无序列表标签
语法&格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
<li>列表项n</li>
</ul>
解释：
  1.  1.<ul></ul>表示无序列表。
  2.  2.<li></li>表示列表中的表项。

注意：
  1.  1.<ul></ul>标签中只能出现<li></li>标签，不允许出现其他东西，只能在<li></li>内写内容。
  2.  2.<li></li>之间相当于一个容器，可以容纳所有元素。

6.2 有序列表标签
语法格式：
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
<li>列表项n</li>
</ol>
解释：
  1.  1.<ol></ol>表示有序列表。
  2.  2.<li></li>表示列表中的表项。

注意:
  1.  1.<ol></ol>标签中只能出现<li></li>标签，不允许出现其他东西，只能在<li></li>内写内容。
  2.  2.<li></li>之间相当于一个容器，可以容纳所有元素。

6.3 自定义列表标签
语法格式：
<dl>
<dt>名词1</dt>
<dd>名词的解释1</dd>
<dd>名词的解释2</dd>
......
<dd>名词的解释n</dd>
</dl>
解释：
  1.  1.<dl></dl>标签用于创建列表，该标签会与<dt></dt>和<dd></dd>一起使用。
  2.  2.<dt></dt>表示该列表的主题，<dd></dd>表示围绕该主题的内容。

使用场景：对术语或名词进行解释和描述，自定义列表的列表前没有任何符号。
注意:
  1.  1.<dl></dl>里面只能包含<dt></dt>和<dd></dd>
  2.  2.<dt>与<dd>的个数没有限制，通常是一个<dt>对应多个<dd>

7 表单

应用场景：通常用于与用户交互、注册界面，收集用户信息。
组成：表单域、表单控件、提示信息。

7.1 表单域
定义：表单域是一个包含表单元素的区域。 <form>标签用于定义表单域，以实现用户信息的收集与传递。 <form>会把它范围里的表单元素信息提交给服务器。
语法格式：
<form action="url地址" method="提交方式" name="表单域名称">
各种乱七八糟的东西。。。
</form>
常用属性:
属性 属性值 作用
action url地址 用于指定/接收并处理表单数据的服务器程序的/url地址(手动断句)
method get/post 用于设置表单的提交方式，取值为get或post
name 名称 用于指定表单的名称，以区分同一页面的多个表单域

7.2 表单控件
表单控件分三种:
  1.  1.input输入表单元素
  2.  2.select下拉表单元素
  3.  3.textarea文本域元素
7.2.1 input输入表单元素
创建一个单行文本框，收集用户信息。 <input />标签中包含一个很多属性
属性 属性值 描述
name 用户自定义 定义input元素名称
value 用户自定义 规定inout元素的值
checked checked 声明此input 元素首次被加载时应当被选中
maxlength 正整数 规定所输入的最大字符数
type button
checkbox
file
hidden
image
password
radio
reset
submit
text		 规定 input 元素的类型

<input />标签中包含一个type属性，根据不同的属性值，输入字段可以有很多形式
type的属性以及属性值描述如下：
属性值 描述 示例代码(省略<form>标签) 示例代码运行结果
button 定义可点击按钮(多数情况下通过JavaScript启动脚本) <input type="button" value="我是个按钮" />
radio 定义单选按钮 <input type="radio" name="r" />
<input type="radio" name="r" />
checkbox 定义复选按钮 <input type="checkbox" />
<input type="checkbox" />
file 定义输入字段和浏览按钮，供文件上传 <input type="file" />
hidden 定义隐藏的输入字段 <input type="hidden" />
text 定义单行的输入字段，可输入文本，默认为20个字符 <input type="text" value="ヾ(≧▽≦*)o" />
password 定义密码字段，该字段中的字符被掩码 <input type="password" />
submit 定义提交按钮 <input type="submit" />
image 定义图像形式的提交按钮 <input type="image" src="thinking.jpg" />
reset 定义重置按钮，重置按钮会清除表单中的所有数据。 <input type="reset" />
注意点：
  1.  1.name和value按道理是每个表单元素都要有的属性值，主要给后台人员使用。
  2.  2.要求同一块单选按钮和复选按钮都要有相同的name值。
  3.  3.单选按钮和复选按钮可以使用checked属性，当页面打开时自动勾选。
  4.  4.maxlength主要给文本框用。

7.2.2 <label>标签
<label>标签为<input>标签元素定义标注。
作用：用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标/转到或选择到/对应的表单元素上(手动断句)，用于增加用户体验。

语法&结构：
<label for="id名">文本</label>
<input type="任意类型" name="任意名称" id="id名" />

示例代码:
<form>
 <label for="s">点我可选</label>
 <input type="checkbox" name="example" id="s" />
</form>

运行结果:
核心：<label>标签的for属性应当与相关元素的id属性相同。
7.2.3 select下拉表单元素
使用场景：有多个选项想让用户单选，并且想要节约页面空间，我们就可以使用<select>标签控制并定义下拉列表。
语法&结构：
<select>
<option>选项一</option>
<option>选项二</option>
......
<option>选项n</option>
</select>
注意点：
  1.  1.<select>中至少包含一对<option>。
  2.  2.在<option>中定义 selected="selected" 时，当前项即为默认选中项。

示例代码：
<form>
<select>
<option>| 1 |</option>
<option>| 2 |</option>
<option>| 3 |</option>
<option>| 4 |</option>
<option selected="selected">\ 5 /</option>
</select>
</form>
运行结果：

7.2.4 textarea文本域元素
使用场景：当用户需要输入的内容较多的情况下，我们就可以使用<textarea>标签了。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
<textarea>标签通常用于留言板或评论。

语法格式：
<textarea rows="行数" cols="列数">
文本内容
</textarea>

注意点：
  1.  1."cols"和"rols"一般不在这里使用，以后用CSS实现。
  2.  2.文本框一角可以被用户拖动。

示例代码：
<form>
<textarea rows="3" cols="20">嗯，哼，哼，啊啊啊啊啊啊啊啊啊(每日恶疾)</textarea>
</form>

运行结果：

8 帮助信息

HTML完结撒花！！！( •̀ ω •́ )✧
查阅文档是个好习惯哦~




===正文==CSS基础===

1 CSS简介

CSS的主要用于美化网页，重新布局的。

CSS——网页美容师！！！
CSS是层叠样式表(Cascading Style Sheets)的简称
CSS也是一种标记语言
CSS主要用于设计HTML页面中的文本内容（字体、大小、对齐方式等）、图形的外形（宽、高、边框样式等）以及版面的布局和外观显示样式。
总结：
  1.  1.HTML主要做结构，显示元素内容。
  2.  2.CSS美化HTML，布局网页。
  3.  3.CSS最大价值：结构(HTML)与样式(CSS)相分离。

2 CSS语法规范

CSS规则由两个主要部分构成：选择器及一条或多条声明。
简单来说就是这张烂图：

解释：
  1.  1.在图中，选择器是用于指定CSS样式的HTML标签，花括号内是对/该对象设置的具体样式(手动断句)
  2.  2.属性与属性值间以“键值对”的形式出现
  3.  3.属性是对指定的对象设置的样式属性，例如字体大小，文本颜色
  4.  4.属性与属性间用英文的冒号隔开
  5.  5.多个键值对用英文的分号隔开
CSS可以写在<head></head>标签里的<style></style>标签中。

3 CSS基础选择器

3.1 选择器干什么
选择器就是根据不同的需求把不同的标签选出来，翻译成人话就是选标签用的。
CSS只做两件事：选对人，做对事。

3.2 选择器的分类
选择器分为基础选择器和复合选择器两大类，先说基础选择器。
基础选择器是由单个选择器组成的。
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
3.2.1 标签选择器
标签选择器是指用HTML标签作为选择器，按标签名称分类，为某一页面中某一类标签指定统一的CSS标签

语法&结构：
标签名 {
属性1:属性值1;
属性2:属性值2;
......
属性n:属性值n;
}
作用：将某一类标签全部选择出来。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设置差异化样式，只能选择当前的全部标签。

3.2.2 类选择器
如果想要单独选择一个或某几个标签，可以使用类选择器

语法&结构：
.类名{
属性1:属性值1;
属性2:属性值2;
......
属性n:属性值n;
}
注意：类选择器使用"."(英文点号)来标识，后面紧跟我们自定义的类名

3.2.3 类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字
如果要在一个标签中定义多个类名，则在标签class中写出这些类名并用空格隔开
示例代码：
<div class="red wide border">......</div>
应用场景：
  1.  1.可以把一些标签元素相同点样式(共同的部分)放到一个类里面
  2.  2.节省CSS代码，便于统一修改

3.2.4 id选择器
id选择器可以为特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中的id选择器以"#"来定义

语法&结构：
#id名{
属性1:属性值1;
属性2:属性值2;
......
属性n:属性值n;
}

注意：id属性只能在每个HTML文档中出现一次！！！所以只能使用一次！！！
3.2.5 通配符选择器