前端语言
一些碎碎念：之前发过一次但是不知道为什么没有记上，重新发一下，一些没有什么意思的纯小白笔记
Html
构建框架（页面元素+内容），从文本到页面，超文本标记语言
架构
- 标签对（<></>）
- vscode快捷建立骨架：!(回车)
- 注释
快捷键 Ctrl + / (把光标放在想写注释的地方，按一次加上，按一次消失)
标签
- 关系
- 父子（嵌套）关系
- 兄弟关系
双标签
- 标题标签 从 h1 ~ h6 独占一行，默认加粗
- 段落标签
- 文本格式化标签
<strong>/ <b> 加粗 <ins>/ <u> 下划线 <em>/ <i> 倾斜 <del>/ <s> 删除线
使用英文单词的语法突出重要的强调语境 - 媒体标签
1）图片可以有多个属性，属性间用空格来分隔，前后顺序随意，单标签
- src 属性名，属性值（即图片文件的地址）
- alt 替换文本，当图片加载失败时显现的文字
- title 用户鼠标放在图片上时显示的文字
- width 和 height，只改一个会等比例缩放，两个都改不保持等比
2）音频
<audio src = "" controls></audio>
controls 显示播放的控件
autoplay 自动播放（一般浏览器不支持）
loop 循环播放
3）视频标签
<video src = "" controls></video>
功能与音频相似
autoplay muted 表示静音自动播放
- HTML标签
分类：a 标签，超链接，锚链接
<a href="目标网页的地址" target = "">链接的文字</a>
表示空链接（不会跳转）
- target
_self：在当前页面跳转
_blank：在新页面跳转
- 列表标签
用于内容规整，有逻辑的内容编辑（父内容子内容）
1）无序列表
前面有默认的*
`- 内容1
- 内容2 ...
2）有序列表
前面有默认的1. 2. ...
- 内容1
- 内容2
- 主题
- 内容1
- 内容2
- 表格标签 table 表格整体 tr 表示行 td 表示单元格
| 单元格1 | 单元格1 |
| 单元格1 | 单元格1 |
- table 的属性
- border 边框宽度
- width，height
- 表格结构 caption（表格标题） 书写在 table 和 第一个tr 之间（单标签） thead 表格头部（包含第一行的属性） tbody 表格 tfoot 表格底部（包含表格的最后一行）
- 合并单元格 找到html中需要合并的的单元格，左边and上面那个保留，另一个的内容删除，并在第一个保留的单元格加上命令，只能合并相同结构的单元格 跨行合并（上下）rowspan 跨列合并（左右）colspan
- 表单标签 生成可以输入的表单，如搜索栏、登录页面
- 表单域
<form action=""></form> - Input
可以根据不同type来改变功能
<input type = "">
placeholder 占位符，提示用户输入的内容（即在输入之前在输入框中显示的内容）
- radio
name 用于分组
- radio
- 提示：选项1
选项2
checked 默认选择
- file
一次性选择多个文件 multiple 上传文件： - button
submit: 提交按钮 reset: 重置Annie button: 普通按钮 （文字会自动出现在按钮中） 为按钮添加提示文字：
- Button 名称 名称 名称
- 下拉菜单 select
Select 下拉菜单的整体
Option 下拉菜单的每一项
名称 ... 默认选中 selected（浏览器下拉菜单最开始显示的选项，加在option 后面）
* 文本域标签
`` cols = "" rows = "" 可以简单设置文本框的大小
- lable 标签
方法1：名称 方法2：使用标签将表单包含起来 - 语义化标签
- 没有语义的布局标签
：独占一行，其他与普通文字相同 ：不换行
- 有语义的布局标签 做手机端网页的制作，框架，自动换行，但没有特殊效果
单标签
换行
水平分割线字符实体
网页无法识别多个空格
CSS
基础知识
- 定义
层叠样式表，页面的表现，进行美化
注释：/* */
层叠规则
样式表来源
- 层叠行后覆盖前
- 排序（从上往下递增）
- 用户代理样式（浏览器默认样式）
- 用户样式表（很少有）
- 作者样式表（开发者写的）
- 作者样式表中的 ！important
- 用户样式表中的 ！important
- 用户代理样式表中的 ！important
!important 例外规则
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明，一般不使用例外规则。 - 选择器
基础选择器
- 标签选择器
所有该标签的样式相同
- 类选择器
.类名{css属性：属性值;}
标签中加上
一个标签可以有多个类名，通过用空格隔开两个类 - id选择器 id属性是唯一的，一般是配合 js 使用 #id属性{} <标签 id="id属性"></标签>
- 通配符选择器
*{}改变所有标签下的样式
*{ margin:0; padding:0; }
后代选择器 选择器1 后代选择器2{} 选择器1>后代选择器2{} 逻辑选择器
- 并集选择器 选择器1, 选择器2...{}
- 交集选择器 选择器1选择器2{} 属性选择器（约束属性值） 伪类选择器 鼠标悬停在内容上时的不同样式 选择器:hover{} 伪元素选择器
常用工具和架构
- 为网站添加样式
Selector: 选择器（id选择器，元素类型选择器...），可以级联的使用各种选择器；伪元素选择器（在选择器之后＋‘：’）：元素内容；伪类选择器（在选择器之后＋‘::’）：元素状态
inline CSS 直接在html标签中通过style或者class添加样式
This is a garagraph.
internal CSS 在内部通过头部标签添加样式 body {background-color:blue:} p{color:yellow:} enternal CSS 在html头部用link引入外部样式写法
内嵌式
写在 标签下（在head标签下，title 后面） 选择器{属性：属性值} p（标签）{ color: red (/rgb(,,)); font-size: 30px; background-color: 颜色; width:; height:; }
被改变的内容
外联式
写在 .css 文件中，并通过link标签来建立联系
行内式 写在标签的属性中，配合js使用 标签文字
- Font
- font-size（px）
- font-weight（加粗效果） 关键字：正常 normal/ 400；加粗 bold/ 700
- 倾斜 font-style normal；italic
- 字体
font-family
无衬线字体 sans-serif（网页开发），衬线字体（报刊书籍），等宽字体。下列代码表示：按宋体显示，如果没有安装宋体则显示黑体...如果都没有则使用任意一种无衬线字体
font-family: 宋体, 黑体, , , sans-serif;
总体写法：font: style weight size/line-height 字体; (前两个可以省略，行高可以省略，size和line-height之间要用/隔开)
在后面还可以放上其他的 font 单属性，层叠覆盖 - 文本对齐 缩进 text-indent：数字+px（缩进多少像素） / 数字+em (缩进几个字) 水平对齐 text-align（可以实现图片、标签等内容的对齐）
- left 左对齐
- center 居中对齐 标签居中：margin: 0 auto;
- right 右对齐 行高 line-height 数字+px / 倍数
- 文本修饰 text-decoration underline 下划线；line-throught 删除线；overline 上划线；none 无装饰线（可以用于去除超链接的下划线）
颜色&图片
直接颜色名称，rgb，rgba（a表示透明度），十六进制（# + 6bit16进制数）
- 背景
颜色 background-color
图片 background-image
background-image: url(地址);
背景平铺 background-repeat
repeat 水平和竖直方向都平铺 （默认）
no-repeat 不平铺 (只显示一张图)
repeat-x 水平平铺
repeat-y 竖直平铺
背景位置 background-position
background-position: 水平位置 垂直位置
left/ center/ right ；top/ center/ buttom 或者直接加数字
复合属性 background
可以不分先后
background: color image repeat positon;
- lable 标签
- file
