一、HTML（超文本标记语言）
HTML相关文档：MDN Web Docs
HTML中文相关文档：w3school 在线教程
HTML骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
</body>
</html>| html标签 | 所有HTML中标签的根节点 |
| head标签 | 用于存放title,meta,base,style,script,link。需要注意的是在head标签中必须要有title标签 |
| title标签 | 设置网页标题 |
| body标签 | 页面的主体部分，用于存放所有的HTML标签 |
HTML标签
| 标签名 | 说明 |
| <h1>、<h2>~<h6>(1~6级) | 标题标签 |
| <p> | 段落标签 |
| <hr> | 水平线标签 |
| <br> | 换行标签 |
| <div>、<span> | 无语义，多用作盒子，div为块元素，独占一行，span为行内元素，不独占一行 |
| <b>/<strong> | 文字粗体 |
| <i>/<em> | 文字斜体 |
| <s>/<del> | 文字加删除线 |
| <u>/<ins> | 文字加下划线 |
HTML基本标签属性
- 标签可以用有多个属性，必须写在开始标签中，位于标签名后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 任何标签的属性都有默认值，省略该属性则取默认值
- 属性格式才去键值对的格式，key="value"
| 标签名 | 说明 |
|---|---|
| title | 提示 |
| width | 宽度 |
HTML其他属性
图像标签
<image src="图像URL">| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时替换的文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（HTML不支持%） | 设置图像的宽度 |
| height | 像素（HTML不支持%） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>| 属性名 | 说明 |
|---|---|
| href | 用于指定链接目标的url地址，当为标签应用href属性时,它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有self和blank两种,其中self为默认值，blank为在新窗口中打开方式 |
注意：当文件地址链接是.exe或是zip等压缩包形式
base标签
- 设置整体链接的打开状态
- base写到<head></head>之间
<base target="_blank">锚定定位
- 使用<a href="#id" >链接文本</a>创建链接文本
- 使用相应的id名标注跳转目标位置
特殊字符标签
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| 。 | 摄氏度 | ° |
| +、- | 正负号 | ± |
| X | 乘号 | × |
| ÷ | 除号 | ÷ |
| 2 | 平方（上标2） | ² |
| 3 | 平方（上标3） | ³ |
列表标签
无序列表
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
</ul>有序列表
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
</ol>自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释</dd>
<dd>名词1解释1</dd>
<dt>名词1解释2</dt>
<dt>名词2</dt>
<dd>名词2解释</dd>
<dd>名词2解释1</dd>
<dt>名词2解释2</dt>
</dl>表格
<table>
<tr>
<th>表格标题</th>
<td>单元格内的文字</td>
</tr>
</table>| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框 | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值 |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值 |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中规定水平对齐方式 | left、center、right |
| rowspan | 跨行合并（竖直方向合并） | number |
| colspan | 跨列合并（水平横向合并） | number |
表格结构
<table>
<thead></thead>
<tbody></tbody>
</table>- <thead>:用于定义表格的头部，但必须位于<table>
- <tbody>:用于定义表格的主体
表单
表单控件
input控件
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件在页面中的显示宽度 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
label标签
- label标签为input元素定义标注，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">textarea控件(文本域)
- 创建多行文本输入框
<textarea cols="每行中字符数" rows="显示的行数">
文本内容
</textarea>下拉菜单
<select>
<optgroup label="黑龙江">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</optgroup>
</select>注意：
- <select></select>中至少应包含一对<option></option>
- 在option中定义selected= "selected"时，当前项即为默认选中项
表单域
<from action="url地址" method="提交方式" name="表单名称">各种表单控件
</from>| 属性名 | 说明 |
|---|---|
| action | action属性用于指定接收并处理表单数据的服务器程序的url地址 |
| method | 用于设置表单数据的提交方式，其取值为get或post |
| name | 用于指定表单的名称，以区分同一页面的多个表单 |
HTML5新语义化标签
- header:定义文档的页眉
- nav:定义导航链接的部分
- footer：定义文档或节的页脚
- article：标签规定独立的自包含的内容
- section：定义文档中的节（section、区段）
- aside：定义其所处内容之外的内容
HTML新属性
| 属性 | 用法 | 含义 |
|---|---|---|
| placeholder | <input type="text" placeholder="请输入用户名"> | 占位符提供可描述输入字段预期值的提示信息 |
| autofocus | <input type="text" autofocus> | 规定当页面加载时input元素应该自动获取焦点 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete | <input type="text" multiple autocomplete="off"> | 规定表单是否应该启用自动完成功能 |
| required | <input type="file" required> | 必须填 |
| accesskey | <input type="text" accesskey="s"> | 规定激活(使元素获得焦点)元素的快捷键谷歌浏览器要alt+快捷键组合 |
| 类型 | 使用示例 | 含义 |
|---|---|---|
| <input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框 |
| range | <input type="range"> | 自由拖动滑块 |
| time | <input type="time"> | 输入时间 |
| date | <input type="date"> | 输入日期 |
| datetime | <input type="datetime"> | 用于输入日期和时间（已废弃），可使用datetime-local |
| month | <input type="month"> | 输入月份 |
| week | <input type="week"> | 输入星期 |
多媒体标签
音频标签
<audio src="音频文件路径"></audio>| 属性名 | 说明 |
|---|---|
| autoplay | 自动播放 |
| controls | 是否显示默认播放控件 |
| loop | 循环播放 |
多浏览器支持音频格式方案
<audio controls>
<source src="音频路径">
<source src="音频路径">
<source src="音频路径">
<source src="音频路径">
对不起，您当前的浏览器不支持次文件格式，无法播放
</audio>说明：
每个浏览器支持的文件格式不同，浏览器在渲染的时候会依次从上到下寻找支持的文件，如果找到则播放，如果找不到则会显示最后一句话。
视频标签
<video src="视频文件路径" controls="controls"></video>| 属性名 | 说明 |
|---|---|
| autoplay | 自动播放 |
| controls | 是否显示默认播放控件 |
| loop | 循环播放 |
| muted | 静音播放 |
| width | 设置播放窗口的宽度 |
| height | 设置播放窗口的高度 |
多浏览器支持视频格式方案
<video controls>
<source src="视频路径">
<source src="视频路径">
<source src="视频路径">
<source src="视频路径">
对不起，您当前的浏览器不支持次文件格式，无法播放
</video>说明：和"多浏览器支持音频格式方案"类似
标签嵌套规范
相关定义：独占一行的叫块元素，其他的行内元素
- 块元素可以嵌套块元素、行内元素、行内块元素难，div可以嵌套任意标签
- p标签不能嵌套其他块元素，可以嵌套行内元素、行内块元素不推荐标题里边嵌套块元素，可以嵌套行内元素、行内块元素
- 行内块不能嵌套块元素，可以嵌套行内元素、行内块元素
- 行内元素不能嵌套块元素、行内块元素，只能嵌套行内元素
- a标签不能嵌套a标签
二、CSS （层叠样式表）
CSS文档链接：CSS - 学习 Web 开发 | MDN
CSS书写位置
行内式
- 写在标签内部，用style来表示写CSS的HTML属性
<div style="color: red;">
CSS行内样式
</div>内嵌式
- 写在HTML的<head>部分,写在<style>标签内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 40px;
background-color: red;
}
.top>ul>li {
float: right;
width: 60px;
line-height: 40px;
list-style: none;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<ul>
<li>登录</li>
<li>注册</li>
<li>更多</li>
</ul>
</div>
</body>
</html>外链式
- 写在HTML的<head>部分,以link标签导入外部编写的.css文件以加载css样式
<link rel="stylesheet" href="CSS文件路径">CSS样式规则
CSS选择器
- CSS选择器可以获取一些节点进行添加CSS样式
标签选择器
<div>标签选择器</div><style>
div {
color: red;
}
</style>
类选择器
<!-- 用class标记 -->
<div class="div123">
类选择器
</div> /* 用.+class标记名称获取 */
.div123 {
color: red;
}
id选择器
<!-- 用id标记：但是id一般一个页面只用一次 -->
<div class="div123">
id选择器
</div> <style>
/* 用#+id标记名称获取 */
.div123 {
color: red;
}
</style>
通配符选择器
<style>
/* 获取页面的所有元素 */
* {
/* 设置整个网页的背景为红色 */
background-color: red;
}
</style>交集选择器
<h1>第一个</h1>
<div class="box">hello</div>
<h1 class="box">第二个</h1> <style>
/* 交集选择器表示既又 */
/* 既是h1标签也是.box类的元素 */
h1.box {
olor: red;
}
</style>
并集选择器
<h1>第一个</h1>
<div class="box">第二个</div><style>
/* 并集选择器表示同时 */
/* h1标签和.box同时获取到 */
h1,.box {
color: red;
}
</style>
后代选择器
<div class="box1">
<div>
<h3>box1</h3>
</div>
</div>
<h3>box2</h3> <style>
/* 后代选择器：.box1下的h3标签会被获取 */
.box1 h3 {
color: red;
}
</style>
子元素选择器
<!-- box1获取不到，因为子元素选择器不能选取深层的元素,但是后代选择器可以 -->
<div class="box1">
<div>
<h3>box1</h3>
</div>
</div>
<div class="box1">
<h3>box2</h3>
</div><style>
.box1>h3 {
color: red;
}
</style>
相邻选择器
<div class="box1">
<div>
<h3>box1</h3>
</div>
</div>
<h3>第一个</h3><style>
/* 相邻选择器选择后边的元素 */
/* box1类后边的h3标签 */
.box1+h3 {
color: red;
}
</style>
占位符选择器
<input type="text" placeholder="请输入用户名"><style>
input::placeholder {
color: red;
}
</style>
属性选择器
伪类选择器
- 用法：选择器:伪类选择器
| 伪类选择器 | 作用 |
|---|---|
| :link | 未访问的链接 |
| :hover | 鼠标移动到链接上 |
| :active | 选定的链接 |
| :visited | 已访问的链接 |
结构伪类选择器
| 伪类选择器 | 作用 |
|---|---|
| E:first-child | 选择父元素的第一个子元素E |
| E:last-child | 选择父元素的最后一个子元素 |
| E:nth-child(n) | 匹配父元素的第n个子元素，假设该子元素不是E，则选择器无效 |
| E:nth-last-child(n) | 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择器无效 |
| E:nth-of-type(n) | 匹配同类型中的第n个统计兄弟元素E |
伪元素选择器
| 伪元素选择器器 | 作用 |
|---|---|
| E:first-letter | 文本的第一个单词或字(如中文、日文、韩文) |
| E::first-line | 文本第一行 |
| E::selection | 可改变选中文本的样式 |
| E::befor和E::after | 在E元素内部的开始位置和结束位创建一个元素，该元素为行内语速，且必须搭配content属性使用 |
CSS样式属性
| 属性名 | 说明 |
|---|---|
| font-size | 字号大小 |
| font-family | 字体 |
| font-weight | 字体粗细 |
| font-style | 字体风格，normal、italic、oblique |
| font | 综合设置字体样式(font-style、font-weight、font-size/line-height、font-family) |
| letter-spacing | 控制字母和字母之间的距离 |
| word-spacing | 控制单词与单词之间的距离（中文无效） |
| line-height | 行间距 |
| text-shadow | 文字阴影（h-shadow、v-shadow、blur、color） |
| 属性名 | 说明 |
|---|---|
| color | 文本颜色 |
| transparent | 颜色透明度 |
| rgba | 设置单颜色的透明，a代表alpha |
| opacity | 设置元素整体透明 |
| text-indent | 首行缩进 |
| text-align | 内容水平对齐方式 |
| text-decoration | 文本装饰 |
| cursor | 鼠标样式 |
| outline | 轮廓（位于边框边缘的外围） |
| resize | 防止随意拖拽文本域 |
| vertical-align | 行内块垂直对齐方式（top:顶线、middle:中线、base:基线、bottom:底线） |
| overflow | 设置溢出部分的隐藏方式（normal:正常溢出显示、hidden:溢出部分不显示、auto:哪边溢出就出现滚动条） |
| white-space | 设置文本显示方式 |
| text-overflow | 文字溢出（clip|ellipsis） |
CSS优先级（权重）
| 标签选择器 | 权重公式 |
|---|---|
| 继承或 * | 0，0，0，0 |
| 标签选择器 | 0，0，0，1 |
| 类、伪类 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 | 1，0，0，0 |
| !important | 无穷大 |
块元素/行内元素/行内块元素
- 块元素（block）：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
- 行内元素（inline）：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
- 行内块（inline-block）：<img>、<input>、<td>
| CSS属性 | 说明 |
|---|---|
| display | block:切换成块元素且显示|none：隐藏 |
| visibility | 设置是否显示对象（visible：对象可视、hidden：对象隐藏） |
| overflow | 溢出设置（visible：不剪切内容也不添加滚动条，auto：超出显示滚动条，hidden：不显示超过对象尺寸的内容、scroll：总显示滚动条） |
背景
| 属性名称 | 说明 |
|---|---|
| background-image | 设置背景图片 |
| background-position | 背景位置 |
| background-repeat | 背景平铺 |
| background-attachment | 背景附着 |
| background-size | 背景缩放 |
| background | 背景简写（背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景缩放） |
| background：-webkit-linear-gradient(30deg,red,blue) | 线性渐变颜色 |
盒子模型
属性
| CSS属性名 | 说明 |
|---|---|
| border | 盒子边框 |
| border-radius | 边框圆角 |
| border-collapse | table表格边框粗细(separate:默认，collapse) |
| padding | 内边距 Height = height + padding + border Width = width + padding + border |
| margin | 外边距 |
| box-shadow | 盒子阴影（水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色/外阴影） |
类型
- W3C标准盒模型（box-sizing:content-box）：宽度为width
- 怪异盒模型（box-sizing:border-box）:盒子宽度为width+padding+border
浮动
- 浮动属性
| 属性值 | 说明 |
|---|---|
| none | 元素不浮动 |
| left | 右浮动 |
| right | 右浮动 |
-
清除浮动的方法
使用clear属性：
| 属性值 | 说明 |
|---|---|
| left | 不允许左侧有浮动元素 |
| right | 不允许右侧有浮动元素 |
| both | 同时清除左右两侧浮动的影响 |
父级元素添加overflow属性：给父级添加overflow为hidden|auto|scroll都可以实现
双伪元素清除浮动：使用::after或::before
定位（position）
边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量 |
| bottom | 底部偏移量 |
| left | 左侧偏移量 |
| right | 右侧偏移量 |
定位模式
| position属性值 | 语义 | 描述 |
|---|---|---|
| static | 静态定位 | 所有元素的默认定位方式,无法使用边偏移 |
| relative | 相对定位 | 相对于其原标准流的位置进行定位，不脱标 |
| absolute | 绝对定位 | 相对于其上一个已经定位的父元素进行定位，完全脱标 |
| fixed | 固定定位 | 相对于浏览器窗口进行定位，完全脱标 |
堆叠顺序（z-Index）
- 属性值：正整数、负整数或0（默认），数值越大，盒子越靠上
- z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
2D-3D动画
2D的坐标轴
- X：正方向水平向右
- Y：正方向垂直向下
- 2D的坐标轴的原点在页面左上角
位移
//单个用px沿着某个轴 正方向移动
transform: translateX(100px);
//100%相对于自身 宽高
transform: translateY(100%);
//综合写法
transform: translate(100px,100px);
//百分数写法
transform: translate(-50%,-50%);旋转
缩放
2D简写
动画
移动端布局
三、JavaScript
Javascript： ECMAScript、DOM、BOM
三者的区别：
ECMAScript
书写位置
内嵌式
<script type="text/javascript">
</script>外联式
<script type="text/javascript" src="js文件地址">
</script>注意：
1.不能将代码写到外联式标签中
2.一个网页可以同时调用多个外部js文件
行内式
<button onclick="js代码"></button>js几个基本的方法
弹出框
参数：弹出框中显示内容
alert('123')在网页中输出信息
参数：一个html标签内容，可以用单括号、双括号引出，还能用模版字符串引出
document.write(`<h1>hello,world!</h1>`)输入框
用于接收用户输入的数据
返回用户输入的数据
参数：第一个是提示值，第二个是默认值（可有可无）
prompt("请输入数字", 12)确认框
用于接收用户确认还是取消
返回：true 或 false
const a = confirm("确定不学习JS吗？")
console.log(a); //在控制台输出消息控制台输出消息
输出正常消息
console.log('123');输出警告消息
console.warn(2);输出错误消息
console.error(4);变量
JS中常用的三个定义变量的方法：const var let
三者的区别：
var 定义的变量可以修改，如果不初始化会输出 undefined，不会报错。使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
const 定义的变量不可以修改，而且必须初始化。使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
let 是块级作用域，函数内部使用 let 定义后，对函数外部无影响。使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
详细查看：JS中 const var let 的区别 - 码农教程
变量命名规范
- 由字母（A-Z,a-z）、数字（0-9）、下划线（_）美元（$）组成
- 区分大小写 强调：JS严格区分大小写，var app；和var App；是两个变量
- 不能以数字开头，或者汉字定义变量名
- 不能是关键字、保留字和代码符号
- 不能出现空格
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写
- 不能与js保留的关键字相同
- 字符串可以是引号中的任意文本，可以使用单引号或双引号
- 如果数据是字母，符号，汉字，这些都是字符串类型，字符串类型就要加引号
- 在js中推荐使用单引号
扫一扫
2298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
